/* ==========================================================================
   Las Casitas at El Colorado — Design System
   Pueblo Revival / high-desert palette. Limewash texture.
   Single stylesheet, no build step. Edit tokens below to retune the whole site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* ---- Brand palette -------------------------------------------------
     The eight property colours, plus the few tints and shades a UI needs.
     Black is reserved for type and small accents; it is never a fill. */

  /* Surfaces */
  --plaster:      #F8F2EB;   /* brand cream — page ground */
  --plaster-deep: #EFEAE3;   /* brand off-white — alternating band */
  --sand:         #C4A989;   /* brand tan — image wells, strong borders */
  --sand-line:    #E3D8C8;   /* brand sand at ~45% over plaster — hairlines only */

  /* Type. --ink is for words, never for backgrounds. */
  --ink:        #2A2621;
  --ink-soft:   #4A423A;
  --stone:      #6B6055;
  --stone-light:#847768;

  /* Warm accents */
  --terracotta: #BB6C40;   /* brand terracotta — icons, large type, hovers */
  --clay:       #9E5B36;   /* brand terracotta darkened to clear AA: the brand
                              value itself is 3.54:1 on plaster, which fails for
                              link text and for button labels. See docs. */
  --clay-deep:  #824B2C;   /* button hover */
  --adobe:      #A6785C;   /* brand adobe */
  --gold:       #BD8B2F;   /* brand gold — small accents only */

  /* Greens. --dark replaces black for every large dark area. */
  --sage:       #808268;   /* brand sage */
  --dark:       #546967;   /* brand pine — dark sections, footer */

  /* Semantic */
  --bg:         var(--plaster);
  --fg:         var(--ink);
  --muted:      var(--stone);
  --accent:     var(--clay);
  --rule:       var(--sand-line);

  /* Type */
  --display: "Cormorant Garamond", Cormorant, "EB Garamond", Garamond, "Times New Roman", serif;
  --sans:    "Jost", Futura, "Century Gothic", "Trebuchet MS", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* Fluid type scale */
  /* Jost's tracked caps run wider than Inter's, so the eyebrow scales down on
     narrow screens rather than wrapping and orphaning its last word. */
  --t-eyebrow: clamp(0.6875rem, 0.63rem + 0.24vw, 0.8125rem);
  --t-small:   0.9375rem;
  --t-body:    clamp(1.0625rem, 1.02rem + 0.22vw, 1.125rem);
  --t-lead:    clamp(1.1875rem, 1.1rem + 0.42vw, 1.375rem);
  --t-h4:      clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --t-h3:      clamp(1.5rem, 1.3rem + 0.9vw, 2.0625rem);
  --t-h2:      clamp(2.125rem, 1.6rem + 2.2vw, 3.625rem);
  --t-h1:      clamp(2.75rem, 1.75rem + 4.6vw, 5.75rem);
  --t-hero:    clamp(3rem, 1.5rem + 6.6vw, 7.25rem);

  /* Space */
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --wrap:    1280px;
  --wrap-narrow: 940px;
  --prose:   64ch;

  /* Motifs */
  --radius: 3px;

  --shadow-sm: 0 1px 2px rgba(70,86,84,.05), 0 4px 14px rgba(70,86,84,.05);
  --shadow-md: 0 2px 6px rgba(70,86,84,.06), 0 18px 50px rgba(70,86,84,.10);
  --shadow-lg: 0 4px 12px rgba(70,86,84,.07), 0 34px 80px rgba(70,86,84,.14);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Limewash grain — the single cheapest thing that makes a site feel "made". */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

img, picture, video, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--clay); color: var(--plaster); }

:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); line-height: 1.08; }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.22; }
h4 { font-size: var(--t-h4); line-height: 1.3; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 1.25rem;
  display: block;
}
.eyebrow--stone { color: var(--stone-light); }

.lead {
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--prose);
}
.muted { color: var(--muted); }
.small { font-size: var(--t-small); }
.prose { max-width: var(--prose); }
.prose p + h3 { margin-top: 2.25rem; }
.prose h3 + p { margin-top: .85rem; }
.prose ul { margin-top: 1rem; padding-left: 1.15rem; }
.prose li + li { margin-top: .5rem; }

a { color: inherit; }
.link {
  color: var(--clay);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .35s var(--ease);
}
.link:hover { background-size: 0% 1px; background-position: 100% 100%; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section--ink { background: var(--dark); color: var(--plaster); }
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: var(--plaster); }
.section--ink .lead { color: rgba(248,242,235,.78); }
/* Body copy and eyebrows on the dark ground. These used to be written as
   inline styles on each page, which put colours outside the palette and
   outside this file. */
.section--ink .eyebrow { color: var(--plaster-deep); }
.section--ink .feature__body p { color: rgba(248,242,235,.78); }
.section--ink .muted { color: rgba(248,242,235,.62); }
.section--deep { background: var(--plaster-deep); }

.rule { height: 1px; background: var(--rule); border: 0; }

.section-head { max-width: 780px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .lead { margin-inline: auto; }
.section-head p { margin-top: 1.25rem; }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
/* 320px, not 280px: at 280 a fourth column fits inside .wrap, which broke the
   six-tile sections into an orphaned 4 + 2 with a gap beside it. */
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
/* Exactly two across, so four reviews read as a square block rather than a
   row of three with one stranded underneath. */
.grid-pair { grid-template-columns: 1fr; }
@media (min-width: 780px) { .grid-pair { grid-template-columns: 1fr 1fr; } }

/* Alternating image / text feature block */
.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature__media { order: 2; }
}
.feature + .feature { margin-top: clamp(4rem, 8vw, 7rem); }

/* The casita rows on /casitas/ give the photograph the larger share of the row.
   These pictures are the argument for the rate, so an even split left them
   reading as illustration next to the spec table rather than as the point of it.
   The columns are declared per direction because --flip moves the media into
   the second column; a single rule would hand the wide column to whichever side
   the copy happened to be on. */
@media (min-width: 900px) {
  .feature--showcase { grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 4vw, 3.25rem); }
  .feature--showcase.feature--flip { grid-template-columns: 1fr 1.4fr; }
}
.feature__body { max-width: 52ch; }
.feature__body p { margin-top: 1.25rem; color: var(--ink-soft); }
.feature__body h3 { font-size: var(--t-h3); }
.feature__body h3 + p { margin-top: .875rem; }
.feature__body .btn { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05em 2.1em;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--clay); color: var(--plaster); border-color: var(--clay); }
.btn--primary:hover { background: var(--clay-deep); border-color: var(--clay-deep); }

.btn--ink { background: var(--dark); color: var(--plaster); border-color: var(--dark); }
.btn--ink:hover { background: var(--clay); border-color: var(--clay); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sand-line); }
.btn--ghost:hover { background: var(--dark); color: var(--plaster); border-color: var(--dark); }

.btn--light { background: var(--plaster); color: var(--ink); border-color: var(--plaster); }
.btn--light:hover { background: var(--clay); color: var(--plaster); border-color: var(--clay); }

.btn--outline-light { background: transparent; color: var(--plaster); border-color: rgba(248,242,235,.4); }
.btn--outline-light:hover { background: var(--plaster); color: var(--ink); border-color: var(--plaster); }

.btn--sm { padding: .8em 1.5em; font-size: .75rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .875rem; }
.btn-row--center { justify-content: center; }

/* --------------------------------------------------------------------------
   6. Media — square frames. There is no arch anywhere on the property,
      so there is none on the page either.
   -------------------------------------------------------------------------- */
.media {
  position: relative;
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--radius);
}
.media img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.media--4x5  { aspect-ratio: 4 / 5; }
.media--3x4  { aspect-ratio: 3 / 4; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--16x9 { aspect-ratio: 16 / 9; }
/* The archival postcard keeps its own proportions so nothing is cropped -- the
   sweep of casitas down the drive is the whole point of it. It carries its own
   printed white border and caption, so it gets a flat mount and a soft shadow
   and reads as a real postcard laid on the page. */
/* Archival frames. Historical photographs arrive at whatever proportion the
   original print happens to be, and cropping one to fit a layout is how you lose
   the edge of a building or the caption under it. So these mat rather than crop:
   the picture sits whole on a plaster ground at its own shape, and the frame
   keeps a fixed height so the empty placeholder still has somewhere to live. */
.media--archival {
  aspect-ratio: 16 / 10;
  background: var(--plaster-deep);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(42, 38, 33, .10), 0 10px 26px -10px rgba(42, 38, 33, .22);
}
.media--archival img { object-fit: contain; }
/* A full-width plate dropped between two blocks of prose needs air on both
   sides of it, or the copy runs straight into the frame. */
.plate { margin-block: clamp(2.5rem, 5vw, 4rem); }

/* Two frames stacked in one feature column. */
.stack { display: grid; gap: clamp(.75rem, 1.5vw, 1.25rem); }

.media--postcard {
  aspect-ratio: 1200 / 733;
  background: var(--plaster-deep);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(42, 38, 33, .10), 0 10px 26px -10px rgba(42, 38, 33, .22);
}

.media--zoom img { transition: transform 1.1s var(--ease); }
a:hover .media--zoom img, .card:hover .media--zoom img { transform: scale(1.045); }

/* Photo placeholder — shows the art director exactly what belongs here.
   Delete .ph markup once real photography is dropped in. */
.ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(168,90,60,.05) 11px 22px),
    var(--sand);
  color: var(--stone);
}
.ph__label {
  font-size: .625rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
}
.ph__file {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  color: var(--ink-soft);
  word-break: break-all;
}
.ph__note { font-size: .75rem; line-height: 1.45; max-width: 30ch; }
/* On a dark band the placeholder's own dark type is unreadable. It is build
   scaffolding, but it is live scaffolding, so give it the light ground's ink. */
.section--ink .ph__label { color: var(--plaster-deep); }
.section--ink .ph__file  { color: rgba(248,242,235,.72); }
.section--ink .ph__note  { color: rgba(248,242,235,.66); }

/* In the hero the placeholder must not fight the headline: tuck it bottom-right,
   above the scrim, and let the dark hero read as an intentional design. */
.hero__media .ph {
  z-index: 2;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: none;
  gap: .3rem;
}
.hero__media .ph__label { color: rgba(248,242,235,.62); }
.hero__media .ph__file  { color: rgba(248,242,235,.5); }
.hero__media .ph__note  { color: rgba(248,242,235,.45); }
@media (max-width: 760px) { .hero__media .ph { display: none; } }

/* --------------------------------------------------------------------------
   7. Header / navigation
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: var(--dark); color: var(--plaster);
  padding: .875rem 1.25rem; text-decoration: none; font-size: .875rem;
}
.skip:focus { left: .5rem; top: .5rem; }

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease),
              border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  position: relative;
  width: min(100% - (var(--gutter) * 2), 1440px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Transparent over hero, solid after scroll */
.site-header--over { color: var(--plaster); }
.site-header--over .wordmark, .site-header--over .nav__link { color: var(--plaster); }
.site-header--solid {
  background: rgba(248,242,235,.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--rule);
  color: var(--ink);
}
.site-header--solid .wordmark, .site-header--solid .nav__link { color: var(--ink); }
.site-header--solid .btn--outline-light {
  color: var(--ink); border-color: var(--sand-line);
}
.site-header--solid .btn--outline-light:hover { background: var(--clay); color: var(--plaster); border-color: var(--clay); }

.wordmark {
  font-family: var(--display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.05;
  text-decoration: none;
  transition: color .4s var(--ease);
  flex-shrink: 0;
}
.wordmark small {
  display: block;
  font-family: var(--sans);
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: .72;
  margin-top: .22em;
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.nav__link {
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .085em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  padding-block: .35rem;
  transition: color .3s var(--ease), opacity .3s var(--ease);
  opacity: .88;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="page"] { opacity: 1; }

.header-actions { display: flex; align-items: center; gap: 1rem; }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .6rem;
  margin-right: -.6rem;
  cursor: pointer;
  color: inherit;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span + span { margin-top: 6px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 1020px) {
  .nav-toggle { display: block; }

  /* A compact panel anchored under the toggle -- not a full-screen takeover. */
  .nav {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(264px, calc(100vw - var(--gutter) * 2));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .4rem;
    background: var(--plaster);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  body.nav-open .nav {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__link {
    color: var(--ink) !important;
    font-size: .8125rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .72rem .8rem;
    border-radius: 3px;
    width: 100%;
    opacity: 1;
    transform: none;
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .nav__link + .nav__link { border-top: 1px solid var(--rule); border-radius: 0; }
  .nav__link::after { display: none; }
  .nav__link:hover { background: var(--sand); color: var(--clay) !important; }
  .nav__link[aria-current="page"] { color: var(--clay) !important; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: min(92svh, 900px);
  display: flex;
  align-items: flex-end;
  color: var(--plaster);
  background: var(--dark);
  overflow: hidden;
  isolation: isolate;
}
.hero--short { min-height: min(62svh, 620px); }

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Horizontal wash first: the headline is bottom-left, and a bright interior
       photograph gives cream type nothing to sit against without it. */
    linear-gradient(to right, rgba(30,38,37,.72) 0%, rgba(30,38,37,.58) 34%, rgba(30,38,37,.16) 62%, rgba(30,38,37,.06) 100%),
    linear-gradient(to top, rgba(30,38,37,.80) 0%, rgba(30,38,37,.42) 46%, rgba(30,38,37,.34) 72%, rgba(30,38,37,.52) 100%);
}
.hero__inner {
  width: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  position: relative;
}
.hero__title {
  font-size: var(--t-hero);
  color: var(--plaster);
  max-width: 15ch;
  /* At hero scale Cormorant's hairlines are thick enough to carry 400, which
     is where the face is at its most elegant. */
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: 0;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
}
.hero__sub {
  margin-top: 1.5rem;
  font-size: var(--t-lead);
  color: rgba(248,242,235,.85);
  max-width: 46ch;
  line-height: 1.55;
}
.hero__eyebrow {
  color: rgba(248,242,235,.72);
  border-top: 1px solid rgba(248,242,235,.28);
  padding-top: 1.1rem;
  display: inline-block;
  margin-bottom: 1.6rem;
}
.hero__actions { margin-top: 2.25rem; }

/* Interior page hero (shorter, centered) */
.pagehead {
  padding-top: calc(var(--nav-h) + clamp(4rem, 9vw, 7.5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.pagehead h1 { max-width: 20ch; margin-inline: auto; }
.pagehead .lead { margin-top: 1.5rem; margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   9. Booking bar (Guesty widget mount)
   -------------------------------------------------------------------------- */
.bookbar {
  position: relative;
  z-index: 5;
  margin-top: calc(clamp(2rem, 5vw, 3.5rem) * -1);
}
.bookbar__panel {
  background: var(--plaster);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.bookbar__label {
  font-size: var(--t-eyebrow);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  text-align: center;
  margin-bottom: 1.25rem;
}
/* ---- Booking search -----------------------------------------------------
   Our own fields, styled like the rest of the site, handing off to Guesty.
   Without JS the native date inputs show and the form is a plain GET. */
.bookform {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1.05fr 1.05fr .85fr auto;
  align-items: end;
  position: relative;
}
@media (max-width: 780px) {
  .bookform { grid-template-columns: 1fr 1fr; }
  .bookform__field--guests { grid-column: 1 / -1; }
  .bookform__submit { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .bookform { grid-template-columns: 1fr; }
}

.bookform__field { display: flex; flex-direction: column; gap: .35rem; position: relative; min-width: 0; }
.bookform label {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone);
}
.bookform__native,
.bookform select {
  border: 1px solid var(--sand-line);
  background: #fff;
  border-radius: 2px;
  padding: .85rem .9rem;
  font: inherit;
  font-size: .9375rem;
  width: 100%;
  color: var(--ink);
  transition: border-color .25s var(--ease);
}
.bookform__native:focus, .bookform select:focus { border-color: var(--clay); outline: none; }
.bookform__submit { padding-block: 1.05em; }
@media (min-width: 781px) {
  /* Stretch every control to a single row height so the four line up exactly. */
  .bookform--js { align-items: stretch; }
  .bookform--js .bookform__field { justify-content: center; }
  .bookform--js .bookform__trigger { height: 100%; }
  .bookform--js .bookform__submit { min-height: 64px; }
}

/* With JS the native date inputs stay in the form but hand their job to the
   styled triggers, so the value is still single-sourced. */
.bookform--js .bookform__native {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.bookform__trigger {
  display: none;
  width: 100%;
  min-height: 64px;
  text-align: left;
  border: 1px solid var(--sand-line);
  background: #fff;
  border-radius: 2px;
  padding: .6rem .9rem .65rem;
  cursor: pointer;
  font: inherit;
  transition: border-color .25s var(--ease);
}
.bookform--js .bookform__trigger { display: block; }
.bookform--js .bookform__field--date > label { display: none; }

/* Guests sits in the same bordered box as the date triggers so all four
   controls share one height and baseline. */
.bookform--js .bookform__field--guests {
  border: 1px solid var(--sand-line);
  background: #fff;
  border-radius: 2px;
  padding: .6rem .9rem .5rem;
  gap: .1rem;
  transition: border-color .25s var(--ease);
}
.bookform--js .bookform__field--guests:focus-within { border-color: var(--clay); }
.bookform--js .bookform__field--guests > label {
  font-size: .6875rem;
  letter-spacing: .14em;
}
.bookform--js .bookform__field--guests select {
  border: 0;
  padding: 0;
  background: none;
  font-size: .9375rem;
  height: auto;
}
.bookform--js .bookform__field--guests select:focus { outline: none; }
.bookform__trigger:hover { border-color: var(--adobe); }
.bookform__trigger[aria-expanded="true"] { border-color: var(--clay); }
.bookform__triggerLabel {
  display: block;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone);
}
.bookform__triggerValue {
  display: block;
  font-size: .9375rem;
  color: var(--ink);
  margin-top: .15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Range calendar ---- */
.cal {
  position: absolute;
  z-index: 40;
  top: calc(100% + .6rem);
  left: 0;
  background: var(--plaster);
  border: 1px solid var(--sand-line);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  padding: 1rem 1.1rem 1.1rem;
  width: max-content;
  max-width: min(100%, 640px);
}
@media (max-width: 720px) { .cal { left: 0; right: 0; width: auto; } }
.cal[hidden] { display: none; }

.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: .85rem;
}
.cal__nights {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; color: var(--clay);
}
.cal__nav {
  border: 1px solid var(--sand-line); background: none; border-radius: 2px;
  width: 30px; height: 30px; cursor: pointer; color: var(--ink);
  font-size: 1.1rem; line-height: 1; display: grid; place-items: center;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.cal__nav:hover { background: var(--sand); border-color: var(--adobe); }

.cal__months { display: flex; gap: 1.75rem; }
.cal__month { flex: 1; min-width: 246px; }
.cal__title {
  font-family: var(--display); font-weight: 600; font-size: 1.0625rem;
  text-align: center; margin-bottom: .5rem;
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal__dow {
  font-size: .625rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--stone-light); text-align: center; padding-bottom: .35rem; font-weight: 600;
}
.cal__pad { aspect-ratio: 1; }
.cal__day {
  aspect-ratio: 1;
  border: 0; background: none; border-radius: 2px;
  font: inherit; font-size: .875rem; color: var(--ink);
  cursor: pointer; display: grid; place-items: center;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.cal__day:hover:not(.is-disabled) { background: var(--sand); }
.cal__day.is-disabled { color: var(--sand); cursor: default; }
.cal__day.is-today { text-decoration: underline; text-underline-offset: 3px; }
.cal__day.in-range { background: var(--plaster-deep); border-radius: 0; }
.cal__day.is-start, .cal__day.is-end {
  background: var(--clay); color: var(--plaster); font-weight: 500;
}
.cal__day.is-start { border-radius: 2px 0 0 2px; }
.cal__day.is-end { border-radius: 0 2px 2px 0; }
.cal__day.is-start.is-end { border-radius: 2px; }

.cal__foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--sand-line);
}
.cal__clear, .cal__done {
  font: inherit; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 600; cursor: pointer; border-radius: 2px; padding: .5rem .9rem;
}
.cal__clear { background: none; border: 0; color: var(--stone); text-decoration: underline; text-underline-offset: 3px; }
.cal__clear:hover { color: var(--clay); }
.cal__done { background: var(--dark); color: var(--plaster); border: 1px solid var(--dark); }
.cal__done:hover { background: var(--clay); border-color: var(--clay); }

/* Shown only when the browser refused to open the results tab. */
.bookbar__result {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--clay);
  border-radius: 2px;
  background: rgba(187, 108, 64, .07);
  font-size: .875rem;
  color: var(--ink-soft);
}
.bookbar__result[hidden] { display: none; }

.bookbar__alt {
  margin-top: .95rem;
  text-align: center;
  font-size: .8125rem;
  color: var(--stone);
}
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--stone);
}
.field input, .field select, .field textarea {
  border: 1px solid var(--sand-line);
  background: #fff;
  border-radius: 2px;
  padding: .8rem .85rem;
  font-size: .9375rem;
  width: 100%;
  transition: border-color .25s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--clay); }
.field textarea { min-height: 140px; resize: vertical; }

/* --------------------------------------------------------------------------
   10. Value / trust bar
   -------------------------------------------------------------------------- */
.valuebar { border-block: 1px solid var(--rule); }
.valuebar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.valuebar__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.75rem);
  text-align: center;
  border-right: 1px solid var(--rule);
}
.valuebar__item:last-child { border-right: 0; }
@media (max-width: 860px) {
  .valuebar__item { border-right: 0; border-bottom: 1px solid var(--rule); }
  .valuebar__item:last-child { border-bottom: 0; }
}
.valuebar__item .valuebar__title {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-bottom: .3rem;
  letter-spacing: -.01em;
}
.valuebar__item .valuebar__text { font-size: .8125rem; color: var(--muted); line-height: 1.5; display: block; }
.valuebar__icon { color: var(--clay); margin: 0 auto .9rem; width: 26px; height: 26px; }

/* --------------------------------------------------------------------------
   11. Cards
   -------------------------------------------------------------------------- */
.card { display: flex; flex-direction: column; text-decoration: none; height: 100%; }
.card__body { padding-top: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__meta {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: .55rem;
}
.card__title { font-size: 1.4375rem; letter-spacing: 0; }
.card__text { margin-top: .6rem; font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.card__specs {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-size: .8125rem;
  color: var(--stone);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
}
.card__cta {
  margin-top: auto;
  padding-top: 1.1rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--clay);
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.card__cta svg { transition: transform .35s var(--ease); }
.card:hover .card__cta svg { transform: translateX(4px); }

/* Amenity / feature tile */
.tile {
  padding: clamp(1.75rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--plaster);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.tile__icon { color: var(--clay); margin-bottom: 1.25rem; width: 30px; height: 30px; }
.tile h3 { font-size: 1.3125rem; }
.tile p { margin-top: .6rem; font-size: .9375rem; color: var(--muted); line-height: 1.6; }
.section--ink .tile { border-color: rgba(248,242,235,.16); background: transparent; }
.section--ink .tile p { color: rgba(248,242,235,.66); }
.section--ink .tile__icon { color: var(--plaster-deep); }

.badge {
  display: inline-block;
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  padding: .35em .7em;
  border-radius: 2px;
  background: var(--sand);
  color: var(--ink-soft);
  margin-left: .5rem;
  vertical-align: middle;
}
.badge--soon { background: rgba(187,108,64,.15); color: var(--clay-deep); }
.badge--open { background: rgba(128,130,104,.18); color: var(--dark); }
.section--ink .badge--soon { background: rgba(239,234,227,.16); color: var(--plaster-deep); }
.section--ink .badge--open { background: rgba(248,242,235,.14); color: rgba(248,242,235,.8); }

/* --------------------------------------------------------------------------
   12. Stat row, distance list, quotes
   -------------------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: clamp(1.5rem,3vw,2.5rem); }
.stat__num {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--clay);
}
.section--ink .stat__num { color: var(--plaster-deep); }
.stat__label {
  margin-top: .65rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

.distance { list-style: none; padding: 0; margin: 0; }
.distance li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .9375rem;
}
.distance li:first-child { border-top: 1px solid var(--rule); }
.distance b { font-weight: 450; }
.distance span {
  color: var(--clay);
  font-size: .8125rem;
  letter-spacing: .06em;
  white-space: nowrap;
  font-weight: 500;
}
.section--ink .distance li { border-color: rgba(248,242,235,.16); }
.section--ink .distance span { color: var(--plaster-deep); }

.quote { max-width: 60ch; }
.quote blockquote {
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.2vw, 1.8125rem);
  line-height: 1.4;
  letter-spacing: 0;
}
.quote figcaption {
  margin-top: 1.5rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.stars { color: var(--clay); letter-spacing: .18em; font-size: .8125rem; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   13. Accordion (FAQ)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--rule); }
.acc details { border-bottom: 1px solid var(--rule); }
.acc summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 3rem 1.5rem 0;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.1875rem, 1.8vw, 1.4375rem);
  letter-spacing: 0;
  line-height: 1.3;
  transition: color .25s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--clay); }
.acc summary::after, .acc summary::before {
  content: "";
  position: absolute;
  right: .35rem;
  top: 50%;
  background: var(--clay);
  transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.acc summary::after { width: 15px; height: 1.5px; transform: translateY(-50%); }
.acc summary::before { width: 1.5px; height: 15px; right: 1.05rem; transform: translateY(-50%); }
.acc details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.acc__body { padding: 0 clamp(0px, 6vw, 5rem) 1.75rem 0; color: var(--ink-soft); font-size: .9688rem; }
.acc__body p + p { margin-top: .85rem; }

/* --------------------------------------------------------------------------
   14. Horizontal snap rail
   -------------------------------------------------------------------------- */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(260px, 30%);
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--sand-line) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-track { background: var(--rule); }
.rail::-webkit-scrollbar-thumb { background: var(--clay); }
@media (max-width: 700px) { .rail { grid-auto-columns: minmax(230px, 76%); } }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--dark); color: rgba(248,242,235,.76); padding-top: clamp(4rem, 8vw, 6.5rem); }
.site-footer h4 {
  color: var(--plaster);
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1.4rem;
}
.site-footer a { color: rgba(248,242,235,.68); text-decoration: none; transition: color .25s var(--ease); }
.site-footer a:hover { color: var(--plaster-deep); }
.footer__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand .wordmark { color: var(--plaster); font-size: 1.5rem; }
.footer__brand p { margin-top: 1.25rem; font-size: .9375rem; max-width: 34ch; line-height: 1.65; }
.footer__list { list-style: none; padding: 0; margin: 0; font-size: .9375rem; }
.footer__list li + li { margin-top: .7rem; }
.footer__bottom {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-block: 1.75rem;
  border-top: 1px solid rgba(248,242,235,.13);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  font-size: .8125rem;
}
.social { display: flex; gap: 1.1rem; }
.social a { display: grid; place-items: center; width: 22px; height: 22px; }

/* --------------------------------------------------------------------------
   16. Scroll reveal
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .media--zoom img { transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .75rem; }
.mt-2 { margin-top: 1.5rem; }
.mt-3 { margin-top: 2.25rem; }
.mt-4 { margin-top: 3rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }

/* Print */
@media print {
  .site-header, .bookbar, .nav-toggle, body::after { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   18. Interior-page components
   -------------------------------------------------------------------------- */

/* Restoration / history timeline */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li {
  position: relative;
  padding: 0 0 clamp(2rem, 4vw, 3rem) clamp(2.25rem, 5vw, 3.5rem);
  border-left: 1px solid var(--rule);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -4.5px; top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--clay);
}
.timeline__year {
  font-family: var(--display);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--clay);
  display: block;
  margin-bottom: .55rem;
}
.timeline h3 { font-size: 1.3125rem; margin-bottom: .5rem; }
.timeline p { color: var(--ink-soft); font-size: .9688rem; max-width: 58ch; }
.section--ink .timeline li { border-left-color: rgba(248,242,235,.18); }
.section--ink .timeline__year { color: var(--plaster-deep); }
.section--ink .timeline p { color: rgba(248,242,235,.7); }

/* Two-column checklist of in-casita amenities */
.speclist {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  font-size: .9375rem;
}
@media (max-width: 640px) { .speclist { columns: 1; } }
.speclist li {
  break-inside: avoid;
  padding: .6rem 0 .6rem 1.6rem;
  position: relative;
  color: var(--ink-soft);
}
.speclist li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.15rem;
  width: 7px; height: 7px;
  border: 1px solid var(--clay);
  transform: rotate(45deg);
}
.section--ink .speclist li { color: rgba(248,242,235,.74); }

/* Editorial gallery grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(.75rem, 1.5vw, 1.25rem);
}
.gallery--offset > *:nth-child(even) { margin-top: clamp(1rem, 3vw, 2.75rem); }
/* A plain 2x2. No stagger: the four frames are a set, not a collage. */
.gallery--quad { grid-template-columns: 1fr; }
@media (min-width: 780px) { .gallery--quad { grid-template-columns: 1fr 1fr; } }

/* Spec table for a casita type */
.spectable { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.spectable th, .spectable td { text-align: left; padding: .85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spectable th { font-weight: 500; color: var(--stone); width: 42%; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }

/* Map embed slot */
.map {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--sand);
  position: relative;
  border: 1px solid var(--rule);
}
.map iframe { width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }

/* Callout panel */
.callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--clay);
  background: var(--plaster);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius);
}
.callout h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.callout p { color: var(--ink-soft); font-size: .9375rem; }
.section--ink .callout { background: rgba(248,242,235,.05); border-color: rgba(248,242,235,.16); border-left-color: var(--plaster-deep); }
.section--ink .callout p { color: rgba(248,242,235,.72); }