/* base tokens */
/* =====================================================================
 * tokens.css — global CSS custom properties (design tokens).
 * =====================================================================
 *
 * These are the variables every styled component reads via `var(...)`.
 * Defaults here are NEUTRAL — every hotel's specific palette comes
 * from its brand record, applied at runtime when the brand store
 * resolves.
 *
 * Future agents:
 *   · Add a new token here only if it's used across multiple
 *     components. Single-component values stay scoped to that
 *     component's <style scoped>.
 *   · Token names follow `--site-<group>-<role>` (e.g.
 *     `--site-color-fg`, `--site-radius-md`). Stable so brand-
 *     application logic can map onto them deterministically.
 *   · The brand store doesn't yet write into these — that wiring
 *     gets added when the first styled section lands.
 */
:root {
  /* The token NAMES match what services/theme.js writes. Defaults
     here are neutral — every hotel's actual palette comes from its
     brand record at runtime. */
  --site-color-bg:        #fbf9f5;
  --site-color-bg-rgb:    251, 249, 245;  /* used for translucent overlays */
  --site-color-fg:        #1a1815;
  --site-color-fg-muted:  #6b665e;
  --site-color-accent:    #1a1815;
  --site-color-accent-fg: #fbf9f5;
  --site-color-border:    #e3ddd2;

  --site-font-display: system-ui, -apple-system, sans-serif;
  --site-font-body:    system-ui, -apple-system, sans-serif;

  --site-radius-sm:    2px;
  --site-radius-md:    6px;
  --site-radius-lg:    14px;

  /* COOKIE NOTICE tokens — what a GROUP's shared notice is drawn with. Follows
     the fallback chain of the SDK's own notice (components/consent/consent.css),
     so a shared notice and the settings panel it opens match on every hotel. */
  --site-notice-bg:           var(--consent-bg, var(--site-color-surface, var(--site-color-bg)));
  --site-notice-fg:           var(--consent-fg, var(--site-color-fg));
  --site-notice-muted:        color-mix(in srgb, var(--site-notice-fg) 68%, transparent);
  --site-notice-accent:       var(--consent-accent, var(--site-color-accent, var(--site-notice-fg)));
  --site-notice-on-accent:    var(--consent-on-accent, var(--site-color-on-accent, var(--site-notice-bg)));
  --site-notice-rule:         color-mix(in srgb, var(--site-notice-fg) 14%, transparent);
  --site-notice-radius:       var(--consent-radius, var(--site-radius, 14px));
  --site-notice-font-display: var(--site-font-display);
  --site-notice-font-body:    var(--site-font-body);

  /* FOOTER tokens — the surface a GROUP's shared footer is drawn with
     (settings `shared_components`). One footer is written once and linked to
     every site of a group, so it may read nothing a theme invents for itself
     (`--hdt-*`, `--bab-*`, literal hex) — only these. Each falls back to the
     site's general palette and type, so a theme that sets none of them still
     gets a footer in its own colours; a theme that wants its footer ground or
     link colour exact sets the token in its own `tokens.css`. */
  --site-footer-bg:           var(--site-color-fg);
  --site-footer-fg:           var(--site-color-bg);
  --site-footer-muted:        color-mix(in srgb, var(--site-footer-fg) 68%, transparent);
  --site-footer-link:         var(--site-footer-fg);
  --site-footer-accent:       var(--site-color-accent);
  --site-footer-rule:         color-mix(in srgb, var(--site-footer-fg) 18%, transparent);
  --site-footer-font-display: var(--site-font-display);
  --site-footer-font-body:    var(--site-font-body);
  --site-footer-logo-h:       44px;
  /* A texture laid behind the footer (a shared footer's `ground` media): how
     strongly it shows, and the size one tile is drawn at. */
  --site-footer-texture-opacity: 0.18;
  --site-footer-texture-size:    480px;

  /* ⚠️ A SEED, NOT A MEASUREMENT. `App.vue` measures the real bar after mount
     and overwrites this on :root, along with `--site-header-reserve` — what
     the shell actually pads by, which is 0 for a bar in flow. Kept only so
     rules that read it before first measurement have a sane number. */
  --site-header-h:     76px;
  --site-header-reserve: 0px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


/* theme tokens */
/* =====================================================================
 * tokens.css — Ancalá Casas Altas · unified design tokens
 * ---------------------------------------------------------------------
 * The single source of truth for the brand's COLOUR, TYPE and structural
 * rhythm. brandbook.html and THEME_INTENT.md both consume these tokens.
 *
 * COLOUR + TYPE are exposed ONLY through --site-* token names, so the
 * runtime can re-theme the entire system live. Components REFERENCE these
 * names — the anchor hexes survive only inside `var(--site-…, fallback)`
 * for an un-branded preview — and DERIVE every supporting tone with
 * color-mix() off the anchors. Change one --site-color-* and the whole
 * estate recolours, no rebuild.
 *
 * THE ANCALÁ PALETTE  (DESIGN_SYSTEM.md 1.1 — six colours + offwhite)
 *   cacao    #2A160F  ink on light, dark grounds
 *   cream    #E5DFD6  paper, button fill, ink on dark
 *   orange   #EE4300  accent, button hairline, footer
 *   renta    #BBC2F4  Casa de la Renta lilac
 *   rose     #FCDEDA  soft pink ground
 *   mangrove #008D40  occasional accent only
 *   offwhite #FFF8F8  where cream is too warm
 *
 * THE VOICE OF THE HOUSE  (chosen type · typography-v1)
 *   --site-font-display  Casasol        editorial display — the headline
 *   --site-font-body     Arimo          humanist grotesque — the body
 *   --site-font-accent   EB Garamond    italic — the house voice
 * ===================================================================== */

/* ---- Brand faces (uploaded) ------------------------------------------ */
@font-face {
  font-family: "Casasol";
  /* De-dotted Casasol: the shipped face carries a decorative dot contour on
     every lowercase glyph. This build strips those contours (uppercase is
     byte-identical), so lowercase no longer renders dots.
     Self-hosted on the hotel CDN (was ancala.co/fonts — an external
     dependency that would take the site's typography down with it). */
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01M143QTHSRKCWVXQ7H0GSVSCS.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Arimo";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVG7B4JJJE67W2ZDPHZMZEZA");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* The accent face is an italic — register it under the family the system
   references ("EB Garamond") AND under its uploaded name for runtime parity. */
@font-face {
  font-family: "EB Garamond";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJGCEYBM2S0A999KKPBQJ3");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "ACCENTS - EBGaramond-Italic";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJGCEYBM2S0A999KKPBQJ3");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* ──────────────────────────────────────────────────────────────
   * 1 · COLOUR ANCHORS  (reference the runtime brand; never redefine —
   *     the hexes live only as fallbacks for an un-branded preview)
   * ────────────────────────────────────────────────────────────── */
  --site-color-bg:     #E5DFD6;  /* Cream — Ancalá paper */  /* Conchal Sand */
  --site-color-fg:     #2A160F;  /* Cacao — Ancalá ink */  /* Cacao Timber */
  --site-color-accent: #008D40;  /* Mangrove Green — this house's accent */
  --site-color-cta-border: #EE4300;  /* orange hairline — canonical CTA border */
  --site-color-muted:  #2A160F;  /* the brand has no greys: secondary text is cacao */
  --site-color-border: rgba(42, 22, 15, 0.22);  /* form fields only; surfaces carry no border */

  /* contrast-safe "on" pairs */
  --site-color-on-accent: #E5DFD6; /* cream on mangrove */
  --site-color-on-fg:     #E5DFD6; /* cream on cacao */

  /* ──────────────────────────────────────────────────────────────
   * 2 · ROLES  (brand colours only; no white, black or navy mixes)
   * ────────────────────────────────────────────────────────────── */
  --site-color-ink-2:    #2A160F;
  --site-color-ink-soft: #2A160F;

  /* Surfaces: full colour blocks */
  --site-color-surface:   #FFF8F8;  /* offwhite panel */
  --site-color-surface-2: #FCDEDA;  /* rose band */

  /* Dark grounds */
  --site-color-ink-deep:  #2A160F;
  --site-color-on-dark:   #E5DFD6;

  /* Accent family */
  --site-color-accent-deep: #008D40;
  --site-color-accent-wash: #FCDEDA;

  --site-color-plaque: #2A160F;
  --site-color-tile:   #008D40;  /* this house's tile */

  /* Hairlines + scrims */
  --site-color-line:        rgba(42, 22, 15, 0.22);
  --site-color-line-strong: rgba(42, 22, 15, 0.4);
  --site-color-scrim:       rgba(0, 0, 0, 0.32);
  --site-color-plate:       #E5DFD6;

  /* ──────────────────────────────────────────────────────────────
   * 3 · TYPE
   * ────────────────────────────────────────────────────────────── */
  --site-font-display: "Casasol", "Cormorant Garamond", Georgia, serif;
  --site-font-body:    "Arimo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --site-font-accent:  "EB Garamond", Georgia, serif;  /* always set italic in use */

  /* Fluid editorial ladder (display capped ≈5.5rem to stay within the hero). */
  --site-text-cap:        clamp(0.66rem, 0.6rem + 0.3vw, 0.76rem);  /* eyebrow / micro */
  --site-text-sm:         clamp(0.82rem, 0.78rem + 0.2vw, 0.92rem); /* caption */
  --site-text-body:       clamp(1rem, 0.96rem + 0.2vw, 1.12rem);    /* body */
  --site-text-lead:       clamp(1.12rem, 1rem + 0.5vw, 1.3rem);     /* lead */
  --site-text-h4:         clamp(1.45rem, 1.2rem + 1.1vw, 2.1rem);
  --site-text-h3:         clamp(1.85rem, 1.4rem + 2.2vw, 2.9rem);
  --site-text-h2:         clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem);
  --site-text-display:    clamp(3rem, 2rem + 5vw, 5.4rem);          /* hero display */

  --site-leading-tight: 0.95;  /* display */
  --site-leading-snug:  1.18;  /* sub-heads */
  --site-leading-body:  1.62;  /* prose */

  --site-tracking-display: -0.01em;
  --site-tracking-eyebrow: 0.28em;
  --site-tracking-label:   0.16em;

  /* ──────────────────────────────────────────────────────────────
   * 4 · SPACE  (generous, unhurried — luxury breathing room)
   * ────────────────────────────────────────────────────────────── */
  --site-space-1: 4px;
  --site-space-2: 8px;
  --site-space-3: 16px;
  --site-space-4: 24px;
  --site-space-5: 40px;
  --site-space-6: 64px;
  --site-space-7: 96px;
  --site-section-y: clamp(64px, 4rem + 6vw, 128px);
  --site-gutter:    clamp(18px, 1rem + 2.5vw, 56px);
  --site-content-max: 1280px;
  --site-measure:     64ch;

  /* ──────────────────────────────────────────────────────────────
   * 5 · RADIUS  (pills for chrome, soft rounds for objects — the
   *     chosen variants are consistently rounded, never hard-square)
   * ────────────────────────────────────────────────────────────── */
  --site-radius-sm:   8px;
  --site-radius-md:   16px;
  --site-radius-lg:   16px;
  --site-radius-card: 16px;
  --site-radius-pill: 999px;

  /* ──────────────────────────────────────────────────────────────
   * 6 · ELEVATION  (soft cacao-tinted shadows — objects sit ON photography)
   * ────────────────────────────────────────────────────────────── */
  --site-shadow-sm: none;
  --site-shadow-md: none;
  --site-shadow-lg: none;
  --site-shadow-coral: none;

  /* ──────────────────────────────────────────────────────────────
   * 7 · MOTION  (gentle "materialize" reveals + soft hover lift)
   * ────────────────────────────────────────────────────────────── */
  --site-ease: cubic-bezier(.65, 0, .35, 1);  /* Ancalá master easing */  /* arrivals */
  --site-ease-out:  cubic-bezier(.2,.7,.2,1);
  --site-dur-fast:  140ms;
  --site-dur:       360ms;
  --site-dur-slow:  820ms;
  --site-stagger:   90ms;

  /* ──────────────────────────────────────────────────────────────
   * 8 · TEXTURE  (faint rose-opener wash + grain — always behind a scrim)
   * ────────────────────────────────────────────────────────────── */
  --site-asset-opener: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJRGP6B2SGC0EADK6D55H9.png");
  --site-asset-logobg: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVJWH87HVGT8RB64WZMG6S00.svg");
  --site-asset-bird:   url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVRBWBGF5GWXN9B3BKG3V7ZQ.png");

  /* ──────────────────────────────────────────────────────────────
   * 9 · LOCKED BOOKING PAGE OVERRIDES  (the /book view reads these)
   *     Casasol display titles must be UPPERCASE (the face has no
   *     lowercase glyphs — they render as dots).
   * ────────────────────────────────────────────────────────────── */
  --site-book-hero-title-transform: uppercase;
}

/* ──────────────────────────────────────────────────────────────────────
 * CASASOL DISPLAY TEXT ON LOCKED PLATFORM VIEWS — NO DOTS, EVER.
 * Casasol has no lowercase glyphs; lowercase letters render as dots.
 * The selectors below are every element in the locked booking page
 * (plus the shared homepage-block component) whose computed font is the
 * display face (--j17-display / --site-font-display). !important beats
 * the handful of scoped platform rules that set text-transform: none.
 * This file provably ships in the bundle — do not move these to brand.css
 * (the builder discards that file). — do not remove.
 * ────────────────────────────────────────────────────────────────────── */
/* Booking page hero */
.j17-about__title,
.j17-about__pullquote-text,
.j17-about__pullquote-mark,
/* Booking page: hints, groups, sort + result counts */
.j17-book__hint-title,
.j17-book__group-title,
.j17-book__group-intro,
.j17-book__note-body,
.j17-book__sortbar-count,
.j17-book__mobile-results-count,
.j17-sortmenu__value,
.j17-sortmenu__option-label,
/* Booking page: stay panel + filters */
.j17-book__stay-empty,
.j17-book__stay-filled,
.j17-book__filters-head h2,
/* Booking page: cart (desktop + mobile) */
.j17-book__cart h2,
.j17-book__cart-empty,
.j17-book__cart-item strong,
.j17-book__cart-total strong,
.j17-book__cart-right > span,
.j17-book__cart-remove,
.j17-book__mcart-title,
.j17-book__mcart-bar-title,
.j17-book__mcart-bar-total-value,
/* Booking page: room cards + prices */
.j17-book-card__title,
.j17-book-card__combo-title,
.j17-book-card__split-title,
.j17-book-card__split-price,
.j17-book-card__split-sep,
.j17-book-card__price-total,
/* Guest stepper value */
.gs-value,
/* Homepage / shared content blocks + teasers */
.hp-block__title,
.hp-block__featured-title,
.hp-amenities-teaser__title,
.hp-booking__title,
.hp-events-teaser__title,
.hp-rooms-teaser__title,
.hp-venues-teaser__title {
  text-transform: uppercase !important;
}

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

/* [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-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --site-reveal-distance: 24px;
}

/* §2 dot rule: the shipped face bakes a dot contour into every lowercase
   glyph. We serve a stripped build; this disables the feature as well. */
[class*="display"], h1, h2, h3, h4 { font-feature-settings: "ccmp" 0; }

/* ===== ANCALA HARD OVERRIDES ==========================================
 * Popstay injects <style data-popstay="fonts"> and a runtime brand block at
 * boot, AFTER this stylesheet. Those re-declare @font-face for "Casasol"
 * (pointing at the original DOTTED file) and reset the colour tokens, so
 * anything declared normally above is silently overridden in the browser.
 *
 * Two defences:
 *   1. register the de-dotted face under a name Popstay never redefines
 *   2. mark the brand tokens !important so a later block cannot win
 * Remove only if Popstay stops injecting that block.
 * ==================================================================== */
@font-face {
  font-family: "AncalaCasasol";
  src: url("https://d1vgksb0ce1fwh.cloudfront.net/01KSZW0DC7GSG1NJ6S6F15P1NS/01M143QTHSRKCWVXQ7H0GSVSCS.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --site-font-display: "AncalaCasasol", "Casasol", serif !important;
  --site-font-accent:  "ACCENTS - EBGaramond-Italic", "EB Garamond", serif !important;
  --site-font-body:    "Arimo", sans-serif !important;
  --site-color-bg:     #E5DFD6 !important;  /* Cream */
  --site-color-fg:     #2A160F !important;  /* Cacao */
  --site-color-accent: #008D40 !important;  /* Mangrove Green */
  --site-color-on-accent: #E5DFD6 !important;
  --site-color-tile:   #008D40 !important;
  --site-color-cta-border: #EE4300 !important;  /* orange hairline */
  --site-ease: cubic-bezier(.65, 0, .35, 1) !important;
}

/* ---- /BOOK MASTHEAD (2026-08-28, per Tiger) --------------------------
 * No "A residence at …" eyebrow, and the authored title ("Book your stay
 * at Casas Altas") stays on ONE line — sized against the masthead column
 * so it never wraps at desktop widths. Doubled class beats the SDK's
 * scoped rules; phones keep the stock size and may wrap.
 * -------------------------------------------------------------------- */
.j17-book .j17-about__eyebrow.j17-about__eyebrow { display: none !important; }
/* the eyebrow used to clear the 90px fixed header; without it the title's
 * 80px pad tucks it under the bar — give the masthead real clearance */
.j17-book .j17-about__masthead-copy.j17-about__masthead-copy { padding-top: 150px !important; }
@media (min-width: 768px) {
  .j17-book .j17-about__title.j17-about__title {
    white-space: nowrap;
    font-size: var(--t-heading) !important;
    line-height: 1 !important;
  }
}

/* ---- NO ACCENT WORD --------------------------------------------------
 * Popstay's theme lifts one word of every headline into italic accent
 * ("the signature move"). The house does not do that: headlines are one
 * face, one colour. Neutralised here rather than in forty components.
 * -------------------------------------------------------------------- */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
h1 .em, h2 .em, h3 .em, h4 .em,
.display em, .display .em,
[class*="title"] em, [class*="title"] .em,
[class*="headline"] em, [class*="headline"] .em,
.em, .vl-em, .loader__em {
  font-family: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* ---- THE HOUSE VOICE -------------------------------------------------
 * DESIGN_SYSTEM §1.2 / §7.1: EB Garamond 700 italic is the voice for every
 * button, label, link, price and room name. Popstay's theme sets these in
 * tracked UPPERCASE Arimo instead, which is the single biggest tell that
 * these are not the same site. Headlines stay Casasol; body stays Arimo.
 * -------------------------------------------------------------------- */
/* (rewritten 3-Nov-2026 for the type system: 700 only on buttons and nav) */
:is(.cta, .btn, [class*="__cta"], [class*="__link"], [class*="-link"]):not(.ancx *):not(.ax *) {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:is([class*="price"], [class*="eyebrow"]):not(.ancx *) {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
:is([class*="__label"], [class*="__meta"]):not(.ancx *) {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-caps) !important;
}
[class*="__name"]:not(.ancx *):not(.anch-modal *) {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-display) !important;
}

/* ---- ONE CORNER ------------------------------------------------------
 * DESIGN_SYSTEM §4 + operator call: boxes, buttons, cards, inputs and
 * panels all take the Reserve button's corner (8px). Only genuinely
 * circular chrome (carousel dots, icon buttons) keeps its own shape.
 * -------------------------------------------------------------------- */
:root {
  --site-radius-sm:   8px !important;
  --site-radius-md:   8px !important;
  --site-radius-lg:   8px !important;
  --site-radius-card: 8px !important;
}

.btn, .reserve, .field,
[class*="card"], [class*="panel"], [class*="plaque"],
[class*="sheet"], [class*="modal__panel"], [class*="box"],
input, textarea, select {
  border-radius: 8px !important;
}

/* dots, and round icon-only chrome, stay round */
[class*="dot"], [class*="__dot"], [class*="pill"],
[class*="arrow"], [class*="mic"], [class*="hamburger"], .wa {
  border-radius: 999px !important;
}

/* ---- NO CTA BAND -----------------------------------------------------
 * ancala.co ends Hero -> ... -> Footer. Popstay inserts a cacao CTA band
 * above the footer, which reads as a second, competing footer.
 * -------------------------------------------------------------------- */
.ctaband { display: none !important; }

/* ---- ROOM NAMES ------------------------------------------------------
 * Type system 3-Nov-2026: room and venue names are headings, Casa Sol 400.
 * -------------------------------------------------------------------- */
[class*="plaque__title"], [class*="room__title"], [class*="room-name"],
[class*="rt-plaque"] [class*="title"] {
  font-family: var(--font-display) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-display) !important;
}

/* =====================================================================
 * BRAND PASS 2026-09-13: inner pages onto DESIGN_SYSTEM.md
 * ---------------------------------------------------------------------
 * The homepage and the waterfront menu (both rendered inside `.ancx`)
 * are the reference and are excluded from every rule below.
 * ===================================================================== */

/* ---- 0 · THE TYPE SYSTEM (3-Nov-2026, brand guide, both sites) -------
 * Three faces only: Casa Sol 400 capitals (headings, names), EB Garamond
 * ITALIC (400 accent words / eyebrows / quotes; 700 only buttons + nav),
 * Arimo 400 (body, inputs, contact values, captions; tracked 0.05em;
 * labels in 12px capitals tracked 0.12em). Every page reads these. */
:root {
  --font-display: "AncalaCasasol", "Casasol", serif;
  --font-accent:  "ACCENTS - EBGaramond-Italic", "EB Garamond", serif;
  --font-body:    "Arimo", sans-serif;
  /* STRICT SCALE (3-Nov-2026, owner): exactly FOUR sizes on the site.
     BODY Arimo 15px · ACCENT Garamond italic 20px · HEADING Casa Sol ·
     BANNER Casa Sol (only words laid over a full-width photo or film).
     The older names are aliases so nothing can drift. */
  --t-body:    0.9375rem;                     /* line-height 1.65 (caps 1.4); 0.875rem on phones */
  --t-accent:  1.25rem;                       /* line-height 1.3 */
  --t-heading: clamp(2.25rem, 3.2vw, 3.25rem);/* line-height 1.0 */
  --t-banner:  clamp(3.25rem, 8vw, 8rem);     /* line-height 0.95 */
  --t-h1:     var(--t-heading);
  --t-h2:     var(--t-heading);
  --t-h3:     var(--t-heading);
  --t-quote:  var(--t-accent);
  --t-small:  var(--t-body);
  --t-button: var(--t-accent);
  --track-body: 0.05em;
  --track-caps: 0.12em;
  --track-display: 0.01em;
  --s-img-kicker: 32px;
  --s-kicker-head: 12px;
  --s-head-body: 24px;
  --s-para: 16px;
  --s-body-btn: 32px;
  --s-items: 64px;
  --s-section: 96px;
  --site-text-cap:  0.9375rem !important;
  --site-text-sm:   0.9375rem !important;
  --site-text-body: 0.9375rem !important;
  --site-text-lead: 0.9375rem !important;
  --site-text-h4:   clamp(2.25rem, 3.2vw, 3.25rem) !important;
  --site-text-h3:   clamp(2.25rem, 3.2vw, 3.25rem) !important;
  --site-text-h2:   clamp(2.25rem, 3.2vw, 3.25rem) !important;
  --site-text-display: clamp(2.25rem, 3.2vw, 3.25rem) !important;
  --site-leading-body: 1.65 !important;
  --site-tracking-display: 0.01em !important;
  --site-tracking-eyebrow: 0 !important;
  --site-tracking-label: 0.12em !important;
}
@media (max-width: 639px) {
  :root { --t-body: 0.875rem; --t-accent: 1.125rem; --site-text-body: 0.875rem !important; --site-text-lead: 0.875rem !important; --site-text-cap: 0.875rem !important; --site-text-sm: 0.875rem !important; --s-section: 64px; --s-items: 44px; --s-img-kicker: 22px; --s-body-btn: 24px; }
}
/* reading text everywhere: Arimo 400, tracked; a component's own rule still wins */
body { font-family: var(--font-body); letter-spacing: var(--track-body); }
/* the Tailwind-built pages (.ancx) set tracking per element */
.ancx { letter-spacing: 0; }
:where(p, li, dd, address, figcaption, blockquote, input, textarea, select, td):not(.ancx *) {
  font-size: var(--t-body);
  line-height: 1.65;
}
:where(input, textarea, select, button) { font-family: inherit; letter-spacing: inherit; }
/* Arimo is never set in italic outside an inline <em> */
:where(p, li, dd, address, figcaption) :where(em, i) { font-style: italic; }

/* ---- 1 · PALETTE: six brand colours + offwhite, nothing mixed -------
 * The runtime writes the brand record's legacy palette (#fbf6f0 sand,
 * #f87061 coral, #7c6d67 muted, white on-accent) as INLINE custom
 * properties on <html>; only !important declarations beat those. */
:root {
  --site-color-bg:            #E5DFD6 !important;  /* cream */
  --site-color-fg:            #2A160F !important;  /* cacao */
  --site-color-accent:        #008D40 !important;  /* mangrove, occasional accent only */
  --site-color-on-accent:     #E5DFD6 !important;
  --site-color-accent-fg:     #E5DFD6 !important;
  --site-color-accent-deep:   #008D40 !important;
  --site-color-accent-wash:   #FCDEDA !important;  /* rose */
  --site-color-muted:         #2A160F !important;  /* no greys: muted text is cacao */
  --site-color-fg-muted:      #2A160F !important;
  --site-color-ink-2:         #2A160F !important;
  --site-color-ink-soft:      #2A160F !important;
  --site-color-ink:           #2A160F !important;
  --site-color-ink-deep:      #2A160F !important;
  --site-color-on-fg:         #E5DFD6 !important;
  --site-color-on-dark:       #E5DFD6 !important;
  --site-color-surface:       #FFF8F8 !important;  /* offwhite block */
  --site-color-surface-2:     #FCDEDA !important;  /* rose band */
  --site-color-plaque:        #2A160F !important;
  --site-color-plate:         #E5DFD6 !important;
  --site-color-scrim:         rgba(0, 0, 0, 0.32) !important;
  --site-color-border:        rgba(42, 22, 15, 0.22) !important;  /* form fields only */
  --site-color-line:          rgba(42, 22, 15, 0.22) !important;
  --site-color-line-strong:   rgba(42, 22, 15, 0.4) !important;
  --site-color-orange:        #EE4300 !important;
  --site-color-rose:          #FCDEDA !important;
  --site-color-renta:         #BBC2F4 !important;
  --site-color-offwhite:      #FFF8F8 !important;
  /* brand-record extras the runtime injects */
  --site-color-accent-2:      #008D40 !important;
  --site-color-primary-2:     #E5DFD6 !important;
  --site-color-secondary-2:   #FCDEDA !important;
  --site-color-supporting-core-tone: #2A160F !important;
  --a11y-focus:               #EE4300 !important;
  /* no surface elevation anywhere */
  --site-shadow-sm: none !important;
  --site-shadow-md: none !important;
  --site-shadow-lg: none !important;
}

/* ---- 2 · BRAND-KIT VARIABLES (brand.css `ak-*` classes read these) --- */
:root {
  --anca-ink:        #2A160F;
  --anca-paper:      #E5DFD6;
  --anca-ivory:      #FFF8F8;
  --anca-coral:      #EE4300;   /* the kit's "lead accent" is the brand orange */
  --anca-on-coral:   #E5DFD6;
  --anca-blush:      #FCDEDA;
  --anca-mangrove:   #008D40;
  --anca-periwinkle: #BBC2F4;
  --anca-line-strong: rgba(42, 22, 15, 0.4);
  --anca-font-display: var(--site-font-display, "AncalaCasasol", Georgia, serif);
  --anca-font-accent:  var(--site-font-accent, "EB Garamond", Georgia, serif);
  --anca-font-body:    var(--site-font-body, "Arimo", system-ui, sans-serif);
  --anca-weight-display: 400;
  --anca-weight-medium:  700;
  --anca-lh-tight:   0.92;
  --anca-step-m2:    0.8rem;
  --anca-step-m1:    0.9rem;
  --anca-step-0:     1rem;
  --anca-step-1:     1.125rem;
  --anca-radius-button: 8px;
  --anca-radius-card:   8px;
  --anca-dur:        150ms;
  --anca-dur-fast:   120ms;
  --anca-ease:       cubic-bezier(.65, 0, .35, 1);
  --anca-pattern-opacity: 0.15;
}

/* ---- 3 · CHROME: the platform language strip under the footer ------
 * Language lives in the header (ES / EN), as on the homepage. */
.app-shell__region,
.region-switcher { display: none !important; }
html { background-color: #E5DFD6; }

/* ---- 4 · CASASOL: capitals only, dot-free face, ccmp off ------------- */
:is(h1, h2, h3, h4, h5, h6):not(.ancx *):not(.anch-modal *) {
  font-weight: 400;
  letter-spacing: var(--track-display);
}
:is(h1, h2, h3, h4, h5, h6):not(.ancx *):not(.anch-modal *),
:is(.display, .h2, .h3, .h4, [class*="title-display"], [class*="__display"],
    .booker__title, .stepper__val, .ledger__val, .reserve-bar__name,
    .chapter__num, .airport__iata, .colophon__mark, .index__label,
    .empty__title, .ev-empty__lead, .ev-card__idx, .adv-chead__idx,
    .adv-highlight__n, .adv-display, .hp-block__title, .seo-list__card-title):not(.ancx *) {
  text-transform: uppercase;
  font-feature-settings: "ccmp" 0 !important;
}
[class*="display"], [class*="title"], [class*="heading"], [class*="__head"],
h1, h2, h3, h4, h5, h6 {
  font-feature-settings: "ccmp" 0 !important;
}

/* ---- 5 · THE BRAND BUTTON (type system 3-Nov-2026) -------------------
 * EB Garamond 700 italic 16px/1.5, 6px 16px, 8px corner, 1px CACAO line,
 * hover = opacity. Secondary = clear with cacao ink; primary = the venue
 * accent (Casas Altas orange, cacao ink). No pills, arrows or shadows. */
:is(.btn-primary, .btn-outline, .btn-ghost,
    .cta-band__btn, .cta-band__ghost, .ctaband__btn, .ctaband__ghost,
    .adv-btn, .adv-cta__btn, .adv-cta__ghost, .adv-back--btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .anca-more__btn,
    .hp-block__cta, .directions__cta, .ak-pill,
    .j17-confirm__cta):not(.ancx *) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: .45em;
  background: transparent !important;
  background-image: none !important;
  color: #2A160F !important;
  border: 1px solid #2A160F !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  font-size: var(--t-accent) !important;
  line-height: 1.3 !important;            /* same height as the header Reserve */
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer;
  transition: opacity .15s cubic-bezier(.65, 0, .35, 1) !important;
}
:is(.btn-primary, .btn-outline, .btn-ghost,
    .cta-band__btn, .cta-band__ghost, .ctaband__btn, .ctaband__ghost,
    .adv-btn, .adv-cta__btn, .adv-cta__ghost, .adv-back--btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .anca-more__btn,
    .hp-block__cta, .directions__cta, .ak-pill,
    .j17-confirm__cta):not(.ancx *):hover {
  opacity: .8;
  transform: none !important;
}
:is(.btn-primary, .cta-band__btn, .ctaband__btn, .adv-btn, .adv-cta__btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .hp-block__cta,
    .directions__cta, .ak-pill):not(.ancx *):disabled { opacity: .45; cursor: default; }
/* primary: the venue accent */
:is(.btn-primary, .cta-band__btn, .ctaband__btn, .adv-btn, .adv-cta__btn,
    .am-band__btn, .vl-btn, .bp-submit, .rqv-btn, .hp-block__cta,
    .directions__cta, .j17-confirm__cta):not(.ancx *) {
  background: #EE4300 !important;
  color: #2A160F !important;
}
/* a clear button on a cacao band cannot be read: cream fill, same outline */
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band)
  :is(.btn-outline, .btn-ghost, .cta-band__ghost, .ctaband__ghost, .adv-cta__ghost):not(.ancx *) {
  background: #E5DFD6 !important;
  color: #2A160F !important;
}
:is(.btn__arrow, .cta-band__arr, .cta-band__arrow, .adv-cta__arr, .adv-btn__arrow,
    .vl-btn__arrow, .bp-submit__arrow, .j17-confirm__cta-rule):not(.ancx *) { display: none !important; }
:focus-visible:not(.ancx *):not(.anch__logolink) { outline: 2px solid #EE4300; outline-offset: 3px; }
/* the header logo: never a border, outline or box (operator 3-Nov-2026) */
.anch__logolink, .anch__logolink:focus, .anch__logolink:focus-visible {
  border: 0 !important; outline: none !important; box-shadow: none !important; background: none !important;
}
/* the platform's skip link takes the accent size like every other link */
.app-skip-link { font-size: var(--t-accent) !important; line-height: 1.3 !important; }

/* ---- 6 · LABELS, KICKERS, SMALL ACTIONS (type system 3-Nov-2026) ------
 * Labels and fact lines: Arimo 400 capitals, 12px, tracked 0.12em.
 * Kickers and places: EB Garamond italic 400. Small actions: italic 700. */
:is(.label, [class*="__lab"], [class*="-label"], [class*="__flabel"], [class*="facts__item"],
    [class*="facts__k"], .chip, [class*="__chip"], [class*="__tag"], [class*="__dist"],
    [class*="__time"], [class*="__counter"], [class*="__count"], [class*="plate-space"],
    .ledger__label, .colophon__meta, .booker__meta,
    .guide-card__tab, .ev-card__tab, .qa__tag):not(html):not(body):not(.ancx *):not(.site-footer *):not(.anch *) {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--t-small) !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-caps) !important;
}
:is([class*="__kicker"], [class*="__loc"], [class*="__seal"], .index__eyebrow):not(html):not(body):not(.ancx *):not(.site-footer *):not(.anch *) {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.loc-address:not(.ancx *) {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: var(--track-body) !important;
}
:is(.j17-book__filters-reset, .j17-book__staydock-submit,
    .adv-back, .room-hero__back, .room-hero__all, .see-link, .anca-link,
    .anca-quick, .j17-confirm__cta-label):not(html):not(body):not(.ancx *):not(.site-footer *):not(.anch *) {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---- 7 · FLAT SURFACES: no elevation, no gradients, no card borders --- */
body *:not(.ancx):not(.ancx *):not(input):not(textarea):not(select) {
  box-shadow: none !important;
}
/* dark heroes: a full-bleed cacao block (photo, when present, sits on top) */
:is(.about-view, .experience-view, .faqs-view, .contact-view) .hero:not(.ancx *) {
  background: #2A160F !important;
}
/* one flat scrim over photos and video for legibility */
:is(.hero__scrim, .cta-band__scrim, .anca-hero__scrim, .anca-chapter__scrim,
    .adv-stage__scrim, .hp-block__band-scrim, .ctaband__scrim):not(.ancx *) {
  background: rgba(0, 0, 0, 0.32) !important;
}
/* no photo behind a hero: no scrim either, the block stays pure cacao */
.hero__media:not(:has(img, video)) .hero__scrim { display: none !important; }
/* page grounds that carried a coral or cacao radial wash */
:is(.anca-rooms, .adv, .events-list-view, .am-view, .amenities-list-view,
    .venues-list-view, .vdv, .seo-list, .seo-article):not(.ancx *) {
  background: #E5DFD6 !important;
}
/* gradient hairlines, rails and decorative rules */
:is(.hero__orn, .hero__cue, .hero__eyebrow, .chapter__rule, .chapter__dot,
    .colophon__rule, .colophon__emblem, .colophon__tick, .ev-title-rule, .ev-head__rail,
    .cta-band__seam, .ctaband__seam, .adv-cta__seam, .vl-cta__seam, .am-band__seam,
    .index__eyebrow i, .hero__wash, .adv-cta__wash):not(.ancx *) { display: none !important; }
.cta-band__kicker::before, .ctaband__kicker::before, .adv-cta__kicker::before,
.eyebrow::before, .ev-eyebrow::before, .vl-eyebrow::before, .am-eyebrow::before, .anca-eyebrow::before,
.anca-chapter__actions::before { display: none !important; }
/* the legacy bird-on-tile emblems (old palette, gradient, shadow) */
:is(.hero__emblem, .loc-head__emblem, .cta-band__tile, .ctaband__tile, .adv-cta__tile,
    .adv-masthead__tile, .vl-cta__tile, .am-band__tile, .ev-head__tile, .empty__emblem,
    .ev-empty__mark, .cta-band__bird, .cta-band__plinth):not(.ancx *) { display: none !important; }
:is(.loc-head, .cta-band__grid, .ctaband__grid, .adv-cta__grid, .adv-masthead,
    .vl-cta__band, .am-band__grid, .ev-head__wrap):not(.ancx *) {
  grid-template-columns: minmax(0, 1fr) !important;
}
/* CTA bands: a flat cacao block with cream ink */
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *) {
  background: #2A160F !important;
  background-image: none !important;
  color: #E5DFD6 !important;
  border-radius: 0 !important;
}
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *)::before,
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band):not(.ancx *)::after {
  display: none !important;
}
:is(.cta-band__grid, .ctaband__band, .adv-cta__band, .vl-cta__band, .am-band) :is(h2, p, span, em):not(.ancx *) {
  color: #E5DFD6 !important;
}
/* cards and panels: no border, no lift */
:is(.guide-card, .station, .ev-card, .am-card, .vl-card, .adv-feature, .adv-sib,
    .adv-facts__cell, .adv-highlight, .chan, .ticket, .sib, .seo-list__card,
    .booker, .ledger, .qa, .index__item, .airport, .adv-chapter, .anca-chapter,
    .adv-topbar__tag, .adv-hours__row, .hp-block__media):not(.ancx *) {
  border-color: transparent !important;
  transform: none !important;
}
:is(.guide-card, .station, .ev-card, .am-card, .vl-card, .adv-feature, .adv-sib):not(.ancx *):hover {
  transform: none !important;
}
:is(.guide-card__notch, .ev-card__notch, .guide-card__tab-dot, .ev-card__tab-dot):not(.ancx *) { display: none !important; }
.hp-block__media:not(.ancx *) { background: transparent !important; }

/* chips and tags: a plain label in the accent voice, no pill, no border */
:is(.chip, [class*="__chip"], .qa__tag, .adv-topbar__tag):not(html):not(body):not(.ancx *):not(.anch *) {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  color: #2A160F !important;
}
:is([class*="__foot"], .colophon, .anca-chapter__actions, .qa-group__head,
    .adv-facts__grid, .ev-empty__wrap):not(html):not(body):not(.ancx *):not(.site-footer *) {
  border-color: transparent !important;
}
/* rooms list: flat grounds, cream ink on the photo hero */
.anca-hero:not(.ancx *) { background: #2A160F !important; }
:is(.anca-chapter__media, .anca-chapter__namelink):not(.ancx *) { background-image: none !important; }
.anca-chapter__media:not(.ancx *) { background-color: #2A160F !important; }
.anca-eyebrow--onhero:not(.ancx *) { color: #E5DFD6 !important; }
/* the rooms list "View residence" / "Quick view" pair: brand buttons */
:is(.anca-link, .anca-quick):not(.ancx *) {
  display: inline-flex !important;
  align-items: center;
  gap: .4em;
  background: transparent !important;
  color: #2A160F !important;
  border: 1px solid #2A160F !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
  font-size: var(--t-accent) !important;
  line-height: 1.5 !important;
  text-decoration: none !important;
  transition: opacity .15s cubic-bezier(.65, 0, .35, 1) !important;
}
:is(.anca-link, .anca-quick):not(.ancx *):hover { opacity: .8; }
/* amenity feature ledger: key is a label, value is body */
.adv-feature__k:not(.ancx *) {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--t-small) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-caps) !important;
}
:is(.adv-feature__v, .adv-feature__v *):not(.ancx *) {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: var(--track-body) !important;
}
/* ledes are body copy: Arimo, cacao */
:is(.adv-lede, .ev-intro, .vl-intro, .am-intro):not(.ancx *) {
  font-family: var(--font-body) !important;
  font-size: var(--t-body) !important;
  font-weight: 400 !important;
  letter-spacing: var(--track-body) !important;
  font-style: normal !important;
  color: #2A160F !important;
}
.contact-view .hero__lede:not(.ancx *) { color: #E5DFD6 !important; }
/* hero titles sit on a flat cacao block or a scrimmed photo: no text glow */
:is(.hero__title, .hero__lede, .hero__quote-text):not(.ancx *) { text-shadow: none !important; }
/* Casasol has one weight: never synthesise bold on it */
:is(.cta-band__title, .hero__title, .loc-title, .adv-display, .adv-h2):not(.ancx *) { font-weight: 400 !important; }
.hero__quote-text:not(.ancx *) { font-weight: 400 !important; }
/* display numerals and IATA codes: cacao, legible on cream and rose */
:is(.chapter__num, .airport__iata, .adv-chead__idx, .adv-highlight__n, .ev-card__idx):not(.ancx *) { color: #2A160F !important; }

/* ---- 8 · INK ON DARK: CMS blocks on a dark photo band ----------------- */
:is(.hp-block__title--on-dark, .hp-block__body--on-dark):not(.ancx *) { color: #E5DFD6 !important; }
.hp-block__body:not(.ancx *) { color: #2A160F; }
.hp-block__band:not(.ancx *) { background-color: #2A160F !important; }
:is(.hp-block__band .hp-block__title, .hp-block__band .hp-block__body):not(.ancx *) { color: #E5DFD6 !important; }
.hp-block__body--on-dark:not(.ancx *) { color: #E5DFD6 !important; }


/* brand */
/* themes/casasaltas/brand.css — Ancalá global finish layer + BRAND KIT.
 *
 * Loaded once, globally (main.js: import '@theme/active/brand.css'), so these
 * utility classes are available to every component template. Authored to be
 * LOYAL to the Ancalá 2026 graphic brand manual (LAVALENTINA):
 *   · quatrefoil tile texture @15% tone-on-tone (book p38–39)
 *   · oval botanical "stamp" with solid cream plate over dark/photo (p13/17/42)
 *   · oval-stepped + quatrefoil image-mask "framing shapes" (Figure 01/02, p43)
 *   · four-petal rosette fleuron divider/mark (p01/37)
 *   · pill buttons with EB Garamond italic labels (p38/46)
 *   · green/periwinkle "sticker" tile chips dropped onto display type (p36)
 *   · spaced-caps eyebrows (Commuters/Arimo)
 * Colours reference the --anca-* tokens, defined to the brand hexes in
 * tokens.css (section "BRAND-KIT VARIABLES"), which ships on every build.
 * New classes are namespaced `ak-` (Ancalá Kit) to avoid clashing with the
 * per-component scoped `.anca-*` styles.
 */

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

/* =====================================================================
 *  BRAND-KIT SVG SOURCES  (data-URI masks/patterns, recolour via mask)
 * ===================================================================== */
:root {
  /* Four-petal rosette fleuron — the brand's section glyph / divider mark. */
  --ak-rosette-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23fff' d='M50 50 Q38 27 50 5 Q62 27 50 50 Z M50 50 Q62 73 50 95 Q38 73 50 50 Z M50 50 Q27 38 5 50 Q27 62 50 50 Z M50 50 Q73 62 95 50 Q73 38 50 50 Z'/%3E%3Cpath fill='%23fff' d='M50 39 L61 50 L50 61 L39 50 Z'/%3E%3C/svg%3E");

  /* Quatrefoil / 4-lobe clover — image-mask "framing shape" (Figure 02). */
  --ak-quatrefoil-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='50' cy='30' r='29'/%3E%3Ccircle cx='50' cy='70' r='29'/%3E%3Ccircle cx='30' cy='50' r='29'/%3E%3Ccircle cx='70' cy='50' r='29'/%3E%3Crect x='21' y='21' width='58' height='58' rx='12'/%3E%3C/g%3E%3C/svg%3E");

  /* Oval with stepped shoulders — image-mask "framing shape" (Figure 01). */
  --ak-oval-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 120'%3E%3Cg fill='%23fff'%3E%3Cellipse cx='50' cy='60' rx='40' ry='58'/%3E%3Crect x='2' y='46' width='16' height='28' rx='4'/%3E%3Crect x='82' y='46' width='16' height='28' rx='4'/%3E%3C/g%3E%3C/svg%3E");

  /* Repeating quatrefoil tile motif — tone-on-tone ground texture. */
  --ak-tile-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='50' cy='34' r='12'/%3E%3Ccircle cx='50' cy='66' r='12'/%3E%3Ccircle cx='34' cy='50' r='12'/%3E%3Ccircle cx='66' cy='50' r='12'/%3E%3Crect x='42' y='42' width='16' height='16' rx='4'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='100' cy='0' r='6'/%3E%3Ccircle cx='0' cy='100' r='6'/%3E%3Ccircle cx='100' cy='100' r='6'/%3E%3C/g%3E%3C/svg%3E");

  --ak-tile-size: 200px;
}

/* =====================================================================
 *  TYPE UTILITIES
 * ===================================================================== */
/* Eyebrow / label: the accent voice (DESIGN_SYSTEM 1.2), not tracked caps. */
.ak-eyebrow {
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-size: var(--anca-step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 0;
}

/* EB Garamond accent — buttons, nav, labels, prices, room names, quotes.
   DESIGN_SYSTEM.md §1.2: this face is ALWAYS bold (700) + italic — that
   combination *is* the Ancalá voice for interactive / labelling text. */
.ak-accent {
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-weight: 700;
}

/* Casa Sol display headline — UPPERCASE, generous tracking. */
.ak-display {
  font-family: var(--anca-font-display); text-transform: uppercase;
  font-weight: var(--anca-weight-display);
  line-height: var(--anca-lh-tight);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* =====================================================================
 *  BUTTON  (DESIGN_SYSTEM.md §7.1 — the canonical "Reservar")
 *  Cream fill, cacao ink, orange/lead-accent hairline border, EB Garamond
 *  700 italic, rounded-lg, hover = opacity. (The MD's "orange" accent role
 *  maps to this theme's lead living accent token, --anca-coral, so colour
 *  stays brand-reactive.)
 * ===================================================================== */
.ak-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 0.8em 1.9em;
  border-radius: var(--anca-radius-button);
  border: 1px solid var(--anca-coral);
  background: var(--anca-paper);
  color: var(--anca-ink);
  font-family: var(--anca-font-accent);
  font-style: italic;
  font-weight: 700;
  font-size: var(--anca-step-1);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity var(--anca-dur) var(--anca-ease),
    transform var(--anca-dur-fast) var(--anca-ease);
}
.ak-pill:hover { opacity: 0.8; }
.ak-pill:active { transform: scale(0.98); }
/* Inverted variant (MD §7.1): fill cacao / text cream / orange border,
   hover fills the accent. Class name kept `--coral` for template compat. */
.ak-pill--coral {
  background: var(--anca-ink);
  color: var(--anca-paper);
  border-color: var(--anca-coral);
}
.ak-pill--coral:hover { opacity: 1; background: var(--anca-coral); color: var(--anca-on-coral); }
/* Light variant for dark / photo grounds. */
.ak-pill--light {
  background: transparent;
  color: var(--anca-paper);
  border-color: color-mix(in oklab, var(--anca-paper) 60%, transparent);
}
.ak-pill--light:hover { opacity: 1; background: var(--anca-paper); color: var(--anca-ink); }

/* =====================================================================
 *  ROSETTE MARK + DIVIDER  (four-petal fleuron, recolours to currentColor)
 * ===================================================================== */
.ak-rosette {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--ak-rosette-svg) center / contain no-repeat;
  mask: var(--ak-rosette-svg) center / contain no-repeat;
}
.ak-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  /* The rosette fleuron is the mangrove green (brand-aligned), not the
     light-blue/periwinkle variant — applied everywhere via currentColor. */
  color: var(--anca-mangrove);
}
.ak-divider::before,
.ak-divider::after {
  content: none;
}
.ak-divider .ak-rosette { font-size: clamp(1.1rem, 2.4vw, 1.6rem); flex: 0 0 auto; }

/* =====================================================================
 *  IMAGE-MASK FRAMING SHAPES  (book Figure 01 oval-stepped, Figure 02 clover)
 *  Apply to an <img>/<figure>; the mask scales to the element box.
 * ===================================================================== */
.ak-mask-quatrefoil {
  -webkit-mask: var(--ak-quatrefoil-svg) center / 100% 100% no-repeat;
  mask: var(--ak-quatrefoil-svg) center / 100% 100% no-repeat;
}
.ak-mask-oval {
  -webkit-mask: var(--ak-oval-svg) center / 100% 100% no-repeat;
  mask: var(--ak-oval-svg) center / 100% 100% no-repeat;
}

/* =====================================================================
 *  TILE TEXTURE GROUND  (book p38: solid colour + same-family motif @15%)
 *  Put .ak-tile on a section that already owns a solid background; choose a
 *  motif-colour pair. The motif is painted via mask so it recolours cleanly.
 * ===================================================================== */
.ak-tile { position: relative; isolation: isolate; }
.ak-tile > * { position: relative; z-index: 1; }
.ak-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ak-tile-ink, var(--anca-ink));
  opacity: var(--anca-pattern-opacity, 0.15);
  -webkit-mask: var(--ak-tile-svg) 0 0 / var(--ak-tile-size, 200px) repeat;
  mask: var(--ak-tile-svg) 0 0 / var(--ak-tile-size, 200px) repeat;
}
/* Approved texture pairs (book p39). The section supplies the solid ground;
   these only set the motif ink (and a sensible ground for convenience). */
.ak-tile--marron-crema { background: var(--anca-paper); --ak-tile-ink: var(--anca-ink); }
.ak-tile--naranja-crema { background: var(--anca-paper); --ak-tile-ink: var(--anca-coral); }
.ak-tile--rosa-blanco { background: var(--anca-ivory); --ak-tile-ink: var(--anca-blush); }
.ak-tile--on-cacao { background: var(--anca-ink); --ak-tile-ink: var(--anca-paper); }

/* =====================================================================
 *  OVAL STAMP PLATE  (book p13/17: emblem over dark/photo → solid plate)
 *  A cream filled oval behind an emblem/mark so it stays legible on photos.
 * ===================================================================== */
.ak-stamp-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  padding: clamp(0.8rem, 2vw, 1.4rem);
  background: var(--anca-ivory);
  border-radius: 50% / 42%;
  /* a solid plate is legible on its own: no shadow */
  filter: none;
}
.ak-stamp-plate--ring {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* =====================================================================
 *  STICKER TILE CHIPS  (book p36 — small tile chips dropped onto display type)
 *  Accent-only colours (Verde Palma / Azul Marea), small, layered over text.
 * ===================================================================== */
.ak-chip {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  vertical-align: 0.06em;
  border-radius: 0;
  background: var(--anca-mangrove);
  -webkit-mask: none;
  mask: none;
  /* a faint quatrefoil cut so it reads as a tile, not a plain square */
  background-image: var(--ak-tile-svg);
  background-size: 140% 140%;
  background-position: center;
  background-blend-mode: soft-light;
}
.ak-chip--green { background-color: var(--anca-mangrove); }
.ak-chip--blue { background-color: var(--anca-periwinkle); }
.ak-chip--orange { background-color: var(--anca-coral); }

/* =====================================================================
 *  DASHED "TICKET" BORDER  (book p47/50 — decorative card edge, Azul/Naranja)
 * ===================================================================== */
/* Flat surfaces carry no border (DESIGN_SYSTEM 4); kept as a no-op for markup. */
.ak-ticket {
  border: 0;
  border-radius: var(--anca-radius-card);
}
.ak-ticket--blue { border: 0; }

@media (prefers-reduced-motion: reduce) {
  .ak-pill { transition: none; }
}

/* =====================================================================
 *  CASASOL UPPERCASE  (dot removal)
 *  The Casa Sol display face renders lowercase i / j with dots. Force all
 *  display/heading type to UPPERCASE site-wide so the dots disappear.
 *  Headings are Casasol on every page EXCEPT About + FAQs (deliberately set
 *  to EB Garamond) — those are exempted below so their type is untouched.
 *  This global rule also reaches headings rendered by the shared, non-editable
 *  HomepageBlock component (which per-component scoped CSS cannot).
 * ===================================================================== */
h1, h2, h3, h4, h5, h6,
.booker__title, .stepper__val, .reserve-bar__name, .price-pill b,
.seo-list__card-title, .colophon__mark, .wordmark, .sf-logo__wordmark {
  text-transform: uppercase;
}

/* =====================================================================
 *  CASASOL DECORATIVE-DOT SUPPRESSION  (best effort)
 *  The Casa Sol face draws small decorative dots even on CAPITAL letters
 *  (visible on words like "OUR", "ANCALÁ"). That is a font FEATURE, not a
 *  lowercase tittle, so text-transform can't remove it. Turn off ligatures /
 *  contextual alternates / stylistic sets that may be drawing the dots. If the
 *  dots are baked into the glyph outlines (not a toggleable OpenType feature),
 *  NO CSS can remove them — the only fix then is swapping the display font.
 *  Applied to the same Casasol/display contexts; About + FAQs (EB Garamond)
 *  are exempted so their type is left with default features.
 * ===================================================================== */
h1, h2, h3, h4, h5, h6,
.booker__title, .stepper__val, .reserve-bar__name, .price-pill b,
.seo-list__card-title, .colophon__mark, .wordmark, .sf-logo__wordmark {
  font-variant-ligatures: none;
  font-variant: normal;
  /* "ccmp" 0 FIRST: this rule used to reset font-feature-settings without it,
     which switched the dot substitutions back on for every heading. */
  font-feature-settings: "ccmp" 0, "liga" 0, "dlig" 0, "clig" 0, "calt" 0, "hlig" 0,
    "ss01" 0, "ss02" 0, "ss03" 0, "ss04" 0, "ss05" 0, "ss06" 0, "ss07" 0,
    "ss08" 0, "ss09" 0, "ss10" 0, "dnom" 0, "onum" 0, "titl" 0;
}

/* =====================================================================
 *  NO CTA GLOW  (operator: remove the coral button glow everywhere)
 *  Neutralise the coral-glow shadow token so any `box-shadow:
 *  var(--site-shadow-coral, …)` resolves to an invisible (zero, transparent)
 *  shadow site-wide — no rebuild of the many scoped rules needed.
 * ===================================================================== */
:root { --site-shadow-coral: 0 0 0 0 transparent !important; }

/* =====================================================================
 *  CHECKOUT FORM TITLES / LABELS → EB GARAMOND
 *  The checkout page (form.j17-checkout__form) is a shared, non-editable
 *  default component, so per-component scoped CSS can't reach it — this
 *  global rule sets its section titles and field labels in the EB Garamond
 *  accent face (--site-font-accent).
 * ===================================================================== */
.j17-checkout__form :is(legend, label),
.j17-checkout__form :is(h1, h2, h3, h4, h5, h6),
.j17-checkout__form [class*="title"],
.j17-checkout__form [class*="label"],
.j17-checkout__form [class*="Title"],
.j17-checkout__form [class*="Label"] {
  font-family: var(--site-font-accent) !important;
}

/* User input text fields → Arimo (--site-font-body) */
.j17-checkout__form :is(input, textarea, select, option),
.j17-checkout__form [class*="input"],
.j17-checkout__form [class*="Input"],
.j17-checkout__form [class*="field"],
.j17-checkout__form [class*="Field"] {
  font-family: var(--site-font-body) !important;
}


/* theme skin */
/* Ancalá Casas Altas: concierge skin.
 * The launch bubble wears the brand button: cream fill, cacao glyph.
 * The panel rests on cream with cacao ink, the dot-free Casasol for
 * display and Arimo for body. Scoped under .cl: tokens + shape only. */
.cl {
  --site-color-accent:    #2A160F;  /* cacao: send button, focus */
  --site-color-on-accent: #E5DFD6;  /* cream on cacao */
  --site-color-bg:        #E5DFD6;  /* cream panel */
  --site-color-fg:        #2A160F;  /* cacao ink */
  --site-color-border:    #EE4300;  /* orange hairline */

  --site-font-display: "AncalaCasasol", "Casasol", serif;
  --site-font-body:    "Arimo", sans-serif;
  --site-font-accent:  "ACCENTS - EBGaramond-Italic", "EB Garamond", serif;

  --concierge-fab-bg:       #E5DFD6;
  --concierge-fab-fg:       #2A160F;
  --concierge-fab-radius:   999px;
  --concierge-panel-radius: 16px;
}

/* HOMEPAGE (html.ancala-home, set by pages/HomeView.vue while it is mounted).
 * The bar stays at the foot of the screen. The platform lifts it by the
 * height of whatever it takes for a pinned footer, and the chart of the
 * journey is pinned: left alone, the bar rode up to the top of the screen.
 * While the cookie notice is up the platform's own lift is kept, so the bar
 * never covers its buttons. */
html.ancala-home .cl { --concierge-footer-offset: 0px; }
html.ancala-home:has(.cookie-banner) .cl:not(.cl--open) { --concierge-footer-offset: inherit; }
/* ...and it stays a bar: beside a pinned panel the platform folds it into a
 * round button in the corner and unfolds it again further down, so it seemed
 * to jump about. At rest it keeps the bar's own place and width. */
html.ancala-home .cl.cl.cl.cl--corner:not(.cl--open) {
  left: var(--concierge-x, 50%);
  right: auto;
  width: var(--concierge-width, 520px);
  max-width: var(--concierge-max-width, calc(100vw - 24px));
  transform: translateX(-50%);
}
html.ancala-home .cl.cl.cl.cl--corner:not(.cl--open) .cl__composer { display: flex; }
html.ancala-home .cl.cl.cl.cl--corner:not(.cl--open) .cl__fab { display: none; }
@media (max-width: 640px) {
  html.ancala-home .cl.cl.cl.cl--corner:not(.cl--open) { left: 8px; right: 8px; width: auto; max-width: none; transform: none; }
}

/* ...and it keeps out of the opening: while the film of the homepage is on
 * the screen (.oh.is-opening, a flag sections/home/AncalaHero.vue keeps on
 * its own root) the bar is put away, and comes back with the page below.
 * An open conversation is never put away. */
html.ancala-home .cl:not(.cl--open) {
  transition: opacity 320ms ease, translate 320ms ease, visibility 0s linear 0s;
}
html.ancala-home:has(.oh.is-opening) .cl:not(.cl--open) {
  opacity: 0;
  translate: 0 18px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, translate 240ms ease, visibility 0s linear 240ms;
}

/* Type scale (3-Nov-2026): the field, its placeholder and the chat text are
 * BODY, Arimo 15px; the empty-state title is a HEADING. */
.cl :is(input, textarea, select),
.cl :is(input, textarea)::placeholder {
  font-family: "Arimo", sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  font-style: normal !important;
}
.cl .cw__empty-title { font-size: clamp(2.25rem, 3.2vw, 3.25rem) !important; line-height: 1 !important; font-weight: 400 !important; }

/* Casasol is set in capitals only, so no lowercase glyph can show a dot. */
.cl .cw__empty-title {
  text-transform: uppercase;
  font-feature-settings: "ccmp" 0;
}


/* chrome components */

/* =====================================================================
   Tuning surface (law H6). A consumer may set any of these on the element
   it gives the class to; none of them re-hue a locked brand role.
   ===================================================================== */
.site-sound[data-v-c47d7e18] {
  --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-c47d7e18] {
  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-c47d7e18]: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-c47d7e18]    { top: calc(var(--site-header-h, 64px) + 14px); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-top-left[data-v-c47d7e18]     { top: calc(var(--site-header-h, 64px) + 14px); left:  max(14px, env(safe-area-inset-left));
}
.site-sound--at-bottom-right[data-v-c47d7e18] { bottom: calc(14px + var(--snd-dock-lift)); right: max(14px, env(safe-area-inset-right));
}
.site-sound--at-bottom-left[data-v-c47d7e18]  { 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-c47d7e18],
.site-sound--at-bottom-left  .site-sound__panel[data-v-c47d7e18] { top: auto; bottom: calc(100% + 0.45rem);
}
.site-sound--at-top-left  .site-sound__panel[data-v-c47d7e18],
.site-sound--at-bottom-left .site-sound__panel[data-v-c47d7e18] { right: auto; left: 0;
}

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

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

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


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


.pop-hdr-utils[data-v-d000ae81] {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.35rem, 1vw, 0.75rem);
  color: inherit;
}
.pop-hdr-utils__btn[data-v-d000ae81] {
  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-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__btn-label[data-v-d000ae81] {
  /* 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-d000ae81] { position: relative;
}
.pop-hdr-utils__lang-toggle[data-v-d000ae81] {
  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-d000ae81]:hover { opacity: 0.7;
}
.pop-hdr-utils__lang-menu[data-v-d000ae81] {
  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-d000ae81] {
  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-d000ae81]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
}
.pop-hdr-utils__lang-item.is-current[data-v-d000ae81] { font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.pop-hdr-utils__btn[data-v-d000ae81], .pop-hdr-utils__lang-toggle[data-v-d000ae81] { transition: none;
}
}


.cs[data-v-0967c149] {
  position: relative;
  height: 100dvh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #2A160F;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #E5DFD6;
}
.cs__inner[data-v-0967c149] {
  position: relative;
  z-index: 1;
  width: 100%;
  /* clears the fixed 82-90px header */
  padding: 90px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cs__headline[data-v-0967c149] {
  position: relative;
  margin: 0;
  max-width: min(94vw, 14ch);
  font-family: var(--site-font-display, "AncalaCasasol", "Casasol", Georgia, serif);
  font-weight: 400;
  font-size: var(--t-banner, 15vw);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  font-feature-settings: "ccmp" 0;
  color: #E5DFD6;
}
.cs__tile[data-v-0967c149] {
  position: absolute;
  width: 4.7vw;
  height: 4.7vw;
  pointer-events: none;
  user-select: none;
}
@media (min-width: 640px) {
.cs__tile[data-v-0967c149] { width: 0.18em; height: 0.18em;
}
}
.cs__tile--a[data-v-0967c149] { top: 18%; right: 8%;
}
.cs__tile--b[data-v-0967c149] { bottom: 20%; left: 12%;
}
.cs__tile--c[data-v-0967c149] { top: 48%; right: 34%;
}
@media (min-width: 640px) {
.cs__tile--c[data-v-0967c149] { top: 22%;
}
}
.cs__page[data-v-0967c149] {
  margin: clamp(28px, 5vh, 48px) 0 0;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-accent, 20px);
  line-height: 1.3;
  color: #EE4300;
}
.cs__line[data-v-0967c149] {
  margin: 14px 0 0;
  max-width: 36ch;
  font-family: var(--site-font-body, "Arimo", system-ui, sans-serif);
  font-size: var(--t-body, 15px);
  line-height: 1.65;
  letter-spacing: 0.05em;
  color: #E5DFD6;
}
.cs__actions[data-v-0967c149] {
  margin-top: clamp(24px, 4vh, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.cs__btn[data-v-0967c149] {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 8px;
  /* the one button: the header Reserve (cacao outline, cream fill on the dark ground) */
  border: 1px solid #2A160F;
  background: #E5DFD6;
  color: #2A160F;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-accent, 20px);
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s cubic-bezier(0.65, 0, 0.35, 1);
}
.cs__btn[data-v-0967c149]:hover { opacity: 0.8;
}
.cs__btn[data-v-0967c149]:focus-visible { outline: 2px solid #EE4300; outline-offset: 3px;
}


/* NEVER a box, border or outline on the wordmark or the nav words
   (operator 2026-11-03: "this orange border should NEVER happen on my
   logo"): global link/button rules in tokens.css drew one on the current
   page's link and on focus. Keyboard focus shows as an underline instead. */
.anch .anch__logolink[data-v-52d887b2],
.anch .anch__logolink[data-v-52d887b2]:focus,
.anch .anch__logolink[data-v-52d887b2]:focus-visible,
.anch .anch__logolink[data-v-52d887b2]:active,
.anch .anch__navlink[data-v-52d887b2],
.anch .anch__navlink[data-v-52d887b2]:focus,
.anch .anch__navlink[data-v-52d887b2]:focus-visible,
.anch .anch__navlink[data-v-52d887b2]:active,
.anch .anch__dropitem[data-v-52d887b2],
.anch .anch__dropitem[data-v-52d887b2]:focus,
.anch .anch__dropitem[data-v-52d887b2]:focus-visible,
.anch .anch__lang[data-v-52d887b2],
.anch .anch__lang[data-v-52d887b2]:focus-visible {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
}
.anch .anch__logolink[data-v-52d887b2] { padding: 0 !important;
}
.anch .anch__navlink[data-v-52d887b2]:focus-visible,
.anch .anch__dropitem[data-v-52d887b2]:focus-visible,
.anch .anch__lang[data-v-52d887b2]:focus-visible { text-decoration: underline !important; text-underline-offset: 4px;
}
.anch .anch__logolink[data-v-52d887b2]:focus-visible { opacity: 0.8;
}

/* a reserve option with no mark of its own is named in type */
.anch-modal__word[data-v-52d887b2] { display: block; font-family: var(--font-display); font-weight: 400; font-size: var(--t-heading); line-height: 1; text-transform: uppercase; color: #2a160f;
}

/* ============================================================
   ancala.co header — fixed cacao bar
   ============================================================ */
.anch[data-v-52d887b2] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: #2a160f;
  color: #e5dfd6;
  font-family: var(--font-body);
  letter-spacing: 0;
}
.anch-modal[data-v-52d887b2], .anch-menu[data-v-52d887b2] { letter-spacing: 0;
}

/* mobile row (2026-10-23, per Tiger: "the Ancalá logo in the navbar needs
   to be properly centred on mobile") — three cells: the menu button, the
   wordmark, the ES · WhatsApp · Reserve group. The two side cells share
   the width EQUALLY, so the wordmark stands on the centre line of the
   screen with the same clear room on either side; before, it was pinned
   to the centre by absolute position while the right group ran up
   against it (one gap of 100px, the other of 8px), which read as a mark
   pushed to the right. Should a very narrow screen not have room for
   both, the side cells give way rather than overlap the mark. */
.anch__m[data-v-52d887b2] {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px clamp(12px, 4vw, 24px);
  min-height: 82px;
}
.anch__m-left[data-v-52d887b2],
.anch__m-right[data-v-52d887b2] { flex: 1 1 0; display: flex; align-items: center; gap: 8px;
}
.anch__m-left[data-v-52d887b2] { justify-content: flex-start;
}
.anch__m-right[data-v-52d887b2] { justify-content: flex-end;
}
.anch__m-center[data-v-52d887b2] { flex: 0 0 auto; display: flex; justify-content: center;
}
.anch__m-center .anch__logolink[data-v-52d887b2] { display: block;
}
/* the right group is sized to fit its half of a 375px screen beside the
   wordmark, in Spanish ("Reservar") as well as in English */
.anch__m .anch__reserve[data-v-52d887b2] { font-size: var(--t-accent); line-height: 1.3; padding: 4px 10px;
}
.anch__m .anch__logo--m[data-v-52d887b2] { height: 30px;
}
@media (max-width: 399px) {
.anch__m[data-v-52d887b2] { gap: 8px;
}
.anch__m .anch__reserve[data-v-52d887b2] { padding: 4px 8px;
}
.anch__m .anch__logo--m[data-v-52d887b2] { height: 26px;
}
}
@media (max-width: 355px) {
.anch__m .anch__logo--m[data-v-52d887b2] { height: 22px;
}
.anch__m .anch__reserve[data-v-52d887b2] { padding: 3px 7px;
}
}

/* desktop row: flex between, px-12 py-6 */
.anch__d[data-v-52d887b2] {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 48px;
}
/* the full nav row needs ~1000px; on tablets (768-1023) it pushed the
   Reserve button off the right edge, so they keep the compact row */
@media (min-width: 1024px) {
.anch__m[data-v-52d887b2] { display: none;
}
.anch__d[data-v-52d887b2] { display: flex;
}
}
.anch__d-left[data-v-52d887b2] { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
}
.anch__d-right[data-v-52d887b2] { display: flex; align-items: center; gap: 16px; flex-shrink: 0;
}
.anch__icon[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: #e5dfd6;
  display: inline-flex;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__icon[data-v-52d887b2]:hover { opacity: 0.7;
}
.anch__icon svg[data-v-52d887b2] { display: block;
}
.anch__logolink[data-v-52d887b2] { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: block; text-decoration: none;
}
.anch__logo[data-v-52d887b2] { height: 40px; width: auto; max-width: none; object-fit: contain; display: block;
}
.anch__logo--m[data-v-52d887b2] { height: 32px;
}
.anch__nav[data-v-52d887b2] { display: flex; align-items: center; gap: 24px;
}
@media (min-width: 1024px) {
.anch__nav[data-v-52d887b2] { gap: 36px;
}
}
.anch__navlink[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--t-accent);
  line-height: 1.3;
  white-space: nowrap;
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__navlink[data-v-52d887b2]:hover { color: #ee4300;
}

/* ---- Casas Altas drop-down (site pages) ---- */
.anch__navdrop[data-v-52d887b2] { position: relative; display: flex; align-items: center;
}
.anch__navlink--drop[data-v-52d887b2] { display: inline-flex; align-items: center; gap: 6px;
}
.anch__caret[data-v-52d887b2] { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__caret.is-open[data-v-52d887b2] { transform: rotate(180deg);
}
.anch__drop[data-v-52d887b2] {
  position: absolute; top: 100%; left: 50%;
  transform: translate(-50%, 10px);
  display: flex; flex-direction: column; align-items: center;
  min-width: 210px;
  padding: 20px 30px 24px;
  background: #2a160f;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.2s;
}
.anch__drop.is-open[data-v-52d887b2] {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition:
    opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
/* hover bridge over the gap between the bar and the panel */
.anch__drop[data-v-52d887b2]::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px;
}
.anch__dropitem[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: var(--t-accent); line-height: 1.3;
  white-space: nowrap;
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__dropitem[data-v-52d887b2]:hover { color: #ee4300;
}
.anch__lang[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: var(--t-accent); line-height: 1.3;
  color: #e5dfd6;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__lang--d[data-v-52d887b2] { font-size: var(--t-accent);
}
.anch__lang[data-v-52d887b2]:hover { opacity: 0.7;
}
.anch__wa[data-v-52d887b2] { display: inline-flex; color: #e5dfd6; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__wa svg[data-v-52d887b2] { width: 20px; height: 20px; display: block;
}
.anch__wa--d svg[data-v-52d887b2] { width: 24px; height: 24px;
}
.anch__wa[data-v-52d887b2]:hover { opacity: 0.7;
}
.anch__reserve[data-v-52d887b2] {
  appearance: none; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: var(--t-accent); line-height: 1.3;
  border-radius: 8px;
  border: 1px solid #2a160f;
  padding: 6px 12px;
  background: #e5dfd6;
  color: #2a160f;
  letter-spacing: 0;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch__reserve--d[data-v-52d887b2] { font-size: var(--t-accent); line-height: 1.3; padding: 6px 16px;
}
.anch__reserve[data-v-52d887b2]:hover { opacity: 0.8;
}

/* ============================================================
   reserve modal (z-70)
   ============================================================ */
.anch-modal[data-v-52d887b2] {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 300ms ease;
}
.anch-modal.is-open[data-v-52d887b2] { opacity: 1; pointer-events: auto;
}
.anch-modal__scrim[data-v-52d887b2] { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5);
}
.anch-modal__panel[data-v-52d887b2] {
  position: relative;
  width: 100%; max-width: 28rem;
  /* !important: tokens.css flattens [class*="panel"] to 8px otherwise */
  border-radius: 16px !important;
  padding: 40px 24px;
  background: #e5dfd6;
}
@media (min-width: 640px) {
.anch-modal__panel[data-v-52d887b2] { max-width: 48rem; padding: 48px;
}
}
.anch-modal__close[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  position: absolute; top: 16px; right: 16px;
  color: #2a160f;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-modal__close[data-v-52d887b2]:hover { opacity: 0.6;
}
.anch-modal__title[data-v-52d887b2] {
  margin: 0;
  text-align: center;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 400;
  font-size: var(--t-accent); line-height: 1.3;
  text-transform: none;
  letter-spacing: 0;
  color: #2a160f;
}
.anch-modal__options[data-v-52d887b2] {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
}
@media (min-width: 640px) {
.anch-modal__options[data-v-52d887b2] { margin-top: 40px; flex-direction: row; gap: 24px;
}
}
.anch-modal__opt[data-v-52d887b2] { display: block; transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-modal__opt[data-v-52d887b2]:hover { opacity: 0.75;
}
.anch-modal__opt img[data-v-52d887b2] { width: 160px; height: auto; object-fit: contain; display: block;
}
@media (min-width: 640px) {
.anch-modal__opt img[data-v-52d887b2] { width: 176px;
}
}

/* ============================================================
   fullscreen menu (z-60)
   ============================================================ */
.anch-menu[data-v-52d887b2] {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background-color: #2a160f;
  background-size: cover;
  background-position: center;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms ease;
}
.anch-menu.is-open[data-v-52d887b2] { opacity: 1; pointer-events: auto;
}
.anch-menu__top[data-v-52d887b2] { display: flex; justify-content: flex-end; padding: 24px;
}
@media (min-width: 640px) {
.anch-menu__top[data-v-52d887b2] { padding: 24px 48px;
}
}
.anch-menu__nav[data-v-52d887b2] {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px;
}
@media (min-width: 640px) {
.anch-menu__nav[data-v-52d887b2] { gap: 28px;
}
}
.anch-menu__item[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-heading); line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--track-display);
  color: #e5dfd6;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-menu__item[data-v-52d887b2]:hover { color: #ee4300;
}
/* each hotel is a group: the label row + an arrow that reveals a small
   drawer of that property's tabs (collapsed by default) */
.anch-menu__group[data-v-52d887b2] { display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.anch-menu__row[data-v-52d887b2] { display: inline-flex; align-items: center; gap: 10px;
}
.anch-menu__toggle[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 4px; cursor: pointer;
  color: #e5dfd6; display: inline-flex; line-height: 0;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-menu__toggle.is-open[data-v-52d887b2] { transform: rotate(180deg);
}
.anch-menu__toggle[data-v-52d887b2]:hover { color: #ee4300;
}
.anch-menu__sub[data-v-52d887b2] {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin: 2px 0 6px;
}
.anch-menu__subitem[data-v-52d887b2] {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--site-font-accent, "EB Garamond", Georgia, serif);
  font-style: italic; font-weight: 700;
  font-size: var(--t-accent); line-height: 1.3;
  color: #e5dfd6; opacity: 0.85;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.anch-menu__subitem[data-v-52d887b2]:hover { color: #ee4300; opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.anch[data-v-52d887b2] *, .anch-modal[data-v-52d887b2] *, .anch-menu[data-v-52d887b2] * { transition-duration: 0.001ms !important;
}
}


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


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


/* ============================================================
   FOOTER — ancala.co parity. Orange field, cream ink, one full screen.
   ============================================================ */
.site-footer[data-v-e1866f06] {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: #EE4300;                 /* brand orange */
  color: #E5DFD6;                      /* brand cream */
  font-family: var(--font-body);
  letter-spacing: var(--track-body);
}
.sf-wrap[data-v-e1866f06] {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* pt-28 px-8; extra bottom room so the fine print clears
     Popstay's fixed concierge bar */
  padding: 7rem 2rem 7.5rem;
}
.sf-cols[data-v-e1866f06] {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;                           /* gap-12 */
  align-items: start;
  align-content: center;
}
.sf-col[data-v-e1866f06] { text-align: center;
}
.sf-col--mark[data-v-e1866f06] { display: flex; justify-content: center;
}
.sf-mark[data-v-e1866f06] { height: 3.5rem; width: auto; max-width: none; object-fit: contain;
}
.sf-follow[data-v-e1866f06] {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  font-size: var(--t-heading);
}
.sf-list[data-v-e1866f06] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
}
.sf-mails[data-v-e1866f06] { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
}

/* a house link to the page you are on picks up the platform's "current
   page" styling (italic accent face, no caps); keep all three houses alike */
.site-footer .sf-list .sf-item[data-v-e1866f06],
.site-footer .sf-list .sf-item[aria-current][data-v-e1866f06] {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: var(--track-caps) !important;
  font-size: var(--t-body) !important;
  line-height: 1.4 !important;
}
.site-footer .sf-bottom .sf-fine[data-v-e1866f06],
.site-footer .sf-bottom .sf-fine[aria-current][data-v-e1866f06],
.site-footer .sf-bottom .sf-fine.router-link-active[data-v-e1866f06],
.site-footer .sf-mails .sf-mail[data-v-e1866f06] {
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: var(--t-body) !important;
}
.site-footer .sf-bottom .sf-fine[data-v-e1866f06] { text-transform: uppercase !important; letter-spacing: var(--track-caps) !important;
}
.sf-item[data-v-e1866f06] {
  font-size: var(--t-body);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
.sf-mail[data-v-e1866f06] {
  font-size: var(--t-body);
  letter-spacing: var(--track-body);
  color: inherit;
  text-decoration: none;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
.sf-item[data-v-e1866f06]:hover, .sf-mail[data-v-e1866f06]:hover, .sf-fine[data-v-e1866f06]:hover { opacity: 0.7;
}
.sf-bottom[data-v-e1866f06] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}
.sf-fine[data-v-e1866f06] {
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  transition: opacity .25s var(--site-ease, cubic-bezier(.65, 0, .35, 1));
}
@media (min-width: 640px) {
.sf-wrap[data-v-e1866f06] { padding-left: 4rem; padding-right: 4rem;
}   /* sm:px-16 */
.sf-mark[data-v-e1866f06] { height: 5rem;
}                              /* sm:h-20 */
.sf-list[data-v-e1866f06] { margin-top: 2rem;
}
}
@media (min-width: 768px) {
.sf-cols[data-v-e1866f06] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem;
}
.sf-col[data-v-e1866f06] { text-align: left;
}
.sf-col--mark[data-v-e1866f06] { justify-content: flex-start;
}
}

/* ---- policy modal (Popstay) ---- */
.sf-modal[data-v-e1866f06] {
  position: fixed;
  inset: 0;
  z-index: 1000; /* above the concierge (998–999) */
  display: grid;
  place-items: center;
  padding: var(--site-gutter, clamp(1.25rem, 4vw, 3rem));
}
.sf-modal__scrim[data-v-e1866f06] {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--site-color-fg) 72%, transparent);
  backdrop-filter: blur(3px);
}
.sf-modal__panel[data-v-e1866f06] {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: min(80vh, 720px);
  display: flex;
  flex-direction: column;
  background: #E5DFD6;
  color: #2A160F;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
}
.sf-modal__close[data-v-e1866f06] {
  position: absolute;
  top: var(--site-space-3, 16px);
  right: var(--site-space-3, 16px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #2A160F;
  cursor: pointer;
  transition: background var(--site-duration, 360ms) var(--site-ease, ease),
    color var(--site-duration, 360ms) var(--site-ease, ease),
    transform var(--site-duration, 360ms) var(--site-ease, ease);
}
.sf-modal__close svg[data-v-e1866f06] {
  width: 18px;
  height: 18px;
}
.sf-modal__close[data-v-e1866f06]:focus-visible {
  background: var(--site-color-accent);
  color: var(--site-color-on-accent);
  transform: rotate(90deg);
  outline: none;
}
.sf-modal__tabs[data-v-e1866f06] {
  display: flex;
  gap: var(--site-space-4, 24px);
  flex-wrap: wrap;
  padding: var(--site-space-5, 40px) var(--site-space-5, 40px) 0;
  padding-right: 72px;
  border-bottom: 1px solid var(--site-color-border);
}
.sf-modal__tab[data-v-e1866f06] {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  padding: 0 0 var(--site-space-3, 16px);
  font-family: var(--site-font-body);
  font-size: var(--t-body);
  font-weight: 400;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--site-color-muted);
  transition: color 0.3s ease;
}
.sf-modal__tab[data-v-e1866f06]::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--site-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--site-duration, 360ms) var(--site-ease, ease);
}
.sf-modal__tab.is-active[data-v-e1866f06] {
  color: var(--site-color-fg);
}
.sf-modal__tab.is-active[data-v-e1866f06]::after {
  transform: scaleX(1);
}
.sf-modal__body[data-v-e1866f06] {
  padding: var(--site-space-5, 40px);
  overflow-y: auto;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--site-color-ink-2);
}
.sf-modal__body p[data-v-e1866f06] {
  margin: 0;
  white-space: pre-line;
}
.sf-modal-leave-active[data-v-e1866f06] {
  transition: opacity 0.45s var(--site-ease, ease);
}
.sf-modal-leave-to[data-v-e1866f06] {
  opacity: 0;
}
.sf-modal-leave-active .sf-modal__panel[data-v-e1866f06] {
  transition: transform 0.45s var(--site-ease, ease);
}
.sf-modal-leave-to .sf-modal__panel[data-v-e1866f06] {
  transform: translateY(16px);
}
.sf-modal[data-v-e1866f06] * {
    transition-duration: 1ms !important;
}


/* The shell pads its bottom to keep the fixed concierge bar off the last
   content, which left a strip of whatever lies behind the page under the
   orange footer (on the homepage: the film). The footer is the last thing
   on every page and already keeps its fine print clear of the bar, so the
   reserve is not needed. */
.app-shell:has(> .site-footer) { padding-bottom: 0 !important;
}
/* The footer's link groups (Site Studio → Footer) are DATA this theme reads
   itself: the houses stand in the footer's own column, the sister house's
   pages and the reserve options feed the header. The platform's generic
   strip of those groups under the footer would print them a second time,
   unstyled, so it is not shown. */
.app-shell:has(> .site-footer) > section.fx { display: none;
}


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

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

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

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


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

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

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

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


/* brand record */
@font-face { font-family: "Casasol"; src: url("/cdn/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVKN2VDAH6K0WEZBCP19BTT2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("/cdn/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVG7B4JJJE67W2ZDPHZMZEZA"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ACCENTS - EBGaramond-Italic"; src: url("/cdn/01KSZW0DC7GSG1NJ6S6F15P1NS/01KVGJGCEYBM2S0A999KKPBQJ3"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --site-color-fg: #2a160f;
  --site-color-accent: #f87061;
  --site-color-bg: #fbf6f0;
  --site-color-on-accent: #ffffff;
  --concierge-bg: rgb(251 246 240);
  --site-color-fg-muted: #7c6d67;
  --a11y-focus: #e46759;
  --site-color-accent-2: #2b8d40;
  --site-color-primary-2: #e6dfd6;
  --site-color-supporting-core-tone: #2a160f;
  --site-color-secondary-2: #fbdeda;
  --site-font-display: "Casasol", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-body: "Arimo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --site-font-accent: "ACCENTS - EBGaramond-Italic", system-ui, -apple-system, "Segoe UI", sans-serif;
}