/* La Casita Amarilla on a listing-page structure (docs/DESIGN.md, "Design 2", chosen as the site on 2026-11-06).

   Colour comes from the house: warm paper, the siding's yellow as the system colour (rules above
   headings, the chosen dates, the closing block) and the red-orange of the trim for links in use.
   Type has one rule: Ibarra Real Nova (serif) for headings and one opening paragraph per section,
   Hanken Grotesk (sans) for all running text and controls. Italic is only the times of day and the wordmark. */

@font-face { font-family: "Ibarra Real Nova"; src: url(/fonts/ibarra-real-nova-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ibarra Real Nova"; src: url(/fonts/ibarra-real-nova-latin-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --paper: #F6F1E6;      /* ground */
  --card: #FBF8F0;       /* the booking panel and dialogs */
  --tint: #EDE5D3;       /* bands and image placeholders */
  --ink: #1F2419;
  --body: #33382B;       /* running text */
  --moss: #5A5E4A;       /* secondary text: 5.3:1 or better on every ground it sits on */
  --taken: #6B6E5C;      /* unavailable dates: 4.6:1 on paper */
  --line: rgba(31, 36, 25, .18);
  --yellow: #F2C230;     /* the siding */
  --yellow-deep: #E3B11A;
  --range: #F5E3AF;      /* the nights between the chosen dates */
  --trim: #B83A22;       /* the railings and roof: links in use, errors */
  --night: #1B1A14;

  --serif: "Ibarra Real Nova", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero: min(3rem, 12.4vw);
  --t-h2: clamp(1.875rem, 3.4vw, 2.75rem);     /* every section heading, one size */
  --t-lead: clamp(1.375rem, 2vw, 1.75rem);
  --t-text: 1.0625rem;
  --t-small: .8125rem;

  --pad: clamp(20px, 5vw, 72px);
  --wide: 1296px;
  /* every section, the header and the footer share one left and right edge */
  --edge: max(var(--pad), calc(50vw - var(--wide) / 2 + var(--pad)));
  --bar-h: 68px;
  --head-h: 72px;
  --strip-h: 44px;
  --gap-s: clamp(40px, 5vw, 64px);     /* between related blocks */
  --gap-l: clamp(72px, 9vw, 112px);    /* before a change of chapter */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 1rem/1.55 var(--sans);
  font-synthesis: none; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { main a:not(.btn):hover, .foot a:hover { text-decoration-color: var(--trim); text-decoration-thickness: 2px; } }
button, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .foot :focus-visible, .viewer :focus-visible, .night :focus-visible, .chrome:not(.solid) .brand:focus-visible { outline-color: #FFFDF6; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 40; padding: 12px 16px; background: var(--paper); color: var(--ink); border: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
svg[hidden] { display: none; }   /* the icon sprite: inline SVG does not get the HTML rule for [hidden] */
[hidden] { display: none !important; }
[id] { scroll-margin-top: calc(var(--strip-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

h2 { font: 400 var(--t-h2)/1.08 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
/* the house's yellow marks the start of each section */
h2:not(.sr)::before { content: ""; display: block; width: 44px; height: 4px; background: var(--yellow); margin-bottom: 18px; }
.lead { font: 400 var(--t-lead)/1.34 var(--serif); text-wrap: pretty; }
.icon { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  background: var(--yellow); color: var(--ink);
  border: 0; border-radius: 2px;
  font: 600 .9375rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
}
.btn:hover { background: var(--yellow-deep); }
.btn:disabled { background: var(--tint); color: var(--moss); cursor: default; }
.btn-wide { width: 100%; min-height: 54px; font-size: 1rem; }
/* dates chosen: the same button now takes payment, so it changes colour and gains a lock */
.btn.is-reserve { background: var(--ink); color: var(--yellow); }
.btn.is-reserve:hover { background: #000; }
.btn.is-reserve::before {
  content: ""; width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='1.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-quiet { background: none; box-shadow: inset 0 0 0 1px var(--ink); }
.btn-quiet:hover { background: var(--tint); }

.text-btn {
  min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 500 .9375rem/1 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}
/* square icon buttons: the same 2px corner as every other control */
.sq {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.sq svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sq:hover { border-color: currentColor; }
.sq:disabled { opacity: .35; cursor: default; border-color: var(--line); }

/* ---------- chrome: wordmark, section links, and the always-visible reserve bar ---------- */

.brand {
  position: absolute; z-index: 5; top: 0; left: var(--edge);
  display: flex; align-items: center; gap: 10px; height: 64px;
  font: italic 400 1.5rem/1 var(--serif); color: #FFFDF6; text-decoration: none;
}
.brand svg { width: 26px; height: 26px; flex: none; }

/* Below 1100px the section links are a strip that slides in once the cover has scrolled away
   (and whenever one of its links has keyboard focus). */
.nav {
  position: fixed; z-index: 19; top: 0; left: 0; right: 0; height: var(--strip-h);
  display: flex; align-items: stretch; gap: 2px; padding: 0 calc(var(--edge) - 10px);
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  background: var(--paper); border-bottom: 1px solid var(--line);
  font: 500 .875rem/1 var(--sans);
  transform: translateY(-101%);
}
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; align-items: center; padding: 0 10px; text-decoration: none; }
.nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--trim); text-decoration-thickness: 2px; }
.nav a:focus-visible { outline-offset: -3px; }
.chrome.solid .nav, .nav:focus-within { transform: none; }
@media (prefers-reduced-motion: no-preference) { .nav { transition: transform .2s ease; } }

/* Phones: price, then the button taking the room that is left, so the pair reads as one control. */
.bar {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
  padding: 0 var(--edge) env(safe-area-inset-bottom, 0px);
  background: var(--paper); border-top: 1px solid var(--line);
}
.bar-info { flex: 0 1 auto; min-width: 0; }
.bar-price { font: 700 1.125rem/1.15 var(--sans); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.bar-price small { font: 400 .875rem/1 var(--sans); color: var(--moss); }
/* one line under the price that says what happens next; site.js rewrites it as dates are chosen */
.bar-note { font: 400 .75rem/1.25 var(--sans); color: var(--moss); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .btn { flex: 0 0 auto; padding-inline: 16px; }

@media (min-width: 900px) {
  [id] { scroll-margin-top: calc(var(--head-h) + var(--strip-h) + 20px); }
  .chrome {
    position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: var(--head-h);
    display: flex; align-items: center; gap: 36px; padding: 0 var(--edge);
    color: #FFFDF6; border-bottom: 1px solid transparent;
  }
  .chrome.solid { background: var(--paper); color: var(--ink); border-bottom-color: var(--line); }
  .brand { position: static; height: auto; color: inherit; margin-right: auto; }
  .nav { top: var(--head-h); color: var(--ink); z-index: 18; }
  .bar { position: static; height: auto; padding: 0; gap: 18px; background: none; border: 0; }
  .bar-info { text-align: right; }
  .bar-price { font-weight: 600; font-size: 1rem; }
  .bar-price small { color: inherit; opacity: .85; font-size: .875rem; }
  .bar-note { display: none; }    /* the panel beside the content says it */
  .bar .btn { min-height: 44px; padding-inline: 20px; }
}
@media (min-width: 1100px) {
  [id] { scroll-margin-top: calc(var(--head-h) + 24px); }
  .nav {
    position: static; height: auto; padding: 0; gap: 22px; overflow: visible;
    background: none; border: 0; color: inherit; transform: none; transition: none;
  }
  .nav a { padding: 14px 0; }
}

/* ---------- the opening photograph ---------- */

.hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  height: calc(100vh - var(--bar-h)); height: calc(100svh - var(--bar-h) - env(safe-area-inset-bottom, 0px));
  min-height: 520px; max-height: 880px;
  padding: 84px var(--edge) 18px;
  background: #47603F; color: #FFFDF6;
}
.hero picture { position: absolute; inset: 0; }
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }   /* the phone file is already cropped around the house */
/* phones: two bands of shade, one behind the title and one behind the line at the foot; the house between them is untouched */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20, 24, 14, .66) 0%, rgba(20, 24, 14, .34) 24%, rgba(20, 24, 14, 0) 44%),
    linear-gradient(to top, rgba(20, 24, 14, .88) 0%, rgba(20, 24, 14, .6) 16%, rgba(20, 24, 14, 0) 36%);
}
.hero-title, .hero-foot { position: relative; z-index: 1; }
.hero-title { font: 400 var(--t-hero)/.98 var(--serif); letter-spacing: -.012em; max-width: 7.4em; text-wrap: balance; }
.hero-what { font: 400 1.0625rem/1.42 var(--sans); max-width: 21em; text-wrap: pretty; }
.hero-actions { margin-top: 12px; }
.hero-btn { display: none; }
/* phones: a 4:5 box the width of the screen, so most of the photograph shows (a full-screen box showed
   only the middle third of it); the phone file is cut to the same shape by tools/build-photos.js */
@media (max-width: 700px) { .hero { height: auto; aspect-ratio: 4 / 5; min-height: 480px; max-height: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* the one piece of unprompted motion: the title arrives like a title card */
  .hero-title { animation: title .6s cubic-bezier(.2, .6, .2, 1) both; }
  @keyframes title { from { opacity: 0; transform: translateY(10px); } }
}
@media (min-width: 520px) { :root { --t-hero: clamp(3rem, 7.6vw, 4.25rem); } }
@media (min-width: 900px) {
  :root { --t-hero: clamp(3.5rem, 5.2vw, 5rem); }
  /* shorter than the screen, so the facts and the first photos show beneath it */
  .hero { height: 72vh; min-height: 540px; max-height: 720px; justify-content: flex-end; padding: 0 var(--edge) clamp(40px, 6vh, 64px); }
  .hero img { object-position: 50% 62%; }
  /* wide screens: no wash over the photograph. A thin band keeps the header readable and one soft
     pool of shade sits behind the words in the corner. */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(20, 24, 14, .62) 0%, rgba(20, 24, 14, 0) 20%),
      radial-gradient(ellipse 66% 92% at 0% 100%, rgba(20, 24, 14, .86) 0%, rgba(20, 24, 14, .62) 45%, rgba(20, 24, 14, 0) 100%);
  }
  .hero-title { margin-bottom: 22px; max-width: 8.6em; }
  .hero-what { font-size: 1.1875rem; max-width: 25em; }
  .hero-actions { display: flex; align-items: center; gap: 24px; margin-top: 26px; }
  .hero-btn { display: inline-flex; min-height: 52px; padding: 0 28px; font-size: 1rem; }
}

/* ---------- at a glance ---------- */

.glance { padding: clamp(32px, 4.5vw, 56px) var(--edge) 0; display: grid; gap: 18px; }
.glance h2 { margin-bottom: 10px; }
.glance p { color: var(--body); max-width: 44em; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badges li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); font: 600 .875rem/1 var(--sans); }
.badges li::before { content: ""; width: 8px; height: 8px; background: var(--yellow); flex: none; }
.badges-src { font-size: var(--t-small); color: var(--moss); }
.badges-src a { display: inline-block; padding: 6px 0; }
@media (min-width: 900px) {
  .glance { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
  .glance-proof { text-align: right; }
  .badges { justify-content: flex-end; }
}

/* ---------- photographs: one large and four small, all 3:2; on phones a strip of every photo with the next one peeking in ---------- */

.tiles-wrap { padding: clamp(22px, 3vw, 36px) 0 0; }
.tiles { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 0 var(--edge); }
.tile { position: relative; padding: 0; border: 0; background: var(--tint); overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 2; }
/* the markup marks the five grid tiles data-grid="1"–"5"; the first is the large one. The strip's other
   tiles (added by site.js, in the manifest's order) are hidden here */
.tile[data-grid="1"] { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; }
.tile[data-grid="2"] { grid-area: 1 / 2; } .tile[data-grid="3"] { grid-area: 1 / 3; } .tile[data-grid="4"] { grid-area: 2 / 2; } .tile[data-grid="5"] { grid-area: 2 / 3; }
.tile:not([data-grid]) { display: none; }
.tile picture { display: block; width: 100%; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile:focus-visible { outline-offset: -4px; outline-color: #fff; }
@media (hover: hover) { .tile img { transition: filter .15s; } .tile:hover img { filter: brightness(.93); } }
.tiles-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px var(--edge) 0; }
.tiles-count { font: 500 .875rem/1 var(--sans); color: var(--moss); font-variant-numeric: tabular-nums; }
@media (min-width: 701px) { .tiles-count { visibility: hidden; } }
/* tablets: the large photo and two beside it, so nothing shrinks to a thumbnail */
@media (min-width: 701px) and (max-width: 899.98px) {
  .tiles { grid-template-columns: 2fr 1fr; }
  .tile[data-grid="3"] { grid-area: 2 / 2; }
  .tile[data-grid="4"], .tile[data-grid="5"] { display: none; }
}
@media (max-width: 700px) {
  .tiles { display: flex; gap: 8px; margin: 0; padding-inline: var(--edge); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); scrollbar-width: none; overscroll-behavior-x: contain; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile, .tile[data-grid], .tile:not([data-grid]) { display: block; flex: 0 0 86%; aspect-ratio: 4 / 3; scroll-snap-align: start; }
}

/* ---------- the content, and the booking panel that stays beside it down the page ---------- */

.columns { padding: 0 var(--edge); }
.columns > section { padding: var(--gap-s) 0; border-bottom: 1px solid var(--line); container-type: inline-size; }
.columns > section:first-child { padding-top: clamp(36px, 4.5vw, 56px); }
.columns > section:last-of-type { border-bottom: 0; }
.columns h2 { margin-bottom: 24px; }
.columns p, .columns li, .columns dd { color: var(--body); }

@media (min-width: 900px) {
  .columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 40px; align-items: start; }
  .columns > section { grid-column: 1; }
}
@media (min-width: 1100px) {
  .columns { grid-template-columns: minmax(0, 1fr) 372px; column-gap: clamp(48px, 6vw, 88px); }
}

.words .lead { color: var(--ink); }
.about-text { padding-top: 1.1em; }
.about-text p { font-size: var(--t-text); line-height: 1.62; max-width: 38em; }
.about-text p + p { margin-top: 1em; }
.about-text.collapsed { max-height: 7.2em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.words .text-btn { margin-top: 6px; }
figcaption { font: 400 var(--t-small)/1.45 var(--sans); color: var(--moss); padding-top: 10px; }

.highlights-list { display: grid; gap: 22px; }
.highlight { display: flex; gap: 18px; align-items: flex-start; }
.highlight .icon { color: var(--ink); }
.highlight h3 { font: 600 1rem/1.35 var(--sans); }
.highlight p { color: var(--moss); font-size: .9375rem; }
@container (min-width: 560px) { .highlights-list { grid-template-columns: 1fr 1fr; gap: 26px 40px; } }

.day-grid { display: grid; gap: 36px 28px; }
.day-card picture { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
/* phones: the day's photographs run edge to edge, past the page margins (owner's request, 2026-11-06) */
@media (max-width: 700px) { .day-card picture { margin-inline: calc(-1 * var(--edge)); } }
.day-card img { width: 100%; height: 100%; object-fit: cover; }
.when { font: italic 400 1.875rem/1 var(--serif); margin: 16px 0 8px; }
.day-card p { font-size: 1rem; line-height: 1.58; max-width: 34em; }
/* night has no photograph (none was taken after dark), so it is the one card that goes dark */
.day-card.night { background: var(--night); padding: clamp(22px, 5cqw, 32px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 240px; }
.day-card.night .when { color: var(--yellow); margin-top: 0; }
.day-card.night p { color: #E4DFCF; }
@container (min-width: 560px) { .day-grid { grid-template-columns: 1fr 1fr; } }

/* phones: each room photograph takes the full width (thumbnails were too small to see); with room,
   the three sit in a row */
.rooms-list { display: grid; gap: 28px 16px; }
.room-photo { display: block; width: 100%; padding: 0; border: 0; background: var(--tint); aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; }
.room-photo picture { display: block; width: 100%; height: 100%; }
.room-photo img { width: 100%; height: 100%; object-fit: cover; }
.room-photo:focus-visible { outline-offset: -4px; outline-color: #fff; }
@media (hover: hover) { .room-photo img { transition: filter .15s; } .room-photo:hover img { filter: brightness(.93); } }
.room figcaption { padding-top: 12px; display: grid; gap: 2px; font-size: .9375rem; color: var(--moss); }
.room strong { color: var(--ink); font-weight: 600; font-size: 1.0625rem; }
@container (min-width: 560px) { .rooms-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.offers-list { display: grid; gap: 16px 28px; }
.offers-list li { display: flex; align-items: center; gap: 16px; color: var(--ink); }
@container (min-width: 520px) { .offers-list { grid-template-columns: 1fr 1fr; } }
.all-amenities { margin-top: 20px; }
.all-amenities summary { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; cursor: pointer; font-weight: 500; list-style: none; }
.all-amenities summary::-webkit-details-marker { display: none; }
.all-amenities summary::after { content: "+"; margin-left: 8px; font-weight: 400; }
.all-amenities[open] summary::after { content: "–"; }
.amenity-groups { columns: 2 150px; column-gap: 28px; padding-top: 20px; font-size: .9375rem; }
.amenity-groups > div { break-inside: avoid; padding-bottom: 20px; }
.amenity-groups h3 { font: 600 .875rem/1.3 var(--sans); margin-bottom: 4px; }
.amenity-groups li { padding: 2px 0; }
.amenity-groups .not li { text-decoration: line-through; color: var(--moss); }

/* ---------- ratings and the host: one tinted band ---------- */

.columns > .proof { border-bottom: 0; padding-bottom: 0; }
.proof-band { background: var(--tint); padding: clamp(22px, 4cqw, 36px); }
.proof-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.proof-num { font: 400 3rem/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink); }
.proof-num small { font-size: 1.375rem; color: var(--moss); }
.proof-words { font-size: 1rem; color: var(--body); }
.proof .badges { justify-content: flex-start; margin-top: 16px; }
.scores { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; border-top: 1px solid var(--line); }
.scores div { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); }
.scores dt { color: var(--moss); font-size: .9375rem; }
.scores dd { font: 600 1rem/1 var(--sans); font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.scores dd small { font-weight: 400; font-size: .8125rem; color: var(--moss); }
@container (min-width: 560px) { .scores { grid-template-columns: repeat(3, 1fr); } }
.proof-out { margin-top: 14px; }
.proof-out a { font-weight: 500; display: inline-flex; align-items: center; min-height: 44px; }
.quotes:empty { display: none; }
.quotes { margin-top: 28px; display: grid; gap: 28px; }
.quotes blockquote { margin: 0; font: 400 var(--t-lead)/1.34 var(--serif); max-width: 30em; }

/* ---------- the calendar ---------- */

.cal-status { min-height: 3.2em; }
.cal-title { font: 600 1.0625rem/1.3 var(--sans); color: var(--ink) !important; }
.cal-hint { color: var(--moss) !important; font-size: .9375rem; }
.cal { position: relative; margin-top: 12px; }
.cal-nav { position: absolute; top: 0; right: 0; display: flex; gap: 8px; }
.months { display: grid; gap: 40px; min-height: 340px; }
.months.two { grid-template-columns: 1fr 1fr; gap: 44px; min-height: 400px; }
.month h3 { font: 400 1.5rem/44px var(--serif); height: 44px; margin-bottom: 10px; }
.dow, .days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dow span { text-align: center; font: 600 .8125rem/1 var(--sans); color: var(--moss); padding-bottom: 10px; }
.day {
  appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0;
  min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font: 500 .9375rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink);
  cursor: pointer; border-radius: 2px;
}
.day .p { font: 400 .6875rem/1 var(--sans); color: var(--moss); }
.day.empty { cursor: default; }
/* unavailable, and days already gone: one cue, a struck number, in a grey that still passes 4.5:1 */
.day.block { color: var(--taken); cursor: default; }
.day.block span:first-child { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.day.block .p { display: none; }
/* free, but too soon after the chosen check-in for that date's minimum stay */
.day.short { color: var(--taken); cursor: default; }
.day.short .p { visibility: hidden; }
.day.noci { color: var(--moss); }
.day.inrange { background: var(--range); border-radius: 0; }
.day.sel { background: var(--yellow); color: var(--ink); font-weight: 700; }
.day.sel .p { color: var(--ink); }
.day.out .p { visibility: hidden; }   /* the night of the check-out day is not part of the stay */
@media (hover: hover) {
  .day:not(.block):not(.short):not(.sel):hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
}
.day:focus-visible { outline-offset: -2px; }

.cal-foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.legend { font-size: var(--t-small); color: var(--moss) !important; display: flex; align-items: center; gap: 10px; }
.legend-taken { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border: 1px solid var(--line); font: 500 .8125rem/1 var(--sans); color: var(--taken); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.asof { font-size: var(--t-small); color: var(--moss) !important; min-height: 1.5em; margin-top: 6px; }

/* ---------- the panel beside the content (wide screens only: phones have the bar) ---------- */

.summary { display: none; padding: 22px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--yellow); }
.price { font: 400 2.125rem/1.05 var(--serif); letter-spacing: -.005em; min-height: 1em; font-variant-numeric: lining-nums; }
.price small { font: 400 .9375rem/1 var(--sans); letter-spacing: 0; color: var(--moss); margin-left: .1em; }
.price-note { margin-top: 6px; font-size: var(--t-small); line-height: 1.45; color: var(--moss); min-height: 1.45em; }
.fields { margin-top: 16px; border-top: 1px solid var(--line); }
.field { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.field span { color: var(--moss); }
.field strong { font-weight: 500; font-size: 1rem; }
button.field strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.field select {
  appearance: none; -webkit-appearance: none; width: auto; min-height: 44px; padding: 0 22px 0 12px; margin: 0; text-align: right; text-align-last: right;
  border: 0; border-radius: 0; background: no-repeat right 2px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%231F2419' stroke-width='1.4'%3E%3Cpath d='M2 4.5 6 8.5l4-4'/%3E%3C/svg%3E");
  font-weight: 500; font-size: 1rem; cursor: pointer;
}
.quote .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.quote .row small { display: block; color: var(--moss); font-size: var(--t-small); }
.quote .row.total { border-bottom: 0; font-weight: 700; font-size: 1.25rem; padding-top: 13px; }
.quote .fees { font-size: var(--t-small); color: var(--moss); padding-bottom: 4px; }
.quote .err { margin: 12px 0 4px; padding: 12px 14px; border-left: 3px solid var(--trim); background: #F6E2DA; color: #6A1F12; font-weight: 500; }
.summary .btn-wide { margin-top: 14px; }
.summary-lines { margin-top: 14px; display: grid; gap: 10px; font-size: .875rem; line-height: 1.45; color: var(--moss); }
.stripe { display: flex; gap: 10px; align-items: flex-start; }
.stripe svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.notice { margin-top: 12px; padding: 8px 12px; border: 1px dashed var(--trim); font-size: var(--t-small); color: var(--body); }
@media (min-width: 900px) {
  /* the panel takes the second column for the whole height of the content and follows the reader down */
  .summary {
    display: block; grid-column: 2; grid-row: 1 / span 24; margin: clamp(36px, 4.5vw, 56px) 0 0;
    position: sticky; top: calc(var(--head-h) + var(--strip-h) + 16px);
    max-height: calc(100vh - var(--head-h) - var(--strip-h) - 32px); overflow-y: auto; overscroll-behavior: contain;
  }
}
@media (min-width: 1100px) {
  .summary { padding: 24px; top: calc(var(--head-h) + 24px); max-height: calc(100vh - var(--head-h) - 40px); }
}

/* ---------- good to know: the last section before the closing, the full width of the page ---------- */

.details { padding: var(--gap-s) var(--edge) var(--gap-l); border-top: 1px solid var(--line); container-type: inline-size; }
.details h2 { margin-bottom: 24px; }
.details p, .details li { color: var(--body); }
.rules { display: grid; gap: 32px; max-width: 1100px; }
.rules h3 { font: 600 1rem/1.3 var(--sans); padding-bottom: 10px; border-bottom: 1px solid var(--ink); }
.plain li { padding: 10px 0; border-bottom: 1px solid var(--line); }
/* with room, the house rules take the first column and the two short lists share the second */
@container (min-width: 600px) {
  .rules { display: block; columns: 2; column-gap: 6%; }
  .rules > div { break-inside: avoid; padding-bottom: 32px; }
}

/* ---------- the area ---------- */

.area { margin-top: var(--gap-s); }
.plate picture { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tint); }
.plate img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { padding-inline: var(--edge); }
@media (min-width: 701px) { .plate picture { aspect-ratio: auto; height: clamp(360px, 36vw, 560px); } }
.area-cols { padding: clamp(40px, 5vw, 72px) var(--edge) var(--gap-l); display: grid; gap: 44px; }
.area h2 { margin-bottom: 22px; }
.area-text p:not(.lead) { margin-top: 1.1em; font-size: var(--t-text); line-height: 1.62; color: var(--body); max-width: 38em; }
.area-drives h3 { font: 600 1rem/1.3 var(--sans); margin-bottom: 8px; }
.drives { border-top: 1px solid var(--ink); }
.drives div { display: grid; grid-template-columns: 6.8em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.drives dt { font: 600 .9375rem/1.4 var(--sans); }
.drives dd { color: var(--body); font-size: .9375rem; }
@media (min-width: 900px) {
  .area-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); }
  .drives div { grid-template-columns: 8.4em 1fr; }
  .drives dd { font-size: 1rem; }
}

/* ---------- closing: the house's own yellow, and the way back to the calendar ---------- */

.closing { background: var(--yellow); color: var(--ink); padding: var(--gap-l) var(--edge); }
.closing h2::before { background: var(--ink); }
.closing-actions { margin-top: 30px; }
.closing .btn { background: var(--ink); color: var(--yellow); }
.closing .btn:hover { background: #000; }

/* ---------- footer ---------- */

.foot { background: var(--night); color: #B9B5A3; padding: clamp(40px, 5vw, 64px) var(--edge) calc(32px + var(--bar-h) + env(safe-area-inset-bottom, 0px)); font-size: .9375rem; }
.foot-cols { display: grid; gap: 32px; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: italic 400 1.5rem/1 var(--serif); color: #FFFDF6; }
.foot-brand svg { width: 26px; height: 26px; flex: none; }
.foot-about p { margin-top: 12px; max-width: 26em; }
.foot h2 { font: 600 .9375rem/1.3 var(--sans); letter-spacing: 0; color: #FFFDF6; margin-bottom: 8px; }
.foot h2::before { content: none; }
.foot li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.foot li a:hover { text-decoration: underline; }
.foot-legal { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(246, 241, 230, .2); font-size: var(--t-small); }
.foot-contact { font-style: normal; margin-top: 14px; display: grid; gap: 6px; font-size: .9375rem; line-height: 1.45; }   /* inherits the footer's light text */
.area-map { margin-top: 22px; font-size: var(--t-small); color: var(--moss); }
@media (min-width: 701px) { .foot-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr); gap: 48px; } }
@media (min-width: 900px) { .foot { padding-bottom: 36px; } }

/* ---------- dialogs: all photos, the full-screen viewer, the date picker ---------- */

dialog { color: var(--ink); }
.sheet { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); }
.sheet[open] { display: flex; flex-direction: column; }
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px var(--edge); border-bottom: 1px solid var(--line); }
.sheet-head h2 { font: 400 1.5rem/1 var(--serif); }
.sheet-head h2::before { content: none; }
.sheet-jump { flex: none; display: flex; gap: 6px; padding: 10px var(--edge); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.sheet-jump::-webkit-scrollbar { display: none; }
.sheet-jump button { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--card); font: 500 .875rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.sheet-jump button:hover { border-color: var(--ink); }
.sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 20px var(--edge) 64px; }
/* the bar at the foot of the sheet is the page's phone bar again (same classes); wide screens have the panel and need none */
.sheet-bar { position: static; flex: none; }
@media (min-width: 900px) { .sheet-bar { display: none; } }
/* one continuous grid of large frames (rooms are reached with the links above, so no row is left half empty) */
.sheet-grid { display: grid; grid-template-columns: 1fr; gap: 22px 12px; }
/* phones: the photographs run edge to edge; only the captions keep the page margins */
@media (max-width: 619.98px) {
  .sheet-body { padding-inline: 0; }
  .sheet-grid figcaption { padding-inline: var(--edge); }
}
.sheet-grid figure { scroll-margin-top: 12px; }
.sheet-grid button { display: block; width: 100%; padding: 0; border: 0; background: var(--tint); aspect-ratio: 3 / 2; overflow: hidden; cursor: zoom-in; }
.sheet-grid picture { display: block; width: 100%; height: 100%; }
.sheet-grid img { width: 100%; height: 100%; object-fit: cover; }
.sheet-grid button:focus-visible { outline-offset: -4px; outline-color: #fff; }
.sheet-grid figcaption strong { color: var(--ink); font-weight: 600; }
@media (min-width: 620px) { .sheet-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .sheet-grid { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; } }

.viewer { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: #12110C; color: #EFEADB; --line: rgba(239, 234, 219, .35); }
.viewer::backdrop, .sheet::backdrop { background: #12110C; }
.viewer-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px var(--edge); background: linear-gradient(rgba(18, 17, 12, .7), rgba(18, 17, 12, 0)); }
.viewer-count { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.viewer-strip { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.viewer-strip::-webkit-scrollbar { display: none; }
.viewer-strip figure { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.viewer-strip picture { display: block; width: 100%; height: 100%; }
.viewer-strip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px var(--edge) calc(18px + env(safe-area-inset-bottom, 0px)); color: #EFEADB; font-size: .875rem; text-align: center; background: linear-gradient(rgba(18, 17, 12, 0), rgba(18, 17, 12, .78)); }
.viewer-strip img { width: 100%; height: 100%; object-fit: contain; background: none !important; }
.viewer-nav { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); background: rgba(18, 17, 12, .5); display: none; }
.viewer-prev { left: var(--edge); }
.viewer-next { right: var(--edge); }
@media (hover: hover) and (min-width: 700px) { .viewer-nav { display: inline-grid; } }

/* the booking dialog: the whole booking in one place. It fills the screen on phones (calendar, then
   guests and the breakdown, with the total and Reserve fixed at the foot); on wide screens it is a
   panel in the middle, and from 900px the breakdown sits beside the calendar. */
.book { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--card); }
.book[open] { display: flex; flex-direction: column; }
.book::backdrop { background: rgba(27, 26, 20, .56); }
.book-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); }
.book-head h2 { font: 400 1.5rem/1 var(--serif); }
.book-head h2::before { content: none; }
.book-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 28px; }
.book-side { margin-top: 28px; border-top: 1px solid var(--line); }
.book-side .summary-lines { margin-top: 18px; }
.book-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
.book-sum { font-size: .9375rem; line-height: 1.3; color: var(--body); min-width: 0; }
.book-sum strong { display: block; font-size: 1.125rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.book-foot .btn { flex: none; min-width: 130px; }
@media (min-width: 701px) {
  .book { width: min(1040px, calc(100vw - 48px)); height: auto; max-height: min(840px, calc(100dvh - 48px)); margin: auto; border: 1px solid var(--line); border-top: 4px solid var(--yellow); }
  .book-head, .book-body, .book-foot { padding-inline: 28px; }
}
@media (min-width: 900px) {
  .book-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 36px; align-items: start; padding-top: 20px; }
  .book-side { margin-top: 0; padding-left: 36px; border-top: 0; border-left: 1px solid var(--line); }
}