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

  --site-header-h:     76px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* theme tokens */
/* composed: design-graph tokens (base + palette + type) */
/* legacy base (pre-graph tokens.css) — graph parts override below */
/* ============================================================
   Townhouse Cartagena — base design tokens
   Anchor locked by the design director; a deterministic pass
   refines derived values. Components must reference these
   role tokens — never raw hex or family names.
   ============================================================ */

:root {
  /* ---- Color roles ---- */
  --site-color-bg: #FBF4E8;      /* warm plaster ivory — never pure white */
  --site-color-fg: #2B1B10;      /* espresso ink — never pure black */
  --site-color-accent: #CE7231;  /* glowing amber-terracotta: painted strokes, CTAs */
  --site-color-muted: #F3E6D0;   /* sun-bleached sand — quiet panels, alt bands */
  --site-color-border: #DCC5A2;  /* hand-drawn tan line */

  /* Derived tints (refinable) */
  --site-color-accent-deep: #A5501C;   /* hover / pressed amber */
  --site-color-fg-soft: rgba(43, 27, 16, 0.68); /* captions, meta */
  --site-color-on-accent: #FBF4E8;     /* text on accent fills */
  --site-color-ink-wash: rgba(43, 27, 16, 0.55); /* photo overlays for legibility */

  /* ---- Type roles ---- */
  --site-font-display: "Fraunces", "Georgia", serif;  /* titles + wordmark only */
  --site-font-body: "Karla", "Helvetica Neue", Arial, sans-serif; /* everything else */

  --site-display-weight: 700;
  --site-display-optical: "opsz" 144;   /* Fraunces variable optical size at title scale */
  --site-body-weight: 400;
  --site-leading-display: 1.02;
  --site-leading-body: 1.6;
  --site-tracking-caps: 0.14em;         /* nav labels, eyebrows */

  /* ---- Spacing scale (px) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 72px;
  --space-8: 112px;

  /* ---- Structure (from clone law) ---- */
  --radius-sm: 8px;
  --radius-lg: 24px;
  --site-max-width: 1200px;

  /* ---- Signature moves ---- */
  --tilt-1: -1.5deg;   /* photo/card rotations — the pinned-print habit */
  --tilt-2: 2deg;
  --frame-ink: 2px solid var(--site-color-fg); /* wobbly hand-frame stand-in */
}

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

/* ============================================================
   Townhouse Cartagena — Colour System, Variant 1 (rebuilt)
   "Cream Editorial on Proper White"
   ------------------------------------------------------------
   Hotelier instruction honoured: started over with proper
   black-and-white poles and a WHITE page background.
   The locked brand core stays intact, reassigned around it:
     · #FFFFFF  → the page ground (proper white, per hotelier)
     · #2B1B10  → brand ink LEADS: text & structural weight,
                  anchored by true #000000 display headlines
     · #FBF4E8  → brand cream steps back to raised surface /
                  editorial panels floating on the white sheet
     · #CE7231  → brand rust as RARE editorial punctuation —
                  one keyline, one pull-quote bar, one button
     · #F3E6D0  → brand muted recedes into quiet fills & wells
     · #DCC5A2  → brand taupe draws the hairline section rules
   Faithful to the cloned site's LIGHT ground; restraint as power.
   ============================================================ */

:root {
  /* ---------- Ground & surfaces (white sheet, cream panels) ---------- */
  --site-color-bg:                 #FFFFFF;  /* proper white page ground (hotelier)     */
  --site-color-bg-subtle:          #FDFBF7;  /* barely-warm white for long-read bands   */
  --site-color-surface:            #FBF4E8;  /* brand cream — cards, editorial panels   */
  --site-color-surface-raised:     #FFFFFF;  /* white card lifted on a cream section    */
  --site-color-surface-sunken:     #F3E6D0;  /* brand muted — inset wells, quote blocks */
  --site-color-surface-inverse:    #2B1B10;  /* brand ink — dark feature bands, footer  */

  /* ---------- Ink / foreground (black-and-white voice) ---------- */
  --site-color-fg:                 #2B1B10;  /* brand ink leads all running text        */
  --site-color-ink:                #2B1B10;  /* alias: the typographic constant         */
  --site-color-ink-strong:         #000000;  /* true black — masthead, display, wordmark */
  --site-color-fg-secondary:       #52402F;  /* standfirsts, secondary copy             */
  --site-color-fg-muted:           #7A6350;  /* captions, bylines, metadata             */
  --site-color-fg-faint:           #A8907A;  /* placeholders, disabled labels           */
  --site-color-fg-inverse:         #FFFFFF;  /* proper white type on dark bands         */
  --site-color-fg-inverse-soft:    #FBF4E8;  /* brand cream as the softened inverse     */

  /* ---------- Primary (structural black-brown weight) ---------- */
  --site-color-primary:            #2B1B10;  /* ink buttons, nav underline, folio bars  */
  --site-color-primary-hover:      #17100A;
  --site-color-primary-active:     #000000;
  --site-color-primary-fg:         #FFFFFF;  /* white on primary                        */
  --site-color-primary-tint:       #F3E6D0;  /* brand muted as primary's quiet echo     */

  /* ---------- Accent (rust — one deliberate note per view) ---------- */
  --site-color-accent:             #CE7231;  /* brand rust — the single loud gesture    */
  --site-color-accent-hover:       #B65F22;
  --site-color-accent-active:      #9E4F1A;
  --site-color-accent-fg:          #FFFFFF;  /* white on accent                         */
  --site-color-accent-tint:        #FAE9DB;  /* whisper of rust — highlight wash        */
  --site-color-accent-deep:        #8A4416;  /* rust as small accent text on white (AA) */

  /* ---------- Muted & quiet hierarchy ---------- */
  --site-color-muted:              #F3E6D0;  /* brand muted — chips, secondary fills    */
  --site-color-muted-fg:           #52402F;  /* legible ink on muted fill               */
  --site-color-muted-hover:        #ECDCC0;

  /* ---------- Borders, rules & dividers (print rhythm) ---------- */
  --site-color-border:             #DCC5A2;  /* brand taupe — hairline section rules    */
  --site-color-border-subtle:      #EFE6D6;  /* faint inner grids, table lines          */
  --site-color-border-strong:      #2B1B10;  /* editorial black rule — pull-quote bar   */
  --site-color-border-accent:      #CE7231;  /* the rust keyline / deliberate underline */
  --site-color-border-inverse:     #4A3626;  /* dividers inside dark bands              */

  /* ---------- Interaction states ---------- */
  --site-color-link:               #2B1B10;  /* links read as ink, underlined           */
  --site-color-link-hover:         #CE7231;  /* rust reveals on hover — the punctuation */
  --site-color-link-underline:     rgba(206, 114, 49, 0.45);
  --site-color-focus-ring:         #CE7231;
  --site-color-focus-halo:         rgba(206, 114, 49, 0.25);
  --site-color-selection-bg:       #F3E6D0;
  --site-color-selection-fg:       #2B1B10;
  --site-color-hover-wash:         rgba(43, 27, 16, 0.04);  /* row / card hover veil   */
  --site-color-press-wash:         rgba(43, 27, 16, 0.09);

  /* ---------- Overlays, scrims & shadow (warm, never grey) ---------- */
  --site-color-overlay:            rgba(20, 12, 6, 0.55);   /* photo scrim, white type */
  --site-color-overlay-strong:     rgba(20, 12, 6, 0.78);   /* modal / hero deep scrim */
  --site-color-overlay-soft:       rgba(255, 255, 255, 0.85); /* white veil on texture */
  --site-color-shadow:             rgba(43, 27, 16, 0.10);
  --site-color-shadow-strong:      rgba(43, 27, 16, 0.24);

  /* ---------- Semantic roles (kept in the warm register) ---------- */
  --site-color-success:            #4E6B3F;  /* olive — availability, confirmations     */
  --site-color-success-bg:         #EFF2E7;
  --site-color-warning:            #A66A12;  /* burnished amber — notices               */
  --site-color-warning-bg:         #FAF0DC;
  --site-color-danger:             #96351F;  /* clay red — errors, sold out             */
  --site-color-danger-bg:          #F9E8E2;
  --site-color-info:               #3E5566;  /* sea slate — informational asides        */
  --site-color-info-bg:            #EAF0F3;

  /* ---------- Component conveniences ---------- */
  --site-color-header-bg:          #FFFFFF;  /* white masthead, black wordmark          */
  --site-color-header-fg:          #2B1B10;
  --site-color-footer-bg:          #2B1B10;  /* inverse footer — cream logo glows       */
  --site-color-footer-fg:          #FBF4E8;
  --site-color-footer-muted:       #C8A985;
  --site-color-card-bg:            #FBF4E8;
  --site-color-card-border:        #DCC5A2;
  --site-color-badge-bg:           #2B1B10;
  --site-color-badge-fg:           #FBF4E8;
  --site-color-input-bg:           #FFFFFF;
  --site-color-input-border:       #DCC5A2;
  --site-color-input-fg:           #2B1B10;
  --site-color-input-placeholder:  #A8907A;
}

/* Townhouse Cartagena — Typography & Rhythm v3 · "Ornamental Abundance"
   Fraunces flows through display AND body at staggered optical sizes; Karla whispers in UI.
   Typography as ornament: amber numerals, tan hand-rules, fleuron breaks — a hand-annotated journal. */
:root {
  /* families — serif-led, sans demoted to labels/buttons/meta */
  --site-font-display: "Fraunces", "Georgia", serif;
  --site-font-body: "Fraunces", "Georgia", serif;
  --site-font-ui: "Karla", "Helvetica Neue", Arial, sans-serif;
  --site-font-accent: "Fraunces", "Georgia", serif;      /* italic margin notes, pull-quotes */

  /* voice — black display vs light book serif; equal visual presence */
  --site-font-display-weight: 900;
  --site-font-display-weight-soft: 620;                  /* card titles, sub-heads */
  --site-font-display-style: normal;
  --site-font-display-settings: "opsz" 144, "SOFT" 55, "WONK" 1;   /* painterly wonk at scale */
  --site-font-subhead-settings: "opsz" 72, "SOFT" 40;
  --site-font-body-weight: 360;                          /* Fraunces variable light-book */
  --site-font-body-weight-strong: 580;
  --site-font-body-settings: "opsz" 13, "SOFT" 0;
  --site-font-accent-style: italic;
  --site-font-accent-settings: "opsz" 40, "SOFT" 100;    /* dreamy soft italic */
  --site-font-ui-weight: 700;

  /* scale — ratio 1.414 (augmented fourth): Deco stagger, base 18px journal page */
  --site-type-ratio: 1.414;
  --site-type-xs: 0.75rem;                               /* folios, margin numerals */
  --site-type-sm: 0.875rem;                              /* caps labels, captions   */
  --site-type-base: 1.125rem;                            /* serif body, 18px        */
  --site-type-md: 1.4375rem;                             /* lead paragraphs         */
  --site-type-lg: clamp(1.59rem, 1.35rem + 1vw, 1.79rem);        /* h4 */
  --site-type-xl: clamp(2rem, 1.55rem + 2vw, 2.53rem);           /* h3 */
  --site-type-2xl: clamp(2.65rem, 1.9rem + 3.4vw, 3.58rem);      /* h2 */
  --site-type-3xl: clamp(3.4rem, 2.2rem + 5.4vw, 5.06rem);       /* h1 */
  --site-type-hero: clamp(4rem, 2.4rem + 7.6vw, 7.15rem);

  /* leading — air and rhythm; nothing compressed */
  --site-leading-hero: 1.1;
  --site-leading-display: 1.15;
  --site-leading-heading: 1.28;
  --site-leading-body: 1.8;
  --site-leading-lead: 1.65;
  --site-leading-meta: 1.45;

  /* tracking — serif breathes, caps stretch ornamental-wide */
  --site-tracking-display: -0.005em;
  --site-tracking-body: 0.012em;
  --site-tracking-accent: 0.006em;
  --site-tracking-caps: 0.24em;                          /* eyebrows, nav, buttons */
  --site-tracking-numeral: 0.1em;                        /* amber margin numerals  */

  /* measure — generous columns with annotated margins */
  --site-measure-body: 60ch;
  --site-measure-lead: 44ch;
  --site-measure-narrow: 30ch;                           /* margin notes */
  --site-measure-display: 16ch;

  /* ornament — type as decoration */
  --site-ornament-color: var(--site-color-accent);       /* bullets, numerals, breaks */
  --site-rule: 1px solid var(--site-color-border);       /* hand-drawn tan rule       */
  --site-rule-heavy: 3px double var(--site-color-border);/* section seams             */
  --site-divider-glyph: "\2766";                         /* ❦ fleuron between passages */
  --site-bullet-glyph: "\25C6";                          /* ◆ amber diamond bullets    */
  --site-dropcap-size: 3.5em;
  --site-dropcap-weight: 900;
  --site-numeral-size: var(--site-type-xs);
  --site-band-alt-bg: var(--site-color-muted);           /* sand/ivory alternating bands */

  /* spacing (px) — brand scale, abundant upper register */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 12px;
  --site-space-4: 20px;
  --site-space-5: 32px;
  --site-space-6: 48px;
  --site-space-7: 72px;
  --site-space-8: 112px;
  --site-space-section: clamp(80px, 7vw + 48px, 128px);
  --site-space-stack: var(--site-space-4);
  --site-flow-heading: 0.75em;
  --site-flow-body: 1.5em;                               /* loose journal paragraphs */

  /* motion — languid, candlelit; hospitality-slow reveals, velvet hovers */
  --site-motion-duration-hover: 240ms;
  --site-motion-duration: 480ms;
  --site-motion-duration-slow: 840ms;
  --site-motion-duration-reveal: 1100ms;
  --site-motion-ease: cubic-bezier(0.45, 0.05, 0.25, 1);
  --site-motion-ease-out: cubic-bezier(0.19, 1, 0.32, 1);
  --site-motion-ease-hover: cubic-bezier(0.33, 1, 0.68, 1);
  --site-motion-stagger: 130ms;                          /* cascading, line by line */
  --site-motion-reveal-distance: 28px;
  --site-motion-reveal-blur: 6px;                        /* soft-focus arrival */

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

/* The hotel's handwritten caps — "uglydave", ingested from its own Wix
   build to the hotel CDN. Declared here (tokens.css is loaded on every
   page) so /venues, the footer and /thc all share one download. */
@font-face {
  font-family: 'uglydave';
  src: url('https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01M00RK52Z6B5BAKD4GVY5S2B8.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}


/* brand */
/* ============================================================
   Townhouse Cartagena — global finish layer.

   Two jobs:
     1. the baseline refinements every theme wants;
     2. the .th-band utility — this house's section punctuation.

   The band assets and marks themselves live in tokens/palette.css
   (they are the palette here — the page has no other chroma).
   ============================================================ */

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

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

::selection {
  background: var(--site-color-accent);
  color: var(--site-color-accent-fg);
}

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

/* ============================================================
   THE PAINTED BAND

   The source's section punctuation: a photographed brush stroke
   carrying a short, loud line. A band sizes to its own content and
   stretches its stroke to fit — `100% 100%` on purpose, because a
   stroke is ONE gesture and tiling it would betray the hand.

   Because the stroke is a ragged shape on transparency, content
   must be inset from the band's edges or it will hang off the paint.
   That is what --th-band-inset is for; tune it per band.

   Usage:
     <section class="th-band th-band--green">
       <div class="th-band__in"> … </div>
     </section>
   ============================================================ */
.th-band {
  --th-band-inset: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.th-band__in {
  position: relative;
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--th-band-inset);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.th-band--hero   { background-image: var(--th-band-hero); }
.th-band--green  { background-image: var(--th-band-green); }
.th-band--amber  { background-image: var(--th-band-amber); }
.th-band--green2 { background-image: var(--th-band-green2); }
.th-band--black  { background-image: var(--th-band-black); }
.th-band--wash   { background-image: var(--th-band-wash); }
.th-band--amber2 { background-image: var(--th-band-amber2); }
.th-band--taupe  { background-image: var(--th-band-taupe); }
.th-band--amber3 { background-image: var(--th-band-amber3); }
.th-band--pink   { background-image: var(--th-band-pink); }

/* bands that carry white lettering */
.th-band--green .th-band__in,
.th-band--green2 .th-band__in,
.th-band--black .th-band__in,
.th-band--wash .th-band__in {
  color: var(--site-color-fg-inverse);
}

/* On a phone the stroke gets tall and thin and the paint runs out
   from under the copy. Let it crop rather than distort. */
@media (max-width: 700px) {
  .th-band {
    --th-band-inset: clamp(1.25rem, 5vw, 2rem);
    background-size: cover;
  }
}


/* chrome components */

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


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


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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


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


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


/* ==================================================================
   1 · the booking strip — the source's transactional anchor, a ~40px
   dark bar; its content sits on the ~1200px sheet like the source's
   ================================================================== */
.th-util[data-v-a39e01ca] { background: #3D3D3D; color: #FFFFFF; margin: 0;
}
.th-util__in[data-v-a39e01ca] {
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  min-height: 40px;
  padding: 4px var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4, 20px);
  flex-wrap: wrap;
}
.th-util__promise[data-v-a39e01ca] {
  margin: 0;
  font-family: var(--site-font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.th-util__fields[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.th-util__field[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--site-font-body);
  font-size: 12px;
  color: #FFFFFF;
}
.th-util__field input[data-v-a39e01ca] {
  appearance: none;
  border: 0;
  border-radius: 2px;
  padding: 4px 6px;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--site-font-body);
  font-size: 12px;
  line-height: 1.2;
}
.th-util__field input[data-v-a39e01ca]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--site-color-accent);
}
.th-util__search[data-v-a39e01ca] {
  appearance: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  min-height: 26px;
  padding: 4px 22px;
  background: #FFFFFF;
  color: #000000;
  font-family: var(--site-font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-util__search[data-v-a39e01ca]:hover,
.th-util__search[data-v-a39e01ca]:focus-visible {
  background: var(--site-color-accent);
  color: #FFFFFF;
  outline: none;
}

/* ==================================================================
   2 · the house bar — strip 40 + bar 122 = the source's 162px header.
   ONE COMPOSED LINE, centred: max-content width, small zone gaps
   (the source packs its zones 13–31px apart), no flex-grow spreading.
   It grows past 1200px when it must and never wraps.
   ================================================================== */
.th-hdr[data-v-a39e01ca] {
  /* in flow, not sticky — the source's header scrolls away with the page */
  position: relative;
  z-index: 1000; /* nav panels must clear the concierge (998–999) */
  background: var(--site-color-bg);
}
.th-hdr__bar[data-v-a39e01ca] {
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  min-height: clamp(80px, 8.5vw, 122px);
  padding: var(--site-space-2, 8px) clamp(14px, 1.6vw, 26px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 27px);
  min-width: 0;
}
.th-hdr__social[data-v-a39e01ca] { flex: 0 0 auto; order: -2;
}
.th-hdr__social[data-v-a39e01ca] a,
.th-hdr__social[data-v-a39e01ca] button { color: var(--site-color-fg);
}

/* the social marks — grey profile icons, WhatsApp in its own green,
   HAND-SCATTERED like the source pins them: measured y-offsets of
   −7 / +2 / 0 px and gaps of 14 then 8 px, repeating per slot so a
   fourth icon starts the same loose rhythm again */
.th-hdr__soc[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  order: -1;
  flex: 0 0 auto;
}
.th-hdr__soc li + li[data-v-a39e01ca] { margin-left: 8px;
}
.th-hdr__soc li[data-v-a39e01ca]:nth-child(3n + 1) { transform: translateY(-7px);
}
.th-hdr__soc li[data-v-a39e01ca]:nth-child(3n + 2) { transform: translateY(2px); margin-left: 14px;
}
.th-hdr__soc li[data-v-a39e01ca]:first-child { margin-left: 0;
}
.th-hdr__soc-btn[data-v-a39e01ca] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: #9A9A9A;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__soc-btn--whatsapp[data-v-a39e01ca] { color: #2CB742;
}
.th-hdr__soc-btn[data-v-a39e01ca]:hover,
.th-hdr__soc-btn[data-v-a39e01ca]:focus-visible { color: var(--site-color-accent); outline: none;
}
.th-hdr__soc-btn[data-v-a39e01ca]:focus-visible {
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}
.th-hdr__soc-btn[data-v-a39e01ca] svg {
  width: 24px;
  height: 24px;
  display: block;
  fill: currentColor;
}
.th-hdr__brand[data-v-a39e01ca] {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--site-color-fg);
}
.th-hdr__logo[data-v-a39e01ca] {
  display: block;
  height: clamp(52px, 5vw, 71px);
  width: auto;
  max-width: min(36vw, 140px);
  object-fit: contain;
  object-position: left center;
}
.th-hdr__wordmark[data-v-a39e01ca] {
  font-family: var(--site-font-ui);
  font-size: 1.15rem;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}
.th-hdr__brand[data-v-a39e01ca]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 4px;
}
.th-hdr__nav[data-v-a39e01ca] { flex: 0 1 auto; min-width: 0;
}
.th-hdr__list[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* the line never breaks — the burger takes over below */
  gap: clamp(12px, 2vw, 29px);
  min-width: 0;
}
.th-hdr__item[data-v-a39e01ca] { flex: 0 0 auto;
}

/* The source sets the bar in CAPS. Its own labels are written that way
   in the content; ours come from amenity RECORDS, which are Title Case
   ("Rooftop", "Lobby Bar"), so the caps have to be applied here or the
   bar reads a full weight lighter than the original. */
.th-hdr[data-v-a39e01ca] .th-nav-link,
.th-hdr .th-nav-link[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 14px 1px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr[data-v-a39e01ca] .th-nav-link:hover,
.th-hdr .th-nav-link[data-v-a39e01ca]:hover,
.th-hdr[data-v-a39e01ca] .th-nav-link[aria-expanded="true"],
.th-hdr[data-v-a39e01ca] .th-nav-link.router-link-active,
.th-hdr .th-nav-link.router-link-active[data-v-a39e01ca],
.th-hdr[data-v-a39e01ca] .th-nav-link[aria-current="page"],
.th-hdr .th-nav-link[aria-current="page"][data-v-a39e01ca] { color: var(--site-color-accent);
}
.th-hdr[data-v-a39e01ca] .th-nav-link:focus-visible,
.th-hdr .th-nav-link[data-v-a39e01ca]:focus-visible {
  outline: none;
  color: var(--site-color-accent);
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 4px;
}

/* the SDK's dropdown caret renders as a stray vertical bar in the hand
   font — the source's EAT & DRINK / MORE carry no indicator at all */
.th-hdr[data-v-a39e01ca] .sdk-navgrp__caret { display: none;
}

/* the source's dropdown has NO card at all — just the hand-lettered
   entries floating below the trigger on the white sheet */
.th-hdr[data-v-a39e01ca] .sdk-navgrp__panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0 0;
  min-width: 0;
}
.th-hdr[data-v-a39e01ca] .sdk-navgrp__panel a {
  display: block;
  padding: 5px 8px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr[data-v-a39e01ca] .sdk-navgrp__panel a:hover,
.th-hdr[data-v-a39e01ca] .sdk-navgrp__panel a:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* ---- the instant-book cluster ---- */
.th-instant[data-v-a39e01ca] { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 0 0 auto;
}
.th-instant__label[data-v-a39e01ca] {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--site-color-fg);
  white-space: nowrap;
}
.th-instant__row[data-v-a39e01ca] { display: flex; align-items: center; gap: 6px;
}
.th-instant[data-v-a39e01ca] .th-plaque { text-transform: uppercase;
}

/* ---- the two round flags, closing the line (source: 20×20, 23px
   apart, just right of the plaques) ---- */
.th-hdr__flags[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: 0 0 auto;
  margin-left: -8px; /* source: only ~13px from the plaques */
}
.th-hdr__flag[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 3px;
  line-height: 0;
  opacity: 0.6;
  transition: opacity var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__flag--current[data-v-a39e01ca] { opacity: 1; cursor: default;
}
.th-hdr__flag[data-v-a39e01ca]:hover,
.th-hdr__flag[data-v-a39e01ca]:focus-visible { opacity: 1; outline: none;
}
.th-hdr__flag[data-v-a39e01ca]:focus-visible {
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 50%;
}
.th-hdr__flag-img[data-v-a39e01ca] {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.th-hdr__flag-code[data-v-a39e01ca] {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  text-transform: uppercase;
  color: var(--site-color-fg);
}

/* the extra-tongues dropdown — only mounts from the third language on */
.th-hdr__flags-more[data-v-a39e01ca] { position: relative;
}
.th-hdr__flags-toggle[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
  color: var(--site-color-fg);
  display: inline-flex;
  align-items: center;
}
.th-hdr__flags-toggle[data-v-a39e01ca]:hover,
.th-hdr__flags-toggle[data-v-a39e01ca]:focus-visible { color: var(--site-color-accent); outline: none;
}
.th-hdr__flags-panel[data-v-a39e01ca] {
  list-style: none;
  margin: 6px 0 0;
  padding: var(--site-space-2, 8px);
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 30;
  background: var(--site-color-bg);
  border: 2px solid var(--site-color-fg);
  border-radius: 12px 10px 13px 11px; /* drawn, not ruled */
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.4);
  min-width: 150px;
}
.th-hdr__flags-item[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border-radius: 8px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  text-transform: uppercase;
  color: var(--site-color-fg);
  transition:
    color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease),
    background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-hdr__flags-item[data-v-a39e01ca]:hover,
.th-hdr__flags-item[data-v-a39e01ca]:focus-visible {
  color: var(--site-color-accent);
  background: var(--site-color-muted);
  outline: none;
}
.th-hdr__burger[data-v-a39e01ca] {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 9px;
  color: var(--site-color-fg);
}
.th-hdr__burger[data-v-a39e01ca]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}

/* the whole line only fits above ~1240px once seven places are named */
@media (max-width: 1240px) {
.th-hdr__bar[data-v-a39e01ca] { width: auto;
}
.th-hdr__nav[data-v-a39e01ca],
  .th-hdr__social[data-v-a39e01ca],
  .th-hdr__flags[data-v-a39e01ca],
  .th-instant__label[data-v-a39e01ca] { display: none;
}
  /* the Instagram / WhatsApp marks STAY in the bar on small screens */
.th-instant[data-v-a39e01ca] { margin-left: auto;
}
.th-hdr__burger[data-v-a39e01ca] { display: inline-flex;
}
}
@media (max-width: 760px) {
.th-instant__row .th-plaque[data-v-a39e01ca] { min-width: 68px; padding-inline: 12px;
}
}
@media (max-width: 620px) {
.th-hdr__logo[data-v-a39e01ca] { height: 44px; max-width: 17vw;
}
  /* the phone bar carries icons + logo + both plaques + the burger:
     tighten every zone so nothing wraps or clips at 390px */
.th-hdr__bar[data-v-a39e01ca] { gap: 8px; padding-inline: 10px;
}
.th-hdr__soc li + li[data-v-a39e01ca] { margin-left: 4px;
}
.th-hdr__soc li[data-v-a39e01ca]:nth-child(3n + 2) { margin-left: 8px;
}
.th-hdr__soc-btn[data-v-a39e01ca] { width: 24px; height: 24px;
}
.th-hdr__soc-btn[data-v-a39e01ca] svg { width: 20px; height: 20px;
}
.th-util__in[data-v-a39e01ca] { justify-content: center; text-align: center; padding-block: 8px; row-gap: 6px;
}
.th-util__promise[data-v-a39e01ca] { width: 100%; font-size: 12px;
}
  /* one tidy grid instead of a ragged three-row wrap */
.th-util__fields[data-v-a39e01ca] {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 10px;
}
.th-util__field[data-v-a39e01ca] { justify-content: space-between; gap: 5px; font-size: 11px; white-space: nowrap;
}
.th-util__field input[data-v-a39e01ca] { width: 106px; min-width: 0; min-height: 26px;
}
.th-util__search[data-v-a39e01ca] { grid-column: 1 / -1; justify-self: center; min-width: 170px; min-height: 30px;
}
}

/* ==================================================================
   Drawer
   ================================================================== */
.th-overlay[data-v-a39e01ca] { position: fixed; inset: 0; z-index: 1200;
}
.th-overlay__backdrop[data-v-a39e01ca] {
  position: absolute;
  inset: 0;
  background: var(--site-color-ink-wash, rgba(0, 0, 0, 0.55));
  cursor: pointer;
}
.th-drawer[data-v-a39e01ca] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 88%);
  display: flex;
  flex-direction: column;
  background: var(--site-color-bg);
  border-left: 2px solid var(--site-color-fg);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.th-drawer__top[data-v-a39e01ca] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-3, 12px);
  padding: var(--site-space-4, 20px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  border-bottom: 2px solid var(--site-color-fg);
}
.th-drawer__brand[data-v-a39e01ca] {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  text-decoration: none;
  color: var(--site-color-fg);
}
.th-drawer__logo[data-v-a39e01ca] { display: block; height: 46px; width: auto; max-width: 55vw; object-fit: contain;
}
.th-drawer__wordmark[data-v-a39e01ca] {
  font-family: var(--site-font-ui);
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.th-drawer__x[data-v-a39e01ca] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  color: var(--site-color-fg);
}
.th-drawer__x[data-v-a39e01ca]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--site-color-bg), 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}
.th-drawer__nav[data-v-a39e01ca] {
  flex: 1 1 auto;
  padding: var(--site-space-5, 32px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
}
.th-drawer__list[data-v-a39e01ca] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--site-space-2, 8px);
}
.th-drawer__item[data-v-a39e01ca] {
  border-bottom: 1px solid var(--site-color-border);
  padding-bottom: var(--site-space-2, 8px);
}
.th-drawer__item[data-v-a39e01ca]:last-child { border-bottom: 0;
}
.th-drawer[data-v-a39e01ca] .th-drawer__link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-family: var(--site-font-ui);
  font-size: clamp(1.15rem, 4.6vw, 1.45rem);
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--site-color-fg);
  text-decoration: none;
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-drawer[data-v-a39e01ca] .th-drawer__link:hover,
.th-drawer[data-v-a39e01ca] .th-drawer__link:focus-visible,
.th-drawer[data-v-a39e01ca] .th-drawer__link.router-link-active,
.th-drawer[data-v-a39e01ca] .th-drawer__link[aria-current="page"] {
  color: var(--site-color-accent);
  outline: none;
}
.th-drawer__nav[data-v-a39e01ca] a { text-decoration: none; color: inherit;
}
.th-drawer__nav[data-v-a39e01ca] a:not(.th-drawer__link) {
  display: block;
  padding: 7px 0 7px var(--site-space-4, 20px);
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  color: var(--site-color-fg-muted);
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-drawer__nav[data-v-a39e01ca] a:not(.th-drawer__link):hover,
.th-drawer__nav[data-v-a39e01ca] a:not(.th-drawer__link):focus-visible {
  color: var(--site-color-accent);
  outline: none;
}
.th-drawer__foot[data-v-a39e01ca] {
  padding: var(--site-space-4, 20px) var(--site-gutter, clamp(1.25rem, 4vw, 3rem)) var(--site-space-5, 32px);
  border-top: 2px solid var(--site-color-fg);
  display: flex;
  flex-direction: column;
  gap: var(--site-space-3, 12px);
}
.th-drawer__lang[data-v-a39e01ca] select {
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  border: 1px solid var(--site-color-fg);
  border-radius: 7px 5px 8px 6px;
  padding: 6px 8px;
  background: var(--site-color-bg);
  color: var(--site-color-fg);
}
.thdrawer-enter-active[data-v-a39e01ca],
.thdrawer-leave-active[data-v-a39e01ca] { transition: opacity var(--site-motion-duration, 320ms) var(--site-motion-ease, ease);
}
.thdrawer-enter-active .th-drawer[data-v-a39e01ca],
.thdrawer-leave-active .th-drawer[data-v-a39e01ca] {
  transition: transform var(--site-motion-duration-slow, 520ms) var(--site-motion-ease-out, ease-out);
}
.thdrawer-enter-from[data-v-a39e01ca],
.thdrawer-leave-to[data-v-a39e01ca] { opacity: 0;
}
.thdrawer-enter-from .th-drawer[data-v-a39e01ca],
.thdrawer-leave-to .th-drawer[data-v-a39e01ca] { transform: translateX(102%);
}
@media (prefers-reduced-motion: reduce) {
.th-hdr[data-v-a39e01ca] .th-nav-link,
  .th-hdr .th-nav-link[data-v-a39e01ca],
  .th-hdr__soc-btn[data-v-a39e01ca],
  .th-hdr__flag[data-v-a39e01ca],
  .th-drawer[data-v-a39e01ca] .th-drawer__link,
  .th-util__search[data-v-a39e01ca],
  .thdrawer-enter-active[data-v-a39e01ca],
  .thdrawer-leave-active[data-v-a39e01ca],
  .thdrawer-enter-active .th-drawer[data-v-a39e01ca],
  .thdrawer-leave-active .th-drawer[data-v-a39e01ca] { transition: none;
}
}


/* =====================================================================
   THE THEME LAYER — Townhouse Cartagena
   ---------------------------------------------------------------------
   WHY THIS LIVES IN THE HEADER, AND NOT IN tokens.css
   ---------------------------------------------------------------------
   tokens.css is a BUILD ARTIFACT. It is recomposed from the design
   graph on every build ("composed: design-graph tokens") and hand edits
   to it — or to tokens/palette.css, tokens/type.css, brand.css — are
   discarded. Verified three times: the emitted bundle kept the old
   Fraunces/Karla/#CE7231 values and produced a byte-identical CSS hash
   after each write. Only .vue files and primitives/*.css reach the
   bundle.

   So the theme lands here, in the one component that is global chrome,
   always mounted on every route, and already owns a documented
   non-scoped global write (--site-header-h, at the end of this block).

   This is a WORKAROUND, not the resting place. When the design graph
   can be updated for this hotel, move the three sections below into it
   verbatim and delete them from here.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1 · THE FONT BRIDGE
   Five hand-lettered faces that are NOT Google fonts, plus the body
   workhorse. The SDK's font pipeline emits a Google URL for any brand
   face it does not recognise; that resolves to nothing and falls back
   to system-ui, silently. The hand faces are the hotel's own uploads;
   the body face is the hotel's licensed Helvetica WORLD webfont
   (helvetica-w01) — NOT the system's Helvetica Neue, which is visibly
   narrower and re-wraps every measure on the page. All are served with
   `access-control-allow-origin: *`.
   --------------------------------------------------------------------- */
@font-face {
  font-family: "TH Marker";
  src: url("https://static.wixstatic.com/ufonts/7025d5_650e1257ccfd4b909e828fa605ac5fcd/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/7025d5_650e1257ccfd4b909e828fa605ac5fcd/woff/file.woff") format("woff");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "TH Hand";
  src: url("https://static.wixstatic.com/ufonts/b2babf_ebf0c578cede41149f523f8e31066f7c/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_ebf0c578cede41149f523f8e31066f7c/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Head";
  src: url("https://static.wixstatic.com/ufonts/b2babf_0de8441de97d4364880d4bf769d1fedf/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_0de8441de97d4364880d4bf769d1fedf/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Quote";
  src: url("https://static.wixstatic.com/ufonts/b2babf_e7f6b929462949eba3e71e4507cd4ceb/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_e7f6b929462949eba3e71e4507cd4ceb/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Chalk";
  src: url("https://static.wixstatic.com/ufonts/b2babf_923327a896da41408224304c10d8f84a/woff2/file.woff2") format("woff2"),
       url("https://static.wixstatic.com/ufonts/b2babf_923327a896da41408224304c10d8f84a/woff/file.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/8eac109b-0fa9-42bf-a305-43e471e23779/v1/helvetica-w01-light.woff2") format("woff2");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/2af1bf48-e783-4da8-9fa0-599dde29f2d5/v1/helvetica-w01-roman.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "TH Body";
  src: url("https://static.parastorage.com/fonts/v2/2f12de04-5ca4-4ada-9e66-a958673b12b5/v1/helvetica-w01-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

/* ---------------------------------------------------------------------
   2 · TOKENS
   !important throughout: the graph-composed tokens.css also writes
   :root, so specificity ties and source order would otherwise decide.
   --------------------------------------------------------------------- */
:root {
  --site-color-bg:              #FFFFFF !important;
  --site-color-bg-subtle:       #FFFFFF !important;
  --site-color-surface:         #FFFFFF !important;
  --site-color-surface-raised:  #FFFFFF !important;
  --site-color-surface-sunken:  #F6F5F5 !important;
  --site-color-surface-inverse: #000000 !important;

  --site-color-fg:              #000000 !important;
  --site-color-ink:             #000000 !important;
  --site-color-ink-strong:      #000000 !important;
  --site-color-fg-secondary:    #2E2E2E !important;
  --site-color-fg-muted:        #555555 !important;
  --site-color-fg-soft:         #555555 !important;
  --site-color-fg-faint:        #8A8A8A !important;
  --site-color-fg-inverse:      #FFFFFF !important;
  --site-color-fg-inverse-soft: #FFFFFF !important;

  --site-color-primary:         #000000 !important;
  --site-color-primary-hover:   #000000 !important;
  --site-color-primary-active:  #000000 !important;
  --site-color-primary-fg:      #FFFFFF !important;
  --site-color-primary-tint:    #F6F5F5 !important;

  --site-color-accent:          #DC992F !important;
  --site-color-accent-hover:    #C4841F !important;
  --site-color-accent-active:   #A76D14 !important;
  --site-color-accent-fg:       #FFFFFF !important;
  --site-color-accent-tint:     #FBF0DE !important;
  --site-color-accent-deep:     #8A5A0F !important;
  --site-color-on-accent:       #FFFFFF !important;

  --site-color-paint-amber:     #E9A03A;
  --site-color-paint-green:     #4E8C5B;
  --site-color-paint-forest:    #2F6B3C;
  --site-color-paint-pink:      #F23D8F;
  --site-color-paint-taupe:     #9A8F80;

  --site-color-muted:           #F6F5F5 !important;
  --site-color-muted-fg:        #555555 !important;
  --site-color-muted-hover:     #EDEDED !important;

  --site-color-border:          #E2E2E2 !important;
  --site-color-border-subtle:   #F0F0F0 !important;
  --site-color-border-strong:   #000000 !important;
  --site-color-border-accent:   #DC992F !important;
  --site-color-border-inverse:  #3A3A3A !important;

  --site-color-link:            #000000 !important;
  --site-color-link-hover:      #DC992F !important;
  --site-color-focus-ring:      #DC992F !important;
  --site-color-selection-bg:    #FBF0DE !important;
  --site-color-selection-fg:    #000000 !important;

  --site-color-overlay:         rgba(0, 0, 0, 0.5) !important;
  --site-color-overlay-strong:  rgba(0, 0, 0, 0.78) !important;
  --site-color-ink-wash:        rgba(0, 0, 0, 0.55) !important;
  --site-color-shadow:          rgba(0, 0, 0, 0.10) !important;
  --site-color-shadow-strong:   rgba(0, 0, 0, 0.24) !important;

  --site-color-header-bg:       #FFFFFF !important;
  --site-color-header-fg:       #000000 !important;
  --site-color-footer-bg:       #FFFFFF !important;
  --site-color-footer-fg:       #000000 !important;
  --site-color-footer-muted:    #555555 !important;
  --site-color-card-bg:         #FFFFFF !important;
  /* measured off the source's room cards: a dusty lavender rule */
  --site-color-card-border:     #CABDCD !important;
  --site-color-input-bg:        #FFFFFF !important;
  --site-color-input-border:    #CFCFCF !important;
  --site-color-input-fg:        #000000 !important;

  --site-font-display: "TH Marker", "Trebuchet MS", sans-serif !important;
  --site-font-hand:    "TH Head", "Comic Sans MS", cursive !important;
  --site-font-ui:      "TH Hand", "Trebuchet MS", sans-serif !important;
  --site-font-quote:   "TH Quote", "Comic Sans MS", cursive !important;
  --site-font-chalk:   "TH Chalk", "Comic Sans MS", cursive !important;
  --site-font-body:    "TH Body", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  --site-font-accent:  "TH Head", "Comic Sans MS", cursive !important;

  --site-font-display-weight: 700 !important;
  --site-font-display-weight-soft: 400 !important;
  --site-font-display-settings: normal !important;
  --site-font-subhead-settings: normal !important;
  --site-font-body-weight: 400 !important;
  --site-font-body-settings: normal !important;
  --site-font-accent-style: normal !important;
  --site-font-accent-settings: normal !important;
  --site-font-ui-weight: 400 !important;
  --site-display-weight: 700 !important;
  --site-body-weight: 400 !important;

  --site-type-xs:   0.625rem !important;
  --site-type-sm:   0.75rem !important;
  --site-type-base: 0.875rem !important;
  --site-type-md:   1rem !important;
  --site-type-lg:   1.25rem !important;
  --site-type-xl:   1.375rem !important;
  --site-type-2xl:  clamp(1.5rem, 1.1rem + 1.6vw, 2rem) !important;
  --site-type-3xl:  clamp(1.9rem, 1.3rem + 2.6vw, 2.75rem) !important;
  --site-type-hero: clamp(2.2rem, 1.4rem + 3.6vw, 3.5rem) !important;

  /* leading measured off the source: body copy is 14px on 1.3 (home)
     to 1.4 (interior); nothing ever opens to 1.7. The loose value here
     was several hundred px of page drift on every interior view. */
  --site-leading-display: 1.35 !important;
  --site-leading-heading: 1.35 !important;
  --site-leading-body:    1.4 !important;
  --site-leading-lead:    1.4 !important;
  --site-leading-meta:    1.4 !important;

  --site-tracking-display: 0.2em !important;
  --site-tracking-body:    0.01em !important;
  --site-tracking-caps:    0.09em !important;

  --site-measure-body: 46ch !important;
  --site-measure-lead: 52ch !important;

  --site-rule-heavy: 2px solid #000000 !important;
  --site-divider-glyph: "" !important;
  --site-dropcap-size: 1em !important;

  --site-space-section: clamp(64px, 6vw + 32px, 104px) !important;
  --site-max-width: 1200px !important;

  --tilt-1: -1.5deg;
  --tilt-2: 2deg;

  --site-motion-duration-hover: 200ms !important;
  --site-motion-duration: 320ms !important;
  --site-motion-duration-slow: 520ms !important;
  --site-motion-duration-reveal: 700ms !important;
  --site-motion-stagger: 70ms !important;
  --site-motion-reveal-distance: 18px !important;
  --site-motion-reveal-blur: 0px !important;

  /* the painted bands — the house's real chroma */
  --th-band-hero:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRXG18EEGARE5FK0RYGC.png");
  --th-band-green:  url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSC1GWBN3RMPZ8N43PYK.png");
  --th-band-amber:  url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSG17F5TGM69X1A4GST7.png");
  --th-band-green2: url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJ7H5GGK2ZT8EFMGS8S.png");
  --th-band-black:  url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJD6MGNQS2ABYMXSVJV.png");
  --th-band-wash:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRHVTGCWPX7230V83ET3.jpg");
  --th-band-amber2: url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SSCSZCGYY1XD5PJVQQE0.png");
  --th-band-taupe:  url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJ2E6886TNBT6HVCPKC.png");
  --th-band-amber3: url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJKXRH4EEJXX2544XY7.png");
  --th-band-pink:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SRJRFSPW3APZF8XTSDAZ.png");

  --th-mark-wordmark: url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3QW8DX1GPQ6D5P6VEG835.png");
  --th-mark-bird:     url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SP940QV76M5GT0CQBVXE.png");
  --th-mark-plaque:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZF3SP1JCW667Y4ZBE6JJF2R.png");

  /* the hand-drawn photo frames — overlaid on photographs so no image
     ever reads as a bare rectangle (the source's signature habit) */
  --th-frame-thick: url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KZFNPHCREXA8301GR0AQYPX6.png");
  --th-frame-thin:  url("https://d1vgksb0ce1fwh.cloudfront.net/01KXF9NKMJMT14E6JSS1C45YPB/01KY19GM8XCJDYE95AKVD8HJQ4.png");

  /* In-flow sticky bar: the header already occupies its own height, so
     the app shell must NOT reserve it twice. SiteHeader contract. */
  --site-header-h: 0px !important;
  --site-header-w: 0px !important;
}

/* ---------------------------------------------------------------------
   3 · THE PAINTED BAND UTILITY + THE PLAQUE + THE FRAMED PHOTO
   --------------------------------------------------------------------- */
.th-band {
  --th-band-inset: clamp(2.5rem, 6vw, 6rem);
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}
.th-band__in {
  position: relative;
  max-width: var(--site-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--th-band-inset);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.th-band--hero   { background-image: var(--th-band-hero);
}
.th-band--green  { background-image: var(--th-band-green);
}
.th-band--amber  { background-image: var(--th-band-amber);
}
.th-band--green2 { background-image: var(--th-band-green2);
}
.th-band--black  { background-image: var(--th-band-black);
}
.th-band--wash   { background-image: var(--th-band-wash);
}
.th-band--amber2 { background-image: var(--th-band-amber2);
}
.th-band--taupe  { background-image: var(--th-band-taupe);
}
.th-band--amber3 { background-image: var(--th-band-amber3);
}
.th-band--pink   { background-image: var(--th-band-pink);
}
.th-band--green .th-band__in,
.th-band--green2 .th-band__in,
.th-band--black .th-band__in,
.th-band--wash .th-band__in { color: #FFFFFF;
}
@media (max-width: 700px) {
.th-band {
    --th-band-inset: clamp(1.25rem, 5vw, 2rem);
    /* not `cover`, and past 100%: the brush artwork carries wide transparent
       margins, so at phone widths we crop them off — otherwise the opaque
       paint is narrower than the text and white copy reads white-on-white */
    background-size: 145% 118%;
}
}

/* the painted plaque — a real watercolour swatch from the hotel's own
   library, with the hand lettering sitting on top of it */
.th-plaque {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 86px;
  min-height: 44px;
  padding: 10px 18px;
  background-image: var(--th-mark-plaque);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  border: 0;
  border-radius: 0;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-base, 0.875rem);
  line-height: 1;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--site-motion-duration-hover, 200ms) var(--site-motion-ease-hover, ease-out);
}

/* the source paints one plaque green and one amber. Same swatch, turned
   — so the brush texture and torn edge survive the colour change. */
.th-plaque--green { filter: hue-rotate(75deg) saturate(0.85);
}
.th-plaque:hover,
.th-plaque:focus-visible { transform: rotate(-1.5deg) scale(1.03); outline: none;
}
.th-plaque:focus-visible {
  box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--site-color-accent);
}
.th-plaque--wide { width: 100%; min-height: 52px;
}

/* the source's inline CTA — measured: 12px WHITE hand caps riding a
   flat amber fill (RESERVE TABLE, BOOK NOW, MENUS HERE, EMAIL THEM) */
.th-caps-link {
  display: inline-block;
  padding: 8px 22px;
  background: var(--site-color-accent);
  border: 0;
  border-radius: 3px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--site-color-accent-fg, #FFFFFF);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.th-caps-link:hover,
.th-caps-link:focus-visible {
  background: var(--site-color-accent-hover);
  color: var(--site-color-accent-fg, #FFFFFF);
  outline: none;
}

/* the framed photograph — the frame drawing stretched over the photo,
   so no photograph ever reads as a bare rectangle */
.th-framed {
  position: relative;
  display: block;
  overflow: hidden;
}

/* absolutely positioned so a portrait photograph can never stretch the
   frame's aspect-ratio box — an aspect-ratio box is only *preferred*,
   and in-flow replaced content grows it (the Lobby Bar hub card
   rendered 430×637 before this) */
.th-framed > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the frame's ragged edge must cover the photo's crop line */
  padding: 3.4%;
  box-sizing: border-box;
}
.th-framed::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--th-frame-thick);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.th-framed--thin::after { background-image: var(--th-frame-thin);
}

/* Members Only's masthead lettering is AMBER on the black ground —
   measured off the source (rgb 220,153,47). A theme-layer decision so
   both grounds keep one title rule in the page component. */
.th-am--dark .th-am__title,
.th-am--dark .th-am__mast-lede { color: var(--site-color-accent);
}
@media (prefers-reduced-motion: reduce) {
.th-plaque,
  .th-caps-link { transition: none;
}
.th-plaque:hover { transform: none;
}
}


/* ==================================================================
   The source footer, measured off its own mesh CSS at 1440:
   38px of sheet above the 187×72 script logo, 16px to the first
   register; registers 8px/1.4 uglydave caps, groups separated by one
   blank 11px row; two legal words; then the two 21px social marks in
   25px boxes with no gap, 44px of quiet to the page end (the grey
   Cloudbeds strip that follows on the source is deliberately NOT
   cloned). The whole axis sits 13px left of the column centre on the
   source — kept via the translate, dropped on phones.
   ================================================================== */
.thf[data-v-e029deb4] {
  background: #fff;
  color: #000;
}
.thf__in[data-v-e029deb4] {
  max-width: 680px;
  margin-inline: auto;
  padding: 38px var(--site-gutter, clamp(1.25rem, 4vw, 3rem)) 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  transform: translateX(-13px);
  /* hotelier request 2026-08-16: everything in the footer 10% larger
     than the source. zoom scales the whole composition — logo, type,
     gaps, icons — in one stroke, keeping the source's proportions. */
  zoom: 1.1;
}
.thf__brand[data-v-e029deb4] {
  display: inline-block;
  margin-bottom: 16px;
  text-decoration: none;
  color: inherit;
}

/* the one-line script mark — 187×72 on the source */
.thf__logo[data-v-e029deb4] {
  display: block;
  width: clamp(150px, 14vw, 187px);
  height: auto;
}
.thf__brand[data-v-e029deb4]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
}

/* the registers — the source sets these at 8px/1.4, uglydave caps */
.thf__line[data-v-e029deb4] {
  margin: 0;
  font-family: uglydave, var(--site-font-ui) !important;
  font-size: 8px;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000;
}

/* one blank 8px paragraph on the source = one empty ~11px row */
.thf__gap[data-v-e029deb4] {
  display: block;
  height: 11px;
}
.thf__gap--half[data-v-e029deb4] {
  height: 5px;
}
.thf__link[data-v-e029deb4] {
  color: inherit;
  text-decoration: none;
}
.thf__link[data-v-e029deb4]:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* SMALL PRINT / POLÍTICAS — plain hand-lettered words in the flow;
   the button chrome disappears entirely into the register above */
.thf__legal-btn[data-v-e029deb4] {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  min-width: 0;
  min-height: 0;
  cursor: pointer;
  font: inherit;
  font-family: inherit !important;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}
.thf__legal-btn[data-v-e029deb4]:focus-visible {
  color: var(--site-color-accent);
  outline: none;
}

/* the two marks — the source's own PNGs, 21px in 25px boxes, no gap */
.thf__social[data-v-e029deb4] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
}
.thf__social-btn[data-v-e029deb4] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
}
.thf__social-btn img[data-v-e029deb4] {
  display: block;
  width: 21px;
  height: 21px;
}
.thf__social-btn[data-v-e029deb4]:focus-visible {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--site-color-accent);
  border-radius: 6px;
  outline: none;
}

/* ==================================================================
   legal modal
   ================================================================== */
.thfm[data-v-e029deb4] {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
  background: var(--site-color-overlay-strong, rgba(0, 0, 0, 0.78));
}
.thfm__panel[data-v-e029deb4] {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 660px;
  max-height: min(84vh, 46rem);
  background: var(--site-color-bg);
  color: var(--site-color-fg);
  border: 2px solid var(--site-color-fg);
  border-radius: 18px 14px 20px 16px; /* drawn, not ruled */
  overflow: hidden;
}
.thfm__head[data-v-e029deb4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--site-space-4, 20px);
  padding: var(--site-space-5, 32px) var(--site-space-5, 32px) var(--site-space-3, 12px);
}
.thfm__title[data-v-e029deb4] {
  margin: 0;
  font-family: var(--site-font-hand);
  font-size: var(--site-type-lg, 1.25rem);
  line-height: 1.3;
  color: var(--site-color-accent);
}
.thfm__close[data-v-e029deb4],
.thfm__tab[data-v-e029deb4] {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px 10px;
  font-family: var(--site-font-ui);
  font-size: var(--site-type-sm, 0.75rem);
  color: var(--site-color-fg);
  transition: color var(--site-motion-duration-hover, 200ms) var(--site-motion-ease, ease);
}
.thfm__close[data-v-e029deb4]:hover,
.thfm__close[data-v-e029deb4]:focus-visible,
.thfm__tab[data-v-e029deb4]:hover,
.thfm__tab[data-v-e029deb4]:focus-visible { color: var(--site-color-accent); outline: none;
}
.thfm__tabs[data-v-e029deb4] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--site-space-1, 4px);
  padding: 0 var(--site-space-5, 32px) var(--site-space-3, 12px);
  border-bottom: 1px solid var(--site-color-border);
}
.thfm__tab--active[data-v-e029deb4] { color: var(--site-color-accent);
}
.thfm__body[data-v-e029deb4] {
  min-height: 0;
  overflow-y: auto;
  padding: var(--site-space-4, 20px) var(--site-space-5, 32px) var(--site-space-5, 32px);
  white-space: pre-wrap; /* the hotelier's own paragraph breaks are kept */
  font-family: var(--site-font-body);
  font-size: var(--site-type-base, 0.875rem);
  line-height: var(--site-leading-body, 1.4);
  color: var(--site-color-fg-secondary);
}
.thfm-enter-active[data-v-e029deb4],
.thfm-leave-active[data-v-e029deb4] { transition: opacity var(--site-motion-duration, 320ms) var(--site-motion-ease, ease);
}
.thfm-enter-from[data-v-e029deb4],
.thfm-leave-to[data-v-e029deb4] { opacity: 0;
}
@media (max-width: 640px) {
.thfm__head[data-v-e029deb4],
  .thfm__tabs[data-v-e029deb4],
  .thfm__body[data-v-e029deb4] { padding-inline: var(--site-space-4, 20px);
}
}

/* the 8px registers are the source's whisper at 1440 — on a phone they are
   simply illegible and the links untappable, so scale them up there only */
@media (max-width: 700px) {
.thf__in[data-v-e029deb4] { transform: none;
}
.thf__line[data-v-e029deb4] { font-size: 11px; line-height: 1.6;
}
.thf__gap[data-v-e029deb4] { height: 14px;
}
.thf__link[data-v-e029deb4] { display: inline-block; padding: 5px 2px;
}
.thf__legal-btn[data-v-e029deb4] { padding: 2px 4px;
}
.thf__social[data-v-e029deb4] { gap: 12px;
}
.thf__social-btn[data-v-e029deb4] { width: 44px; height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.thfm-enter-active[data-v-e029deb4],
  .thfm-leave-active[data-v-e029deb4] { transition: none;
}
}


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

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

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

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