/* 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 */
/* UMi Tulum — tokens aggregate.
 *
 * THE PARTS UNDER tokens/ ARE THE SOURCE. This file is recomposed from
 * them on every build, in name order after tokens/palette.css and
 * tokens/type.css. The composition is mirrored here verbatim so the dev
 * preview — which serves this file as written and does NOT recompose —
 * renders the same layer the built site does. Edit a part, then mirror
 * it here, or the preview and the published site disagree.
 *
 * The primitives are mirrored at the foot for the same reason:
 * `primitives/*.css` reaches the page through an eager glob that a
 * running dev server resolves once at startup, so a primitive written
 * mid-session never loads there. The duplicate is identical text and
 * the glob copy sits earlier in the cascade, so nothing conflicts.
 *
 * Order: palette, type, base, grounds, motion, then the primitives.
 */

/* ---- tokens/palette.css ---- */
:root {
  --umi-bone: #e7e4dc;
  --umi-paper: #ffffff;
  --umi-ink: #141413;
  /* Off Black, solid (Tiger, 2026-10-22: the patterned olive stone is
     gone from every page and the footer). */
  --umi-ink-deep: #0c0c0c;
  --umi-stone: #48483e;
  --umi-sea: #0f6e8c;
  --umi-sea-deep: #0a5268;
  --umi-sand: #d3b574;
  --umi-muted: #888888;

  /* Textures (Tiger, 2026-09-30: "white bg is too vanilla, add some
     texture, something in theme"). A fine paper grain on every bone and
     stone ground, and seigaiha, the Japanese wave, because umi is the sea:
     on the stone bands and the one bone band that asks for it. */
  --umi-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --umi-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95 0 0 0 0 0.93 0 0 0 0 0.88 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  --umi-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ccircle cx='24' cy='-12.0' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='-12.0' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='-12.0' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='-12.0' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='0' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='0' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='0' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='0' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='0' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='0' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='12.0' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='12.0' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='12.0' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='24' cy='12.0' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='24' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='24' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='24' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='0' cy='24' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='24' r='24' fill='%23e7e4dc' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='24' r='18' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='24' r='12' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3Ccircle cx='48' cy='24' r='6' fill='none' stroke='%23141413' stroke-opacity='0.09'/%3E%3C/svg%3E");
  --umi-wave-on-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Ccircle cx='24' cy='-12.0' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='-12.0' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='-12.0' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='-12.0' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='0' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='0' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='0' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='0' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='0' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='0' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='0' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='0' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='12.0' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='12.0' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='12.0' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='24' cy='12.0' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='24' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='24' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='24' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='0' cy='24' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='24' r='24' fill='%2334342c' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='24' r='18' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='24' r='12' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3Ccircle cx='48' cy='24' r='6' fill='none' stroke='%23e7e4dc' stroke-opacity='0.1'/%3E%3C/svg%3E");
  --umi-ground: var(--umi-grain) 0 0 / 200px 200px repeat, var(--umi-bone);
  --umi-ink-ground: var(--umi-grain-light) 0 0 / 200px 200px repeat, var(--umi-wave-on-ink) 0 0 / 48px 24px repeat, var(--umi-ink-deep);
  --umi-wave-ground: var(--umi-grain) 0 0 / 200px 200px repeat, var(--umi-wave) 0 0 / 48px 24px repeat, var(--umi-bone);
  /* The wave is off on every surface (Tiger, 2026-10-22); grounds keep their colour. */
  --umi-wave: none;
  --umi-wave-on-ink: none;
  /* Dark grounds are flat Off Black: no grain, no wave. */
  --umi-ink-ground: #0c0c0c;

  /* Hairlines: 12% of the ink on bone, 18% of the bone on ink. */
  --umi-hair: color-mix(in srgb, var(--umi-ink) 12%, transparent);
  --umi-hair-on-ink: color-mix(in srgb, var(--umi-bone) 18%, transparent);
  --umi-hair-w: 1px;

  /* Ink at reading strengths, mixed toward whichever ground it sits on. */
  --umi-ink-soft: color-mix(in srgb, var(--umi-ink) 62%, var(--umi-bone));
  --umi-bone-soft: color-mix(in srgb, var(--umi-bone) 70%, var(--umi-ink-deep));

  /* SDK roles. */
  --site-color-bg: var(--umi-bone);
  --site-color-surface: var(--umi-paper);
  --site-color-fg: var(--umi-ink);
  --site-color-ink-strong: var(--umi-ink);
  --site-color-ink-deep: var(--umi-ink-deep);
  --site-color-ink-soft: var(--umi-ink-soft);
  --site-color-muted: var(--umi-muted);
  --site-color-border: var(--umi-hair);
  --site-color-accent: var(--umi-sea);
  --site-color-accent-deep: var(--umi-sea-deep);
  --site-color-accent-soft: color-mix(in srgb, var(--umi-sea) 12%, transparent);
  --site-color-on-primary: var(--umi-bone);
  --site-color-on-dark: var(--umi-bone);
  --site-color-on-accent: var(--umi-bone);
}

/* ---- tokens/type.css ---- */
:root {
  --umi-face-display: "UMiTULUM-Bold", "Tierra", "Helvetica Neue", Arial, sans-serif;
  --umi-face-body: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --site-font-display: var(--umi-face-display);
  --site-font-heading: var(--umi-face-display);
  --site-font-body: var(--umi-face-body);
  --site-type-display-weight: 400;

  /* The site's one type system (Tiger, 2026-10-22), identical on every
     page: H1 80 / .9 / -.03em, H2 60 / .95 / -.02em, H3 30 / 1.08,
     eyebrow and button mono 12 / 400 / .16em, paragraph mono 17 / 1.75
     / 300, small text 15 / 1.7. Whole pixels only. */
  --umi-h1: 80px;
  --umi-h1-lh: 0.9;
  --umi-h1-ls: -0.03em;
  --umi-h2: 60px;
  --umi-h2-lh: 0.95;
  --umi-h2-ls: -0.02em;
  --umi-h3: 30px;
  --umi-h3-lh: 1.08;

  /* The HOME is the reference (Tiger, 2026-10-22): its big band word is
     the H1 style (80 / .9 / -.03em), its second word the H2 style
     (60 / .95 / -.02em). Inner pages copy these by tag in base.css. */
  /* d0 — the home band word: the H1 style. */
  --umi-d0: var(--umi-h1);
  --umi-d0-lh: var(--umi-h1-lh);
  --umi-d0-ls: var(--umi-h1-ls);
  /* d1 — the home's second word: the H2 style. */
  --umi-d1: var(--umi-h2);
  --umi-d1-lh: var(--umi-h2-lh);
  --umi-d1-ls: var(--umi-h2-ls);
  /* d2 — card and room title: an H3. */
  --umi-d2: var(--umi-h3);
  --umi-d2-lh: var(--umi-h3-lh);
  /* d-s: a section title inside a long page: an H3 too. */
  --umi-ds: var(--umi-h3);
  /* d3 — label, eyebrow, nav, button. */
  --umi-d3: 12px;
  --umi-d3-ls: 0.16em;

  --umi-body: 17px;
  --umi-body-lh: 1.75;
  --umi-body-sm: 15px;
  --umi-body-sm-lh: 1.7;
  /* Small text is one size: cards, lists, the footer. */
  --umi-micro: 15px;
  --umi-measure: 58ch;
  --umi-weight-body: 300;

  --site-type-label-size: var(--umi-d3);
  --site-type-label-tracking: var(--umi-d3-ls);
  --site-type-size-xs: var(--umi-micro);
}

/* A phone keeps the same ratios at a size its column can hold: an 80px
   word is wider than a 390px screen. */
@media (max-width: 860px) {
  :root {
    /* Fluid, so the longest word always fits its column and no word is
       ever split (Tiger, 2026-10-22). Desktop above stays 80/60/30. */
    --umi-h1: clamp(30px, 9vw, 80px);
    --umi-h2: clamp(26px, 8vw, 60px);
    --umi-h3: clamp(20px, 6vw, 30px);
    --umi-body: 15px;
    --umi-body-lh: 1.75;
  }
}

/* ---- tokens/grounds.css ---- */
:root {
  --umi-gutter: 40px;
  --umi-band-pad-top: 100px;
  --umi-band-pad-bottom: 40px;
  --umi-gap: 50px;
  --umi-gap-dense: 15px;
  --umi-measure-wide: 720px;

  --umi-radius-media: 50px;
  --umi-radius-pill: 999px;
  --site-radius: 0px;

  --umi-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --umi-dur: 620ms;
  --site-ease-out: var(--umi-ease);
  --site-duration: var(--umi-dur);

  --site-gutter: var(--umi-gutter);
}

@media (max-width: 860px) {
  :root {
    --umi-gutter: 20px;
    --umi-band-pad-top: 64px;
    --umi-band-pad-bottom: 28px;
    --umi-gap: 24px;
    --umi-radius-media: 28px;
  }
}

/* ---- tokens/base.css ---- */
html {
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--umi-ground);
  color: var(--umi-ink);
  font-family: var(--umi-face-body);
  font-size: var(--umi-body);
  font-weight: var(--umi-weight-body);
  line-height: var(--umi-body-lh);
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--umi-face-display);
  font-weight: 400;
  letter-spacing: var(--umi-d1-ls);
  line-height: var(--umi-d1-lh);
  margin: 0;
}

p {
  max-width: var(--umi-measure);
}

/* ---- One type system, every page (Tiger, 2026-10-22) --------------- */
/* Pages had drifted to 80/60/36px titles, four line heights, a 300-weight
   title on Book and mono card titles. These win over each page's own
   rules on purpose, so a page cannot drift again. The header and footer
   sit outside <main> and keep their own chrome scale. */
html:not(.umi-home-route) main h1 {
  font-family: var(--umi-face-display) !important;
  font-size: var(--umi-h1) !important;
  font-weight: 400 !important;
  line-height: var(--umi-h1-lh) !important;
  letter-spacing: var(--umi-h1-ls) !important;
}
html:not(.umi-home-route) main h2:not(.umi-cta__word) {
  font-family: var(--umi-face-display) !important;
  font-size: var(--umi-h2) !important;
  font-weight: 400 !important;
  line-height: var(--umi-h2-lh) !important;
  letter-spacing: var(--umi-h2-ls) !important;
}
html:not(.umi-home-route) main h3 {
  font-family: var(--umi-face-display) !important;
  font-size: var(--umi-h3) !important;
  font-weight: 400 !important;
  line-height: var(--umi-h3-lh) !important;
  letter-spacing: 0 !important;
}

/* Eyebrows: mono 12 / 400 / .16em, in capitals. */
.umi-sh__eyebrow,
.umi-mb__eyebrow,
.umi-card__eyebrow,
.umi-cta__eyebrow,
.outlet-masthead__eyebrow,
.cx-facts__eyebrow,
.room-book__eyebrow,
.room-book__quote-eyebrow,
.walkthrough__eyebrow,
.default-hero__eyebrow,
.umi-rqv__bar-eyebrow,
.venue-detail__eyebrow,
.exp-row__code,
.site-footer__section-title,
.umi-drawer__reach-label,
main [class*="eyebrow"],
main [class*="kicker"] {
  font-family: var(--umi-face-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

/* Paragraphs: mono 17 / 1.75 / 300. */
main p {
  font-weight: var(--umi-weight-body);
}

/* The platform's own blocks (dining menus, forms) drew sizes with
   decimals (15.68, 15.2, 14.4px): whole pixels, on the same scale. */
main .hp-menu__desc,
main .hp-menu__item-desc,
main .hp-menu__item-price,
main .hp-menu__hours-row,
main .hp-menu__fact,
main .hp-form__fineprint {
  font-size: 15px !important;
  line-height: 1.7 !important;
}
main .hp-menu__section-name,
main .hp-menu__diet-chip,
main [class*="dc__label"] {
  font-family: var(--umi-face-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
}

/* Buttons and calls to action: one style everywhere, the header too. */
.site-btn,
.umi-link,
main button.site-btn,
main a.site-btn,
main .hp-form__submit,
.default-hero__cta {
  font-family: var(--umi-face-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  letter-spacing: 0.16em !important;
}

/* A word is never split (Tiger, 2026-10-22): every title wraps between
   words only. A title that would still overflow is sized down on its own
   rule, never broken. */
h1, h2, h3, h4,
[class*="__word"],
[class*="__title"],
[class*="__heading"],
[class*="__name"] {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

a {
  color: inherit;
}

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

hr {
  border: 0;
  border-top: var(--umi-hair-w) solid var(--umi-hair);
  margin: 0;
}

::selection {
  background: var(--umi-sea);
  color: var(--umi-bone);
}

:focus-visible {
  outline: 2px solid var(--umi-sea);
  outline-offset: 3px;
}

/* ---- tokens/grounds.css, the helpers ---- */
/* A band on the dark ground. */
/* Only the CONTEXTUAL roles flip. `--umi-ink` keeps meaning ink: a
   button that fills itself with bone reads its label from it, and a
   band that redefined it printed bone on bone. Copy on this ground
   asks for --umi-bone and --umi-bone-soft by name. */
.u-ink {
  background: var(--umi-ink-ground);
  color: var(--umi-bone);
  --umi-hair: var(--umi-hair-on-ink);
  --site-color-bg: var(--umi-ink-deep);
  --site-color-fg: var(--umi-bone);
  --site-color-border: var(--umi-hair-on-ink);
  --site-color-muted: var(--umi-bone-soft);
}

/* The seigaiha band: bone with the wave drawn faintly through it. */
.u-wave {
  background: var(--umi-wave-ground);
}

/* ---- Rich text from a record (richText.js): lists, bold, links ------ */
.umi-rich p {
  margin: 0 0 18px;
  max-width: var(--umi-measure);
  font-family: var(--umi-face-body);
  font-size: var(--umi-body);
  font-weight: var(--umi-weight-body);
  line-height: var(--umi-body-lh);
}
.umi-rich p:last-child { margin-bottom: 0; }
.umi-rich ul,
.umi-rich ol {
  margin: 0 0 18px;
  padding: 0 0 0 1.3em;
  max-width: var(--umi-measure);
  font-size: var(--umi-body-sm);
  line-height: 1.75;
}
.umi-rich ul { list-style: none; padding-left: 0; }
.umi-rich ul > li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-top: var(--umi-hair-w) solid var(--umi-hair);
}
.umi-rich ul > li:last-child { border-bottom: var(--umi-hair-w) solid var(--umi-hair); }
.umi-rich ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--umi-sea);
  border-radius: 50%;
}
.umi-rich strong { font-weight: 500; }
.umi-rich a {
  color: var(--umi-sea);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.u-ink .umi-rich a { color: var(--umi-sand); }

/* A band on paper: cards, forms, the funnel. */
.u-paper {
  background: var(--umi-paper);
  color: var(--umi-ink);
  --site-color-bg: var(--umi-paper);
}

.u-band {
  padding: var(--umi-band-pad-top) var(--umi-gutter) var(--umi-band-pad-bottom);
}

.u-measure {
  max-width: var(--umi-measure);
}

.u-rule {
  border-top: var(--umi-hair-w) solid var(--umi-hair);
}

/* ---- The stock blocks, relit ------------------------------------- */
/* A band whose ground is a photograph gets the ink underneath it, so
   the light type sitting on it has a ground to be light against while
   the photograph is still arriving. */
.hp-block__band--has-media {
  background-color: var(--umi-ink-deep);
}

/* The stock hero's action is a text action, sized for a thumb, with the
   rule drawn rather than bordered so the box can grow under the word. */
.default-hero__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--umi-ink);
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  letter-spacing: var(--umi-d3-ls);
  line-height: 1;
  text-decoration: none;
}
.default-hero__cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + 10px);
  height: 1px;
  background: currentColor;
}
.default-hero__cta:hover,
.default-hero__cta:focus-visible {
  color: var(--umi-sea);
}

/* ---- The shell's header reserve, on the home route ---------------- */
/* The shell pads its main by the measured bar height whenever the bar is
   fixed, which on the home route drew a bone band above the opener. The
   bar floats over the film there, so the reserve goes. SiteHeader puts
   `umi-home-route` on <html> while the home route is on. */
html.umi-home-route .app-shell__main {
  padding-top: 0 !important;
}

/* ---- tokens/motion.css ---- */
.u-rise {
  transition:
    opacity var(--umi-dur) var(--umi-ease),
    transform var(--umi-dur) var(--umi-ease);
}

.u-rise.u-pre {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.u-rise.u-pre.u-pre--2 { transition-delay: 90ms; }
.u-rise.u-pre.u-pre--3 { transition-delay: 180ms; }

/* A photograph settles out of a small scale rather than a slide. */
.u-settle {
  transition:
    opacity var(--umi-dur) var(--umi-ease),
    transform 1080ms var(--umi-ease);
}

.u-settle.u-pre {
  opacity: 0;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .u-rise,
  .u-settle,
  .u-rise.u-pre,
  .u-settle.u-pre {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- primitives/button.css ---- */
.site-btn {
  --btn-bg: var(--umi-ink);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 16px 34px;
  box-sizing: border-box;
  border: var(--umi-hair-w) solid var(--btn-bd);
  border-radius: var(--umi-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  font-weight: 400;
  letter-spacing: var(--umi-d3-ls);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition:
    background-color 280ms var(--umi-ease),
    color 280ms var(--umi-ease),
    border-color 280ms var(--umi-ease);
}

.site-btn:hover,
.site-btn:focus-visible {
  --btn-bg: var(--umi-sea);
  --btn-bd: var(--umi-sea);
  --btn-fg: var(--umi-bone);
}

.site-btn:focus-visible {
  outline: 2px solid var(--umi-sea);
  outline-offset: 3px;
}

.site-btn[disabled],
.site-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Quiet: a hairline pill beside a filled one. */
.site-btn--secondary,
.site-btn--outline,
.site-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--umi-ink);
  --btn-bd: color-mix(in srgb, var(--umi-ink) 34%, transparent);
}
.site-btn--secondary:hover,
.site-btn--outline:hover,
.site-btn--ghost:hover,
.site-btn--secondary:focus-visible,
.site-btn--outline:focus-visible,
.site-btn--ghost:focus-visible {
  --btn-bg: var(--umi-ink);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-ink);
}

/* On a photograph or the ink ground. */
.site-btn--light,
.site-btn--on-media {
  --btn-bg: var(--umi-bone);
  --btn-fg: var(--umi-ink);
  --btn-bd: var(--umi-bone);
}
.site-btn--light:hover,
.site-btn--on-media:hover,
.site-btn--light:focus-visible,
.site-btn--on-media:focus-visible {
  --btn-bg: var(--umi-sea);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-sea);
}

.site-btn--sm {
  min-height: 40px;
  padding: 12px 22px;
}

.site-btn--lg {
  min-height: 58px;
  padding: 21px 44px;
}

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

@media (max-width: 560px) {
  .site-btn {
    padding-inline: 24px;
  }
}

/* A text link that is an action: the hairline under it drops away. */
.umi-link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  letter-spacing: var(--umi-d3-ls);
  text-decoration: none;
}
.umi-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transition:
    transform 330ms var(--umi-ease),
    opacity 330ms var(--umi-ease);
}
.umi-link:hover::after,
.umi-link:focus-visible::after {
  transform: translateY(4px);
  opacity: 0;
}

/* Tap targets on a phone: the drawn size is kept and an unseen 44px pad
 * is centred on it, so a thumb lands where the eye does. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .umi-link,
  .site-footer__text-link,
  .site-footer__legal-trigger,
  .umi-hdr__book,
  .umi-hdr__burger {
    position: relative;
  }
  .umi-link::before,
  .site-footer__text-link::before,
  .site-footer__legal-trigger::before,
  .umi-hdr__book::before,
  .umi-hdr__burger::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* ---- primitives/form.css ---- */
.site-field {
  display: block;
  width: 100%;
  margin-bottom: 22px;
}

.site-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  line-height: 1.4;
  letter-spacing: var(--umi-d3-ls);
  font-weight: 400;
  color: var(--umi-ink-soft);
}

.site-field__required {
  color: var(--umi-sea);
  margin-left: 4px;
}

.site-field__input,
.site-field__select,
.site-field__textarea,
.site-field input[type="text"],
.site-field input[type="email"],
.site-field input[type="tel"],
.site-field input[type="date"],
.site-field input[type="number"],
.site-field select,
.site-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 22px;
  border: var(--umi-hair-w) solid color-mix(in srgb, var(--umi-ink) 24%, transparent);
  border-radius: var(--umi-radius-pill);
  background: transparent;
  color: var(--umi-ink);
  font-family: var(--umi-face-body);
  font-size: 16px;
  font-weight: var(--umi-weight-body);
  line-height: 1.5;
  appearance: none;
  transition: border-color 250ms var(--umi-ease);
}

.site-field__textarea,
.site-field textarea {
  min-height: 140px;
  padding: 18px 22px;
  border-radius: 26px;
  resize: vertical;
}

.site-field__select,
.site-field select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 19px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.site-field__input::placeholder,
.site-field__textarea::placeholder,
.site-field input::placeholder,
.site-field textarea::placeholder {
  color: var(--umi-muted);
}

.site-field__input:focus,
.site-field__select:focus,
.site-field__textarea:focus,
.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
  outline: none;
  border-color: var(--umi-ink);
}

.site-field__input:focus-visible,
.site-field__textarea:focus-visible,
.site-field input:focus-visible,
.site-field textarea:focus-visible {
  border-color: var(--umi-sea);
}

.site-field__hint {
  display: block;
  margin-top: 8px;
  padding-left: 22px;
  font-size: var(--umi-micro);
  line-height: 1.5;
  color: var(--umi-muted);
}

.site-field__error {
  display: block;
  margin-top: 8px;
  padding-left: 22px;
  font-size: var(--umi-micro);
  line-height: 1.5;
  color: var(--umi-sea-deep);
}

.site-field--error .site-field__input,
.site-field--error .site-field__select,
.site-field--error .site-field__textarea,
.site-field--error input,
.site-field--error select,
.site-field--error textarea {
  border-color: var(--umi-sea-deep);
}

/* A consent row reads as a line of text, not as a control. */
.site-field--checkbox,
.site-field--consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.site-field--checkbox input[type="checkbox"],
.site-field--consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--umi-sea);
}
.site-field--checkbox .site-field__label,
.site-field--consent .site-field__label {
  margin: 0;
  font-size: var(--umi-micro);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--umi-ink);
}

/* On the ink ground: the footer newsletter, a form over a photograph. */
.site-field--light .site-field__label,
.site-field--light .site-field__hint {
  color: var(--umi-bone-soft);
}
.site-field--light .site-field__input,
.site-field--light input,
.site-field--light textarea {
  color: var(--umi-bone);
  border-color: color-mix(in srgb, var(--umi-bone) 34%, transparent);
}
.site-field--light .site-field__input::placeholder,
.site-field--light input::placeholder {
  color: color-mix(in srgb, var(--umi-bone) 58%, transparent);
}
.site-field--light .site-field__input:focus,
.site-field--light input:focus {
  border-color: var(--umi-bone);
}

/* ---- Colour details, one rule set for the whole site (Tiger, 2026-10-23).
 * The room capacity line ("Sleeps 2" / "Para 2") is #77827a. Underlined
 * actions stay black and turn #326c89, text and line, under the pointer.
 * Rounded boxes keep their colour and turn #788584 under the pointer:
 * filled ones fill with it and keep light text, outlined ones take it on
 * the border and the label. Every change eases over 0.2s. These win over
 * each component's own hover on purpose, so no page can drift. */

/* The capacity line on every room card and on the room page. */
.umi-card__fact,
.room-meta,
.room-meta__item,
.proom__fact {
  color: #77827a !important;
}

/* Underlined actions. */
.umi-link,
.umi-card__cta,
.umi-smap__go,
.hp-block__link {
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease,
    border-color 0.2s ease !important;
}
.umi-link::after,
.umi-card__cta::after {
  transition: background-color 0.2s ease !important;
}
.umi-link:hover,
.umi-link:focus-visible,
.umi-card--link:hover .umi-card__cta,
.umi-card--link:focus-visible .umi-card__cta,
.umi-smap__go:hover,
.umi-smap__go:focus-visible,
.hp-block__link:hover,
.hp-block__link:focus-visible {
  color: #326c89 !important;
  text-decoration-color: #326c89 !important;
  border-color: #326c89 !important;
}
.umi-link:hover::after,
.umi-link:focus-visible::after,
.umi-card--link:hover .umi-card__cta::after,
.umi-card--link:focus-visible .umi-card__cta::after {
  transform: none !important;
  opacity: 1 !important;
  background: #326c89 !important;
}
.umi-smap__go:hover,
.umi-smap__go:focus-visible {
  text-decoration-thickness: 1px !important;
}

/* Rounded boxes. */
.site-btn,
.default-hero__cta,
.default-hero__booker-submit,
.hp-form__submit,
.hp-block__button,
.home-teaser--experience_teaser .hp-block__link,
.about-teaser .hp-block__link {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}
/* Filled: the ground turns #788584, the label stays light. */
.site-btn:hover,
.site-btn:focus-visible,
.default-hero__cta:hover,
.default-hero__cta:focus-visible,
.default-hero__booker-submit:hover,
.default-hero__booker-submit:focus-visible,
.hp-form__submit:hover,
.hp-form__submit:focus-visible,
.hp-block__button--primary:hover,
.hp-block__button--primary:focus-visible {
  background-color: #788584 !important;
  border-color: #788584 !important;
  color: var(--umi-bone, #e7e4dc) !important;
}
/* Outlined: the border and the label turn #788584, no fill. */
.site-btn.site-btn--secondary:hover,
.site-btn.site-btn--secondary:focus-visible,
.site-btn.site-btn--outline:hover,
.site-btn.site-btn--outline:focus-visible,
.site-btn.site-btn--ghost:hover,
.site-btn.site-btn--ghost:focus-visible,
.hp-block__button:not(.hp-block__button--primary):hover,
.hp-block__button:not(.hp-block__button--primary):focus-visible,
.home-teaser--experience_teaser .hp-block__link:hover,
.home-teaser--experience_teaser .hp-block__link:focus-visible,
.about-teaser .hp-block__link:hover,
.about-teaser .hp-block__link:focus-visible {
  background-color: transparent !important;
  border-color: #788584 !important;
  color: #788584 !important;
}


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


/* primitives */
/* UMi Tulum — button primitive.
 * `.site-btn` is the locked role for a real action: Book a room, Reserve
 * a table, Get directions, Send message. A filled pill at radius 999,
 * mono label at the small size, no shadow. The variants below are the
 * only permitted re-hues; a page never restyles the role itself.
 */

.site-btn {
  --btn-bg: var(--umi-ink);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 16px 34px;
  box-sizing: border-box;
  border: var(--umi-hair-w) solid var(--btn-bd);
  border-radius: var(--umi-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  font-weight: 400;
  letter-spacing: var(--umi-d3-ls);
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  appearance: none;
  transition:
    background-color 280ms var(--umi-ease),
    color 280ms var(--umi-ease),
    border-color 280ms var(--umi-ease);
}

.site-btn:hover,
.site-btn:focus-visible {
  --btn-bg: var(--umi-sea);
  --btn-bd: var(--umi-sea);
  --btn-fg: var(--umi-bone);
}

.site-btn:focus-visible {
  outline: 2px solid var(--umi-sea);
  outline-offset: 3px;
}

.site-btn[disabled],
.site-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
}

/* Quiet: a hairline pill beside a filled one. */
.site-btn--secondary,
.site-btn--outline,
.site-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--umi-ink);
  --btn-bd: color-mix(in srgb, var(--umi-ink) 34%, transparent);
}
.site-btn--secondary:hover,
.site-btn--outline:hover,
.site-btn--ghost:hover,
.site-btn--secondary:focus-visible,
.site-btn--outline:focus-visible,
.site-btn--ghost:focus-visible {
  --btn-bg: var(--umi-ink);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-ink);
}

/* On a photograph or the ink ground. */
.site-btn--light,
.site-btn--on-media {
  --btn-bg: var(--umi-bone);
  --btn-fg: var(--umi-ink);
  --btn-bd: var(--umi-bone);
}
.site-btn--light:hover,
.site-btn--on-media:hover,
.site-btn--light:focus-visible,
.site-btn--on-media:focus-visible {
  --btn-bg: var(--umi-sea);
  --btn-fg: var(--umi-bone);
  --btn-bd: var(--umi-sea);
}

.site-btn--sm {
  min-height: 40px;
  padding: 12px 22px;
}

.site-btn--lg {
  min-height: 58px;
  padding: 21px 44px;
}

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

@media (max-width: 560px) {
  .site-btn {
    padding-inline: 24px;
  }
}

/* A text link that is an action: the hairline under it drops away. */
.umi-link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  color: inherit;
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  letter-spacing: var(--umi-d3-ls);
  text-decoration: none;
}
.umi-link::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transition:
    transform 330ms var(--umi-ease),
    opacity 330ms var(--umi-ease);
}
.umi-link:hover::after,
.umi-link:focus-visible::after {
  transform: translateY(4px);
  opacity: 0;
}

/* Tap targets on a phone: the drawn size is kept and an unseen 44px pad
 * is centred on it, so a thumb lands where the eye does. */
@media (max-width: 860px), (hover: none) and (pointer: coarse) {
  .umi-link,
  .site-footer__text-link,
  .site-footer__legal-trigger,
  .umi-hdr__book,
  .umi-hdr__burger {
    position: relative;
  }
  .umi-link::before,
  .site-footer__text-link::before,
  .site-footer__legal-trigger::before,
  .umi-hdr__book::before,
  .umi-hdr__burger::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
}

/* /book calendar, as on Maison Felix and Xela: the night's price sits
 * small under the day, and the currency is said once at the foot of the
 * menu (SiteHeader trims "US$358" to "$358" and sets the note). The SDK
 * rule is class plus scoped attribute, hence !important. */
.j17-dp__menu .j17-dp__cell-price {
  font-size: 8.5px !important;
  letter-spacing: 0 !important;
}
.j17-dp__menu[data-umi-currency-note]::after {
  content: attr(data-umi-currency-note);
  display: block;
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--site-color-fg-muted, #6e6e66);
}

/* ---- Colour details, one rule set for the whole site (Tiger, 2026-10-23).
 * The room capacity line ("Sleeps 2" / "Para 2") is #77827a. Underlined
 * actions stay black and turn #326c89, text and line, under the pointer.
 * Rounded boxes keep their colour and turn #788584 under the pointer:
 * filled ones fill with it and keep light text, outlined ones take it on
 * the border and the label. Every change eases over 0.2s. These win over
 * each component's own hover on purpose, so no page can drift. */

/* The capacity line on every room card and on the room page. */
.umi-card__fact,
.room-meta,
.room-meta__item,
.proom__fact {
  color: #77827a !important;
}

/* Underlined actions. */
.umi-link,
.umi-card__cta,
.umi-smap__go,
.hp-block__link {
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease,
    border-color 0.2s ease !important;
}
.umi-link::after,
.umi-card__cta::after {
  transition: background-color 0.2s ease !important;
}
.umi-link:hover,
.umi-link:focus-visible,
.umi-card--link:hover .umi-card__cta,
.umi-card--link:focus-visible .umi-card__cta,
.umi-smap__go:hover,
.umi-smap__go:focus-visible,
.hp-block__link:hover,
.hp-block__link:focus-visible {
  color: #326c89 !important;
  text-decoration-color: #326c89 !important;
  border-color: #326c89 !important;
}
.umi-link:hover::after,
.umi-link:focus-visible::after,
.umi-card--link:hover .umi-card__cta::after,
.umi-card--link:focus-visible .umi-card__cta::after {
  transform: none !important;
  opacity: 1 !important;
  background: #326c89 !important;
}
.umi-smap__go:hover,
.umi-smap__go:focus-visible {
  text-decoration-thickness: 1px !important;
}

/* Rounded boxes. */
.site-btn,
.default-hero__cta,
.default-hero__booker-submit,
.hp-form__submit,
.hp-block__button,
.home-teaser--experience_teaser .hp-block__link,
.about-teaser .hp-block__link {
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
}
/* Filled: the ground turns #788584, the label stays light. */
.site-btn:hover,
.site-btn:focus-visible,
.default-hero__cta:hover,
.default-hero__cta:focus-visible,
.default-hero__booker-submit:hover,
.default-hero__booker-submit:focus-visible,
.hp-form__submit:hover,
.hp-form__submit:focus-visible,
.hp-block__button--primary:hover,
.hp-block__button--primary:focus-visible {
  background-color: #788584 !important;
  border-color: #788584 !important;
  color: var(--umi-bone, #e7e4dc) !important;
}
/* Outlined: the border and the label turn #788584, no fill. */
.site-btn.site-btn--secondary:hover,
.site-btn.site-btn--secondary:focus-visible,
.site-btn.site-btn--outline:hover,
.site-btn.site-btn--outline:focus-visible,
.site-btn.site-btn--ghost:hover,
.site-btn.site-btn--ghost:focus-visible,
.hp-block__button:not(.hp-block__button--primary):hover,
.hp-block__button:not(.hp-block__button--primary):focus-visible,
.home-teaser--experience_teaser .hp-block__link:hover,
.home-teaser--experience_teaser .hp-block__link:focus-visible,
.about-teaser .hp-block__link:hover,
.about-teaser .hp-block__link:focus-visible {
  background-color: transparent !important;
  border-color: #788584 !important;
  color: #788584 !important;
}

/* UMi Tulum — form primitive.
 * `.site-field*` is the locked role for every input the site collects:
 * the contact form, the footer newsletter, the booking funnel. A pill at
 * radius 999 with a hairline round it, to match the buttons it sits with.
 */

.site-field {
  display: block;
  width: 100%;
  margin-bottom: 22px;
}

.site-field__label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--umi-face-body);
  font-size: var(--umi-d3);
  line-height: 1.4;
  letter-spacing: var(--umi-d3-ls);
  font-weight: 400;
  color: var(--umi-ink-soft);
}

.site-field__required {
  color: var(--umi-sea);
  margin-left: 4px;
}

.site-field__input,
.site-field__select,
.site-field__textarea,
.site-field input[type="text"],
.site-field input[type="email"],
.site-field input[type="tel"],
.site-field input[type="date"],
.site-field input[type="number"],
.site-field select,
.site-field textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 15px 22px;
  border: var(--umi-hair-w) solid color-mix(in srgb, var(--umi-ink) 24%, transparent);
  border-radius: var(--umi-radius-pill);
  background: transparent;
  color: var(--umi-ink);
  font-family: var(--umi-face-body);
  font-size: 16px;
  font-weight: var(--umi-weight-body);
  line-height: 1.5;
  appearance: none;
  transition: border-color 250ms var(--umi-ease);
}

.site-field__textarea,
.site-field textarea {
  min-height: 140px;
  padding: 18px 22px;
  border-radius: 26px;
  resize: vertical;
}

.site-field__select,
.site-field select {
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 19px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.site-field__input::placeholder,
.site-field__textarea::placeholder,
.site-field input::placeholder,
.site-field textarea::placeholder {
  color: var(--umi-muted);
}

.site-field__input:focus,
.site-field__select:focus,
.site-field__textarea:focus,
.site-field input:focus,
.site-field select:focus,
.site-field textarea:focus {
  outline: none;
  border-color: var(--umi-ink);
}

.site-field__input:focus-visible,
.site-field__textarea:focus-visible,
.site-field input:focus-visible,
.site-field textarea:focus-visible {
  border-color: var(--umi-sea);
}

.site-field__hint {
  display: block;
  margin-top: 8px;
  padding-left: 22px;
  font-size: var(--umi-micro);
  line-height: 1.5;
  color: var(--umi-muted);
}

.site-field__error {
  display: block;
  margin-top: 8px;
  padding-left: 22px;
  font-size: var(--umi-micro);
  line-height: 1.5;
  color: var(--umi-sea-deep);
}

.site-field--error .site-field__input,
.site-field--error .site-field__select,
.site-field--error .site-field__textarea,
.site-field--error input,
.site-field--error select,
.site-field--error textarea {
  border-color: var(--umi-sea-deep);
}

/* A consent row reads as a line of text, not as a control. */
.site-field--checkbox,
.site-field--consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.site-field--checkbox input[type="checkbox"],
.site-field--consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 4px;
  accent-color: var(--umi-sea);
}
.site-field--checkbox .site-field__label,
.site-field--consent .site-field__label {
  margin: 0;
  font-size: var(--umi-micro);
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--umi-ink);
}

/* On the ink ground: the footer newsletter, a form over a photograph. */
.site-field--light .site-field__label,
.site-field--light .site-field__hint {
  color: var(--umi-bone-soft);
}
.site-field--light .site-field__input,
.site-field--light input,
.site-field--light textarea {
  color: var(--umi-bone);
  border-color: color-mix(in srgb, var(--umi-bone) 34%, transparent);
}
.site-field--light .site-field__input::placeholder,
.site-field--light input::placeholder {
  color: color-mix(in srgb, var(--umi-bone) 58%, transparent);
}
.site-field--light .site-field__input:focus,
.site-field--light input:focus {
  border-color: var(--umi-bone);
}

/* UMi Tulum — grounds, element defaults and motion.
 *
 * WHY THIS FILE AND NOT tokens/: `theme/tokens.css` is recomposed from
 * `tokens/*.css` on every build and that composition keeps only the
 * `:root` declaration blocks. A class or element rule written into a
 * token part is silently dropped (the footer shipped on white that way).
 * Token parts therefore declare VALUES; this primitive declares the
 * element defaults and the ground/motion helpers every page inherits.
 */

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--umi-ground);
  color: var(--umi-ink);
  font-family: var(--umi-face-body);
  font-size: var(--umi-body);
  font-weight: var(--umi-weight-body);
  line-height: var(--umi-body-lh);
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--umi-face-display);
  font-weight: 400;
  letter-spacing: var(--umi-d1-ls);
  line-height: var(--umi-d1-lh);
  margin: 0;
}

p {
  max-width: var(--umi-measure);
}

a {
  color: inherit;
}

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

hr {
  border: 0;
  border-top: var(--umi-hair-w) solid var(--umi-hair);
  margin: 0;
}

::selection {
  background: var(--umi-sea);
  color: var(--umi-bone);
}

:focus-visible {
  outline: 2px solid var(--umi-sea);
  outline-offset: 3px;
}

/* ---- Grounds ------------------------------------------------------ */
/* A band asks for the dark ground by wearing `.u-ink`; every colour role
 * inside it flips, so nothing downstream restates a colour. */

.u-ink {
  background: var(--umi-ink-ground);
  color: var(--umi-bone);
  --umi-hair: var(--umi-hair-on-ink);
  --umi-ink: var(--umi-bone);
  --umi-ink-soft: var(--umi-bone-soft);
  --site-color-bg: var(--umi-ink-deep);
  --site-color-fg: var(--umi-bone);
  --site-color-border: var(--umi-hair-on-ink);
  --site-color-muted: var(--umi-bone-soft);
}

/* The seigaiha band: bone with the wave drawn faintly through it. */
.u-wave {
  background: var(--umi-wave-ground);
}

/* ---- Rich text from a record (richText.js): lists, bold, links ------ */
.umi-rich p {
  margin: 0 0 18px;
  max-width: var(--umi-measure);
  font-family: var(--umi-face-body);
  font-size: var(--umi-body);
  font-weight: var(--umi-weight-body);
  line-height: var(--umi-body-lh);
}
.umi-rich p:last-child { margin-bottom: 0; }
.umi-rich ul,
.umi-rich ol {
  margin: 0 0 18px;
  padding: 0 0 0 1.3em;
  max-width: var(--umi-measure);
  font-size: var(--umi-body-sm);
  line-height: 1.75;
}
.umi-rich ul { list-style: none; padding-left: 0; }
.umi-rich ul > li {
  position: relative;
  padding: 10px 0 10px 26px;
  border-top: var(--umi-hair-w) solid var(--umi-hair);
}
.umi-rich ul > li:last-child { border-bottom: var(--umi-hair-w) solid var(--umi-hair); }
.umi-rich ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--umi-sea);
  border-radius: 50%;
}
.umi-rich strong { font-weight: 500; }
.umi-rich a {
  color: var(--umi-sea);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.u-ink .umi-rich a { color: var(--umi-sand); }

/* A band on paper: cards, forms, the funnel. */
.u-paper {
  background: var(--umi-paper);
  color: var(--umi-ink);
  --site-color-bg: var(--umi-paper);
}

.u-band {
  padding: var(--umi-band-pad-top) var(--umi-gutter) var(--umi-band-pad-bottom);
}

.u-measure {
  max-width: var(--umi-measure);
}

.u-rule {
  border-top: var(--umi-hair-w) solid var(--umi-hair);
}

/* ---- Motion ------------------------------------------------------- */
/* Progressive enhancement: at rest every element is fully visible. A
 * script adds `.u-pre` to opt an element into the hidden state and
 * removes it on intersection and on a safety timer, so a preview, an
 * iframe or a screenshot always shows the finished page. */

.u-rise {
  transition:
    opacity var(--umi-dur) var(--umi-ease),
    transform var(--umi-dur) var(--umi-ease);
}

.u-rise.u-pre {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.u-rise.u-pre.u-pre--2 { transition-delay: 90ms; }
.u-rise.u-pre.u-pre--3 { transition-delay: 180ms; }

/* A photograph settles out of a small scale rather than a slide. */
.u-settle {
  transition:
    opacity var(--umi-dur) var(--umi-ease),
    transform 1080ms var(--umi-ease);
}

.u-settle.u-pre {
  opacity: 0;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .u-rise,
  .u-settle,
  .u-rise.u-pre,
  .u-settle.u-pre {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* theme skin */
/* UMi Tulum — concierge skin.
 * Colour and type only. The dock keeps the platform's centred pill: its
 * position, size and behaviour are not the theme's to change.
 */
.cl {
  /* Re-tint. */
  --site-color-accent: var(--umi-sea, #0f6e8c);
  --site-color-on-accent: var(--umi-bone, #e7e4dc);
  --site-color-bg: var(--umi-bone, #e7e4dc);
  --site-color-fg: var(--umi-ink, #141413);
  --site-color-border: var(--umi-hair, rgba(20, 20, 19, 0.12));

  /* Faces, from the brand record. */
  --site-font-display: var(--umi-face-display, serif);
  --site-font-body: var(--umi-face-body, monospace);

  /* Shape, to sit with the buttons and the media frames. */
  --concierge-fab-bg: var(--umi-ink-deep, #000);
  --concierge-fab-fg: var(--umi-bone, #e7e4dc);
  --concierge-fab-radius: 999px;
  --concierge-panel-radius: 34px;

  font-family: var(--umi-face-body, monospace);
  font-weight: var(--umi-weight-body, 300);
  letter-spacing: 0;
}

/* Hidden until the guest scrolls, on the home route only. SiteHeader puts
 * `umi-at-top` on <html> while the home window sits at the top of the
 * opener; the dock fades in with the bar and goes out again at the top.
 * Every other route keeps the dock. An open panel never hides. `translate` composes
 * with the platform's own transform (never override that), and the
 * transition list restates the platform's so the resting states keep their
 * motion. Specificity (0,2,1)/(0,4,2) beats the scoped (0,2,0).
 */
html .cl.cl:not(.cl--open) {
  transition:
    padding 0.22s,
    border-radius 0.22s,
    box-shadow 0.28s,
    opacity 0.32s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.32s ease,
    visibility 0s linear 0s;
}
html.umi-at-top .cl.cl:not(.cl--open) {
  opacity: 0;
  visibility: hidden;
  translate: 0 12px;
  pointer-events: none;
  transition:
    padding 0.22s,
    border-radius 0.22s,
    box-shadow 0.28s,
    opacity 0.32s ease,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    translate 0.32s ease,
    visibility 0s linear 0.32s;
}

/* No concierge on the booking flow (Tiger, 2026-10-12). The shell marks
 * the funnel routes with `app-shell--funnel`; the launcher is mounted
 * beside the shell, not inside it, so the hook is on the root.
 */
:root:has(.app-shell--funnel) .cl.cl.cl {
  display: none !important;
}

/* The voice button: a true circle, inscribed in the pill (52px tall, 6px
 * padding, so 40px) and on its centre line. The platform draws a 36px
 * 10px-radius square hung from the pill's bottom edge.
 */
html .cl .cc {
  align-items: center;
}
html .cl .cc__mic,
html .cl .cc__send {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  html .cl.cl:not(.cl--open),
  html.umi-at-top .cl.cl:not(.cl--open) {
    transition: none;
  }
}


/* chrome components */

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


/* The panel deliberately styles itself from `--site-*` tokens ONLY, so it
 * picks up each theme's palette + type without the theme writing any CSS.
 * Themes that want more control restyle via the class hooks above. */
.sdk-navgrp[data-v-1cbbee91] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.sdk-navgrp__trigger[data-v-1cbbee91] {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
/* A caret drawn in CSS — no icon font, no SVG asset to ship. */
.sdk-navgrp__caret[data-v-1cbbee91] {
  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-navgrp--open .sdk-navgrp__caret[data-v-1cbbee91] {
  transform: rotate(-135deg) translate(-0.16em, -0.16em);
}
/* The link-trigger already carries a caret; this separate hit target exists
 * for touch + keyboard. On hover-capable pointers the panel opens on hover,
 * so it's redundant there — but it stays focusable for keyboard users. */
.sdk-navgrp__caret-btn[data-v-1cbbee91] {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
@media (hover: none), (pointer: coarse) {
  /* Touch: the trigger's own caret is decorative — this button is the opener. */
.sdk-navgrp__caret-btn[data-v-1cbbee91] { display: inline-flex;
}
.sdk-navgrp__trigger > .sdk-navgrp__caret[data-v-1cbbee91] { display: none;
}
}
.sdk-navgrp__caret-btn[data-v-1cbbee91]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.sdk-navgrp__panel[data-v-1cbbee91] {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;              /* above the concierge bubble (998–999) */
  min-width: max(180px, 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-navgrp__panel[hidden][data-v-1cbbee91] { display: none;
}
.sdk-navgrp__item[data-v-1cbbee91] { margin: 0;
}
.sdk-navgrp__link[data-v-1cbbee91] {
  display: block;
  padding: 0.5rem 0.75rem;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  border-radius: calc(var(--site-radius, 4px) * 0.75);
}
.sdk-navgrp__link[data-v-1cbbee91]:hover,
.sdk-navgrp__link[data-v-1cbbee91]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-navgrp__caret[data-v-1cbbee91] { transition: none;
}
}


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


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

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

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

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

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


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

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

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

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

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


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

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


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


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


/* Tuning surface: a consumer may relight the bar through these. */
.umi-chrome[data-v-d431b731] {
  /* The wrapper takes no box of its own: a sticky bar is bounded by its
     parent, and boxed in a 96px wrapper it scrolled away with the page.
     Custom properties still inherit through it. */
  display: contents;
  /* Mark up 50% (48 to 72px, Tiger 2026-10-19); the bar only grows 4px
     because the padding around the mark took the difference. */
  --hdr-h: 100px;
  --hdr-nav-h: 52px;
  --hdr-mark-h: 72px;
  --hdr-ink: var(--umi-ink, #141413);
  --hdr-ground: var(--umi-ground, #e7e4dc);
  --hdr-hair: var(--umi-hair, rgba(20, 20, 19, 0.12));
}
.umi-hdr[data-v-d431b731] {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--hdr-ground);
  border-bottom: 1px solid var(--hdr-hair);
  color: var(--hdr-ink);
  transition:
    background-color 400ms ease,
    border-color 400ms ease,
    opacity 320ms ease,
    transform 480ms var(--umi-ease, ease);
}

/* At the top of the home route the bar is not there: it fades in, solid,
   on the first scroll and goes back out when the guest returns to the
   top. The component only sets this class on the home route; every other
   route keeps a hard bar that sticks down the page. Keyboard focus
   brings it back wherever the window is (a mouse click on the mark
   does not), and the open card always keeps it. */
.umi-hdr--hidden[data-v-d431b731]:not(:has(:focus-visible)) {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
/* The booking flow keeps a hard bar whatever else happens
   (Tiger, 2026-10-12). The shell marks those routes on itself. */
:root:has(.app-shell--funnel) .umi-hdr--hidden[data-v-d431b731] {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* The opener owns the top of the window; the bar sits fixed over it so
   the film starts at the very top, and arrives as a solid bone bar. */
.umi-hdr--home[data-v-d431b731] {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
}
.umi-hdr--home + .umi-hdr__spacer[data-v-d431b731] { display: none;
}

/* With the card open the bar rides above the veil and joins the card's
   world, so the X that closes it is still the brightest thing up there. */
.umi-hdr--menu[data-v-d431b731] {
  z-index: 300;
  background: var(--umi-ink-deep, #000);
  border-bottom-color: transparent;
  --hdr-ink: var(--umi-bone, #e7e4dc);
}
.umi-hdr__row[data-v-d431b731] {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--hdr-h);
  padding: 0 var(--umi-gutter, 40px);
}
.umi-hdr__burger[data-v-d431b731] {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: 56px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.umi-hdr__burger-lines[data-v-d431b731] {
  position: relative;
  display: block;
  width: 40px;
  height: 14px;
}
.umi-hdr__burger-lines i[data-v-d431b731] {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 340ms var(--umi-ease, ease), opacity 200ms ease;
}
.umi-hdr__burger-lines i[data-v-d431b731]:nth-child(1) { top: 0;
}
.umi-hdr__burger-lines i[data-v-d431b731]:nth-child(2) { top: 6px;
}
.umi-hdr__burger-lines i[data-v-d431b731]:nth-child(3) { top: 12px;
}
.umi-hdr__burger-lines.is-open i[data-v-d431b731]:nth-child(1) { transform: translateY(6px) rotate(20deg);
}
.umi-hdr__burger-lines.is-open i[data-v-d431b731]:nth-child(2) { opacity: 0;
}
.umi-hdr__burger-lines.is-open i[data-v-d431b731]:nth-child(3) { transform: translateY(-6px) rotate(-20deg);
}
.umi-hdr__brand[data-v-d431b731] {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.umi-hdr__mark[data-v-d431b731] {
  height: var(--hdr-mark-h);
  width: auto;
}
.umi-hdr__brand-fallback[data-v-d431b731] {
  font-family: var(--umi-face-display, serif);
  font-size: 28px;
  letter-spacing: -0.02em;
}
.umi-hdr__right[data-v-d431b731] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 56px;
}

/* The header's actions are the house pill, the same button as every
   page (Tiger, 2026-10-22), sized down to sit in the bar. */
.umi-hdr__book[data-v-d431b731] {
  min-height: 44px;
  padding: 12px 24px;
  white-space: nowrap;
}
/* With the card open the bar is Off Black: the pills turn light. */
.umi-hdr--menu .umi-hdr__book[data-v-d431b731] {
  --btn-bg: var(--umi-bone, #e7e4dc);
  --btn-fg: var(--umi-ink-deep, #0c0c0c);
  --btn-bd: var(--umi-bone, #e7e4dc);
}
.umi-hdr--menu .umi-hdr__table[data-v-d431b731] {
  --btn-bg: transparent;
  --btn-fg: var(--umi-bone, #e7e4dc);
  --btn-bd: color-mix(in srgb, var(--umi-bone, #e7e4dc) 40%, transparent);
}

/* The menu line under the mark: six entries, groups open on hover. */
.umi-hdr__nav[data-v-d431b731] {
  border-top: 1px solid var(--hdr-hair);
  padding: 0 var(--umi-gutter, 40px);
}
.umi-hdr--menu .umi-hdr__nav[data-v-d431b731] {
  border-top-color: color-mix(in srgb, var(--umi-bone, #e7e4dc) 14%, transparent);
}
.umi-hdr__navlist[data-v-d431b731] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.4vw, 56px);
  height: var(--hdr-nav-h);
  margin: 0;
  padding: 0;
  list-style: none;
}
.umi-hdr__navitem[data-v-d431b731] { display: flex; align-items: center;
}
/* Top-level entries in capitals; a group carries a solid down arrow. */
/* The display face draws its lower case as capitals and its capital I
   with a dot, so the names are set lower case to read as clean caps. */
.umi-hdr__nav[data-v-d431b731] .umi-hdr__navlink,
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link {
  font-family: var(--umi-face-display, serif);
  text-transform: lowercase;
}
.umi-hdr__nav[data-v-d431b731] .sdk-navgrp__caret,
.umi-drawer__nav[data-v-d431b731] .sdk-navacc__caret {
  width: 0;
  height: 0;
  border: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transform: none;
}
.umi-hdr__nav[data-v-d431b731] .sdk-navgrp--open .sdk-navgrp__caret,
.umi-drawer__nav[data-v-d431b731] .sdk-navacc--open .sdk-navacc__caret {
  transform: rotate(180deg);
}
.umi-drawer__nav[data-v-d431b731] .sdk-navacc__caret {
  border-left-width: 6px;
  border-right-width: 6px;
  border-top-width: 8px;
}
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link.sdk-navacc__row {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  padding: 0;
}
.umi-drawer__nav[data-v-d431b731] .sdk-navacc__list {
  border-left: 0;
  padding-left: 14px;
}
.umi-drawer__nav[data-v-d431b731] .sdk-navacc__link {
  color: var(--umi-bone, #e7e4dc);
  font-family: var(--umi-face-body, monospace);
  font-size: 15px;
  text-transform: none;
}
.umi-hdr__nav[data-v-d431b731] .umi-hdr__navlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 260ms ease;
}
.umi-hdr__nav[data-v-d431b731] .umi-hdr__navlink:hover,
.umi-hdr__nav[data-v-d431b731] .umi-hdr__navlink:focus-visible,
.umi-hdr__nav[data-v-d431b731] .sdk-navgrp--open > .umi-hdr__navlink,
.umi-hdr__navitem.is-current[data-v-d431b731] .umi-hdr__navlink {
  color: var(--umi-sea, #0f6e8c);
}
.umi-hdr--menu .umi-hdr__nav[data-v-d431b731] .umi-hdr__navlink:hover,
.umi-hdr--menu .umi-hdr__navitem.is-current[data-v-d431b731] .umi-hdr__navlink {
  color: var(--umi-sand, #d3b574);
}
.umi-hdr__nav[data-v-d431b731] .sdk-navgrp__panel {
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  margin-top: 4px;
  padding: 10px;
  background: var(--umi-ground, #e7e4dc);
  color: var(--umi-ink, #141413);
  border: 1px solid var(--hdr-hair);
  border-radius: 14px;
  box-shadow: none;
}
.umi-hdr__nav[data-v-d431b731] .sdk-navgrp__panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 10px;
}
.umi-hdr__nav[data-v-d431b731] .umi-hdr__panellink {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--umi-ink, #141413);
  font-family: var(--umi-face-body, monospace);
  font-size: 14px;
  letter-spacing: 0.04em;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.umi-hdr__nav[data-v-d431b731] .umi-hdr__panellink:hover,
.umi-hdr__nav[data-v-d431b731] .umi-hdr__panellink:focus-visible {
  background: color-mix(in srgb, var(--umi-ink, #141413) 6%, transparent);
  color: var(--umi-sea, #0f6e8c);
}

/* ------------------------------------------------------------------ */
/* The card. An ink veil over the page, one card centred on it.        */
/* ------------------------------------------------------------------ */
.umi-drawer[data-v-d431b731] {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--umi-gutter, 40px);
  background: color-mix(in srgb, var(--umi-ink-deep, #000) 76%, transparent);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 340ms var(--umi-ease, ease), visibility 0s linear 340ms;
}
/* The bar rides above the veil, so the card is laid out in the room
   under it and can never slide up behind it. */
@media (min-width: 861px) {
.umi-drawer[data-v-d431b731] { padding-top: calc(var(--hdr-h) + var(--hdr-nav-h) + 16px);
}
.umi-drawer__card[data-v-d431b731] { max-height: calc(100svh - var(--hdr-h) - var(--hdr-nav-h) - 16px - var(--umi-gutter, 40px));
}
}
.umi-drawer--open[data-v-d431b731] {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 340ms var(--umi-ease, ease), visibility 0s;
}
.umi-drawer__card[data-v-d431b731] {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--umi-gap, 50px);
  width: min(1040px, 100%);
  /* The card never scrolls (Tiger, 2026-10-14): it is capped at the
     window and its contents are laid out to fit. `hidden` also clips
     the watermark that bleeds past the bottom edge, which was the only
     thing making the desktop card scrollable. */
  max-height: calc(100svh - 2 * var(--umi-gutter, 40px));
  overflow: hidden;
  padding: 56px;
  border-radius: var(--umi-radius-media, 50px);
  /* A plain ground, the footer's (Tiger, 2026-10-23). */
  background: #393933;
  transform: translateY(18px);
  transition: transform 420ms var(--umi-ease, ease);
}
.umi-drawer--open .umi-drawer__card[data-v-d431b731] { transform: none;
}
.umi-drawer__watermark[data-v-d431b731] {
  position: absolute;
  right: -40px;
  bottom: -56px;
  width: 340px;
  aspect-ratio: 1 / 1;
  background-color: var(--umi-bone, #e7e4dc);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.1;
  pointer-events: none;
}
.umi-drawer__list[data-v-d431b731] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.umi-drawer__item[data-v-d431b731] { break-inside: avoid;
}
.umi-drawer__item + .umi-drawer__item[data-v-d431b731] { margin-top: 2px;
}
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link {
  display: inline-block;
  font-size: clamp(22px, 2.25vw, 33px);
  line-height: 1.32;
  letter-spacing: var(--umi-d1-ls, -0.02em);
  color: var(--umi-bone, #e7e4dc);
  text-decoration: none;
  transition: color 260ms ease, opacity 260ms ease;
}
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link:hover,
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link:focus-visible {
  color: var(--umi-sand, #d3b574);
}
.umi-drawer__item.is-current[data-v-d431b731] .umi-drawer__link {
  color: var(--umi-sand, #d3b574);
}
.umi-drawer__nav[data-v-d431b731] .sdk-navgrp__panel {
  padding-left: 2px;
}
.umi-drawer__side[data-v-d431b731] {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 26px;
  min-width: 0;
}
.umi-drawer__reach[data-v-d431b731],
.umi-drawer__follow[data-v-d431b731] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.umi-drawer__reach li + li[data-v-d431b731] { margin-top: 16px;
}
.umi-drawer__reach-label[data-v-d431b731] {
  display: block;
  margin-bottom: 2px;
  font-size: var(--umi-d3, 12px);
  letter-spacing: var(--umi-d3-ls, 0.16em);
  color: var(--umi-bone-soft, #b9b6ae);
}
.umi-drawer__reach-value[data-v-d431b731] {
  color: var(--umi-bone, #e7e4dc);
  font-size: var(--umi-body-sm, 15px);
  text-decoration: none;
}
.umi-drawer__reach-value[data-v-d431b731]:hover { color: var(--umi-sand, #d3b574);
}
.umi-drawer__follow li + li[data-v-d431b731] { margin-top: 6px;
}
.umi-drawer__follow-link[data-v-d431b731] {
  color: var(--umi-bone, #e7e4dc);
  font-size: var(--umi-body-sm, 15px);
  text-decoration: none;
}
.umi-drawer__follow-link[data-v-d431b731]:hover { color: var(--umi-sand, #d3b574);
}
.umi-drawer__foot[data-v-d431b731] {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.umi-drawer__foot[data-v-d431b731] .umi-drawer__cta { width: 100%;
}
/* The card is the stone ground, where --umi-ink is relit to bone: the
   light button's label is set in the stone itself so it can be read. */
.umi-drawer__foot[data-v-d431b731] .site-btn--light { color: var(--umi-ink-deep, #33332b);
}
.umi-drawer__table[data-v-d431b731] {
  color: var(--umi-bone, #e7e4dc);
  border-color: color-mix(in srgb, var(--umi-bone, #e7e4dc) 40%, transparent);
}
/* Hovers invert on the stone (Tiger, 2026-10-19). --umi-ink is bone in
   here, so the secondary pill's own hover drew bone type on a bone
   fill; the table fills bone with stone type, and Book a room goes
   from bone to black rather than to the sea. */
.umi-drawer__foot .umi-drawer__table[data-v-d431b731]:hover,
.umi-drawer__foot .umi-drawer__table[data-v-d431b731]:focus-visible {
  --btn-bg: var(--umi-bone, #e7e4dc);
  --btn-bd: var(--umi-bone, #e7e4dc);
  --btn-fg: var(--umi-ink-deep, #33332b);
  color: var(--umi-ink-deep, #33332b);
}
.umi-drawer__foot[data-v-d431b731] .site-btn--light:hover,
.umi-drawer__foot[data-v-d431b731] .site-btn--light:focus-visible {
  --btn-bg: #141413;
  --btn-bd: #141413;
  --btn-fg: var(--umi-bone, #e7e4dc);
  color: var(--umi-bone, #e7e4dc);
}
@media (max-width: 860px) {
.umi-chrome[data-v-d431b731] {
    --hdr-h: 72px;
    --hdr-mark-h: 51px;
}
.umi-hdr__burger[data-v-d431b731] { width: 44px;
}
  /* A phone has no line for the menu; it lives in the card. */
.umi-hdr__nav[data-v-d431b731] { display: none;
}
  /* A phone keeps one action in the bar; the table lives in the card. */
.umi-hdr__table[data-v-d431b731] { display: none;
}
.umi-drawer__table[data-v-d431b731] { color: var(--umi-bone, #e7e4dc); border-color: color-mix(in srgb, var(--umi-bone, #e7e4dc) 40%, transparent);
}
.umi-hdr__burger-lines[data-v-d431b731] { width: 30px;
}
  /* The bar stays above the veil, so the card starts under it rather
     than behind it, and is capped at the room that leaves. */
.umi-drawer[data-v-d431b731] {
    padding: calc(var(--hdr-h) + 10px) 16px 16px;
    align-items: flex-start;
}
.umi-drawer__card[data-v-d431b731] {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    max-height: calc(100svh - var(--hdr-h) - 26px);
    padding: 22px 20px;
    border-radius: 28px;
}
.umi-drawer__watermark[data-v-d431b731] { width: 200px; right: -24px; bottom: -28px;
}
.umi-drawer__side[data-v-d431b731] { justify-content: flex-start; gap: 8px;
}
  /* A phone has no height to spare: thirteen links run in two columns
     at a smaller size, the contact rows sit two to a row and the social
     links in one line, so the whole card fits without scrolling. */
.umi-drawer__list[data-v-d431b731] { columns: 2; column-gap: 16px;
}
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link {
    position: relative;
    font-size: 19px;
    line-height: 1.15;
}
.umi-drawer__list[data-v-d431b731] { columns: 1;
}
.umi-drawer__card[data-v-d431b731] { overflow-y: auto; overscroll-behavior: contain;
}
.umi-drawer__item + .umi-drawer__item[data-v-d431b731] { margin-top: 14px;
}
  /* The drawn link stays 20px tall; an unseen 44px pad is centred on it
     so a thumb lands where the eye does. */
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 44px;
    transform: translateY(-50%);
}
.umi-drawer__item + .umi-drawer__item[data-v-d431b731] { margin-top: 6px;
}
}
/* The shortest phones (667px tall) have no room for the extra pitch. */
@media (max-width: 860px) and (max-height: 700px) {
.umi-drawer__item + .umi-drawer__item[data-v-d431b731] { margin-top: 5px;
}
.umi-drawer__reach[data-v-d431b731] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 14px;
}
.umi-drawer__reach li + li[data-v-d431b731] { margin-top: 0;
}
  /* The two phone rows share a line; an email needs the whole width. */
.umi-drawer__reach li[data-v-d431b731]:nth-child(n + 3) { grid-column: 1 / -1;
}
.umi-drawer__reach-value[data-v-d431b731] { overflow-wrap: anywhere;
}
.umi-drawer__follow[data-v-d431b731] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
}
.umi-drawer__follow li + li[data-v-d431b731] { margin-top: 0;
}
.umi-drawer__reach-value[data-v-d431b731],
  .umi-drawer__follow-link[data-v-d431b731] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}
.umi-drawer__foot[data-v-d431b731] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.umi-drawer__foot[data-v-d431b731] .site-btn {
    min-height: 44px;
    padding-block: 12px;
}
}

/* A short laptop window (a 13" at 600-720px tall): the card keeps its
   two columns but packs tighter, so it still fits without scrolling. */
@media (min-width: 861px) and (max-height: 760px) {
.umi-drawer[data-v-d431b731] {
    padding-top: calc(var(--hdr-h) + var(--hdr-nav-h) + 12px);
    align-items: flex-start;
}
.umi-drawer__card[data-v-d431b731] {
    max-height: calc(100svh - var(--hdr-h) - var(--hdr-nav-h) - 12px - var(--umi-gutter, 40px));
    padding: 28px 44px;
}
.umi-drawer__nav[data-v-d431b731] .umi-drawer__link {
    font-size: 25px;
    line-height: 1.2;
}
.umi-drawer__item + .umi-drawer__item[data-v-d431b731] { margin-top: 0;
}
.umi-drawer__side[data-v-d431b731] { gap: 14px;
}
.umi-drawer__reach li + li[data-v-d431b731] { margin-top: 4px;
}
.umi-drawer__follow[data-v-d431b731] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
}
.umi-drawer__follow li + li[data-v-d431b731] { margin-top: 0;
}
.umi-drawer__foot[data-v-d431b731] { gap: 8px;
}
.umi-drawer__foot[data-v-d431b731] .site-btn {
    min-height: 44px;
    padding-block: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.umi-hdr[data-v-d431b731],
  .umi-drawer[data-v-d431b731],
  .umi-drawer__card[data-v-d431b731],
  .umi-hdr__burger-lines i[data-v-d431b731] {
    transition: none;
}
.umi-drawer__card[data-v-d431b731] { transform: 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);
}


/* Tuning surface: a consumer may relight the band through these. */
.site-footer[data-v-a23aa319] {
  /* Footer titles and accents in the brand Beige, not the gold
     (Tiger, 2026-10-22). */
  --umi-sand: #c7ae8b;
  --ftr-pad-y: 80px;
  --ftr-gap: var(--umi-gap, 50px);
  --ftr-rule: var(--umi-hair-on-ink, rgba(231, 228, 220, 0.18));
  --ftr-soft: var(--umi-bone-soft, #b9b6ae);
  --ftr-ease: var(--umi-ease, cubic-bezier(0.22, 0.61, 0.36, 1));
  /* The strip the shell keeps clear for the concierge pill is the
     footer's own ground: the page ends on stone, the pill floats on it. */
  --ftr-dock: calc(var(--concierge-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
}
.site-footer[data-v-a23aa319] {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--ftr-pad-y) var(--umi-gutter, 40px) calc(32px + var(--ftr-dock));
  margin-bottom: calc(-1 * var(--ftr-dock));
  box-sizing: border-box;
  /* A plain ground, no texture or pattern (Tiger, 2026-10-23). */
  background: #393933;
}
.site-footer__inner[data-v-a23aa319] {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}
.site-footer__grid[data-v-a23aa319] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.25fr);
  gap: 40px var(--ftr-gap);
  align-items: start;
}
.site-footer__brand-block[data-v-a23aa319] {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
.site-footer__logo-link[data-v-a23aa319],
.site-footer__wordmark-link[data-v-a23aa319] { text-decoration: none; color: inherit;
}
.site-footer__logo[data-v-a23aa319] { display: block; height: 86px; width: auto;
}
.site-footer__wordmark[data-v-a23aa319] {
  font-family: var(--umi-face-display, serif);
  font-size: 30px;
  letter-spacing: -0.02em;
}
.site-footer__tagline[data-v-a23aa319],
.site-footer__address[data-v-a23aa319],
.site-footer__hours-note[data-v-a23aa319],
.site-footer__nl-body[data-v-a23aa319] {
  margin: 0;
  max-width: 34ch;
  font-size: var(--umi-body-sm, 15px);
  line-height: 1.7;
  color: var(--ftr-soft);
}
.site-footer__hours-note[data-v-a23aa319] { margin-top: 18px; font-size: var(--umi-micro, 13px);
}
.site-footer__section-title[data-v-a23aa319] {
  margin: 0 0 20px;
  font-size: var(--umi-d3, 12px);
  letter-spacing: var(--umi-d3-ls, 0.16em);
  color: var(--umi-sand, #d3b574);
}
.site-footer__hours-list[data-v-a23aa319] { margin: 0;
}
.site-footer__hours-row[data-v-a23aa319] { padding: 12px 0; border-top: 1px solid var(--ftr-rule);
}
.site-footer__hours-row[data-v-a23aa319]:last-child { border-bottom: 1px solid var(--ftr-rule);
}
.site-footer__hours-row dt[data-v-a23aa319] {
  font-family: var(--umi-face-display, serif);
  font-size: 18px;
  line-height: 1.2;
  color: var(--umi-bone, #e7e4dc);
}
.site-footer__hours-row dd[data-v-a23aa319] {
  margin: 4px 0 0;
  font-size: var(--umi-body-sm, 15px);
  color: var(--ftr-soft);
}
.site-footer__link-list[data-v-a23aa319],
.site-footer__legal[data-v-a23aa319],
.site-footer__social-row[data-v-a23aa319] {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__link-list li + li[data-v-a23aa319] { margin-top: 10px;
}
.site-footer__link-list--cols[data-v-a23aa319] { columns: 2; column-gap: 24px;
}
.site-footer__link-list--cols li[data-v-a23aa319] { break-inside: avoid; margin: 0 0 10px;
}
.site-footer__link-list--cols li + li[data-v-a23aa319] { margin-top: 0;
}
.site-footer__link-list--contact li + li[data-v-a23aa319] { margin-top: 14px;
}
.site-footer__reach-label[data-v-a23aa319] {
  display: block;
  margin-bottom: 2px;
  font-size: var(--umi-micro, 13px);
  color: var(--ftr-soft);
}
.site-footer__text-link[data-v-a23aa319] {
  display: inline-block;
  color: var(--umi-bone, #e7e4dc);
  font-size: var(--umi-body-sm, 15px);
  line-height: 1.7;
  text-decoration: none;
  transition: color 260ms ease;
}
.site-footer__text-link[data-v-a23aa319]:hover,
.site-footer__text-link[data-v-a23aa319]:focus-visible { color: var(--umi-sand, #d3b574);
}
.site-footer__social-row[data-v-a23aa319] { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px;
}
.site-footer__social-btn[data-v-a23aa319] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ftr-rule);
  border-radius: var(--umi-radius-pill, 999px);
  color: var(--umi-bone, #e7e4dc);
  transition: border-color 260ms ease, color 260ms ease;
}
.site-footer__social-btn[data-v-a23aa319]:hover,
.site-footer__social-btn[data-v-a23aa319]:focus-visible {
  border-color: var(--umi-bone, #e7e4dc);
  color: var(--umi-sand, #d3b574);
}
.site-footer__nl-form[data-v-a23aa319] { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 340px;
}
.site-footer__nl-field[data-v-a23aa319] { margin-bottom: 0;
}
.site-footer__nl-btn[data-v-a23aa319] { align-self: stretch;
}

/* === The NAMRON collection ============================================ */
.uf-col[data-v-a23aa319] {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3.45fr);
  gap: 0 var(--ftr-gap);
  align-items: start;
  border-top: 1px solid var(--ftr-rule);
}
.uf-col__sign[data-v-a23aa319] { padding-top: 26px; display: flex; flex-direction: column; gap: 16px;
}
.uf-col__mark-link[data-v-a23aa319] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  opacity: 0.92;
  transition: opacity 0.3s ease;
}
.uf-col__mark-link[data-v-a23aa319]:hover,
.uf-col__mark-link[data-v-a23aa319]:focus-visible { opacity: 1;
}
.uf-col__mark[data-v-a23aa319] { display: block; width: clamp(150px, 12vw, 190px); height: auto;
}
.uf-drawer + .uf-drawer[data-v-a23aa319] { border-top: 1px solid var(--ftr-rule);
}
.uf-drawer__h[data-v-a23aa319] { margin: 0; font: inherit;
}
.uf-drawer__btn[data-v-a23aa319] {
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0 22px;
  border: 0;
  background: transparent;
  color: var(--umi-bone, #e7e4dc);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.uf-drawer__title[data-v-a23aa319] {
  font-family: var(--umi-face-display, serif);
  font-size: var(--umi-h3, 30px);
  line-height: 1.08;
  transition: transform 0.45s var(--ftr-ease);
}
.uf-drawer__cross[data-v-a23aa319] {
  position: relative;
  width: 15px;
  height: 15px;
  margin-right: 2px;
  color: var(--umi-sand, #d3b574);
}
.uf-drawer__cross[data-v-a23aa319]::before,
.uf-drawer__cross[data-v-a23aa319]::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ftr-ease);
}
.uf-drawer__cross[data-v-a23aa319]::after { transform: rotate(90deg);
}
.uf-drawer--open .uf-drawer__cross[data-v-a23aa319]::after { transform: rotate(0deg);
}
.uf-drawer--open .uf-drawer__cross[data-v-a23aa319]::before { transform: rotate(180deg);
}
@media (hover: hover) {
.uf-drawer__btn:hover .uf-drawer__title[data-v-a23aa319] { transform: translateX(8px);
}
}
.uf-drawer__btn[data-v-a23aa319]:focus-visible { outline: 1px solid var(--umi-bone, #e7e4dc); outline-offset: 4px;
}
.uf-drawer__panel[data-v-a23aa319] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 0.6s var(--ftr-ease), visibility 0s linear 0.6s;
}
.uf-drawer--open .uf-drawer__panel[data-v-a23aa319] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.6s var(--ftr-ease), visibility 0s linear 0s;
}
.uf-drawer__clip[data-v-a23aa319] { overflow: hidden; min-height: 0;
}
.uf-drawer__inner[data-v-a23aa319] {
  padding: 2px 0 34px;
  transform: translateY(-8px);
  transition: transform 0.7s var(--ftr-ease);
}
.uf-drawer--open .uf-drawer__inner[data-v-a23aa319] { transform: none;
}
.uf-drawer__group + .uf-drawer__group[data-v-a23aa319] { margin-top: 28px;
}
.uf-drawer__sub[data-v-a23aa319] {
  margin: 0 0 16px;
  font-size: var(--umi-d3, 12px);
  letter-spacing: var(--umi-d3-ls, 0.16em);
  color: var(--ftr-soft);
}
.uf-drawer__sub[data-v-a23aa319]::after {
  content: '';
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 10px;
  background: var(--umi-sand, #d3b574);
}
.uf-drawer__list[data-v-a23aa319] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px var(--ftr-gap);
}
.uf-drawer__row[data-v-a23aa319] { min-width: 0;
}
.uf-drawer__name[data-v-a23aa319] {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.14em;
  color: var(--umi-bone, #e7e4dc);
}
.uf-drawer__places[data-v-a23aa319] { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 7px;
}
.uf-drawer__place-row[data-v-a23aa319] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0;
}
.uf-drawer__link[data-v-a23aa319] {
  display: inline-block;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.7;
  color: var(--umi-bone, #e7e4dc);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: color-mix(in srgb, var(--umi-bone, #e7e4dc) 45%, transparent);
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
.uf-drawer__link[data-v-a23aa319]:hover,
.uf-drawer__link[data-v-a23aa319]:focus-visible { color: var(--umi-sand, #d3b574); text-decoration-color: currentColor;
}
.uf-drawer__link--here[data-v-a23aa319] { text-decoration-color: var(--umi-sand, #d3b574);
}
.uf-drawer__here[data-v-a23aa319] { font-size: 12px; color: var(--umi-sand, #d3b574);
}

/* === The fine print ==================================================== */
.site-footer__bottom[data-v-a23aa319] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding-top: 26px;
  border-top: 1px solid var(--ftr-rule);
}
.site-footer__bottom-left[data-v-a23aa319],
.site-footer__bottom-right[data-v-a23aa319] { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px;
}
.site-footer__legal[data-v-a23aa319] { display: flex; flex-wrap: wrap; gap: 8px 22px;
}
.site-footer__legal-trigger[data-v-a23aa319],
.site-footer__copyright[data-v-a23aa319] {
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ftr-soft);
  font-family: var(--umi-face-body, monospace);
  font-size: var(--umi-micro, 13px);
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, var(--umi-bone, #e7e4dc) 30%, transparent);
  cursor: pointer;
}
.site-footer__copyright[data-v-a23aa319] { cursor: default; text-decoration: none;
}
.site-footer__legal-trigger[data-v-a23aa319]:hover,
.site-footer__legal-trigger[data-v-a23aa319]:focus-visible { color: var(--umi-bone, #e7e4dc);
}

/* The SDK's display-settings pill mounts inside the footer; keep it above
   the footer's own content so its sheet is never covered. */
.site-footer[data-v-a23aa319] .a11y-panel { position: relative; z-index: 2;
}
.site-policy-modal[data-v-a23aa319] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--umi-ink-deep, #000) 82%, transparent);
}
.site-policy-modal__panel[data-v-a23aa319] {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  min-height: 0;
  width: min(760px, 100%);
  padding: 40px;
  border-radius: 34px;
  background: var(--umi-ground, var(--umi-bone, #e7e4dc));
  color: var(--umi-ink, #141413);
}
.site-policy-modal__head[data-v-a23aa319] { display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}
.site-policy-modal__title[data-v-a23aa319] { margin: 0; font-family: var(--umi-face-display, serif); font-size: 30px; letter-spacing: -0.02em;
}
.site-policy-modal__close[data-v-a23aa319],
.site-policy-modal__tab[data-v-a23aa319] {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: var(--umi-face-body, monospace);
  font-size: var(--umi-d3, 12px);
  letter-spacing: var(--umi-d3-ls, 0.16em);
  cursor: pointer;
}
.site-policy-modal__tabs[data-v-a23aa319] {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 18px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--umi-hair, rgba(20, 20, 19, 0.12));
}
.site-policy-modal__tab--active[data-v-a23aa319] { color: var(--umi-sea, #0f6e8c);
}
.site-policy-modal__body[data-v-a23aa319] { overflow-y: auto; min-height: 0; font-size: var(--umi-body-sm, 15px); line-height: 1.8;
}
.site-policy-modal__h[data-v-a23aa319] {
  margin: 22px 0 8px;
  font-family: var(--umi-face-display, serif);
  font-size: 18px;
  letter-spacing: 0;
}
.site-policy-modal__h[data-v-a23aa319]:first-child { margin-top: 0;
}
.site-policy-modal__p[data-v-a23aa319] { margin: 0 0 10px; max-width: none;
}
.site-policy-modal__list[data-v-a23aa319] { margin: 0 0 12px; padding-left: 1.2em;
}
@media (max-width: 1100px) {
.site-footer__grid[data-v-a23aa319] { grid-template-columns: repeat(2, minmax(0, 1fr));
}
.uf-col[data-v-a23aa319] { grid-template-columns: minmax(0, 1fr);
}
.uf-drawer__list[data-v-a23aa319] { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.site-footer[data-v-a23aa319] { --ftr-pad-y: 56px;
}
.site-footer__inner[data-v-a23aa319] { gap: 44px;
}
.site-footer__grid[data-v-a23aa319] { grid-template-columns: minmax(0, 1fr); gap: 36px;
}
.site-footer__logo[data-v-a23aa319] { height: 70px;
}
.site-footer__link-list li + li[data-v-a23aa319],
  .site-footer__link-list--cols li[data-v-a23aa319] { margin: 0;
}
.site-footer__text-link[data-v-a23aa319] { padding: 12px 0;
}
.site-footer__legal-trigger[data-v-a23aa319] { padding: 12px 0;
}
.uf-drawer__list[data-v-a23aa319] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px;
}
.uf-drawer__link[data-v-a23aa319] { padding: 10px 0;
}
.site-policy-modal__panel[data-v-a23aa319] { padding: 28px 22px; border-radius: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-footer__text-link[data-v-a23aa319],
  .site-footer__social-btn[data-v-a23aa319],
  .uf-drawer__panel[data-v-a23aa319],
  .uf-drawer__inner[data-v-a23aa319],
  .uf-drawer__title[data-v-a23aa319],
  .uf-drawer__cross[data-v-a23aa319]::before,
  .uf-drawer__cross[data-v-a23aa319]::after { transition: none;
}
}


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

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

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

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


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

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

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

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


/* brand record */
@font-face { font-family: "UMiTULUM-Bold"; src: url("/cdn/01M21178RP8JF3YNABKSV2KP2Y/01M216ZF735SJHSZ5RJ1B2ZEV5.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/cdn/01M21178RP8JF3YNABKSV2KP2Y/01M216ZFFR22Z3VQH7A55B0YXY.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/cdn/01M21178RP8JF3YNABKSV2KP2Y/01M216ZFG0V6J8YSEK05X20K4H.woff2") format("woff2"); font-weight: 100 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Tierra"; src: url("/cdn/01M21178RP8JF3YNABKSV2KP2Y/01M2192567TQW3FBE51542EC8C.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --site-color-fg: #141413;
  --site-color-accent: #0f6e8c;
  --site-color-bg: #e7e4dc;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(231 228 220);
  --site-color-fg-muted: #666561;
  --a11y-focus: #0f6e8c;
  --site-color-site-1: #ffffff;
  --site-color-site-2: #141413;
  --site-color-site-3: #000000;
  --site-color-site-4: #2a2a2a;
  --site-color-site-5: #888888;
  --site-color-site-6: #33373d;
  --site-color-site-7: #e7e4dc;
  --site-color-site-8: #d3b574;
  --site-font-display: "UMiTULUM-Bold", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "JetBrains Mono", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-tierra: "Tierra", system-ui, -apple-system, "Segoe UI", sans-serif;
}