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

  /* 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%; }
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 */
/* ============================================================================
 * tokens.css — THE NEST · TULUM — unified brand token spine
 * ----------------------------------------------------------------------------
 * One brand, distilled from the hotelier's chosen variants:
 *   palette-v1 · typography-v1 · button-v1 · form_controls-v1 · nav_header-v1
 *   footer-v1 · hero-v1 · section_header-v3 · card-v1 · media_block-v1 · cta_band-v1
 *
 * THE ANCHOR — "sun-bleached · hushed · editorial · before Tulum was a brand":
 *   Sun-Bleached Sand ground (var(--site-color-bg), 36%) · New-Moon Reef ink (#0f1627, 35%,
 *   whole inverted bands) · Terracotta Gold (#9b6e2f, 24% — a WORKING SURFACE,
 *   never a garnish) · Cenote Palm (#3c651a, 5% — the rationed EVENT: one CTA,
 *   active nav, key numerals, the drawn-in baseline).
 *   Absans speaks first — one weight, set big but never bold. Haffer answers
 *   Thin 100, wide-leaded. Haffer VF carries tracked-uppercase UI. American
 *   Scribe is the guest-book hand: one rotated aside, rationed.
 *
 * The runtime may override any --site-* token; these literals ARE the
 * hotelier's LOCKED brand values, verbatim.
 * ========================================================================== */

:root {
  /* ==========================================================================
   * 1 · COLOR — LOCKED palette. Surface share (MANDATORY, hotelier-declared):
   *     bg 36 · fg 35 · accent 24 · accent-2 5. This ratio outranks any
   *     60-30-10 or "accent ≤ 5%" lens rule. Terracotta is a SURFACE.
   * ======================================================================== */
/* Sun-Bleached Sand — the page itself, 36% */
/* New-Moon Reef — ink + inverted bands, 35% */
/* Terracotta Gold — working surface, 24% */
  --site-color-accent-2: #3c651a;   /* Cenote Palm — the EVENT, rationed to 5% */
  --site-color-muted:    #66604f;   /* stone-taupe meta / captions */
  --site-color-border:   #d8d2c2;   /* the hairline — the only structure */

  /* on-color pairings — always legible */
  --site-on-ink:    var(--site-color-bg);     /* sand text on reef ink */
  --site-on-accent: var(--site-color-bg);     /* sand text on terracotta */
  --site-on-event:  var(--site-color-bg);     /* sand text on cenote green */

  /* hairlines on each major surface */
  --site-hairline-ink:  color-mix(in srgb, var(--site-color-fg) 26%, transparent);
  --site-hairline-bone: color-mix(in srgb, var(--site-color-bg) 30%, transparent);

  /* scrim for any text set over photography — reef ink, never pure black */
  --site-scrim:        color-mix(in srgb, var(--site-color-fg) 55%, transparent);
  --site-scrim-strong: color-mix(in srgb, var(--site-color-fg) 76%, transparent);

  /* cenote green lifted for legibility ON INK surfaces only (numerals, links) */
  --site-event-on-ink-filter: brightness(1.9) saturate(0.85);

  /* ==========================================================================
   * 2 · TYPE — LOCKED families. Reference by token only; never hardcode.
   *     Absans Regular 400 (the ONLY display cut) · Haffer Thin 100 body ·
   *     Haffer VF-TRIAL for UI · American Scribe for the guest-book hand.
   * ======================================================================== */
  --site-font-ui:       "Haffer VF-TRIAL", "Haffer", system-ui, sans-serif;
  --site-font-american: "American Scribe", "Segoe Script", cursive;

  --site-weight-display: 400;   /* Absans has one cut; hierarchy = SIZE, not weight */
  --site-weight-body:    100;   /* Haffer Thin, throughout prose */
  --site-weight-ui:      500;   /* labels, buttons, nav meta */

  /* fluid scale — carried verbatim from typography-v1 */
  --site-text-display: clamp(2.6rem, 1.4rem + 5.4vw, 5.5rem);
  --site-text-h1:      clamp(2.1rem, 1.2rem + 3.6vw, 3.75rem);
  --site-text-h2:      clamp(1.6rem, 1.1rem + 1.9vw, 2.5rem);
  --site-text-h3:      clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem);
  --site-text-lede:    clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  --site-text-body:    clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --site-text-small:   0.8125rem;
  --site-text-label:   0.6875rem;
  --site-text-script:  clamp(1.35rem, 1.1rem + 1.2vw, 2.1rem);

  --site-leading-display: 1.06;
  --site-leading-snug:    1.2;
  --site-leading-body:    1.65;

  --site-track-display: -0.015em;
  --site-track-body:     0.01em;
  --site-track-btn:      0.14em;   /* button micro-type */
  --site-track-label:    0.22em;   /* eyebrows, form labels */
  --site-track-stamp:    0.32em;   /* widest running heads / topline */

  --site-measure: 58ch;            /* barefoot reading measure — BODY only, never headlines */

  /* ==========================================================================
   * 3 · SPACING — the shared ladder every chosen variant already breathes on
   * ======================================================================== */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 16px;
  --site-space-4: 28px;
  --site-space-5: 44px;
  --site-space-6: 72px;
  --site-space-7: 120px;

  --site-section-y:   clamp(44px, 8vw, 120px);
  --site-gutter:      clamp(16px, 5vw, 72px);
  --site-content-max: 1240px;
  --site-frame:       clamp(14px, 2.2vw, 28px);  /* the hero's sand frame */
  --site-header-h:    0px;   /* the bar is IN FLOW and occupies its own space — nothing else reserves it */
  --site-topline-h:   34px;

  /* ==========================================================================
   * 4 · GEOMETRY — squared and hushed. 2px is THE edge. The hero alone earns
   *     the 10px plate radius. Hairlines do all remaining structure.
   * ======================================================================== */
  --site-radius:      2px;    /* buttons, inputs, cards, chips, media */
  --site-radius-s:    3px;    /* small chips inside the hero */
  --site-radius-m:    10px;   /* hero plates ONLY */
  --site-hairline:    1px;

  --site-shadow-hover: 0 24px 48px -28px rgba(15, 22, 39, 0.35);

  /* ==========================================================================
   * 5 · MOTION — things arrive, they don't perform. One signature gesture:
   *     the cenote-green baseline that DRAWS IN left→right on hover.
   * ======================================================================== */
  --site-dur-fast: 250ms;
  --site-dur:      350ms;
  --site-dur-draw: 450ms;
  --site-ease:      cubic-bezier(0.33, 0.02, 0.2, 1);   /* nav / hushed */
  --site-ease-draw: cubic-bezier(0.22, 0.61, 0.36, 1);  /* the baseline draw-in */

  /* structural contract mirrors (consumed by locked booking pages) */
  --site-font-size-display-xl: var(--site-text-display);
  --site-font-size-display-lg: var(--site-text-h1);
  --site-font-size-body:       var(--site-text-body);
  --site-duration:             var(--site-dur);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --site-dur-fast: 1ms;
    --site-dur:      1ms;
    --site-dur-draw: 1ms;
  }
}

/* baseline reveal tokens for the runtime (never hide content) */
:root {
  --site-duration-reveal: 700ms;
  --site-duration-slow: 600ms;
  --site-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --site-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --site-stagger: 80ms;
  --site-reveal-distance: 24px;
}

/* THE PAGE GROUND. The document itself carries no colour, so anything a page
   leaves uncovered above the footer (a short page inside the shell's
   full-height main, a last band whose margin collapses out of its root)
   showed as a WHITE band. The main paints sand; every route ends on it. */
.app-shell__main { background: var(--site-color-bg); }


/* brand */
/* themes/nesttulum/brand.css — global finish layer ("The Editorial Cut").
 *
 * Loaded once, unscoped, by src/main.js for the active theme. Holds the
 * site-wide atmosphere that can't live in a scoped component: an analog
 * film-grain, premium type rendering, and the terracotta accent on
 * selection / focus. Everything here only REFERENCES tokens (never
 * redefines the brand contract).
 */

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

/* Premium serif rendering: kerning + standard/contextual ligatures, and
 * proportional old-style figures in running copy (lining/tabular are opted
 * back in locally where numerals must align, e.g. prices). */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------------------------------------------------------------------
 * Film grain — a single, fixed, ultra-subtle analog grain laid over the
 * whole document. The thing that makes cinema read as cinema: felt as
 * warmth, never noticed as an effect. z-index sits ABOVE page content but
 * BELOW the sticky header (100), concierge launcher (999) and modals
 * (1000+), and never intercepts pointer events. Not animated, so it stays
 * on under reduced motion (it is texture, not movement).
 * ------------------------------------------------------------------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------------------------------------------------------------------
 * Cinematic enter — a slow scrubbed rise used by scroll-driven reveals
 * (`animation-timeline: view()`). Defined globally so scoped components can
 * reference it by name. Subtle scale on the WRAPPER only (never an image
 * with a hover transform), so it never fights a :hover state.
 * ------------------------------------------------------------------- */
@keyframes ntst-enter {
  from { opacity: 0; transform: translateY(36px) scale(0.988); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

::selection {
  background: var(--site-color-accent, var(--site-color-accent));
  color: var(--site-on-accent, var(--site-color-accent-fg, #fff));
}

:focus-visible {
  outline: 2px solid var(--site-color-accent, var(--site-color-accent));
  outline-offset: 3px;
}


/* chrome components */

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

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

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

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

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

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

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

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

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

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

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

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


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


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


/* The 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-3cbae843] {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}
.sdk-navgrp__trigger[data-v-3cbae843] {
  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-3cbae843] {
  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-3cbae843] {
  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-3cbae843] {
  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-3cbae843] { display: inline-flex;
}
.sdk-navgrp__trigger > .sdk-navgrp__caret[data-v-3cbae843] { display: none;
}
}
.sdk-navgrp__caret-btn[data-v-3cbae843]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}
.sdk-navgrp__panel[data-v-3cbae843] {
  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-3cbae843] { display: none;
}
.sdk-navgrp__item[data-v-3cbae843] { margin: 0;
}
.sdk-navgrp__link[data-v-3cbae843] {
  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-3cbae843]:hover,
.sdk-navgrp__link[data-v-3cbae843]:focus-visible {
  background: color-mix(in srgb, currentColor 8%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.sdk-navgrp__caret[data-v-3cbae843] { transition: none;
}
}


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


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


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

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


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


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


/* ============================================================
 * THE BAR
 * Reference proportion: a 76px rule, tight chrome gutters, the house
 * right-aligned at reading size, one pill. The page gutter (72px) is too
 * wide for chrome — the chrome keeps its own, and the footer's colossal
 * wordmark aligns to the same edge.
 * ============================================================ */
.site-header[data-v-a39e01ca] {
  position: sticky;
  top: 0;
  z-index: 1000; /* header context beats the concierge (998) so open panels win */
  width: 100%;
  max-width: 100%;
  font-family: var(--site-font-body);
}

/* over a hero, the bar is drawn ON the photograph and gives its space back */
.site-header.is-hero[data-v-a39e01ca] {
  margin-bottom: calc(-1 * var(--nest-bar-h, 76px));
}
.bar[data-v-a39e01ca] {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 56px);
  min-height: var(--nest-chrome-bar-h, 76px);
  padding-inline: var(--nest-chrome-gutter, clamp(16px, 2.6vw, 40px));
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border-bottom: 1px solid var(--site-color-border);
}
.is-over .bar[data-v-a39e01ca] {
  background: transparent;
  color: var(--site-color-bg);
  border-bottom-color: transparent;
}
/* Sand chrome on an unknown photograph is a gamble — this hero is dark today,
   the next one may not be. A whisper of ground under the bar costs nothing on
   dark media and keeps the lockup legible on light. */
.is-over .bar[data-v-a39e01ca]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(100% + 36px);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--site-color-fg) 46%, transparent),
    transparent
  );
}

/* ---- the lockup ---- */
.brand[data-v-a39e01ca] {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1;
  color: inherit;
  text-decoration: none;
}
.brand-name[data-v-a39e01ca] {
  font-family: var(--nest-font-mark);
  font-weight: 300;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* optical: tracking adds a trailing gap */
  text-transform: uppercase;
  color: inherit;
}
.brand-place[data-v-a39e01ca] {
  font-family: var(--nest-font-mark);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: lowercase;
  opacity: 0.72;
  color: inherit;
}

/* ---- primary nav — sentence case, reading size, no tracking ---- */
.navwrap[data-v-a39e01ca] {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  overflow: hidden; /* the list can never spill onto the lockup or the pill */
}
.navwrap[hidden][data-v-a39e01ca] { display: none;
}
.primary[data-v-a39e01ca] { display: flex; align-items: center; min-width: 0;
}
.primary ul[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.4vw, 22px);
}
.primary li[data-v-a39e01ca] { display: flex;
}
.primary[data-v-a39e01ca] .nav-link,
.primary[data-v-a39e01ca] .sdk-navgrp__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0.88;
  transition: opacity var(--site-dur, 350ms) var(--site-ease, ease);
}
.primary[data-v-a39e01ca] .nav-link:hover,
.primary[data-v-a39e01ca] .sdk-navgrp__trigger:hover { opacity: 1;
}
.primary[data-v-a39e01ca] .nav-link::after,
.primary[data-v-a39e01ca] .sdk-navgrp__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--site-dur-draw, 450ms) var(--site-ease-draw, ease);
}
.primary[data-v-a39e01ca] .nav-link:hover::after,
.primary[data-v-a39e01ca] .sdk-navgrp__trigger:hover::after { right: 0;
}
.primary[data-v-a39e01ca] .nav-link[aria-current="page"],
.primary[data-v-a39e01ca] .router-link-active.nav-link { opacity: 1;
}
.primary[data-v-a39e01ca] .nav-link[aria-current="page"]::after,
.primary[data-v-a39e01ca] .router-link-active.nav-link::after { right: 0;
}

/* dropdown panel — a sand card wherever the bar happens to be */
.primary[data-v-a39e01ca] .sdk-navgrp__panel {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius, 2px);
  box-shadow: var(--site-shadow-hover, 0 24px 48px -28px rgba(15, 22, 39, 0.35));
  padding: var(--site-space-2, 8px);
  min-width: 220px;
}
.primary[data-v-a39e01ca] .sdk-navgrp__panel a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--site-radius, 2px);
  font-family: var(--site-font-body);
  font-size: 0.95rem;
  color: var(--site-color-fg);
  text-decoration: none;
  transition: background var(--site-dur, 350ms) var(--site-ease, ease);
}
.primary[data-v-a39e01ca] .sdk-navgrp__panel a:hover {
  background: color-mix(in srgb, var(--site-color-accent) 14%, var(--site-color-bg));
}

/* ---- the pill ---- */
.reserve-slot[data-v-a39e01ca] { flex: none; display: flex; align-items: center;
}
.reserve-slot[data-v-a39e01ca] .reserve-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 2px solid currentColor;
  border-radius: 160px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color var(--site-dur, 350ms) var(--site-ease, ease),
              border-color var(--site-dur, 350ms) var(--site-ease, ease);
}
/* the swap: the pill fills from the baseline up, type INVERTS against it.
   The fill is PINNED per bar state — `currentColor` here rode the hover's
   colour transition and ended sand-on-sand (solid bar) / ink-on-ink (over
   the hero): the pill visibly dissolved on hover. */
.is-solid .reserve-slot[data-v-a39e01ca] .reserve-pill { --nest-pill-fill: var(--site-color-fg);
}
.is-over .reserve-slot[data-v-a39e01ca] .reserve-pill { --nest-pill-fill: var(--site-color-bg);
}
.reserve-slot[data-v-a39e01ca] .reserve-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--nest-pill-fill, currentColor);
  transform: translateY(101%);
  transition: transform var(--site-dur, 350ms) var(--site-ease-draw, ease);
}
.reserve-slot[data-v-a39e01ca] .reserve-pill:hover::before,
.reserve-slot[data-v-a39e01ca] .reserve-pill:focus-visible::before { transform: translateY(0);
}
.is-solid .reserve-slot[data-v-a39e01ca] .reserve-pill:hover,
.is-solid .reserve-slot[data-v-a39e01ca] .reserve-pill:focus-visible { color: var(--site-color-bg); border-color: var(--site-color-fg);
}
.is-over .reserve-slot[data-v-a39e01ca] .reserve-pill:hover,
.is-over .reserve-slot[data-v-a39e01ca] .reserve-pill:focus-visible { color: var(--site-color-fg); border-color: var(--site-color-bg);
}
.reserve-slot[data-v-a39e01ca] .reserve-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 3px;
}

/* CTA caret (several destinations) rides inside the pill */
.reserve-slot[data-v-a39e01ca] button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.reserve-slot[data-v-a39e01ca] .sdk-cta__menu,
.reserve-slot[data-v-a39e01ca] [role="menu"] {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius, 2px);
  box-shadow: var(--site-shadow-hover, 0 24px 48px -28px rgba(15, 22, 39, 0.35));
}
.reserve-slot[data-v-a39e01ca] .sdk-cta__menu a,
.reserve-slot[data-v-a39e01ca] [role="menu"] a { color: var(--site-color-fg); padding: 10px 16px;
}

/* ---- burger — shown only when the nav genuinely does not fit ---- */
.burger[data-v-a39e01ca] {
  flex: none;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.burger-lines[data-v-a39e01ca] { position: relative; display: block; width: 24px; height: 11px;
}
.burger-lines[data-v-a39e01ca]::before,
.burger-lines[data-v-a39e01ca]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--site-dur, 350ms) var(--site-ease, ease),
              top var(--site-dur, 350ms) var(--site-ease, ease);
}
.burger-lines[data-v-a39e01ca]::before { top: 0;
}
.burger-lines[data-v-a39e01ca]::after { top: 9px;
}
.burger[aria-expanded="true"] .burger-lines[data-v-a39e01ca]::before { top: 5px; transform: rotate(45deg);
}
.burger[aria-expanded="true"] .burger-lines[data-v-a39e01ca]::after { top: 5px; transform: rotate(-45deg);
}
.burger[data-v-a39e01ca]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px;
}

/* ============================================================
 * DRAWER (teleported to body)
 * ============================================================ */
.nest-scrim[data-v-a39e01ca] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  background: var(--site-scrim-strong, color-mix(in srgb, var(--site-color-fg) 76%, transparent));
}
#nest-drawer.nest-drawer[data-v-a39e01ca] {
  position: relative;
  z-index: 10000;
  width: min(88vw, 420px);
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background: var(--site-color-fg);
  color: var(--site-color-bg);
  font-family: var(--site-font-body);
  padding: var(--site-space-3, 16px)
           var(--nest-chrome-gutter, clamp(16px, 2.6vw, 40px))
           var(--site-space-5, 44px);
}
.drawer-head[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3, 16px);
  padding: var(--site-space-2, 8px) 0 var(--site-space-4, 28px);
  border-bottom: 1px solid var(--site-hairline-bone, color-mix(in srgb, var(--site-color-bg) 30%, transparent));
}
.drawer-brand[data-v-a39e01ca] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
  color: var(--site-color-bg);
  text-decoration: none;
}
.drawer-close[data-v-a39e01ca] {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--site-color-bg) 24%, transparent);
  border-radius: 160px;
  background: transparent;
  color: var(--site-color-bg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--site-dur, 350ms) var(--site-ease, ease),
              color var(--site-dur, 350ms) var(--site-ease, ease);
}
.drawer-close[data-v-a39e01ca]:hover {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
}
.drawer-nav ul[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: var(--site-space-3, 16px) 0;
}
.drawer-nav > ul > li + li[data-v-a39e01ca] {
  border-top: 1px solid color-mix(in srgb, var(--site-color-bg) 14%, transparent);
}
.drawer-nav[data-v-a39e01ca] .drawer-link,
.drawer-nav[data-v-a39e01ca] .sdk-navgrp__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3, 16px);
  width: 100%;
  padding: var(--site-space-3, 16px) 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* the drawer echoes the BAR, so it keeps the mark face, not the serif */
  font-family: var(--nest-font-mark);
  font-weight: 300;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  text-align: left;
  text-decoration: none;
  color: color-mix(in srgb, var(--site-color-bg) 78%, transparent);
  transition: color var(--site-dur, 350ms) var(--site-ease, ease);
}
.drawer-nav[data-v-a39e01ca] .drawer-link:hover,
.drawer-nav[data-v-a39e01ca] .sdk-navgrp__trigger:hover { color: var(--site-color-bg);
}
/* the page you are ON must read BRIGHTEST — tinting it down reads as disabled */
.drawer-nav[data-v-a39e01ca] .drawer-link[aria-current="page"],
.drawer-nav[data-v-a39e01ca] .router-link-active {
  color: var(--site-color-bg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
  text-decoration-color: var(--nest-accent-on-deep, color-mix(in srgb, var(--site-color-accent) 55%, var(--site-color-bg)));
}
.drawer-nav[data-v-a39e01ca] .sdk-navgrp__panel a,
.drawer-nav[data-v-a39e01ca] .sdk-navgrp__child {
  display: block;
  padding: 10px 0 10px var(--site-space-4, 28px);
  font-family: var(--site-font-body);
  font-size: 1rem;
  text-decoration: none;
  color: color-mix(in srgb, var(--site-color-bg) 80%, transparent);
}
.drawer-nav[data-v-a39e01ca] .sdk-navgrp__panel a:hover { color: var(--site-color-bg);
}
.drawer-cta[data-v-a39e01ca] { margin-top: auto; padding-top: var(--site-space-4, 28px);
}


/* ---- language switcher (La Valise grammar): a bare code at nav weight, a bare list under it ---- */
/* sits 22px after the pill: pull back the bar gap so the code reads as the pill neighbour, not a new column */
.utils-slot[data-v-a39e01ca] { flex: none; display: flex; align-items: center; margin-left: calc(22px - clamp(16px, 3vw, 56px));
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils { display: flex; align-items: center; gap: 12px;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang { position: relative;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-toggle {
  display: inline-block; font: inherit; font-size: inherit; letter-spacing: 0.02em;
  color: inherit; background: transparent; border: 0; border-radius: 0; padding: 4px 0; margin: 0;
  line-height: 1; white-space: nowrap; cursor: pointer; transition: opacity 0.3s ease;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-toggle svg,
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-toggle [class*="caret"] { display: none;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-toggle:hover { opacity: 0.5;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-toggle[aria-expanded="true"] { opacity: 1;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-menu {
  position: absolute; top: calc(100% + 12px); right: -10px; left: auto; min-width: 0;
  margin: 0; padding: 8px 10px; list-style: none; border: 0; border-radius: 0; box-shadow: none;
  background: var(--site-color-bg, #edeae1); color: var(--site-color-fg, #1d1d1d);
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-item {
  display: block; width: 100%; text-align: right; padding: 6px 0; margin: 0;
  font: inherit; font-size: inherit; letter-spacing: 0.02em; line-height: 1;
  color: inherit; background: transparent; border: 0; cursor: pointer; transition: opacity 0.3s ease;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-item:hover { opacity: 0.5;
}
.utils-slot[data-v-a39e01ca] .pop-hdr-utils__lang-item.is-current { opacity: 0.5;
}
/* drawer foot: same bare code, list opens upward so it stays inside the drawer */
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils { margin-top: var(--site-space-3, 20px); display: flex; align-items: center; gap: 12px;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang { position: relative;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-toggle {
  display: inline-block; font: inherit; font-size: 0.95rem; letter-spacing: 0.04em;
  color: inherit; background: transparent; border: 0; border-radius: 0; padding: 6px 0; margin: 0;
  line-height: 1; cursor: pointer; transition: opacity 0.3s ease;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-toggle svg { display: none;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-toggle:hover { opacity: 0.5;
}
/* in the drawer the list sits in flow as a short row under the code, so it never covers the Reserve pill */
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-menu {
  position: static; display: flex; gap: 18px; min-width: 0;
  margin: 0; padding: 10px 0 0; list-style: none; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: inherit;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-item {
  display: inline-block; width: auto; text-align: left; padding: 6px 0; margin: 0;
  font: inherit; font-size: 0.95rem; letter-spacing: 0.04em; line-height: 1;
  color: inherit; background: transparent; border: 0; cursor: pointer;
}
.nest-drawer[data-v-a39e01ca] .pop-hdr-utils__lang-item.is-current { opacity: 0.5;
}
.drawer-cta[data-v-a39e01ca] .drawer-reserve {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border: 2px solid var(--site-color-bg);
  border-radius: 160px;
  background: transparent;
  color: var(--site-color-bg);
  cursor: pointer;
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 1rem;
  text-transform: none;
  text-decoration: none;
  transition: background var(--site-dur, 350ms) var(--site-ease, ease),
              color var(--site-dur, 350ms) var(--site-ease, ease);
}
.drawer-cta[data-v-a39e01ca] .drawer-reserve:hover {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
}
.drawer-cta[data-v-a39e01ca] button { color: inherit; background: transparent; border: 0; cursor: pointer;
}

/* drawer transition — scrim fades, panel slides in from the right */
.nest-drawer-enter-active[data-v-a39e01ca],
.nest-drawer-leave-active[data-v-a39e01ca] { transition: opacity var(--site-dur, 350ms) var(--site-ease, ease);
}
.nest-drawer-enter-active #nest-drawer[data-v-a39e01ca],
.nest-drawer-leave-active #nest-drawer[data-v-a39e01ca] { transition: transform var(--site-dur, 350ms) var(--site-ease, ease);
}
.nest-drawer-enter-from[data-v-a39e01ca],
.nest-drawer-leave-to[data-v-a39e01ca] { opacity: 0;
}
.nest-drawer-enter-from #nest-drawer[data-v-a39e01ca],
.nest-drawer-leave-to #nest-drawer[data-v-a39e01ca] { transform: translateX(100%);
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media (max-width: 720px) {
.bar[data-v-a39e01ca] { min-height: var(--nest-chrome-bar-mobile-h, 64px); gap: var(--site-space-3, 16px);
}
.reserve-slot[data-v-a39e01ca] .reserve-pill { height: 40px; padding: 0 16px; font-size: 0.9375rem;
}
}
@media (max-width: 420px) {
.reserve-slot[data-v-a39e01ca] .reserve-pill { font-size: 0.875rem; padding: 0 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.bar[data-v-a39e01ca],
  .primary[data-v-a39e01ca] .nav-link::after,
  .primary[data-v-a39e01ca] .sdk-navgrp__trigger::after,
  .reserve-slot[data-v-a39e01ca] .reserve-pill::before,
  .nest-drawer-enter-active[data-v-a39e01ca],
  .nest-drawer-leave-active[data-v-a39e01ca],
  .nest-drawer-enter-active #nest-drawer[data-v-a39e01ca],
  .nest-drawer-leave-active #nest-drawer[data-v-a39e01ca] { transition: none;
}
}


:root {

  /* 1 · type — TWO systems, deliberately.
   *
   *   THE MARK (Absans, the logo's own geometric) is NEST's identity: it sets
   *   the lockup, the colossal wordmark and every tracked meta label — and it
   *   is never used for prose.
   *
   *   THE EDITORIAL VOICE (Spectral) sets every heading on the site: a
   *   high-contrast serif against Haffer's plain grotesque, with almost
   *   nothing in between.
   */
  --nest-font-mark: "Absans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --site-font-display: "Spectral", Georgia, "Times New Roman", serif !important;
  --site-font-body: "Haffer VF-TRIAL", "Haffer", "Helvetica Neue", system-ui, sans-serif !important;
  --site-font-ui: "Haffer VF-TRIAL", "Haffer", "Helvetica Neue", system-ui, sans-serif !important;
  --site-weight-display: 400 !important; /* Spectral Regular for headings; italics are the only accent */
  --site-weight-body: 300 !important;    /* Haffer Light: the brandbook's Thin 100 is too faint for prose on screen */

  /* the editorial measure: a lede set near the reference's 34px, prose under it */
  --nest-text-lede: clamp(1.35rem, 1rem + 1.5vw, 2.05rem);
  --nest-text-prose: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);

  /* 2 · ground */
  --site-color-fg: #23261a !important;

  /* olive is a 1.94:1 whisper directly on the deep ground — lift it before
     ever setting it as type there. Sand-on-deep is 13:1 and needs nothing. */
  --nest-accent-on-deep: color-mix(in srgb, var(--site-color-accent) 55%, var(--site-color-bg));

  /* 3 · chrome metrics — tighter than the 72px page gutter, so the bar and the
     footer's colossal wordmark share one edge */
  --nest-chrome-gutter: clamp(16px, 2.6vw, 40px);
  --nest-chrome-bar-h: 76px;
  --nest-chrome-bar-mobile-h: 64px;

  /* aliases for files that still read the pre-port names (never the lede:
     --site-text-lede is a base token in tokens.css) */
  --site-font-mark: var(--nest-font-mark);
  --site-text-prose: var(--nest-text-prose);
  --site-accent-on-deep: var(--nest-accent-on-deep);
  --site-chrome-gutter: var(--nest-chrome-gutter);
  --site-chrome-bar-h: var(--nest-chrome-bar-h);
}


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


/* Behavioural primitives — themes restyle freely. */
.lang-switcher[data-v-5c7ee371] {
  position: relative;
  display: inline-flex;
}
.lang-switcher__trigger[data-v-5c7ee371] {
  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-5c7ee371] {
  line-height: 0;
  display: inline-flex;
}
.lang-switcher__caret[data-v-5c7ee371] {
  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-5c7ee371] {
  transform: translateY(0.05rem) rotate(-135deg);
}
.lang-switcher__panel[data-v-5c7ee371] {
  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-5c7ee371] {
  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-5c7ee371] {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  color: inherit;
  text-decoration: none;
  font: inherit;
}
.lang-switcher-fade-enter-active[data-v-5c7ee371],
.lang-switcher-fade-leave-active[data-v-5c7ee371] {
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.lang-switcher-fade-enter-from[data-v-5c7ee371],
.lang-switcher-fade-leave-to[data-v-5c7ee371] {
  opacity: 0;
  transform: translateY(0.25rem);
}


/* ============================================================
 * ONE DEEP GROUND
 * Sand on the deepened olive is 13:1 and carries everything. Olive itself
 * is a 1.94:1 whisper on this ground and is NEVER set as type here — the
 * lifted --nest-accent-on-deep does that job at 5.2:1.
 * ============================================================ */
.site-footer[data-v-e029deb4] {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  --ftr-gap: clamp(32px, 5vw, 72px);
  --ftr-rule: var(--site-hairline-bone, color-mix(in srgb, var(--site-color-bg) 30%, transparent));
  --ftr-quiet: color-mix(in srgb, var(--site-color-bg) 66%, transparent);
  --ftr-accent: var(--site-accent-on-deep, color-mix(in srgb, var(--site-color-accent) 55%, var(--site-color-bg)));
  /* the app shell pads its foot by the concierge dock height (76px of bare
     white under the footer); the footer is the last thing on the page, so it
     takes that reserve back — the dock floats over the ink instead */
  margin-bottom: calc(-1 * (var(--concierge-dock-h, 0px) + env(safe-area-inset-bottom, 0px)));
  font-family: var(--site-font-body);
  line-height: var(--site-leading-body, 1.65);
}
.deep[data-v-e029deb4] {
  background: var(--site-color-fg);
  color: var(--site-color-bg);
  padding: clamp(40px, 4.5vw, 64px)
           var(--nest-chrome-gutter, clamp(16px, 2.6vw, 40px))
           clamp(20px, 3vw, 32px);
}

/* ---- optional letters band ---- */
.invite[data-v-e029deb4] {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
  padding-bottom: clamp(40px, 6vw, 72px);
  margin-bottom: clamp(40px, 6vw, 72px);
  border-bottom: 1px solid var(--site-hairline-bone, color-mix(in srgb, var(--site-color-bg) 30%, transparent));
}
.invite-h2[data-v-e029deb4] {
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-display, 300);
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.15;
  max-width: 20ch;
}
.note[data-v-e029deb4] {
  margin-top: var(--site-space-3, 16px);
  color: color-mix(in srgb, var(--site-color-bg) 76%, transparent);
  max-width: 46ch;
}
.letters[data-v-e029deb4] {
  display: flex;
  gap: var(--site-space-3, 16px);
  align-items: center;
}
.letters input[data-v-e029deb4] {
  flex: 1;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid var(--site-hairline-bone, color-mix(in srgb, var(--site-color-bg) 30%, transparent));
  background: transparent;
  outline: none;
  font-family: var(--site-font-body);
  font-size: 1rem;
  color: var(--site-color-bg);
  padding: 12px 0;
}
.letters input[data-v-e029deb4]::placeholder { color: color-mix(in srgb, var(--site-color-bg) 50%, transparent);
}
.letters input[data-v-e029deb4]:focus-visible { border-bottom-color: var(--site-color-bg);
}

/* ---- the pill, echoed from the header ---- */
.pill[data-v-e029deb4] {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 2px solid var(--site-color-bg);
  border-radius: 160px;
  background: transparent;
  color: var(--site-color-bg);
  cursor: pointer;
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--site-dur, 350ms) var(--site-ease, ease),
              color var(--site-dur, 350ms) var(--site-ease, ease);
}
.pill[data-v-e029deb4]:hover,
.pill[data-v-e029deb4]:focus-visible {
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  outline: none;
}

/* ---- directory ---- */
.directory[data-v-e029deb4] {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) repeat(2, minmax(160px, 1fr));
  gap: var(--ftr-gap);
  padding-bottom: clamp(32px, 4vw, 48px);
}
.brandmark[data-v-e029deb4] {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
  color: var(--site-color-bg);
  text-decoration: none;
}
.brand-name[data-v-e029deb4] {
  font-family: var(--nest-font-mark);
  font-weight: 300;
  font-size: 1.3rem;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-transform: uppercase;
}
.brand-place[data-v-e029deb4] {
  font-family: var(--nest-font-mark);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: lowercase;
  opacity: 0.72;
}
.tagline[data-v-e029deb4] {
  margin-top: var(--site-space-3, 16px);
  max-width: 32ch;
  color: color-mix(in srgb, var(--site-color-bg) 76%, transparent);
}
.social[data-v-e029deb4] {
  list-style: none;
  margin: var(--site-space-5, 44px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2, 8px);
}
.social-link[data-v-e029deb4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--site-hairline-bone, color-mix(in srgb, var(--site-color-bg) 30%, transparent));
  border-radius: 160px;
  color: color-mix(in srgb, var(--site-color-bg) 84%, transparent);
  transition: background var(--site-dur, 350ms) var(--site-ease, ease),
              color var(--site-dur, 350ms) var(--site-ease, ease),
              border-color var(--site-dur, 350ms) var(--site-ease, ease);
}
.social-link[data-v-e029deb4] svg { width: 18px; height: 18px;
}
.social-link[data-v-e029deb4]:hover,
.social-link[data-v-e029deb4]:focus-visible {
  background: var(--site-color-bg);
  border-color: var(--site-color-bg);
  color: var(--site-color-fg);
  outline: none;
}
.cell h3[data-v-e029deb4] {
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nest-accent-on-deep, color-mix(in srgb, var(--site-color-accent) 55%, var(--site-color-bg)));
  margin-bottom: 16px;
}
.links[data-v-e029deb4] {
  list-style: none;
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
}
/* Explore runs in two columns, so the directory stays short */
.cell--explore .links[data-v-e029deb4] {
  grid-template-columns: repeat(2, max-content);
  column-gap: clamp(32px, 4vw, 56px);
}
.col-link[data-v-e029deb4] {
  position: relative;
  display: inline-block;
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  color: color-mix(in srgb, var(--site-color-bg) 88%, transparent);
  text-decoration: none;
  padding-bottom: 3px;
  transition: color var(--site-dur, 350ms) var(--site-ease, ease);
}
/* the one gesture: a baseline that draws in left → right */
.col-link[data-v-e029deb4]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--site-dur-draw, 450ms) var(--site-ease-draw, ease);
}
.col-link[data-v-e029deb4]:hover,
.col-link[data-v-e029deb4]:focus-visible { color: var(--site-color-bg); outline: none;
}
.col-link[data-v-e029deb4]:hover::after,
.col-link[data-v-e029deb4]:focus-visible::after { right: 0;
}
.address[data-v-e029deb4] {
  color: color-mix(in srgb, var(--site-color-bg) 72%, transparent);
  font-size: 0.9375rem;
  max-width: 26ch;
}

/* ============================================================
 * THE NAMRON COLLECTION
 * A ledger on hairlines. Left, the operator's wordmark on the house column;
 * right, the drawers, starting on the Explore column and running to the
 * edge. A drawer opens by growing its grid row (0fr -> 1fr): the height is
 * the content's own and nothing is measured in script. The colossal NEST
 * rule underneath closes the ledger.
 * ============================================================ */
.nc-col[data-v-e029deb4] {
  display: grid;
  /* the house cell's own width: 1.4 of the 3.4 fr shares left after the
     directory's two gaps */
  grid-template-columns:
    calc((100% - 2 * var(--ftr-gap)) * 1.4 / 3.4)
    minmax(0, 1fr);
  gap: 0 var(--ftr-gap);
  align-items: start;
  border-top: 1px solid var(--ftr-rule);
}
.nc-col__sign[data-v-e029deb4] { padding-top: 16px;
}
.nc-col__mark-link[data-v-e029deb4] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  transition: opacity var(--site-duration, 350ms) var(--site-ease, ease);
}
.nc-col__mark-link[data-v-e029deb4]:hover { opacity: 0.72;
}
.nc-col__mark-link[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--ftr-accent);
  outline-offset: 4px;
}
.nc-col__mark[data-v-e029deb4] {
  display: block;
  width: clamp(140px, 11vw, 168px);
  height: auto;
}
.nc-drawer + .nc-drawer[data-v-e029deb4] { border-top: 1px solid var(--ftr-rule);
}
.nc-drawer__h[data-v-e029deb4] { margin: 0; font: inherit;
}
.nc-drawer__btn[data-v-e029deb4] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--site-color-bg);
  font: inherit;
  cursor: pointer;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0 18px;
  text-align: left;
}
.nc-drawer__title[data-v-e029deb4] {
  /* the editorial voice, set in capitals: the drawers read as the
     collection's chapter heads */
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-display, 400);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  line-height: 1.05;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: transform 600ms var(--site-ease, ease),
              color var(--site-duration, 350ms) var(--site-ease, ease);
}
/* a cross that lays its upright down when the drawer opens */
.nc-drawer__cross[data-v-e029deb4] {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-right: 2px;
  color: var(--ftr-accent);
}
.nc-drawer__cross[data-v-e029deb4]::before,
.nc-drawer__cross[data-v-e029deb4]::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 600ms var(--site-ease, ease);
}
.nc-drawer__cross[data-v-e029deb4]::after { transform: rotate(90deg);
}
.nc-drawer--open .nc-drawer__cross[data-v-e029deb4]::after { transform: rotate(0deg);
}
.nc-drawer--open .nc-drawer__cross[data-v-e029deb4]::before { transform: rotate(180deg);
}
@media (hover: hover) {
.nc-drawer__btn:hover .nc-drawer__title[data-v-e029deb4] { transform: translateX(8px);
}
}
.nc-drawer__btn[data-v-e029deb4]:focus-visible {
  outline: 1px solid var(--ftr-accent);
  outline-offset: 4px;
}
.nc-drawer__panel[data-v-e029deb4] {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows 600ms var(--site-ease, ease),
              visibility 0s linear 600ms;
}
.nc-drawer--open .nc-drawer__panel[data-v-e029deb4] {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 600ms var(--site-ease, ease),
              visibility 0s linear 0s;
}
.nc-drawer__clip[data-v-e029deb4] { overflow: hidden; min-height: 0;
}
.nc-drawer__inner[data-v-e029deb4] {
  padding: 2px 0 38px;
  transform: translateY(-8px);
  transition: transform 800ms var(--site-ease-out, ease);
}
.nc-drawer--open .nc-drawer__inner[data-v-e029deb4] { transform: none;
}
.nc-drawer__group + .nc-drawer__group[data-v-e029deb4] { margin-top: 32px;
}
/* the country sub-head speaks like the directory's column heads */
.nc-drawer__sub[data-v-e029deb4] {
  margin: 0 0 18px;
  font-family: var(--site-font-body);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ftr-accent);
}
.nc-drawer__sub[data-v-e029deb4]::after {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  margin-top: 10px;
  background: currentColor;
}
.nc-drawer__list[data-v-e029deb4] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px var(--site-space-4, 28px);
}
.nc-drawer__row[data-v-e029deb4] { min-width: 0;
}
/* the house in the MARK face, tracked like the NEST lockup */
.nc-drawer__name[data-v-e029deb4] {
  margin: 0;
  font-family: var(--site-font-mark);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1.35;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--site-color-bg);
}
.nc-drawer__places[data-v-e029deb4] {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.nc-drawer__place-row[data-v-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
}
/* the place is the link, underlined at rest so it reads as one */
.nc-drawer__row[data-v-e029deb4] .nc-drawer__link,
.nc-drawer__link[data-v-e029deb4] {
  display: inline-block;
  max-width: 100%;
  font-family: var(--site-font-body);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--site-color-bg) 88%, transparent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: var(--ftr-accent);
  transition: color var(--site-duration, 350ms) var(--site-ease, ease),
              text-decoration-color var(--site-duration, 350ms) var(--site-ease, ease);
}
.nc-drawer__row[data-v-e029deb4] .nc-drawer__link:hover,
.nc-drawer__row[data-v-e029deb4] .nc-drawer__link:focus-visible,
.nc-drawer__link[data-v-e029deb4]:hover,
.nc-drawer__link[data-v-e029deb4]:focus-visible {
  color: var(--site-color-bg);
  text-decoration-color: currentColor;
  outline: none;
}
/* this house, in its own list: marked, not shouted */
.nc-drawer__row[data-v-e029deb4] .nc-drawer__link--here,
.nc-drawer__link--here[data-v-e029deb4] { text-decoration-color: var(--site-color-bg);
}
.nc-drawer__here[data-v-e029deb4] {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ftr-quiet);
}


/* ---- sign-off ---- */
.signoff[data-v-e029deb4] {
  padding-top: var(--site-space-3, 16px);
  border-top: 1px solid var(--ftr-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-2, 8px) var(--site-space-4, 28px);
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--site-color-bg) 70%, transparent);
  /* the shell's dock reserve now lives INSIDE the ink (see .site-footer), so
     the floating concierge bar and accessibility pill sit under the sign-off
     instead of over the copyright and the legal links */
  padding-bottom: calc(var(--concierge-dock-h, 0px) + env(safe-area-inset-bottom, 0px));
}
.legal-nav[data-v-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--site-space-4, 28px);
}
.legal-link[data-v-e029deb4] {
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  font-family: var(--site-font-body);
  font-size: 0.8125rem;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--site-dur, 350ms) var(--site-ease, ease),
              border-color var(--site-dur, 350ms) var(--site-ease, ease);
}
.legal-link[data-v-e029deb4]:hover,
.legal-link[data-v-e029deb4]:focus-visible {
  color: var(--site-color-bg);
  border-bottom-color: currentColor;
  outline: none;
}
.legal-nav[data-v-e029deb4] a,
.legal-nav[data-v-e029deb4] button,
.legal-nav[data-v-e029deb4] select { color: inherit; font-family: var(--site-font-body);
}

/* ============================================================
 * LEGAL POLICY MODAL — above the concierge (teleported)
 * ============================================================ */
.policy-scrim[data-v-e029deb4] {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  background: var(--site-scrim-strong, color-mix(in srgb, var(--site-color-fg) 76%, transparent));
}
.policy-modal[data-v-e029deb4] {
  width: 100%;
  max-width: 720px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border: 1px solid var(--site-color-border);
  border-radius: var(--site-radius, 2px);
  box-shadow: var(--site-shadow-hover, 0 24px 48px -28px rgba(15, 22, 39, 0.35));
  overflow: hidden;
}
.policy-head[data-v-e029deb4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3, 16px);
  padding: var(--site-space-3, 16px) var(--site-space-4, 28px);
  border-bottom: 1px solid var(--site-color-border);
}
.policy-tabs[data-v-e029deb4] { display: flex; flex-wrap: wrap; gap: var(--site-space-4, 28px);
}
.policy-tab[data-v-e029deb4] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--site-font-body);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--site-color-muted);
  padding: var(--site-space-2, 8px) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--site-dur, 350ms) var(--site-ease, ease),
              border-color var(--site-dur, 350ms) var(--site-ease, ease);
}
.policy-tab[data-v-e029deb4]:hover { color: var(--site-color-fg);
}
.policy-tab.is-active[data-v-e029deb4] {
  color: var(--site-color-fg);
  border-bottom-color: var(--site-color-accent);
}
.policy-close[data-v-e029deb4] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--site-color-border);
  border-radius: 160px;
  background: transparent;
  cursor: pointer;
  flex: none;
  width: 40px;
  height: 40px;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--site-color-fg);
  transition: background var(--site-dur, 350ms) var(--site-ease, ease),
              color var(--site-dur, 350ms) var(--site-ease, ease);
}
.policy-close[data-v-e029deb4]:hover { background: var(--site-color-fg); color: var(--site-color-bg);
}
.policy-body[data-v-e029deb4] { padding: var(--site-space-4, 28px); overflow-y: auto;
}
.policy-title[data-v-e029deb4] {
  font-family: var(--site-font-display);
  font-weight: var(--site-weight-display, 300);
  font-size: var(--site-text-h3, 1.5rem);
  margin-bottom: var(--site-space-3, 16px);
}
.policy-prose[data-v-e029deb4] {
  font-size: var(--site-text-body, 1rem);
  line-height: var(--site-leading-body, 1.65);
  color: var(--site-color-fg);
  max-width: 58ch;
  white-space: pre-line;
}
.policy-prose[data-v-e029deb4] a {
  color: var(--site-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.policy-prose[data-v-e029deb4] p { margin-bottom: var(--site-space-3, 16px);
}
.policy-fade-enter-active[data-v-e029deb4],
.policy-fade-leave-active[data-v-e029deb4] { transition: opacity var(--site-dur, 350ms) var(--site-ease, ease);
}
.policy-fade-enter-from[data-v-e029deb4],
.policy-fade-leave-to[data-v-e029deb4] { opacity: 0;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 900px) {
.invite[data-v-e029deb4] { grid-template-columns: 1fr; gap: var(--site-space-4, 28px);
}
.directory[data-v-e029deb4] { grid-template-columns: 1fr 1fr; gap: var(--site-space-5, 44px);
}
.cell--house[data-v-e029deb4] { grid-column: 1 / -1;
}
.nc-col[data-v-e029deb4] { grid-template-columns: minmax(0, 1fr); margin-top: 0;
}
.nc-col__sign[data-v-e029deb4] { padding: 24px 0 18px;
}
.nc-col__drawers[data-v-e029deb4] { border-top: 1px solid var(--ftr-rule);
}
.nc-col__mark[data-v-e029deb4] { width: 160px;
}
.nc-drawer__btn[data-v-e029deb4] { padding: 18px 0 16px;
}
.nc-drawer__inner[data-v-e029deb4] { padding-bottom: 30px;
}
.nc-drawer__list[data-v-e029deb4] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px;
}
  /* thumb-sized rows: each place keeps a tall target under its house */
.nc-drawer__places[data-v-e029deb4] { margin-top: 2px; gap: 0;
}
.nc-drawer__row[data-v-e029deb4] .nc-drawer__link,
  .nc-drawer__link[data-v-e029deb4] { padding-block: 10px;
}
.legal-nav[data-v-e029deb4] { gap: 0 var(--site-space-4, 28px);
}
.legal-nav[data-v-e029deb4] .legal-link,
  .legal-link[data-v-e029deb4] { padding-block: 10px;
}
}
@media (min-width: 901px) and (max-width: 1180px) {
.nc-drawer__list[data-v-e029deb4] { grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.directory[data-v-e029deb4] { grid-template-columns: 1fr;
}
.letters[data-v-e029deb4] { flex-direction: column; align-items: stretch;
}
.pill[data-v-e029deb4] { align-self: flex-start;
}
.signoff[data-v-e029deb4] { justify-content: flex-start;
}
.legal-nav[data-v-e029deb4] { gap: var(--site-space-3, 16px);
}
}
@media (prefers-reduced-motion: reduce) {
.col-link[data-v-e029deb4]::after,
  .pill[data-v-e029deb4],
  .social-link[data-v-e029deb4],
  .legal-link[data-v-e029deb4] { transition: none;
}
}


/* the sign-off already carries the language switcher; the shell's own picker
   would only repeat it, dark on dark, under the footer */
.app-shell:has(.site-footer) .app-shell__region { display: none;
}


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

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

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

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


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

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

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

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