/* Casa Lume: its own look on top of the shared style.css, so the villa doesn't read as the restaurant.
   Limestone and olive instead of ink and copper, a modern sans instead of the serif, captions on light frosted
   cards with fact chips, and a light booking section with the key facts as a grid. */
:root {
  --ink: #1c211b;                    /* behind the canvas */
  --cream: #ffffff;                  /* text on photos */
  --muted: rgba(255, 255, 255, .9);
  --copper: #dfe6cc;                 /* shared accents on photos: progress line, slide dots */
  --line: rgba(255, 255, 255, .3);
  --display: 'Jost', system-ui, sans-serif;
  --text: 'Jost', system-ui, sans-serif;
  --stone: #f5f0e8;
  --sand: #e6ddcd;
  --olive: #56633f;
  --olive-hi: #6a7a4d;
  --t-ink: #23281f;
  --t-soft: #5b6154;
}
html { font: 400 16px/1.6 var(--text); }

/* light loader and far-jump veil */
#loader, .veil { background: var(--stone); }
#loader .mark { color: var(--t-ink); }

/* the photo stays bright: only a light shade under the top bar and behind the cover text */
.scrim { background: linear-gradient(to bottom, rgba(18, 22, 16, .4), rgba(18, 22, 16, 0) 18%),
                     linear-gradient(to top, rgba(18, 22, 16, .55), rgba(18, 22, 16, 0) 42%),
                     linear-gradient(to right, rgba(18, 22, 16, .25), rgba(18, 22, 16, 0) 50%); }

.mark { display: inline-flex; align-items: center; gap: 9px; font: 500 14px/1 var(--text); letter-spacing: .3em; }
.mark svg { flex: none; }
#progress { height: 2px; background: #fff; opacity: .85; }
.top-price { font: 400 14px/1 var(--text); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
@media (max-width: 560px) { .top-price { display: none; } }

/* buttons: squarer, sentence case, olive */
.btn { border-radius: 10px; padding: 15px 24px; background: var(--olive); color: #fff; font: 500 14px/1 var(--text); letter-spacing: .03em; text-transform: none; }
.btn:hover { background: var(--olive-hi); color: #fff; }
.btn-small { padding: 11px 16px; font-size: 13.5px; background: rgba(245, 240, 232, .94); color: var(--t-ink); border: 0; }
.btn-small:hover { background: #fff; color: var(--t-ink); }
/* the button is nearly opaque, so no blur behind it: blurring the scrolling booking section is costly on phones */
.btn-small { -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost { background: transparent; color: var(--olive); border: 1px solid var(--olive); }
.btn-ghost:hover { background: var(--olive); color: #fff; }

/* the cover: the name in wide capitals, the facts on a glass strip */
.eyebrow { font: 500 11.5px/1.4 var(--text); letter-spacing: .22em; color: var(--olive); }
.ov.hero .eyebrow { display: inline-block; padding: 6px 12px; border-radius: 999px; background: rgba(245, 240, 232, .94); }
.ov.hero h1 { font: 300 clamp(48px, 8.4vw, 124px)/.95 var(--display); letter-spacing: .05em; text-transform: uppercase; }
.ov p.sub { font: 300 clamp(19px, 1.9vw, 24px)/1.3 var(--text); color: #fff; margin-top: 12px; }
.facts { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.facts li { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 10px; font-size: 14px; color: #fff;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.facts svg { flex: none; opacity: .9; }

/* captions sit on light frosted cards */
.ov:not(.hero):not(.hint) { max-width: 25rem; padding: 22px 24px 20px; border-radius: 18px; color: var(--t-ink); text-shadow: none;
  background: rgba(246, 242, 235, .88); border: 1px solid rgba(255, 255, 255, .6); box-shadow: 0 18px 50px rgba(18, 22, 16, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1); }
.ov h2 { font: 300 clamp(30px, 3.2vw, 42px)/1.08 var(--display); letter-spacing: -.005em; margin-bottom: 10px; }
.ov:not(.hero):not(.hint) p:not(.eyebrow) { color: var(--t-soft); font-size: 15.5px; }
.chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chips li { font-size: 12.5px; line-height: 1; padding: 7px 11px; border-radius: 999px; background: var(--sand); color: var(--olive); }
/* on wide screens the cards beside the photo panels sit in the middle of the left half, not full height */
@media (min-aspect-ratio: 23/20) {
  .ov.dish { top: 50%; bottom: auto; height: auto; display: block; translate: 0 -50%; max-width: min(25rem, 34vw); }
}

.hint { padding: 9px 16px; border-radius: 999px; background: rgba(245, 240, 232, .92); color: var(--t-ink); text-shadow: none; letter-spacing: .2em; }

/* slide dots become short lines */
.dots button::after { width: 12px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .55); }
.dots button.on::after { background: #fff; transform: scaleX(1.9); }

/* booking: a light section with the key facts as a grid */
.after { background: var(--stone); color: var(--t-ink); box-shadow: 0 -30px 80px rgba(0, 0, 0, .3); }
.after h2 { font: 300 clamp(36px, 4.6vw, 60px)/1.05 var(--display); }
.after .lead { color: var(--t-soft); }
.after .cta { margin: 30px 0 52px; }
.keyfacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-bottom: 52px;
  background: var(--sand); border: 1px solid var(--sand); border-radius: 16px; overflow: hidden; }
.keyfacts div { background: var(--stone); padding: 22px 20px; }
.keyfacts b { display: block; font: 300 34px/1.1 var(--display); color: var(--t-ink); }
.keyfacts span { font-size: 13.5px; color: var(--t-soft); }
.info { border-top: 1px solid var(--sand); }
.info h3 { color: var(--olive); }
.info p { color: var(--t-soft); }
.info .link, .info a { border-bottom-color: var(--sand); }
.info .link:hover, .info a:hover { border-color: var(--olive); }
.after .made { border-color: var(--sand); background: #fbf8f3; }
.after .made p { color: var(--t-soft); }
.after .made b { color: var(--t-ink); }

dialog.demo { background: var(--stone); color: var(--t-ink); border-color: var(--sand); }
dialog.demo h3 { font: 300 28px/1.15 var(--display); }
dialog.demo p:not(.eyebrow) { color: var(--t-soft); }

/* phones: compact cards */
@media (max-width: 640px) {
  .ov:not(.hero):not(.hint) { padding: 16px 18px 16px; border-radius: 16px; }
  .ov h2 { font-size: 27px; margin-bottom: 6px; }
  .ov:not(.hero):not(.hint) p:not(.eyebrow) { font-size: 14.5px; line-height: 1.5; }
  .eyebrow { margin-bottom: 8px; }
  .chips { margin-top: 10px; }
  .facts { gap: 6px; margin-top: 18px; }
  .facts li { padding: 6px 10px; font-size: 13px; }
  .facts li:nth-child(n+4) { display: none; }   /* three fit on one line; the pool has its own slide */
  .ov.hero { bottom: calc(100px + env(safe-area-inset-bottom)); }   /* clear of the swipe hint */
  .mark { font-size: 12px; letter-spacing: .24em; gap: 7px; }
  .keyfacts b { font-size: 28px; }
}
/* the pill says it on its own (Jost has no arrow glyph, the fallback one sat low); the narrowest phones drop
   the fact icons so three facts stay on one line */
.hint span { display: none; }
@media (max-width: 380px) { .facts svg { display: none; } }

/* over the light booking section the top bar gets a solid limestone background and dark text */
.top { transition: background-color .3s ease, box-shadow .3s ease; }
.at-book .top { background: var(--stone); box-shadow: 0 1px 0 var(--sand); }
.at-book .top .mark, .at-book .top-price { color: var(--t-ink); text-shadow: none; }
.at-book .btn-small { background: var(--olive); color: #fff; }
.at-book #progress { background: var(--olive); }