/* Harmony Estate
   Sun-warmed sand, Safed blue, basalt and a little Corten steel.
   Square corners throughout; only the arched photograph and the WhatsApp button are round.
   Type: Bellefair for display, Assistant for everything you read. */

@font-face {
  font-family: "Bellefair";
  src: url("../fonts/bellefair-hebrew.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Bellefair";
  src: url("../fonts/bellefair-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-hebrew.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Assistant";
  src: url("../fonts/assistant-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The estate */
  --lime: #F4EBDC;
  --lime-deep: #E9DDC8;
  --wash: #9DB8D3;
  --frame: #4D6FA6;
  --tekhelet: #1C3554;
  --tekhelet-deep: #12253D;
  --night: #15253B;
  --basalt: #2B2E31;
  --muted: #565B61;
  --corten: #9A5530;
  --corten-light: #C47E52;
  --glow: #F6DDB0;
  --rule: rgba(28, 53, 84, 0.16);
  --on-dark: #D7DDE5;
  --on-dark-muted: #A9B4C2;

  /* One colour per unit, taken from its rooms */
  --rose: #692434;
  --rose-ink: #F5ECE7;
  --lemon: #E5C95C;
  --lemon-pale: #F4EFD2;
  --sage: #DDE3D7;
  --leaf: #3D5943;
  --iron: #23272B;

  /* Type: one body size for every line you read, four sizes above it */
  --font-display: "Bellefair", "Frank Ruhl Libre", "David", serif;
  --font-body: "Assistant", "Arial Hebrew", Arial, sans-serif;
  --fs-body: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-lead: clamp(1.5rem, 1.3rem + 0.7vw, 1.875rem);
  --fs-h3: clamp(2.125rem, 1.7rem + 1.6vw, 3.25rem);
  --fs-h2: clamp(2.875rem, 2rem + 3.4vw, 5.25rem);
  --fs-display: clamp(4rem, 2.6rem + 5.6vw, 8rem);

  /* Shape: square corners and soft shadows */
  --r-xl: 0;
  --r-lg: 0;
  --r-md: 0;
  --pill: 0;
  --shadow-photo: 0 1px 2px rgba(21, 37, 59, 0.08), 0 28px 56px -32px rgba(21, 37, 59, 0.55);
  --shadow-card: 0 1px 2px rgba(21, 37, 59, 0.06), 0 20px 44px -26px rgba(21, 37, 59, 0.45);
  --shadow-btn: 0 14px 28px -14px rgba(28, 53, 84, 0.7);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 84rem;
  --panel-inset: clamp(0.5rem, 1.6vw, 1.5rem);
  --space-section: clamp(4.5rem, 8vw, 8rem);
  --space-room: clamp(4.5rem, 8vw, 8rem);
  --header-h: 5.5rem;
}

@media (max-width: 760px) {
  :root { --header-h: 4.5rem; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  background: var(--lime);
  color: var(--basalt);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  color: var(--tekhelet);
  text-wrap: balance;
}

a {
  color: var(--tekhelet);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--corten);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: -10rem;
  z-index: 50;
  padding: 0.6em 1.2em;
  border-radius: 0;
  background: var(--tekhelet);
  color: var(--lime);
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--space-section); }

.section-title {
  font-size: var(--fs-h2);
  margin-bottom: 0.35em;
}

.lead {
  max-width: 44ch;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--basalt);
  text-wrap: balance;
}

.item-title {
  font-size: var(--fs-lead);
  line-height: 1.25;
}

figcaption { color: var(--muted); }

/* Buttons: square, the same body size as the text around them */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.35rem;
  padding: 0.6em 1.65em;
  border: 1px solid var(--tekhelet);
  border-radius: 0;
  background: var(--tekhelet);
  box-shadow: var(--shadow-btn);
  color: var(--lime);
  font: inherit;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s var(--ease), box-shadow 0.2s ease;
}
.btn:hover {
  background: var(--tekhelet-deep);
  border-color: var(--tekhelet-deep);
  transform: translateY(-1px);
}

.btn__icon {
  flex: none;
  width: 1.3em;
  height: 1.3em;
  margin-inline-end: 0.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.link-button {
  padding: 0.4em 0;
  border: 0;
  background: none;
  color: var(--tekhelet);
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  cursor: pointer;
}
.link-button:hover { text-decoration-thickness: 2px; }

/* Icons: one family for the whole site, drawn like the skyline in the logo.
   Navy carries the drawing, rust the warm details, Safed blue the water. */
.ic {
  fill: none;
  stroke: var(--tekhelet);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.ic .a { stroke: var(--corten); }
.ic .b { stroke: var(--frame); }
.ic .t {
  fill: var(--corten);
  stroke: none;
  font-family: var(--font-display);
  font-size: 20px;
}
.ic .dot { fill: var(--dot-fill, #FFFFFF); stroke: var(--corten); }

.btn--light {
  border-color: var(--glow);
  background: var(--glow);
  box-shadow: 0 16px 34px -18px rgba(0, 0, 0, 0.6);
  color: var(--night);
}
.btn--light:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--night); }
.btn--outline-light {
  border-color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
  color: #FFFFFF;
}
.btn--outline-light:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--night); }

/* Header: the logo, the booking bar and the menu button. Clear over the opening film,
   Safed blue once the page moves. */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  color: #FFFFFF;
  transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.site-header::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 -2.5rem 0;
  background: linear-gradient(rgba(10, 18, 30, 0.5), rgba(10, 18, 30, 0));
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.site-header.is-scrolled,
html.menu-open .site-header,
html.booking-open .site-header {
  background: var(--tekhelet);
  color: var(--lime);
  box-shadow: 0 12px 30px -20px rgba(10, 18, 30, 0.7);
}
.site-header.is-scrolled::before,
html.menu-open .site-header::before,
html.booking-open .site-header::before { opacity: 0; }
/* Behind an open menu, the page dims; a click on it closes the menu */
.site-header::after {
  content: "";
  position: fixed;
  z-index: -1;
  inset: var(--header-h) 0 0 0;
  background: rgba(10, 18, 30, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
html.menu-open .site-header::after {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.site-header :focus-visible { outline-color: var(--glow); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  height: var(--header-h);
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand {
  display: block;
  margin-inline-end: auto;
  color: inherit;
}
.brand__mark {
  display: block;
  height: 4.35rem;
  width: auto;
  fill: currentColor;
}
.brand__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 9;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* The menu: a panel that opens from the end of the bar, under the menu button */
.site-nav {
  position: fixed;
  z-index: 2;
  inset-block: var(--header-h) 0;
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  width: min(100%, 27rem);
  padding: clamp(1.25rem, 3vw, 2rem) var(--gutter) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--tekhelet);
  border-top: 1px solid rgba(244, 235, 220, 0.16);
  color: var(--lime);
  visibility: hidden;
  opacity: 0;
  transform: translateX(-1.5rem);
  transition: opacity 0.25s ease, transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.site-nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.25s ease, transform 0.3s var(--ease);
}
.site-nav__list { align-self: stretch; }
.site-nav__list a {
  display: block;
  padding-block: 0.3em;
  border-bottom: 1px solid rgba(244, 235, 220, 0.16);
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.5rem + 1vw, 2.35rem);
  line-height: 1.3;
  color: var(--lime);
  text-decoration: none;
}
.site-nav__list a:hover { color: var(--glow); }
.site-nav__phone {
  font-size: 1rem;
  color: var(--on-dark-muted);
}
.site-nav__phone a { color: var(--lime); }
html.menu-open { overflow: hidden; }
@media (max-width: 640px) {
  .site-nav { width: 100%; transform: none; }
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  min-height: 3rem;
  padding: 0.4em 1.1em;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.25;
  cursor: pointer;
}
.menu-toggle__bars {
  position: relative;
  width: 1.1rem;
  height: 0.75rem;
  border-block: 1.5px solid currentColor;
}
.menu-toggle__bars::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
  background: currentColor;
}
@media (min-width: 1100px) {
  .menu-toggle { margin-top: 1.1rem; }
}
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__close { display: inline; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { display: none; }

/* The booking bar: arrival, departure, guests and the button, like the booking engine's own.
   Wide screens show it in the header; smaller ones open it as a page of its own. */
.booking { position: relative; }
.booking__title { display: none; }
.booking__bar {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
}
.booking__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.booking__label {
  font-size: 0.8125rem;
  line-height: 1;
  letter-spacing: 0.02em;
  opacity: 0.88;
}
.booking__slot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 10.25rem;
  height: 3rem;
  padding: 0 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(10, 18, 30, 0.24);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.booking__field--party .booking__slot { width: 12rem; }
.booking__slot:hover,
.booking__slot[aria-expanded="true"] {
  border-color: #FFFFFF;
  background: rgba(10, 18, 30, 0.4);
}
.site-header.is-scrolled .booking__slot {
  border-color: rgba(244, 235, 220, 0.3);
  background: rgba(255, 255, 255, 0.05);
}
.site-header.is-scrolled .booking__slot:hover,
.site-header.is-scrolled .booking__slot[aria-expanded="true"] {
  border-color: var(--glow);
  background: rgba(255, 255, 255, 0.1);
}
.booking__value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.booking__big {
  flex: none;
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
}
.booking__small {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: nowrap;
}
.booking__small span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.booking__small span + span { opacity: 0.8; }
.booking__empty { font-size: 0.9375rem; opacity: 0.92; }
.booking__icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
.booking__submit {
  min-height: 3rem;
  height: 3rem;
  padding-inline: 1.35em;
  border-color: var(--glow);
  background: var(--glow);
  box-shadow: none;
  color: var(--night);
  white-space: nowrap;
}
.booking__submit:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--night); }
/* Without the script the fields cannot open; the button still leads to the booking page */
html:not(.js) .booking__field { display: none; }

/* The two windows that open under the bar: the calendar and the guests */
.booking__pop {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.75rem);
  inset-inline-start: 0;
  max-height: calc(100svh - var(--header-h) - 1.5rem);
  overflow-y: auto;
  padding: 1.25rem;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(28, 53, 84, 0.08), 0 30px 60px -24px rgba(10, 18, 30, 0.55);
  color: var(--basalt);
  font-size: 1rem;
  line-height: 1.5;
}
.booking__pop :focus-visible { outline-color: var(--corten); }
.booking__pop.cal { width: 40rem; }
.booking__pop.party {
  inset-inline-start: auto;
  inset-inline-end: 0;
  width: 23rem;
}

.booking-toggle {
  display: none;
  gap: 0.5em;
  min-height: 3rem;
  padding: 0.4em 1em;
  border-color: var(--glow);
  background: var(--glow);
  box-shadow: none;
  color: var(--night);
  white-space: nowrap;
}
.booking-toggle:hover { border-color: #FFFFFF; background: #FFFFFF; color: var(--night); }
.booking-toggle .booking__icon { opacity: 1; }
.booking-toggle__close { display: none; }
.booking-toggle[aria-expanded="true"] .booking-toggle__open { display: none; }
.booking-toggle[aria-expanded="true"] .booking-toggle__close { display: inline; }

/* Smaller screens: a button in the header opens the booking bar as a page of its own */
@media (max-width: 1099px) {
  .booking-toggle { display: inline-flex; }
  .booking {
    position: fixed;
    z-index: 2;
    inset: var(--header-h) 0 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 17rem));
    justify-content: center;
    align-content: start;
    gap: 0.75rem 0.5rem;
    padding: clamp(1.25rem, 4vw, 2rem) var(--gutter) 1.5rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lime);
    color: var(--basalt);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }
  html.booking-open .booking {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  html.booking-open { overflow: hidden; }
  .booking__title {
    display: block;
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: 1.1;
    color: var(--tekhelet);
  }
  .booking__bar { display: contents; }
  .booking__field--party { grid-column: 1 / -1; }
  .booking__label { color: var(--muted); opacity: 1; }
  .booking__slot,
  .booking__field--party .booking__slot,
  .site-header.is-scrolled .booking__slot {
    width: 100%;
    height: 3.5rem;
    border-color: rgba(28, 53, 84, 0.28);
    background: #FFFFFF;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--tekhelet);
  }
  .booking__slot:hover,
  .booking__slot[aria-expanded="true"],
  .site-header.is-scrolled .booking__slot:hover,
  .site-header.is-scrolled .booking__slot[aria-expanded="true"] {
    border-color: var(--tekhelet);
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--tekhelet);
  }
  .booking__pop,
  .booking__pop.cal,
  .booking__pop.party {
    position: relative;
    top: auto;
    grid-column: 1 / -1;
    order: 2;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 1rem;
    box-shadow: 0 0 0 1px rgba(28, 53, 84, 0.1);
  }
  .booking__submit {
    grid-column: 1 / -1;
    order: 3;
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 3.5rem;
    margin-top: 0.5rem;
    border-color: var(--tekhelet);
    background: var(--tekhelet);
    box-shadow: 0 -12px 24px -8px var(--lime);
    color: var(--lime);
  }
  .booking__submit:hover { border-color: var(--tekhelet-deep); background: var(--tekhelet-deep); color: var(--lime); }
}
@media (max-width: 640px) {
  .brand__mark { height: 3.45rem; }
  .site-header__inner { gap: 0.6rem; }
  .menu-toggle { padding-inline: 0.85rem; }
  .menu-toggle__open, .menu-toggle__close { display: none !important; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { display: block; border-color: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: calc(50% - 0.75px);
    height: 1.5px;
    background: currentColor;
    transform: rotate(-45deg);
  }
}

/* The calendar: two months side by side, one on smaller screens */
.cal__nav {
  position: absolute;
  inset-inline: 1.25rem;
  top: 1.1rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.cal__arrow {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(28, 53, 84, 0.2);
  background: #FFFFFF;
  color: var(--tekhelet);
  cursor: pointer;
  pointer-events: auto;
}
.cal__arrow:hover:not(:disabled) { background: var(--tekhelet); border-color: var(--tekhelet); color: #FFFFFF; }
.cal__arrow:disabled { opacity: 0.3; cursor: default; }
.cal__arrow svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cal__months {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
.cal__title {
  height: 2.75rem;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 2.75rem;
  text-align: center;
  color: var(--tekhelet);
}
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal__dow {
  padding-block: 0.3rem 0.5rem;
  font-size: 0.8125rem;
  text-align: center;
  color: var(--muted);
}
.cal__day {
  height: 2.6rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--basalt);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.cal__day:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--tekhelet); }
.cal__day:disabled {
  color: rgba(43, 46, 49, 0.28);
  cursor: default;
}
.cal__day[aria-current="date"] {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.cal__day.is-range { background: var(--lime); }
.cal.is-previewing .cal__day.is-range { background: rgba(244, 235, 220, 0.6); }
.cal__day.is-start,
.cal__day.is-end {
  background: var(--tekhelet);
  color: #FFFFFF;
}
.cal.is-previewing .cal__day.is-end { background: var(--frame); }
.cal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.cal__hint { color: var(--tekhelet); font-weight: 600; }
.cal__clear { padding-block: 0; font-size: 0.9375rem; }
@media (max-width: 1099px) {
  .cal__nav { inset-inline: 1rem; top: 0.9rem; }
  .cal__months { grid-template-columns: minmax(0, 1fr); }
  .cal__month + .cal__month { display: none; }
  .cal__day { height: 2.85rem; }
}

/* Guests: grown-ups and children for each unit, and the children's ages */
.party__room { padding-bottom: 0.9rem; }
.party__room + .party__room {
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.party__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.party__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--tekhelet);
}
.party__remove {
  padding: 0;
  font-size: 0.9375rem;
  color: var(--muted);
}
.party__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.3rem;
}
.party__row small {
  display: block;
  font-size: 0.8125rem;
  color: var(--muted);
}
.stepper {
  display: flex;
  align-items: center;
}
.stepper button {
  display: grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  padding: 0;
  border: 1px solid rgba(28, 53, 84, 0.3);
  background: #FFFFFF;
  color: var(--tekhelet);
  cursor: pointer;
}
.stepper button:hover:not(:disabled) { background: var(--tekhelet); border-color: var(--tekhelet); color: #FFFFFF; }
.stepper button:disabled { opacity: 0.3; cursor: default; }
.stepper svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.stepper output {
  min-width: 2.4rem;
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--tekhelet);
}
.party__ages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.party__ages label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.8125rem;
  color: var(--muted);
}
.party__ages select {
  height: 2.5rem;
  padding-inline: 0.5rem;
  border: 1px solid rgba(28, 53, 84, 0.3);
  border-radius: 0;
  background: #FFFFFF;
  color: var(--basalt);
  font: inherit;
  font-size: 1rem;
}
.party__ages select.is-missing {
  border-color: var(--corten);
  box-shadow: inset 0 0 0 1px var(--corten);
}
.party__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.party__add { padding-block: 0; font-size: 0.9375rem; }
.party__done { min-height: 2.6rem; padding-inline: 1.5em; }
.party__error {
  margin-top: 0.6rem;
  font-size: 0.9375rem;
  color: var(--corten);
}

/* Hero: the estate's film across the whole screen. The sunset photograph shows until
   the film starts, then fades. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--night);
  color: #FFFFFF;
}
.hero__photo {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.hero__photo picture { display: contents; }
.hero__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
  /* The setting sun sits on the left edge of the panorama; the trees on the right give way first */
  object-position: 0% 55%;
}
.hero.is-film .hero__photo img { opacity: 0; }
/* The film fills the screen. The clip is 3:2 inside a 16:9 frame, with black bands at the
   sides, so the frame is sized for the picture to cover and the bands fall outside. */
.hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.hero__video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(181.4cqh, 120.9cqw);
  height: max(102cqh, 68cqw);
  border: 0;
  transform: translate(-50%, -50%);
}
/* Upright screens get their own slice of the panorama, centred on Mount Meron */
@media (max-aspect-ratio: 1/1) {
  .hero__photo img { object-position: 50% 55%; }
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10, 18, 30, 0.7), rgba(10, 18, 30, 0.2) 42%, rgba(10, 18, 30, 0) 62%),
    linear-gradient(to left, rgba(10, 18, 30, 0.4), rgba(10, 18, 30, 0) 58%);
}
.hero__content {
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: clamp(3rem, 9vh, 6.5rem);
}
.hero__title {
  font-size: var(--fs-display);
  line-height: 0.95;
  color: #FFFFFF;
}
.hero__lead {
  max-width: 28ch;
  margin-top: 0.6em;
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
}

/* The photo is a little taller than the screen; site.js moves it as you scroll */
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) {
  .hero__photo img,
  .hero__video {
    position: absolute;
    inset: -12% 0 auto;
    height: 112%;
    will-change: transform;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__photo { animation: hero-settle 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__title, .hero__lead, .hero__actions { animation: hero-rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero__lead { animation-delay: 0.12s; }
  .hero__actions { animation-delay: 0.24s; }
}
@keyframes hero-settle { from { transform: scale(1.06); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } }

/* Every section ends with the way to book */
.section-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.reviews .section-cta { margin-top: clamp(1.5rem, 3vw, 2.25rem); }

/* Four promises after the family's story, each drawn large in the site's line */

.perks {
  padding-block: clamp(3rem, 5.5vw, 4.75rem);
  background: #FFFFFF;
}
.perks__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: clamp(2rem, 5vw, 3rem);
}
.perk {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: clamp(0.75rem, 2vw, 2rem);
  text-align: center;
}
.ic.perk__icon {
  width: clamp(5.5rem, 8vw, 7.5rem);
  height: auto;
  aspect-ratio: 1;
  stroke-width: 1.2;
}
.perk__text {
  max-width: 17ch;
  margin-top: clamp(0.9rem, 1.6vw, 1.25rem);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.55vw, 1.55rem);
  line-height: 1.3;
  color: var(--tekhelet);
  text-wrap: balance;
}
.perk:nth-child(even) { border-inline-start: 1px solid var(--rule); }
@media (min-width: 1000px) {
  .perks__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .perk + .perk { border-inline-start: 1px solid var(--rule); }
}

/* Story: the house in four dates, beside the garden. Sized to fit one screen. */

.story { padding-block: clamp(4rem, 7vw, 6rem) clamp(2.5rem, 4vw, 3.5rem); }

.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.timeline {
  position: relative;
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
}
.timeline::before {
  content: "";
  position: absolute;
  inset-block: 0.7em 0.6em;
  inset-inline-start: 5px;
  width: 2px;
  border-radius: 0;
  background: linear-gradient(var(--corten), rgba(154, 85, 48, 0.25));
}
.timeline li {
  position: relative;
  padding-inline-start: 1.85rem;
  padding-bottom: 0.8rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--lime);
  box-shadow: inset 0 0 0 3px var(--corten);
}
.timeline li p + p { margin-top: 0; }
.timeline__when {
  font-family: var(--font-display);
  font-size: calc(var(--fs-lead) * 0.85);
  line-height: 1.3;
  color: var(--tekhelet);
}

/* An arched photograph of the garden path at night, with an old print of Varda and Yoel laid over its corner */
.story__collage {
  position: relative;
  height: clamp(28rem, 38vw, 36rem);
}
.story__arch,
.story__print {
  position: absolute;
  overflow: hidden;
}
.story__arch {
  top: 0;
  inset-inline-start: 4%;
  width: 62%;
  height: 92%;
  border-radius: 999px 999px 0 0;
  box-shadow: var(--shadow-photo);
}
.story__print {
  z-index: 1;
  bottom: 0;
  inset-inline-end: 2%;
  width: 38%;
  aspect-ratio: 1050 / 1408;
  border: 8px solid #FFFFFF;
  box-shadow: 0 26px 50px -26px rgba(21, 37, 59, 0.6);
}
.story__arch img,
.story__print img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__arch img { object-position: 50% 62%; }
.story__cta { margin-top: clamp(1.75rem, 3vw, 2.25rem); }
.story__print img { object-position: 50% 30%; }

@media (max-width: 999px) {
  .story__inner { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
  .story__collage { width: min(100%, 34rem); height: min(118vw, 38rem); margin-inline: auto; }
  .story__print { border-width: 6px; }
}

/* Rooms: every unit in the same form, on alternating white and sand. One large
   photograph at a time, stepped through with the arrows, beside the details. */

.section-title .accent {
  display: block;
  color: var(--frame);
}

.rooms {
  --line: rgba(28, 53, 84, 0.14);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--lime);
}
.rooms__head { padding-bottom: clamp(2.75rem, 5vw, 4.25rem); }
.rooms__head .lead { max-width: 50ch; color: var(--muted); }

.room {
  --room-bg: #FFFFFF;
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--room-bg);
}
.room:nth-of-type(even) { --room-bg: var(--lime); }

.room__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
}

/* One photograph at a time, over a strip you can also swipe */
.slider {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--lime-deep);
}
.slider__track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline-offset: -3px; }
.slider__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}
.slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slider__btn {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 26px -16px rgba(10, 18, 30, 0.7);
  color: var(--tekhelet);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.slider__btn:hover { background: var(--tekhelet); color: #FFFFFF; }
.slider__btn svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.slider__prev { inset-inline-start: 0; }
.slider__next { inset-inline-end: 0; }
.slider__count {
  position: absolute;
  z-index: 1;
  bottom: 0;
  inset-inline-start: 0;
  padding: 0.35em 1em;
  background: rgba(255, 255, 255, 0.94);
  color: var(--tekhelet);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

.room__title {
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 4.25rem);
  line-height: 1.04;
}
.room__name { display: block; color: var(--tekhelet); }
.room__accent { display: block; color: var(--frame); }
.room__text {
  max-width: 50ch;
  margin-top: 1.1rem;
  color: var(--muted);
}

/* Guests, size and rooms, in one line under the name */
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin-top: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tekhelet);
}
.specs li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ic.spec__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 2.6;
}

/* Every photograph of the unit as a small tile: six to a row, exactly as wide as the
   large photograph. When the unit has more, half of the next tile shows at the end of the
   row, so it is plain that the row goes on. The row follows the photograph in view. */
.room__media { min-width: 0; }
.thumbs {
  --per-row: 6;
  --thumb-gap: 0.5rem;
  --more: clamp(0, var(--count, 0) - var(--per-row), 1);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per-row) - 1 + var(--more)) * var(--thumb-gap)) / (var(--per-row) + var(--more) / 2));
  gap: var(--thumb-gap);
  margin-top: var(--thumb-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs li { scroll-snap-align: start; }
.thumbs__btn {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  padding: 0;
  border: 0;
  background: var(--lime-deep);
  cursor: pointer;
}
.thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}
.thumbs__btn:hover img { opacity: 0.9; }
.thumbs__btn[aria-current="true"] img { opacity: 1; }
.thumbs__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--tekhelet), inset 0 0 0 4px rgba(255, 255, 255, 0.85);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.thumbs__btn[aria-current="true"]::after { opacity: 1; }
.thumbs__btn:focus-visible { outline-offset: -3px; }
@media (max-width: 640px) {
  .thumbs { --per-row: 5; --thumb-gap: 0.375rem; }
}

/* Four features, each with a drawing large enough to read */
.feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.6rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.feats li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  background: var(--room-bg);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tekhelet);
}
.feat__icon {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
}

.room__cta { margin-top: 1.75rem; }
.btn__arrow {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  margin-inline-start: 0.7em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.25s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(-3px); }

/* One column (phones, tablets): the name and the guests, size and rooms first, then the
   photographs, then the description, the features and the button */
@media (max-width: 999px) {
  .room__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .room__info { display: contents; }
  .room__title { order: 1; }
  .specs { order: 2; }
  .room__media { order: 3; margin-top: 1.25rem; }
  .room__text { order: 4; margin-top: 1.4rem; }
  .feats { order: 5; }
  .room__cta { order: 6; align-self: flex-start; }
}

/* Wide screens: the details on one side, the photograph on the other, swapping sides each time */
@media (min-width: 1000px) {
  .room__inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 5rem);
  }
  .room__info { order: -1; }
  .room--flip .room__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .room--flip .room__info { order: 1; }
  .slider { aspect-ratio: auto; height: clamp(28rem, 42vw, 40rem); }
}

/* Carousels: a row you swipe, with arrows and a line that shows how far along */

.carousel__btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: 1px solid rgba(28, 53, 84, 0.16);
  background: #FFFFFF;
  box-shadow: 0 14px 28px -18px rgba(10, 18, 30, 0.6);
  color: var(--tekhelet);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.carousel__btn:hover:not(:disabled) {
  border-color: var(--tekhelet);
  background: var(--tekhelet);
  color: #FFFFFF;
}
.carousel__btn:disabled { opacity: 0.35; cursor: default; }
.carousel__btn svg {
  width: 1.35rem;
  height: 1.35rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel {
  position: relative;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
/* Under the cards: the line, with an arrow at either end (phones and tablets) */
.carousel__foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.carousel__foot .carousel__rail { flex: 1; }
@media (max-width: 999px) {
  .carousel__btn { width: 2.85rem; height: 2.85rem; }
}
/* Wide screens: the arrows stand at the sides of the cards, in the margin beside the row */
@media (min-width: 1000px) {
  .carousel__btn {
    position: absolute;
    z-index: 2;
    top: calc(50% - 1rem);
    transform: translateY(-50%);
  }
  /* Centred in the margin where there is room, never past the screen's edge */
  .carousel__prev { right: calc(-1 * min(var(--gutter) / 2, var(--gutter) - 1.9rem)); translate: 50% 0; }
  .carousel__next { left: calc(-1 * min(var(--gutter) / 2, var(--gutter) - 1.9rem)); translate: -50% 0; }
}
.carousel__track {
  --per-view: 3;
  --card-gap: 1rem;
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline-offset: 4px; }
.carousel__rail {
  position: relative;
  height: 2px;
  margin-top: 1.25rem;
  overflow: hidden;
  background: rgba(28, 53, 84, 0.14);
}
.carousel__bar {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 33%;
  height: 100%;
  background: var(--tekhelet);
  transition: transform 0.35s var(--ease);
}

.btn--small {
  min-height: 2.75rem;
  padding: 0.45em 1.15em;
}
.btn--ghost {
  background: transparent;
  box-shadow: none;
  color: var(--tekhelet);
}
.btn--ghost:hover { background: var(--tekhelet); color: var(--lime); }

/* Launch offers: a carousel of cards, each offer in its own colour, with a big figure,
   a faint drawing in the corner and its own WhatsApp message */

.offers {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--lime);
}
.offers__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}
.offers__head .section-title { margin-bottom: 0.2em; }
.offers__head .lead { max-width: 40ch; }
.offers__track,
.reviews__track {
  --per-view: 1.12;
  --card-gap: 0.75rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 8px var(--gutter) 1.75rem;
  scroll-padding-inline: var(--gutter);
}
.offers .carousel__rail,
.reviews .carousel__rail { margin-top: 0; }
.offers__note {
  margin-top: 0.9rem;
  font-size: 0.9375rem;
  color: var(--muted);
}

.offer-card {
  --card-bg: var(--tekhelet);
  --card-ink: var(--lime);
  --card-accent: var(--glow);
  --card-soft: rgba(244, 235, 220, 0.78);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
  min-height: clamp(18.5rem, 23vw, 21.5rem);
  padding: clamp(1.15rem, 1.9vw, 1.6rem);
  background: var(--card-bg);
  color: var(--card-ink);
  scroll-snap-align: start;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 44px -28px rgba(21, 37, 59, 0.6);
}
.offer-card__tag {
  align-self: flex-start;
  padding: 0.2em 0.75em;
  border: 1px solid currentColor;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--card-soft);
}
.offer-card__figure {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 2.4rem + 2.8vw, 5rem);
  line-height: 0.95;
  color: var(--card-accent);
}
.ic.offer-card__icon {
  width: clamp(3.4rem, 2.7rem + 2.2vw, 4.6rem);
  height: clamp(3.4rem, 2.7rem + 2.2vw, 4.6rem);
  margin-top: 1rem;
  stroke: var(--card-accent);
  stroke-width: 1.3;
}
.ic.offer-card__icon .a { stroke: var(--corten-light); }
.ic.offer-card__art {
  position: absolute;
  bottom: -1.75rem;
  inset-inline-end: -1.75rem;
  width: clamp(7rem, 10vw, 9.5rem);
  height: clamp(7rem, 10vw, 9.5rem);
  opacity: 0.16;
  stroke: currentColor;
  stroke-width: 1.1;
  pointer-events: none;
}
.ic.offer-card__art .a, .ic.offer-card__art .b { stroke: currentColor; }
.offer-card__body {
  position: relative;
  margin-top: auto;
  padding-top: 1.1rem;
}
.offer-card__title {
  font-size: clamp(1.35rem, 1.2rem + 0.55vw, 1.7rem);
  line-height: 1.15;
  color: var(--card-ink);
}
.offer-card__text {
  max-width: 30ch;
  margin-top: 0.3rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--card-soft);
}
.offer-card__cta {
  display: inline-flex;
  align-items: center;
  margin-top: 1.1rem;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid currentColor;
  color: var(--card-ink);
  font-weight: 600;
  text-decoration: none;
}
.offer-card__cta:hover .btn__arrow { transform: translateX(-3px); }
.offer-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.offer-card--gold {
  --card-bg: linear-gradient(150deg, #FBEBCD 0%, var(--glow) 50%, #EDC88E 100%);
  --card-ink: var(--night);
  --card-accent: var(--night);
  --card-soft: rgba(21, 37, 59, 0.78);
}
.offer-card--wash {
  --card-bg: var(--wash);
  --card-ink: var(--night);
  --card-accent: var(--night);
  --card-soft: rgba(21, 37, 59, 0.8);
}
.offer-card--night { --card-bg: var(--night); }
.offer-card--corten {
  --card-bg: var(--corten);
  --card-ink: #FFF7EC;
  --card-accent: var(--glow);
  --card-soft: rgba(255, 247, 236, 0.85);
}
.offer-card--coupon {
  --card-bg: #FFFFFF;
  --card-ink: var(--tekhelet);
  --card-accent: var(--corten);
  --card-soft: var(--muted);
  outline: 2px dashed rgba(28, 53, 84, 0.3);
  outline-offset: -10px;
}

@media (min-width: 700px) {
  .offers__track, .reviews__track { --per-view: 1.8; --card-gap: 1rem; }
}
@media (min-width: 1000px) {
  .offers__track, .reviews__track { --per-view: 2.6; }
}
@media (min-width: 1300px) {
  .offers__track, .reviews__track { --per-view: 3.2; }
}
/* The offers are smaller than the reviews, so more of them show at once */
.offers__track { --per-view: 1.3; }
@media (min-width: 700px) {
  .offers__track { --per-view: 2.2; }
}
@media (min-width: 1000px) {
  .offers__track { --per-view: 3.1; }
}
@media (min-width: 1300px) {
  .offers__track { --per-view: 3.7; }
}
@media (max-width: 699px) {
  .offer-card { min-height: 18rem; }
}

/* Safed: a wall washed in Safed blue. The skyline from the logo opens it, with
   the old city seen through it; then four facts and the Shabbat hymn. */

.safed {
  --card: #CADAEA;
  margin: var(--panel-inset) var(--panel-inset) 0;
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background: var(--wash);
  color: var(--night);
}
.safed h2, .safed h3, .safed .lead { color: var(--night); }

.skyband {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto clamp(8rem, 30vw, 11rem);
}
.skyband__text {
  grid-area: 1 / 1;
  position: relative;
  z-index: 2;
  padding-bottom: 1.25rem;
  background: var(--wash);
}
.safed__title {
  font-size: var(--fs-display);
  line-height: 0.9;
}
.skyband__text .lead { max-width: 40ch; margin-top: 0.75rem; }
.skyband__city {
  grid-area: 2 / 1;
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}
.skyband__cap { fill: var(--wash); }
.skyband__line {
  fill: none;
  stroke: var(--night);
  stroke-width: 2.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.skyband__photo {
  grid-area: 2 / 1 / 4 / 2;
  position: relative;
  overflow: hidden;
}
.skyband__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 62%;
}

/* The line draws itself when the section comes into view */
html.js .skyband__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.js .skyband.is-drawn .skyband__line {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2s cubic-bezier(0.35, 0.1, 0.25, 1) 0.45s;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px;
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid rgba(21, 37, 59, 0.16);
  background: rgba(21, 37, 59, 0.16);
}
.fact {
  --dot-fill: var(--card);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: start;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--card);
}
.fact__icon {
  grid-row: 1 / 3;
  display: block;
  width: 3.5rem;
  height: 3.5rem;
}
.safed .fact__title, .fact p { grid-column: 2; }
.safed .fact__title {
  margin-bottom: 0.4rem;
  font-size: 1.45rem;
  line-height: 1.2;
}
.fact p {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: #22344D;
}

.quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin: clamp(0.75rem, 1.5vw, 1rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--night);
  color: var(--on-dark);
}
.quote__icon {
  width: 3.75rem;
  height: 3.75rem;
  stroke: var(--lime);
}
.quote__icon .a { stroke: var(--glow); }
.quote__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--lime);
}
.quote__caption {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--on-dark);
}
.quote__caption b {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--glow);
}

/* Wide screens: the title beside the skyline, as the logo draws it */
@media (min-width: 1000px) {
  .skyband {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    grid-template-rows: auto clamp(8rem, 12vw, 11rem);
  }
  .skyband__text {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-inline-end: 2rem;
  }
  .skyband__text::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 2px;
    background: var(--night);
    transform-origin: 100% 50%;
  }
  html.js .skyband__text::after { transform: scaleX(0); }
  html.js .skyband.is-drawn .skyband__text::after {
    transform: scaleX(1);
    transition: transform 0.5s cubic-bezier(0.55, 0, 0.6, 1);
  }
  .skyband__city {
    grid-area: 1 / 2;
    align-self: stretch;
    height: 100%;
  }
  .skyband__photo { grid-area: 1 / 1 / 3 / 3; }
  .quote {
    grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 3vw, 3rem);
  }
}
@media (min-width: 700px) {
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .fact__icon { width: 3rem; height: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .skyband__line { stroke-dashoffset: 0; }
  html.js .skyband__text::after { transform: none; }
}

/* Area: a real map, and the places worth the drive */

.area { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.area__head .lead { max-width: 40ch; }

.area__grid {
  --map-h: clamp(30rem, calc(100svh - var(--header-h) - 9rem), 40rem);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* The list is set small, so every place fits beside the map */
.spots { font-size: 1.0625rem; line-height: 1.5; }
.spots__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.spots__filters button {
  min-height: 2.15rem;
  padding: 0 0.8em;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  color: var(--basalt);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.spots__filters button:hover { border-color: var(--tekhelet); }
.spots__filters button[aria-pressed="true"] {
  background: var(--tekhelet);
  border-color: var(--tekhelet);
  color: var(--lime);
}

.spots__list { border-top: 1px solid var(--rule); }
.spot { border-bottom: 1px solid var(--rule); }
.spot__toggle {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.22rem 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.spot__chip {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0;
  color: #FFFFFF;
}
.spot__chip--nature, .pin__dot--nature { background: var(--leaf); }
.spot__chip--culture, .pin__dot--culture { background: var(--corten); }
.spot__chip--food, .pin__dot--food { background: var(--rose); }
.spot__chip--water, .pin__dot--water { background: var(--frame); }
.spot__icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spot__name {
  flex: 1;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tekhelet);
}
.spot__time {
  flex: none;
  color: var(--corten);
}
.spot__toggle:hover .spot__name,
.spot.is-open .spot__name { color: var(--corten); }
.spot__body {
  max-width: 52ch;
  padding-bottom: 0.5rem;
  padding-inline-start: 2.1rem;
}
.spot__link {
  display: inline-block;
  margin-top: 0.2rem;
}
.spots__note {
  margin-top: 0.75rem;
  color: var(--muted);
}

.area__map {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: var(--map-h);
  border-radius: 0;
  background: var(--lime-deep);
  box-shadow: var(--shadow-photo);
  transform: translateZ(0);
}
.area__canvas {
  position: relative;
  flex: 1;
  min-height: 0;
}
.area__fallback {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.area__map.is-ready .area__fallback { display: none; }

/* Leaflet, tuned to the palette */
.area__map .leaflet-container {
  background: #E4E5E0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.area__map .leaflet-tile-pane { filter: saturate(0.5) sepia(0.12) brightness(1.03) contrast(0.95); }
.area__map .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: var(--shadow-card);
}
.area__map .leaflet-control-zoom a {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 2.75rem;
  color: var(--tekhelet);
  font: 400 1.5rem/2.75rem var(--font-body);
}
.area__map .leaflet-control-attribution {
  padding: 0.15em 0.75em;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: 0.8rem;
}
.pin { background: none; border: 0; }
.area__map .leaflet-bar,
.area__map .leaflet-bar a,
.area__map .leaflet-tooltip { border-radius: 0 !important; }
.pin__dot {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid #FFFFFF;
  border-radius: 0;
  color: #FFFFFF;
  box-shadow: 0 8px 16px -8px rgba(21, 37, 59, 0.75);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.pin__dot svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pin:hover .pin__dot { transform: scale(1.12); }
.pin.is-active .pin__dot {
  transform: scale(1.3);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.75), 0 12px 22px -8px rgba(21, 37, 59, 0.8);
}
.area__map .leaflet-tooltip.pin-tip {
  padding: 0.2em 0.9em;
  border: 0;
  border-radius: 0;
  background: var(--night);
  box-shadow: var(--shadow-card);
  color: var(--lime);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  white-space: nowrap;
}
.area__map .leaflet-tooltip-top.pin-tip::before { border-top-color: var(--night); }

/* The estate: a strip under the map with the address, and its own gold pin */
.home-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--rule);
  background: #FFFFFF;
  font-size: 1rem;
  line-height: 1.35;
}
.home-card__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 2px solid var(--tekhelet);
  background: var(--glow);
  color: var(--tekhelet);
}
.ic.home-card__icon {
  width: 1.2rem;
  height: 1.2rem;
  stroke: currentColor;
  stroke-width: 3.4;
}
.home-card__text {
  flex: 1;
  color: var(--basalt);
}
.home-card__text b {
  margin-inline-end: 0.5em;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--tekhelet);
}
p.home-card__links {
  display: flex;
  gap: 1rem;
  margin: 0;
}
.pin__home {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--tekhelet);
  background: var(--glow);
  color: var(--tekhelet);
  box-shadow: 0 8px 16px -8px rgba(21, 37, 59, 0.75);
  transition: transform 0.25s var(--ease);
}
.pin--home:hover .pin__home { transform: scale(1.12); }
.pin__home .ic.home-card__icon { width: 1.2rem; height: 1.2rem; }
@media (max-width: 640px) {
  .home-card { flex-wrap: wrap; row-gap: 0.15rem; }
  .home-card__text { flex-basis: calc(100% - 3rem); }
  p.home-card__links { margin-inline-start: 3rem; }
}

/* Wide screens: the title beside its line; the whole list in view, with the map as tall as the list */
@media (min-width: 1000px) {
  .area__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 3rem;
  }
  .area__head .section-title { margin-bottom: 0; }
  /* The list keeps to the map's height; on a short screen it scrolls rather than run past it */
  .spots {
    display: flex;
    flex-direction: column;
    height: var(--map-h);
  }
  .spots__list {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(28, 53, 84, 0.3) transparent;
  }
}
@media (min-width: 1000px) and (max-height: 820px) {
  .spot__toggle { padding-block: 0.12rem; }
}

@media (max-width: 999px) {
  .area__grid { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; }
  .area__map {
    order: -1;
    height: clamp(23rem, 82vw, 31rem);
  }
}

/* Reviews: a carousel of the guests' own words, beside the score. The cards share one
   height; a long review shows its first lines, with a link to the rest. */

.reviews {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: #FFFFFF;
}
.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 3rem;
}
.reviews__head .section-title { margin-bottom: 0; }
.reviews__aside {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.25rem);
}
.reviews__summary {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.reviews__badge {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  padding: 0.35rem 0.75rem;
  background: var(--tekhelet);
  color: var(--on-dark);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1;
}
.reviews__badge b {
  font-size: 2.5rem;
  font-weight: 400;
  color: var(--glow);
}
.reviews__summary p {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--muted);
}

.review {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--card-gap)) / var(--per-view));
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  border: 1px solid rgba(28, 53, 84, 0.07);
  background: var(--lime);
  scroll-snap-align: start;
  transition: transform 0.35s var(--ease), box-shadow 0.35s ease;
}
.review:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -30px rgba(21, 37, 59, 0.55);
}
.review__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.review__quote {
  height: 2rem;
  font-family: var(--font-display);
  font-size: 4.25rem;
  line-height: 0.85;
  color: var(--corten);
}
.review__score {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  padding: 0.25rem 0.55rem;
  background: var(--tekhelet);
  color: var(--on-dark);
  font-family: var(--font-display);
  line-height: 1.1;
}
.review__score b {
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--glow);
}
.review__score small { font-size: 0.9rem; }
.review__text { margin: 1.1rem 0 1.4rem; }
.review__text p {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.08rem + 0.35vw, 1.4rem);
  line-height: 1.5;
  color: var(--tekhelet);
}
html.js .review:not(.is-open) .review__text p {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review__more { display: none; }
html.js .review__more:not([hidden]) {
  display: inline-block;
  align-self: flex-start;
  margin: -0.8rem 0 1.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--corten);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.28em;
  cursor: pointer;
}
.review__by {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(28, 53, 84, 0.12);
}
.review__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--tekhelet);
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
}
.review__name { line-height: 1.3; }
.review__name b {
  display: block;
  color: var(--tekhelet);
}
.review__name span {
  font-size: 0.9375rem;
  color: var(--muted);
}

@media (max-width: 999px) {
  .reviews__aside { width: 100%; justify-content: space-between; }
}
@media (max-width: 699px) {
  .review__text p { font-size: 1.15rem; }
}

/* Contact: the sign at the gate, after dark */

.contact {
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
  background: var(--night);
  color: var(--on-dark);
}
.contact :focus-visible { outline-color: var(--glow); }

.contact__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sign {
  width: min(100%, 30rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.75rem, 5vw, 3.5rem);
  border-radius: 0;
  background-color: #1E1916;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='r' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .27 0 0 0 0 .15 0 0 0 .7 -.36'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23r)'/%3E%3C/svg%3E");
  box-shadow:
    0 0 0 1px rgba(246, 221, 176, 0.05),
    0 0 36px 6px rgba(244, 190, 112, 0.26),
    0 0 120px 30px rgba(244, 190, 112, 0.12);
}
.sign__mark {
  display: block;
  width: 100%;
  height: auto;
  fill: var(--glow);
  filter: drop-shadow(0 0 3px rgba(255, 214, 150, 0.6)) drop-shadow(0 0 12px rgba(255, 200, 130, 0.3));
}
.sign__mark-line {
  fill: none;
  stroke: var(--glow);
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.contact .section-title { color: var(--lime); }
.contact .lead {
  max-width: 34ch;
  margin-inline: auto;
  color: var(--on-dark);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
}
.btn.btn--glow {
  background: var(--glow);
  border-color: var(--glow);
  box-shadow: 0 0 40px -8px rgba(244, 190, 112, 0.45);
  color: var(--night);
}
.btn.btn--glow:hover { background: #FBEBCD; border-color: #FBEBCD; color: var(--night); }

.contact__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2.75rem;
  margin-top: 2rem;
}

/* Wide screens: the sign on one side, the words on the other */
@media (min-width: 1000px) {
  .contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
    column-gap: clamp(3rem, 7vw, 7rem);
    text-align: start;
  }
  .contact__inner > :not(.sign) { grid-column: 1; justify-self: start; }
  .contact__inner > .sign { grid-column: 2; grid-row: 1 / span 4; margin: 0; justify-self: center; }
  .contact .lead { margin-inline: 0; }
  .contact__actions,
  .contact__list { justify-content: flex-start; }
}
.contact__list span {
  margin-inline-end: 0.35em;
  color: var(--on-dark-muted);
}
.contact__list a { color: var(--lime); }

/* Footer */

/* Small print: the footer is set well below the body size */
.site-footer {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--night);
  border-top: 1px solid rgba(244, 235, 220, 0.12);
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer :focus-visible { outline-color: var(--glow); }

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.5rem, 4vw, 4rem);
}
.site-footer__logo {
  display: block;
  width: min(11rem, 100%);
  height: auto;
  fill: var(--lime);
}
.site-footer__logo-line {
  fill: none;
  stroke: var(--lime);
  stroke-width: 8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.site-footer__brand p {
  max-width: 32ch;
  margin-top: 1rem;
}
.site-footer__title {
  margin-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--lime);
}
.site-footer li + li { margin-top: 0.2rem; }
.site-footer a {
  color: var(--on-dark);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-block: 1.25rem;
  border-top: 1px solid rgba(244, 235, 220, 0.12);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.site-footer .site-footer__legal li + li { margin-top: 0; }
.to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35em 1.1em;
  border: 1px solid rgba(244, 235, 220, 0.3);
  border-radius: 0;
}
.site-footer .to-top:hover { border-color: var(--lime); text-decoration: none; }
.to-top svg {
  width: 1.2em;
  height: 1.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 999px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1.5rem;
  }
  .site-footer__brand,
  .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__brand {
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(244, 235, 220, 0.12);
  }
  .site-footer__col { padding-top: 1.75rem; }
  .site-footer__col:last-child {
    margin-top: 1.75rem;
    border-top: 1px solid rgba(244, 235, 220, 0.12);
  }
  .site-footer__col:last-child ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.75rem;
  }
  .site-footer__col:last-child li + li { margin-top: 0; }
}
/* Phones: the small print and the way back up, one under the other, with room left
   at the bottom for the WhatsApp button */
@media (max-width: 640px) {
  .site-footer__bottom {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 5.5rem;
  }
  .to-top { justify-content: center; }
}
/* Phones: everything in the footer centred */
@media (max-width: 699px) {
  .site-footer__grid,
  .site-footer__bottom { text-align: center; }
  .site-footer__logo,
  .site-footer__brand p { margin-inline: auto; }
  .site-footer__col:last-child ul,
  .site-footer__legal { justify-content: center; }
}


/* The privacy policy and the accessibility statement: one readable column on sand */
.legal {
  padding-block: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) clamp(3.5rem, 7vw, 6rem);
}
.legal__inner { max-width: calc(46rem + 2 * var(--gutter)); }
.legal__title { font-size: var(--fs-h2); }
.legal__date {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--muted);
}
.legal__lead { margin-top: 1.75rem; }
.legal h2 {
  margin-top: clamp(2.25rem, 4vw, 3rem);
  font-size: clamp(1.65rem, 1.35rem + 1vw, 2.2rem);
}
.legal h2 + * { margin-top: 0.75rem; }
.legal p + ul,
.legal ul + p { margin-top: 1em; }
.legal ul {
  padding-inline-start: 1.25rem;
  list-style: square;
}
.legal li::marker { color: var(--corten); }
.legal li + li { margin-top: 0.4em; }
.legal b { font-weight: 700; color: var(--tekhelet); }
.legal a { overflow-wrap: anywhere; }
.legal__contact {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border-inline-start: 3px solid var(--corten);
  background: #FFFFFF;
}
.legal__contact p + p { margin-top: 0.2rem; }
.legal-header__home {
  color: inherit;
  text-decoration: none;
}
.legal-header__home:hover {
  text-decoration: underline;
  text-underline-offset: 0.4em;
}
.legal-header__book {
  min-height: 3rem;
  padding-block: 0.45em;
  box-shadow: none;
}
@media (max-width: 480px) {
  .legal-header__home { display: none; }
}
/* Their footer is only the small print and the two policies */
.site-footer--legal { padding-top: 0; }
.site-footer.site-footer--legal .site-footer__bottom {
  margin-top: 0;
  padding-block: 1.5rem;
  border-top: 0;
}

/* WhatsApp, always within reach; it steps aside at the contact section */
.wa-float {
  position: fixed;
  z-index: 25;
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  inset-inline-end: clamp(1rem, 2.5vw, 1.75rem);
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: #189D4E;
  box-shadow: 0 14px 30px -12px rgba(10, 18, 30, 0.6);
  color: #FFFFFF;
  transition: transform 0.25s var(--ease), background-color 0.2s ease, opacity 0.25s ease, visibility 0s linear 0s;
}
.wa-float:hover { background: #12873F; transform: translateY(-2px); }
.wa-float .btn__icon {
  width: 2rem;
  height: 2rem;
  margin: 0;
  stroke-width: 1.7;
}
.wa-float.is-away {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: transform 0.25s var(--ease), opacity 0.25s ease, visibility 0s linear 0.25s;
}
html.menu-open .wa-float,
html.booking-open .wa-float { display: none; }
@media (max-width: 640px) {
  .wa-float { width: 3.25rem; height: 3.25rem; }
  .wa-float .btn__icon { width: 1.75rem; height: 1.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}