/* Keur Bary Wah
   Design read: beachfront villa rental, calm and photo-led.
   Dials: variance 6, motion 4, density 4.
   Palette: cool white + ink blue neutrals, one accent (laterite red, the colour of the kiosk).
   Shape: one radius scale. --r for buttons, fields, images and containers, --r-s for small calendar cells.
   Layers (z-index): dock 40, nav 50, skip link 100. The lightbox is a modal dialog: it paints in the top layer.
   Widths: phone first. Blocks go to two columns between 600 and 800 px (tablet), reach their full layout
   around 1000 px, and the page itself grows from 1240 to 1520 px on large screens (--max). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #f3f5f4;
  --bg-alt: #e6ebe9;
  --surface: #fafbfa;
  --ink: #14232c;
  --ink-2: #415660;
  --line: #cbd5d2;
  --field: #6b7e86;
  --accent: #b4432a;
  --on-accent: #fbf8f6;

  --r: 12px;
  --r-s: 6px;
  --max: clamp(1240px, 78vw, 1520px);
  --gutter: clamp(20px, 4.5vw, 56px);
  --edge: max(var(--gutter), calc((100% - var(--max)) / 2));
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --font-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-text: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shadow: 0 1px 2px color-mix(in oklab, var(--ink) 10%, transparent),
    0 18px 40px -16px color-mix(in oklab, var(--ink) 28%, transparent);

  /* the map: sea, land, coast line, then roads from the smallest to the motorway */
  --map-sea: #d5e3e9;
  --map-land: #f8f9f6;
  --map-coast: #aebfc6;
  --map-lane: #e4e8e3;
  --map-road: #cdd4cf;
  --map-highway: #a5b1b0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1a20;
    --bg-alt: #14232b;
    --surface: #192b34;
    --ink: #e7edeb;
    --ink-2: #a9b8bc;
    --line: #2b3f49;
    --field: #6f8791;
    --accent: #e5805f;
    --on-accent: #1b0f0a;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 18px 40px -16px rgb(0 0 0 / 0.65);
    --map-sea: #0a1c26;
    --map-land: #1a2b33;
    --map-coast: #36525e;
    --map-lane: #21343d;
    --map-road: #2c424c;
    --map-highway: #4a6470;
  }
  .month__table td.is-range {
    background: color-mix(in oklab, var(--accent) 26%, var(--surface));
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
html:has(dialog[open]) {
  overflow: hidden; /* the page behind the lightbox does not scroll */
}
/* Large screens: the text grows with the page, so a 27-inch monitor does not show a small column of small type. */
@media (min-width: 1800px) {
  html {
    font-size: 106.25%;
  }
}
@media (min-width: 2300px) {
  html {
    font-size: 112.5%;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3,
p,
ul,
dl,
dd,
figure {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

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

/* No double-tap zoom delay on controls */
a,
button,
select,
label,
summary {
  touch-action: manipulation;
}

select option {
  background: var(--surface);
  color: var(--ink);
}

.ic {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
}

/* Type */

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.display {
  font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4rem);
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.h2 {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem);
  font-weight: 620;
  letter-spacing: -0.03em;
}

.h3 {
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}

.lead {
  max-width: 56ch;
  color: var(--ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}

/* Layout helpers */

.container {
  padding-inline: var(--edge);
}

.section {
  padding-block: clamp(48px, 6vw, 88px);
}

.section--tight {
  padding-top: 0;
}

.skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--r);
  background: var(--ink);
  color: var(--bg);
}
.skip:focus {
  top: 12px;
}

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.5rem;
  border: 1.5px solid transparent;
  border-radius: var(--r);
  font: 600 1rem/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn--primary:hover {
  background: color-mix(in oklab, var(--accent) 86%, var(--ink));
}
.btn--ghost {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--bg);
}
.btn--sm {
  min-height: 42px;
  padding: 0 1.1rem;
  font-size: 0.9375rem;
}
.btn--block {
  width: 100%;
  padding-block: 0.8rem;
  line-height: 1.25;
  text-align: center;
  white-space: normal; /* a long label such as the deposit amount wraps instead of widening the form */
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.link:hover {
  text-decoration-thickness: 2.5px;
}
.link--quiet {
  color: var(--ink-2);
  font-weight: 500;
}
button.link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button.link--quiet {
  font-weight: 500;
}
.booker .link,
.cal__clear {
  min-height: 44px;
}
.link[hidden] {
  display: none;
}
[hidden] {
  display: none !important;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--field);
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s var(--ease);
}
.icon-btn:hover {
  background: var(--bg-alt);
}
.icon-btn:active {
  transform: scale(0.96);
}
.icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.icon-btn[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

/* Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
@media (prefers-reduced-transparency: reduce) {
  .nav {
    background: var(--bg);
    backdrop-filter: none;
  }
}

.nav__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--nav-h);
  padding-inline: var(--edge);
}

.brand {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}

.nav__links {
  display: none;
  gap: 1.75rem;
  margin-inline: auto;
}
.nav__links a,
.menu a {
  text-decoration: none;
}
.nav__links a {
  padding-block: 0.5rem;
  color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav__links a:hover {
  color: var(--ink);
}

.nav__end {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.nav__lang:hover {
  color: var(--ink);
}

.nav__cta {
  display: none;
}

.nav__toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle-close,
.nav__toggle[aria-expanded="true"] .nav__toggle-open {
  display: none;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-close {
  display: block;
}
.nav__toggle .ic {
  width: 1.6rem;
  height: 1.6rem;
}

.menu {
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h)); /* tall menus scroll instead of covering the page */
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--line);
}
.menu[hidden] {
  display: none;
}
.menu nav {
  display: grid;
  gap: 0.25rem;
  padding: 1rem var(--edge) 1.5rem;
}
.menu a {
  padding: 0.75rem 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 560;
  letter-spacing: -0.02em;
}
.menu .menu__cta {
  display: inline-flex;
  justify-content: center;
  margin-top: 0.75rem;
  padding: 1rem;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 380px) {
  .nav__bar {
    gap: 0.5rem;
  }
  .nav__end {
    gap: 0.25rem;
  }
  .brand {
    font-size: 1.15rem;
  }
}
@media (min-width: 640px) {
  .nav__cta {
    display: inline-flex;
  }
}
/* The header button stays out while the page shows its own button to the calendar (site.js), so the
   same label is never on screen twice. It keeps its place: nothing in the bar moves when it comes back. */
.js .nav__cta[data-away] {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .js .nav__cta {
    transition: transform 0.2s var(--ease), background-color 0.2s, border-color 0.2s, color 0.2s, opacity 0.25s;
  }
  .js .nav__cta[data-away] {
    transition: opacity 0.25s, visibility 0s linear 0.25s;
  }
}
/* On the home page the booking bar at the bottom of the screen does that job up to 900 px. */
@media (max-width: 899px) {
  body:has(> .dock) .nav__cta {
    display: none;
  }
}
/* A phone held sideways is very short: the bar scrolls away with the page instead of taking a fifth of the screen. */
@media (max-height: 520px) {
  html {
    scroll-padding-top: 0;
  }
  .nav {
    position: static;
  }
}
@media (min-width: 1160px) {
  .nav__links {
    display: flex;
  }
  .nav__end {
    margin-left: 0;
  }
  .nav__toggle,
  .menu {
    display: none;
  }
}

/* Photos */

.photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--bg-alt);
}
.focus-top {
  object-position: center 15%;
}
.focus-bottom {
  object-position: center 85%;
}
.focus-left {
  object-position: 15% center;
}
.focus-right {
  object-position: 85% center;
}

.photo--empty {
  display: grid;
  place-items: center;
  padding: 1rem;
  background: repeating-linear-gradient(
      135deg,
      transparent 0 18px,
      color-mix(in oklab, var(--ink) 5%, transparent) 18px 19px
    ),
    var(--bg-alt);
  color: var(--ink-2);
  font-size: 0.875rem;
  text-align: center;
}

/* Hero */

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* The copy column: the title and the buttons in the space that is left, the figures at its foot.
   It is a size container, so the title is set from the width it really has. */
.hero__copy {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 2rem;
  padding: 2rem var(--edge) 2.5rem;
  container-type: inline-size;
}
.hero__main {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 1.5rem;
}
.hero .display {
  font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4rem); /* browsers without container units */
  font-size: clamp(2.4rem, 12.5cqi, 5.75rem);
  text-wrap: balance;
}
.hero__media {
  order: -1;
  height: clamp(240px, 40vh, 420px);
  height: clamp(240px, 40dvh, 420px);
  overflow: hidden;
}
.hero__photo {
  border-radius: 0;
  object-position: center 70%;
}
.hero__copy .lead {
  max-width: 34ch;
  font-size: clamp(1.0625rem, 0.9rem + 1.6cqi, 1.4rem);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

@media (max-width: 639px) {
  .actions {
    display: grid;
  }
  .actions .btn {
    width: 100%;
  }
}
@media (min-width: 760px) {
  .hero {
    padding-left: var(--edge);
  }
  /* The hero is one screen high, no more: the photo fills its cell instead of setting the height. */
  .hero__grid {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    min-height: clamp(520px, calc(100vh - var(--nav-h)), 900px);
    min-height: clamp(520px, calc(100dvh - var(--nav-h)), 900px);
  }
  .hero__copy {
    padding: 2.5rem clamp(24px, 4vw, 64px) 2.25rem 0;
  }
  .hero__media {
    position: relative;
    order: 0;
    height: auto;
  }
  .hero__photo {
    position: absolute;
    inset: 1.5rem 0;
    height: calc(100% - 3rem);
    border-radius: var(--r) 0 0 var(--r);
    object-position: center;
  }
}

/* The figures that decide, at the foot of the hero copy: two by two, a rule above and one between the columns */

.proof__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.proof__list li {
  display: grid;
  gap: 0.15rem;
  align-content: start;
  padding-right: 1rem;
}
.proof__list li:nth-child(even) {
  padding-left: clamp(1rem, 5cqi, 1.75rem);
  border-left: 1px solid var(--line);
}
.proof__value {
  font: 600 clamp(1.125rem, 0.95rem + 1.3cqi, 1.5rem) / 1.15 var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.proof__label {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
/* A narrow column (tablet held upright, small phone): one figure per line, nothing squeezed */
@container (max-width: 340px) {
  .proof__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
  .proof__list li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
}

/* The villa */

.house__grid {
  display: grid;
  gap: clamp(28px, 4vw, 48px) clamp(32px, 6vw, 96px);
}
.house__photo {
  aspect-ratio: 4 / 5;
}
.house__copy {
  display: grid;
  gap: 1.5rem;
  align-content: center;
  justify-items: start;
}
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.75rem clamp(1.25rem, 3vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 480px) {
  .facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.fact {
  display: grid;
  gap: 0.15rem;
}
.fact__value {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.fact__label {
  color: var(--ink-2);
}

/* Tablet: the photo beside the text, the figures on a row of their own under both. */
@media (min-width: 640px) {
  .house__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .facts {
    grid-column: 1 / -1;
  }
}
/* Desktop: the figures join the text beside the photo, and the pair is centred against it. */
@media (min-width: 1000px) {
  .house__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 2rem;
  }
  .house__media {
    grid-row: 1 / -1;
  }
  .house__copy {
    grid-area: 2 / 2;
  }
  .facts {
    grid-area: 3 / 2;
  }
}

/* Outdoor spaces */

.spaces__title {
  margin-bottom: clamp(28px, 4vw, 56px);
}
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 32px) clamp(14px, 2.4vw, 32px);
}
.bento__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.bento__item--terrace {
  grid-column: 1 / -1;
}
.bento__frame {
  position: relative;
  flex: none;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r);
}
.bento__item--terrace .bento__frame {
  aspect-ratio: 3 / 2;
}
.bento__frame .photo {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--ease);
}
.photo-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: inherit;
  cursor: zoom-in;
}
.bento__frame .photo-open {
  position: absolute;
  inset: 0;
  height: 100%;
}
.photo-open:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}
.spaces__more {
  margin-top: clamp(24px, 3vw, 40px);
}
.bento__item figcaption,
.strip figcaption {
  display: grid;
  gap: 0.1rem;
}
.bento__item figcaption span,
.strip figcaption span {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.bento__item--garden .photo,
.bento__item--pool .photo {
  object-position: center 60%;
}

@media (min-width: 600px) {
  .bento {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .bento__frame {
    flex: 1;
  }
  .bento__item--terrace {
    grid-column: 1 / 8;
    grid-row: 1 / 3;
  }
  .bento__item--terrace .bento__frame {
    aspect-ratio: 1 / 1;
  }
  .bento__item--pool {
    grid-column: 8 / 13;
    grid-row: 1;
  }
  .bento__item--garden {
    grid-column: 8 / 13;
    grid-row: 2;
  }
  .bento__item--pool .bento__frame,
  .bento__item--garden .bento__frame {
    aspect-ratio: 3 / 2;
  }
  .bento__item--kiosk {
    grid-column: 1 / 5;
    grid-row: 3;
  }
  .bento__item--kiosk .bento__frame {
    aspect-ratio: 3 / 4;
  }
  .bento__item--seaview {
    grid-column: 5 / 13;
    grid-row: 3;
  }
  .bento__item--seaview .bento__frame {
    aspect-ratio: auto; /* stretches to the height of the kiosk tile */
  }
}
@media (min-width: 900px) {
  .bento__item--kiosk {
    grid-column: 1 / 4;
  }
  .bento__item--seaview {
    grid-column: 4 / 13;
  }
}

/* The film of the house: three short clips follow one another in the frame beside the introduction.
   The names under it are the chapters: the line above each fills while its clip plays. */

.film {
  display: grid;
  gap: 0.9rem;
}
.film__frame {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-alt);
}
.film__open {
  position: absolute;
  inset: 0;
  display: block;
  cursor: zoom-in;
}
.film__open:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -4px;
}
.film__poster,
.film__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
}
/* The pause control keeps fixed colours: it sits on moving pictures in both themes. */
.film__toggle {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 44px;
  height: 44px;
  border-color: rgb(255 255 255 / 0.6);
  background: rgb(8 14 18 / 0.55);
  color: #fff;
}
.film__toggle:hover {
  background: rgb(8 14 18 / 0.8);
}
.film__toggle[hidden] {
  display: none;
}
.film__toggle .ic {
  width: 1.1rem;
  height: 1.1rem;
}
.film__toggle[data-state="playing"] .film__icon-play,
.film__toggle[data-state="paused"] .film__icon-pause {
  display: none;
}
.film__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.film__tab {
  position: relative;
  display: block;
  min-height: 44px;
  padding-top: 0.7rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}
.film__tab::before,
.film__tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  border-radius: 1px;
}
.film__tab::before {
  width: 100%;
  background: var(--line);
}
.film__tab::after {
  width: calc(var(--progress, 0) * 100%);
  background: var(--ink);
}
.film__tab:hover,
.film__tab[aria-current="true"] {
  color: var(--ink);
}
.film__tab[aria-current="true"] {
  font-weight: 600;
}
.clipbox[open] {
  grid-template-rows: auto minmax(0, 1fr);
}
.clipbox .lightbox__stage {
  padding-bottom: clamp(12px, 3vh, 28px);
}
.clipbox__video {
  width: auto;
  max-width: 100%;
  height: min(100%, 850px); /* never larger than the film itself */
  aspect-ratio: 478 / 850;
  border-radius: var(--r-s);
  background: #000;
}

/* The evening: two sunset photos on a dark band (fixed colours, the photos need the dark in both themes) */

.evening {
  --e-bg: #0d171d;
  --e-ink: #eaf0ee;
  --e-ink-2: #b4c2c5;
  padding-block: clamp(48px, 6vw, 88px);
  background: var(--e-bg);
  color: var(--e-ink);
}
.evening__grid {
  display: grid;
  gap: clamp(28px, 4vw, 64px);
}
.evening__copy {
  display: grid;
  gap: 1.25rem;
  align-content: center;
}
.evening .lead {
  color: var(--e-ink-2);
}
.evening__photos {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.evening__photos .photo-open {
  height: 100%;
  min-height: 0;
}
.evening__photos > :first-child {
  grid-row: 1 / -1;
}
.evening__photo {
  height: 100%;
  min-height: 0;
}
/* the tall photo sets the height of the mosaic; the two others share it */
.evening__photos > :first-child .evening__photo {
  aspect-ratio: 3 / 4;
}
.evening__quote {
  display: grid;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--accent);
}
.evening__quote blockquote {
  margin: 0;
  quotes: "\00ab\00a0" "\00a0\00bb";
}
:root[lang="en"] .evening__quote blockquote {
  quotes: "\201c" "\201d";
}
.evening__quote blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  font-weight: 540;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.evening__quote blockquote p::before {
  content: open-quote;
}
.evening__quote blockquote p::after {
  content: close-quote;
}
.evening__quote figcaption {
  display: grid;
  color: var(--e-ink-2);
  font-size: 0.9375rem;
}
.evening__quote figcaption strong {
  color: var(--e-ink);
}
@media (min-width: 760px) {
  .evening__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "photos copy";
    align-items: center;
  }
  .evening__photos {
    grid-area: photos;
  }
  .evening__copy {
    grid-area: copy;
  }
}
/* Bedrooms and living spaces: a swipeable strip on phones, a grid from tablet width */

.rooms {
  background: var(--bg-alt);
}
.rooms__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.rooms__head--sub {
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.strip {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
  overflow-x: auto;
  padding-inline: var(--edge);
  scroll-padding-inline: var(--edge);
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--field) transparent;
  padding-bottom: 1rem;
}
.strip__item {
  flex: 0 0 min(78vw, 400px);
  scroll-snap-align: start;
}
.strip:focus-visible {
  outline-offset: -3px; /* the strip touches the screen edges: keep the ring inside */
}
.strip figure {
  display: grid;
  gap: 0.75rem;
}
.strip__photo {
  aspect-ratio: 3 / 2;
}
@media (min-width: 640px) {
  .strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .strip--inside {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* three rooms: one row, nobody left alone on a second */
  }
}
@media (min-width: 800px) {
  .strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Practical information */

.practical__grid {
  display: grid;
  gap: clamp(24px, 3vw, 40px);
}
.acc {
  display: grid;
  align-items: start;
}
.acc__item {
  border-bottom: 1px solid var(--line);
}
.acc__item:first-child {
  border-top: 1px solid var(--line);
}
.acc__item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1.1rem 0;
  cursor: pointer;
  list-style: none;
}
.acc__item summary::-webkit-details-marker {
  display: none;
}
.acc__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}
.acc__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.acc__item summary::after {
  content: "+";
  flex: none;
  width: 1.2rem;
  color: var(--accent);
  font-size: 1.6rem;
  line-height: 1;
  text-align: center;
}
.acc__item[open] summary::after {
  content: "\2212"; /* a minus sign when the answer is open */
}
.acc__item p {
  max-width: 62ch;
  padding: 0 0 1.35rem 2.75rem;
  color: var(--ink-2);
}

@media (min-width: 760px) {
  .acc {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 72px);
  }
  .acc__item:nth-child(2) {
    border-top: 1px solid var(--line);
  }
}

/* The place */

.place__media {
  height: clamp(240px, 34vw, 460px);
}
.place__photo {
  border-radius: 0;
}
.place__panel {
  position: relative; /* paints above the photo it overlaps */
  display: grid;
  gap: 1.5rem clamp(32px, 5vw, 72px);
  margin-top: clamp(-96px, -7vw, -40px);
  padding: clamp(24px, 3.2vw, 44px);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.place__intro {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.place__panel p {
  color: var(--ink-2);
}
.place__items {
  display: grid;
  gap: 1.25rem;
}
.place__items li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  align-content: start;
}
.place__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent);
}
.place__items strong {
  display: block;
}
.place__items span {
  color: var(--ink-2);
}
/* Tablet: the text beside the list. Desktop: the three places side by side, icon above the words. */
@media (min-width: 760px) {
  .place__panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}
@media (min-width: 1100px) {
  .place__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }
  .place__items li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem;
  }
}

/* Things to do around the villa (home page): one large photo, two smaller ones, the rest as a list of driving times */

.around__head {
  display: grid;
  gap: 1rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.around__mosaic,
.around__side {
  display: grid;
  gap: clamp(28px, 3.2vw, 44px);
}
.spot {
  position: relative; /* the title link stretches over the whole block */
  display: grid;
  gap: 0.3rem;
  align-content: start;
}
.spot__media {
  aspect-ratio: 3 / 2;
  margin-bottom: 0.7rem;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--bg-alt);
}
.spot__title {
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}
.spot--lead .spot__title {
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  letter-spacing: -0.02em;
}
.spot__link {
  text-decoration: none;
}
.spot__link::after {
  content: "";
  position: absolute;
  inset: 0;
}
.spot:hover .spot__link {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.spot__link:focus-visible {
  outline: none;
}
.spot:has(.spot__link:focus-visible) {
  border-radius: var(--r);
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}
.spot__time {
  font-size: 0.9375rem;
  font-weight: 600;
}
.spot__sum {
  max-width: 48ch;
  color: var(--ink-2);
}
.around__rest {
  margin-top: clamp(40px, 5vw, 64px);
}
.around__rest-title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}
.around__more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.25rem 2rem;
  margin-top: clamp(28px, 4vw, 48px);
}
@media (min-width: 600px) {
  .around__side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .around__list {
    columns: 2;
    column-gap: clamp(32px, 5vw, 72px);
  }
}
@media (min-width: 760px) {
  .around__mosaic {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  }
  .around__side {
    grid-template-columns: minmax(0, 1fr);
  }
  /* the large photo takes whatever height the two smaller ones need beside it */
  .spot--lead {
    grid-template-rows: minmax(0, 1fr) auto auto auto;
  }
  .spot--lead .spot__media {
    aspect-ratio: auto;
    min-height: 320px;
  }
  .around__side .spot__media {
    aspect-ratio: 16 / 9;
  }
}

/* The map of the villa and the outings: two plates side by side (the surroundings, then the coast from
   Dakar to the Saloum), one above the other on a phone. The drawing comes from img/map.svg and takes its
   colours from here; the shape of the plates and the position of each place come from css/map.css. */

.map {
  display: grid;
  gap: 0.6rem;
}
.map__plates {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}
.map__plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--map-sea);
  container-type: inline-size;
}
.map__base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map__land {
  fill: var(--map-land);
  stroke: var(--map-coast);
  stroke-width: 1;
}
.map__water {
  fill: var(--map-sea);
  stroke: var(--map-coast);
  stroke-width: 0.75;
}
.map__lanes,
.map__roads,
.map__highways {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.map__lanes {
  stroke: var(--map-lane);
  stroke-width: 1;
}
.map__roads {
  stroke: var(--map-road);
  stroke-width: 1.25;
}
.map__highways {
  stroke: var(--map-highway);
  stroke-width: 1.75;
}
/* the title of a plate and its scale sit in the bottom-left corner: the sea, on both plates */
.map__legend {
  position: absolute;
  bottom: 0.8rem;
  left: 0.9rem;
  display: grid;
  gap: 0.4rem;
  color: var(--ink-2);
  line-height: 1.2;
}
.map__title {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
.map__sea {
  position: absolute;
  top: 60%;
  left: 9%;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.2;
}
.map__scale {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.map__scale i {
  display: block;
  height: 5px;
  border: 1px solid var(--ink-2);
  border-top: 0;
}
/* what the first plate shows, drawn on the second */
.map__frame {
  position: absolute;
  border: 1px solid color-mix(in oklab, var(--ink) 55%, transparent);
  border-radius: 3px;
  pointer-events: none;
}
.map__pins {
  position: absolute;
  inset: 0;
}
/* A place is a point: its dot is centred on it and its name is written on one side. */
.map__pin {
  --dot: 10px;
  --pad: 8px;
  position: absolute;
  width: 0;
  height: 0;
}
.map__tag {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--pad);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transform: translate(calc(-1 * (var(--pad) + var(--dot) / 2)), -50%);
}
.map__pin--left .map__tag {
  right: 0;
  left: auto;
  flex-direction: row-reverse;
  transform: translate(calc(var(--pad) + var(--dot) / 2), -50%);
}
.map__pin--top .map__tag {
  top: auto;
  bottom: 0;
  flex-direction: column-reverse;
  gap: 3px;
  transform: translate(-50%, calc(var(--pad) + var(--dot) / 2));
}
.map__pin--bottom .map__tag {
  flex-direction: column;
  gap: 3px;
  transform: translate(-50%, calc(-1 * (var(--pad) + var(--dot) / 2)));
}
.map__dot {
  flex: none;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--map-land);
}
.map__name {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.15;
}
.map__pin--villa {
  --dot: 14px;
}
.map__pin--villa .map__dot {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--map-land), 0 0 0 9px color-mix(in oklab, var(--accent) 22%, transparent);
}
.map__pin--villa .map__tag {
  gap: 12px;
}
.map__pin--villa .map__name {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  /* its name is written on the sea: a rim of sea colour keeps the frame line from running through it */
  -webkit-text-stroke: 4px var(--map-sea);
  paint-order: stroke fill;
}
/* a small phone: the plates are under 320 px wide, the names go down one size */
@container (max-width: 319px) {
  .map__name,
  .map__title {
    font-size: 0.75rem;
  }
  .map__pin--villa .map__name {
    font-size: 0.8125rem;
  }
  .map__pin--villa .map__tag {
    gap: 9px;
  }
  .map__sea {
    font-size: 0.75rem;
  }
}
.map__pin--landmark {
  --dot: 6px;
}
.map__pin--landmark .map__dot {
  background: var(--map-land);
  box-shadow: 0 0 0 1.5px var(--ink-2);
}
.map__pin--landmark .map__name {
  color: var(--ink-2);
  font-weight: 500;
}
.map__icon {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--ink-2);
}
.map__pin--landmark:has(.map__icon) {
  --dot: 0.95rem;
}
.map__pin--small {
  --dot: 6px;
  --pad: 0px;
}
.map__pin--small .map__dot {
  box-shadow: 0 0 0 1.5px var(--map-land);
}
a.map__tag:hover .map__name,
a.map__tag.is-hot .map__name {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
a.map__tag:hover .map__dot,
.map__tag.is-hot .map__dot {
  background: var(--accent);
}
a.map__tag:focus-visible {
  border-radius: var(--r-s);
  outline-offset: -2px;
}
.toc__list a.is-hot span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.map__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}
.map__route {
  min-height: 44px;
}
.map__credit {
  margin-left: auto;
  color: var(--ink-2);
  font-size: 0.75rem;
}
.map__credit a {
  display: inline-block; /* a taller target for a finger than the small text alone */
  padding-block: 0.4rem;
  color: inherit;
  text-underline-offset: 0.2em;
}
.around__map {
  margin-top: clamp(32px, 4.5vw, 56px);
}
.guide__map {
  margin-top: clamp(28px, 4vw, 48px);
}

/* A list of outings with their driving time, shared by the home page and the guide */

.toc__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  min-height: 48px;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  break-inside: avoid;
}
.toc__list a:hover span:first-child {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.toc__time {
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.credits {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.credits summary {
  display: flex;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.credits p {
  padding-bottom: 0.75rem;
}
.credits ul {
  display: grid;
  gap: 0.5rem;
  padding-bottom: 1rem;
}
.credit {
  color: var(--ink-2);
  font-size: 0.8125rem;
}
.credit a {
  display: inline-block; /* a taller target for a finger than the 13 px text alone */
  padding-block: 0.3rem;
  color: inherit;
  text-underline-offset: 0.2em;
}

/* The guide: the page of things to do, grouped by driving time */

.guide__head {
  padding-block: clamp(28px, 4vw, 56px) clamp(40px, 5vw, 64px);
}
.guide__intro {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.guide__crumb .link {
  min-height: 44px;
}
.guide__note,
.guide__small {
  max-width: 62ch;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.toc {
  display: grid;
  gap: 2rem clamp(32px, 4.5vw, 64px);
  margin-top: clamp(32px, 4.5vw, 56px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--line);
}
.toc__title {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.toc__title a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  text-decoration: none;
}
.toc__title a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 860px) {
  .toc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.trips {
  padding-block: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--line);
}
.trips__head {
  display: grid;
  gap: 0.75rem;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.trip__figure {
  display: grid;
  gap: 0.5rem;
}
.trip__photo {
  height: auto;
  aspect-ratio: 3 / 2;
}
.trip__body {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  justify-items: start;
}
.trip__body p {
  max-width: 60ch;
  color: var(--ink-2);
}
.trip__title {
  font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2rem);
  letter-spacing: -0.02em;
}
.trip--card .trip__title {
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem);
}
.trip__body .trip__meta {
  display: grid;
  gap: 0.1rem;
  color: var(--ink);
  font-size: 0.9375rem;
}
.trip__meta strong {
  font-weight: 600;
}
.trip__meta span {
  color: var(--ink-2);
}
@media (min-width: 600px) {
  .trip__body .trip__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.9rem;
  }
  .trip__meta span {
    padding-left: 0.9rem;
    border-left: 1px solid var(--field);
  }
}
.trip__tip {
  font-size: 0.9375rem;
}
.trip__tip strong {
  color: var(--ink);
  font-weight: 600;
}
.trip__body .link {
  min-height: 44px;
}
.trip--lead,
.trip--card,
.trip--wide {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  align-content: start;
}
.trips__pair {
  display: grid;
  gap: clamp(40px, 5vw, 64px) clamp(24px, 3.5vw, 56px);
}
.trips__pair,
.trip--wide {
  margin-top: clamp(40px, 5vw, 72px);
}
.trip--wide .trip__photo {
  aspect-ratio: 16 / 9;
}
/* More photos of an outing: one row, the first frame wider than the next, all of the same height.
   The frames crop a little by themselves, so the row keeps its shape whatever the photos are. */
.trip__more-wrap {
  display: grid;
  gap: 0.5rem;
}
.trip__more {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(8px, 1vw, 14px);
}
.trip__more li {
  overflow: hidden;
  border-radius: var(--r);
}
.trip__more li:first-child {
  aspect-ratio: 3 / 2;
}
.trip__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Three more photos: on a phone the first one takes the width, the two others share the next row */
.trip__more--3 li:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}
.trip__more--3 li:nth-child(2) {
  aspect-ratio: 7 / 5;
}
.trip__more--1 {
  grid-template-columns: minmax(0, 1fr);
}
.trip__more--1 li:first-child {
  aspect-ratio: 16 / 9;
}
.trip__credits {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
@media (min-width: 700px) {
  .trip__more--3 {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .trip__more--3 li:first-child {
    grid-column: auto;
    aspect-ratio: 3 / 2;
  }
  .trip__more--3 li:nth-child(2) {
    aspect-ratio: auto;
  }
}
.trip__cols {
  display: grid;
  gap: 0.9rem;
}
.guide__end {
  padding-block: clamp(40px, 5vw, 64px) clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line);
}
.guide__end .container {
  display: grid;
  gap: 1rem;
}
.guide__end .actions {
  margin-top: 1rem;
}
@media (min-width: 700px) {
  .trips__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* the second of a pair sits lower than the first */
  .trips__pair .trip--card:nth-child(2) {
    margin-top: clamp(24px, 4vw, 56px);
  }
  .trip--wide .trip__photo {
    aspect-ratio: 21 / 9;
  }
}
@media (min-width: 900px) {
  .trip--lead {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(18px, 2.4vw, 28px) clamp(32px, 4.5vw, 72px);
    align-items: center;
  }
  .trips--flip .trip--lead {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
  .trips--flip .trip--lead .trip__figure {
    order: 2;
  }
  /* the other photos of the first outing run under the photo and the text, across the page */
  .trip--lead .trip__more-wrap {
    grid-column: 1 / -1;
    order: 3;
  }
  .trip--lead .trip__more li:first-child {
    aspect-ratio: 16 / 10;
  }
  .trip__cols {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 4.5vw, 72px);
  }
}

/* Reviews */

.reviews {
  background: var(--bg-alt);
}
.reviews__grid {
  display: grid;
  gap: 2rem;
}
.reviews__score {
  display: grid;
  gap: 0.5rem;
  align-content: start;
}
.score {
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 4rem + 8vw, 9.5rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  line-height: 0.85;
}
.score__text {
  color: var(--ink-2);
}
.score__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-weight: 600;
}
.score__badge .ic {
  color: var(--accent);
}
.reviews__text {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  align-content: start;
}

.scores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
  width: 100%;
  max-width: 34rem;
  margin-top: 0.75rem;
}
.scores__item {
  display: grid;
  gap: 0.1rem;
}
.scores dt {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.scores dd {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
@media (max-width: 399px) {
  .scores {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* "Communication" does not fit a third of a small phone */
  }
}

.themes {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.themes__title {
  font-weight: 600;
}
.themes__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.themes__list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface);
  font-size: 0.9375rem;
}
.themes__list b {
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.themes__note {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.reviews__wall {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  margin-top: clamp(40px, 6vw, 80px);
}
.wall {
  width: 100%;
  columns: 1;
  column-gap: clamp(16px, 2vw, 28px);
}
.wall__item {
  break-inside: avoid;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.quote {
  display: grid;
  gap: 0.9rem;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.quote blockquote {
  margin: 0;
  quotes: "\00ab\00a0" "\00a0\00bb";
}
:root[lang="en"] .quote blockquote {
  quotes: "\201c" "\201d";
}
.quote blockquote p {
  font-size: 1.0625rem;
  line-height: 1.55;
}
.quote blockquote p::before {
  content: open-quote;
}
.quote blockquote p::after {
  content: close-quote;
}
.quote figcaption {
  display: grid;
  gap: 0.1rem;
  font-size: 0.9375rem;
}
.quote figcaption span,
.quotes__note {
  color: var(--ink-2);
}
.quote__tr {
  font-style: italic;
}
.quotes__note {
  max-width: 70ch;
  font-size: 0.9375rem;
}

.wall-more {
  width: 100%;
}
.wall-more summary {
  display: flex;
  width: fit-content;
  margin-bottom: clamp(24px, 3vw, 36px);
  list-style: none;
}
.wall-more summary::-webkit-details-marker {
  display: none;
}
.wall-more__close,
.wall-more[open] .wall-more__open {
  display: none;
}
.wall-more[open] .wall-more__close {
  display: inline;
}

@media (min-width: 720px) {
  .wall {
    columns: 2;
  }
}
@media (min-width: 720px) {
  .reviews__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
      "title title"
      "score text";
    gap: clamp(32px, 5vw, 72px) clamp(32px, 6vw, 96px);
  }
  .reviews__title {
    grid-area: title;
  }
  .reviews__score {
    grid-area: score;
  }
  .reviews__text {
    grid-area: text;
  }
}
@media (min-width: 1100px) {
  .wall {
    columns: 3;
  }
}

/* Booking. It follows the practical information on the same background: the two share one gap, not two. */

.practical {
  padding-bottom: clamp(8px, 1.2vw, 16px);
}
.booking {
  padding-top: clamp(44px, 5.5vw, 76px);
}
.booking__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 44px) clamp(32px, 5vw, 72px);
}
.booking__intro {
  display: grid;
  gap: 1rem;
  align-content: start;
  justify-items: start;
}
/* On a phone the dates come first: the rules follow the form. The order in the page stays title, rules,
   form, which is the order a screen reader gives. */
.booking__terms {
  order: 3;
}
.booking__terms-title {
  margin-bottom: 0.9rem;
  font: 600 1rem/1.4 var(--font-text);
  letter-spacing: 0;
}
.terms {
  display: grid;
  gap: 0.9rem;
  align-content: start;
  max-width: 44rem;
}
.terms .link {
  display: inline;
  padding-block: 0.3rem; /* a taller target for a finger, without moving the lines */
}
@media (min-width: 1000px) {
  .booking__layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: end;
  }
  .booking__terms {
    order: 0;
  }
  .booking__form,
  .booking__layout > .nojs-note {
    grid-column: 1 / -1;
  }
}
.terms li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.terms__icon {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
}
.house__host {
  max-width: 52ch;
  color: var(--ink-2);
}
.booker {
  --booker-gap: clamp(24px, 3vw, 40px);
  display: grid;
  gap: var(--booker-gap);
  padding: clamp(18px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.booker__cal,
.booker__stay,
.booker__fields,
.booker__send {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  align-content: start;
  min-width: 0;
}
.booker__cal {
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .booker__fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
  .booker__fields .field--wide {
    grid-column: 1 / -1;
  }
}
/* Wide screens: the calendar beside the summary of the stay, then the contact fields beside the payment.
   The hint (first row) and the message field (second row) stretch, so the card has no blank half. */
@media (min-width: 1000px) {
  .booker {
    grid-template-columns: minmax(0, 1.7fr) minmax(340px, 1fr);
    grid-template-areas:
      "cal stay"
      "fields send";
    gap: 0 var(--booker-gap);
  }
  .booker__cal {
    grid-area: cal;
    padding-bottom: var(--booker-gap);
  }
  /* Before any date is chosen the hint fills the height of the calendar beside it. */
  .booker__stay {
    grid-area: stay;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--booker-gap);
  }
  .booker__stay > .stay,
  .booker__stay > .price,
  .booker__stay > .price__error,
  .booker__stay > .stay__hint {
    align-self: stretch;
  }
  .booker__stay > .stay__hint {
    display: grid;
    flex: 1 1 auto;
    place-content: center;
    text-align: center;
  }
  .booker__stay > .stay__hint[hidden] {
    display: none;
  }
  .booker__fields {
    grid-area: fields;
    grid-template-rows: auto minmax(0, 1fr); /* the message takes the height left beside the payment block */
    padding-top: var(--booker-gap);
    border-top: 1px solid var(--line);
  }
  .booker__send {
    grid-area: send;
    padding-top: var(--booker-gap);
    border-top: 1px solid var(--line);
  }
  .booker__stay,
  .booker__send {
    padding-left: var(--booker-gap);
    border-left: 1px solid var(--line);
  }
  /* With online payment: the choice of a way to book, the name, then e-mail and telephone when paying. */
  .booker__fields--pay {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }
  .booker[data-way="request"] .booker__fields--pay {
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .booker__fields .field--wide {
    grid-template-rows: auto minmax(0, 1fr);
  }
  .booker__fields .field--wide textarea {
    height: 100%;
  }
}

.cal__skeleton {
  height: 360px;
  border-radius: var(--r);
  background: linear-gradient(
    90deg,
    var(--bg-alt) 0%,
    color-mix(in oklab, var(--bg-alt) 55%, var(--surface)) 50%,
    var(--bg-alt) 100%
  );
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .cal__skeleton {
    animation: shimmer 1.4s linear infinite;
  }
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

.cal__months {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.cal__months[data-months="1"] {
  max-width: 28rem;
}
.cal__months[data-months="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.month__head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  align-items: center;
  margin-bottom: 0.75rem;
}
.month__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  text-transform: capitalize;
}
@media (max-width: 379px) {
  .month__head {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }
  .month__head .icon-btn {
    width: 44px;
    height: 44px;
  }
  .month__title {
    font-size: 1.0625rem;
  }
  .btn--block {
    padding-inline: 0.75rem;
    font-size: 0.9375rem;
  }
}
.month__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
}
.month__table th {
  padding-bottom: 0.25rem;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: capitalize;
}
.month__table td {
  padding: 0;
}
.month__table td.is-range {
  background: color-mix(in oklab, var(--accent) 16%, var(--surface));
}
.month__table td.is-range-start {
  border-radius: var(--r-s) 0 0 var(--r-s);
}
.month__table td.is-range-end {
  border-radius: 0 var(--r-s) var(--r-s) 0;
}
.month__table td.is-range-start.is-range-end {
  border-radius: var(--r-s);
}

.day {
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 32px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--ink);
  font: 500 0.9375rem/1 var(--font-text);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 0.15s;
}
.day[data-state="free"]:hover,
.day[data-state="departure"]:hover {
  background: var(--bg-alt);
}
.day[data-today="true"] {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.day[data-state="booked"] {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    color-mix(in oklab, var(--ink) 11%, transparent) 5px 6px
  );
  color: var(--ink-2);
  text-decoration: line-through;
  cursor: not-allowed;
}
.day[data-state="departure-only"] {
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--ink) 14%, transparent) 50%);
  color: var(--ink-2);
  cursor: not-allowed;
}
.day[data-state="departure"] {
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--ink) 14%, transparent) 50%);
  box-shadow: inset 0 0 0 1.5px var(--field);
}
.day[data-state="past"],
.day[data-state="beyond"],
.day[data-state="unknown"] {
  opacity: 0.5;
  cursor: default;
}
/* A free night on which a stay would be too short: nothing is crossed out, the day is only set back. */
.day[data-state="short"],
.day[data-state="no-arrival"] {
  background: color-mix(in oklab, var(--ink) 7%, transparent);
  color: var(--ink-2);
  cursor: not-allowed;
}
.day[data-state="start"],
.day[data-state="end"] {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}
.day[data-state="in-range"] {
  color: var(--ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--field);
}
.swatch--booked {
  border-color: var(--line);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    color-mix(in oklab, var(--ink) 18%, transparent) 4px 5px
  );
}
.swatch--selected {
  border-color: var(--accent);
  background: var(--accent);
}
.swatch--departure {
  background: linear-gradient(135deg, transparent 50%, color-mix(in oklab, var(--ink) 14%, transparent) 50%);
}
.swatch--short {
  border-color: var(--line);
  background: color-mix(in oklab, var(--ink) 9%, transparent);
}
@media (forced-colors: active) {
  .day[data-state="start"],
  .day[data-state="end"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }
  .month__table td.is-range {
    box-shadow: inset 0 2px Highlight, inset 0 -2px Highlight;
  }
  .day[data-state^="departure"] {
    outline: 2px dashed CanvasText;
    outline-offset: -4px;
  }
  .swatch--selected {
    forced-color-adjust: none;
    background: Highlight;
    border-color: Highlight;
  }
}

.cal__note {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.cal__note.is-error {
  color: var(--accent);
  font-weight: 600;
}
.cal__notice {
  display: grid;
  gap: 0.7rem;
  justify-items: start;
  padding: 0.7rem 0.9rem;
  border: 1.5px dashed var(--accent);
  border-radius: var(--r);
  color: var(--ink);
  font-size: 0.9375rem;
}
.draft {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.cal__notice[hidden] {
  display: none;
}
.cal__clear {
  justify-self: start;
}
.cal__note:empty {
  display: none;
}

.stay {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.stay dt {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.stay dd {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.stay__nights {
  margin-top: -0.4rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.stay__nights:empty {
  display: none;
}

.field {
  display: grid;
  gap: 0.4rem;
}
.field label {
  font-size: 0.9375rem;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--field);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s;
}
.field textarea {
  min-height: 96px;
  resize: vertical;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--ink);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline-offset: 1px;
}
.field [aria-invalid="true"] {
  border-color: var(--accent);
}
.field__error {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
}
.field__error[hidden] {
  display: none;
}
.form__error {
  color: var(--accent);
  font-weight: 600;
}
.form__error[hidden] {
  display: none;
}
.form__sent {
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--ink);
  font-size: 0.9375rem;
}
.form__sent[hidden] {
  display: none;
}
.booker__airbnb {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* Price and online payment */

.price {
  display: grid;
  gap: 0.75rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg);
}
.stay__hint {
  padding: 1rem 1.15rem;
  border: 1px dashed var(--field);
  border-radius: var(--r);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.stay__hint[hidden] {
  display: none;
}
.price[hidden] {
  display: none;
}
.price__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.price__lines {
  display: grid;
  gap: 0.45rem;
}
.price__lines > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.price__lines dt {
  color: var(--ink-2);
}
.price__lines dd {
  font-weight: 600;
  text-align: right;
}
.price__total {
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.price__lines > :first-child {
  padding-top: 0;
  border-top: 0;
}
.price__total dt {
  color: var(--ink);
}
.price__lines small {
  display: block;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 400;
}
.price__due dt {
  color: var(--ink);
  font-weight: 600;
}
.price__due dd {
  color: var(--accent);
  font-size: 1.2rem;
}
.price__balance {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
/* What the total leaves out, said right under it */
.price__extra,
.notice__extra {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.price__extra .ic,
.notice__extra .ic {
  flex: none;
  margin-top: 0.15rem;
}
/* A request is sent without paying: the amount to pay now and the balance say nothing useful there. */
.booker[data-way="request"] .price__lines--due,
.booker[data-way="request"] .price__balance {
  display: none;
}

/* The two ways to book: two large choices, the one taken is framed in the accent colour */
.way {
  display: grid;
  gap: 0.6rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.way legend {
  margin-bottom: 0.6rem;
  padding: 0;
  font-weight: 600;
}
.way__options {
  display: grid;
  gap: 0.6rem;
}
.way__option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--field);
  border-radius: var(--r);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.way__option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 7%, var(--bg));
}
.way__option:has(input:disabled) {
  opacity: 0.55;
  cursor: not-allowed;
}
.way__option:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.way__option input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.15rem 0 0;
  accent-color: var(--accent);
}
.way__text {
  display: grid;
  gap: 0.15rem;
}
.way__text strong {
  font-weight: 600;
}
.way__text span {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.way__why {
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
}
@media (min-width: 640px) {
  .way {
    grid-column: 1 / -1;
  }
  .way__options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.price__error {
  color: var(--accent);
  font-weight: 600;
}
.price__error[hidden] {
  display: none;
}

.field__hint {
  color: var(--ink-2);
  font-size: 0.875rem;
}
.field--check {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: 0.75rem;
}
.field--check input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-top: 0.1rem;
  padding: 0;
  accent-color: var(--accent);
}
.field--check label {
  color: var(--ink-2);
  font-weight: 400;
}
/* the error takes its own full line: left in the checkbox column it would squeeze the label to one word per line */
.field--check .field__error {
  grid-column: 1 / -1;
}
/* the link is part of a sentence: no taller than the line it sits in, or it pushes the next line away */
.field--check label .link {
  display: inline;
  min-height: 0;
}
/* A label with a long and a short wording: the short one shows when the block it sits in is narrow. */
.booker__send {
  container-type: inline-size;
}
.when-narrow {
  display: none;
}
@container (max-width: 335px) {
  .when-wide {
    display: none;
  }
  .when-narrow {
    display: inline;
  }
}
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.btn:disabled {
  opacity: 0.6;
  cursor: progress;
}
.pay__secure {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  color: var(--ink-2);
  font-size: 0.9rem;
}
.pay__secure .ic {
  flex: none;
  margin-top: 0.1rem;
}
.pay__privacy {
  color: var(--ink-2);
  font-size: 0.9rem;
}
.pay__privacy .link {
  display: inline;
  min-height: 0;
  padding-block: 0.3rem;
}
.demo-badge {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 0.8rem;
  border: 1.5px dashed var(--accent);
  border-radius: var(--r-s);
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Reservation result, demo payment page, error pages, booking terms */

.notice__grid {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.notice__photo {
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) {
  .notice__grid--photo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}
.notice__body {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 40rem;
  min-height: 40svh;
  align-content: center;
}
/* The conversation with the host, under the result of a booking */
.chat__grid {
  display: grid;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
.chat__intro {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.chat__private {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.chat__private .ic {
  margin-top: 0.2rem;
}
.chat__body {
  display: grid;
  gap: 1.25rem;
  max-width: 44rem;
}
.chat__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.chat__msg {
  max-width: 36rem;
  padding: 0.75rem 1rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.chat__msg--staff {
  justify-self: end;
  border-color: color-mix(in oklab, var(--accent) 32%, var(--line));
  background: color-mix(in oklab, var(--accent) 8%, var(--surface));
}
.chat__who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.chat__who strong {
  color: var(--ink);
}
.chat__who time {
  margin-left: auto;
}
.chat__text {
  margin-top: 0.3rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.chat__empty {
  color: var(--ink-2);
}
.chat__form {
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.chat__form .field {
  width: 100%;
}
@media (min-width: 900px) {
  .chat__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
}
@media (max-width: 639px) {
  .chat__form .btn {
    width: 100%;
  }
}
.notice__body--narrow {
  max-width: 34rem;
}
.notice__code {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
}
.notice__icon .ic {
  width: 3rem;
  height: 3rem;
  color: var(--accent);
}
.notice__wait,
.notice__next {
  max-width: 52ch;
  color: var(--ink-2);
}
.notice__wait[hidden] {
  display: none;
}
.receipt {
  display: grid;
  width: 100%;
  max-width: 34rem;
  border-top: 1px solid var(--line);
}
.receipt > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.receipt dt {
  color: var(--ink-2);
}
.receipt dd {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.notice__cancel {
  display: grid;
  gap: 0.5rem;
  justify-items: start;
  max-width: 52ch;
  color: var(--ink-2);
}
.notice__cancel ul {
  display: grid;
  gap: 0.3rem;
}
.notice__sub {
  color: var(--ink);
  font: 600 1rem/1.4 var(--font-text);
  letter-spacing: 0;
}
.receipt__sub {
  display: block;
  color: var(--ink-2);
  font-size: 0.9rem;
  font-weight: 400;
}
.receipt__ref {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  letter-spacing: 0.04em;
}
.demo-form {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}
.demo-note,
.legal__stamp {
  color: var(--ink-2);
  font-size: 0.9rem;
}
@media (prefers-reduced-motion: no-preference) {
  .notice__icon--pending .ic {
    animation: breathe 1.8s ease-in-out infinite;
  }
}
@keyframes breathe {
  50% {
    opacity: 0.4;
  }
}

/* Footer */

.footer {
  padding: clamp(48px, 7vw, 88px) var(--edge) 2rem;
  border-top: 1px solid var(--line);
}
.footer__grid {
  display: grid;
  gap: 2rem clamp(24px, 4vw, 64px);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.footer__tagline {
  margin-top: 0.25rem;
  color: var(--ink-2);
}
.footer__title {
  margin-bottom: 0.75rem;
  font: 600 1rem/1.4 var(--font-text);
  letter-spacing: 0;
}
.footer__list a[href^="tel:"] {
  white-space: nowrap;
}
main:focus {
  outline: none;
}
.footer__list {
  display: grid;
  gap: 0;
}
.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}
.footer__list a:hover {
  color: var(--ink);
  text-decoration: underline;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  margin-top: clamp(32px, 5vw, 64px);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
}
.footer__legal a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
}
.footer__pages {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.footer__lang {
  text-decoration: none;
}
.footer__lang:hover {
  color: var(--ink);
  text-decoration: underline;
}

.legal__body {
  display: grid;
  gap: 1rem;
  max-width: 46rem;
  margin-inline: 0;
}
.legal__body h2 {
  margin-top: 1.5rem;
}
.legal__body p,
.legal__list {
  color: var(--ink-2);
}
.legal__list {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.2rem;
  list-style: disc;
}
.legal__body [id] {
  scroll-margin-top: 6rem;
}
/* What comes back when a stay is cancelled: a table on a wide screen, one block per case on a phone */
.refunds {
  width: 100%;
  margin-top: 0.5rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.refunds caption {
  padding-bottom: 0.75rem;
  color: var(--ink);
  font-weight: 600;
  text-align: left;
}
.refunds th,
.refunds td {
  padding: 0.8rem 1rem 0.8rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.refunds thead th {
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 500;
}
.refunds tbody th {
  font-weight: 600;
}
.refunds td {
  color: var(--ink-2);
}
.refunds td:last-child,
.refunds thead th:last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}
.refunds__note {
  font-size: 0.9rem;
}
@media (max-width: 559px) {
  .refunds thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .refunds tr {
    display: grid;
    gap: 0.25rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }
  .refunds th,
  .refunds td,
  .refunds td:last-child {
    padding: 0;
    border: 0;
    text-align: left;
    white-space: normal;
  }
  .refunds td::before {
    content: attr(data-label) " : ";
    color: var(--ink);
    font-weight: 500;
  }
}

@media (min-width: 520px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .footer__grid > :first-child {
    grid-column: 1 / -1;
  }
  .footer__lang {
    margin-left: auto; /* the language switch closes the line, on the right */
  }
}
@media (min-width: 860px) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.2fr);
  }
  .footer__grid > :first-child {
    grid-column: auto;
  }
}

/* Motion: entrances, scroll reveal, hover feedback. Everything is off under reduced motion. */

@media (prefers-reduced-motion: no-preference) {
  .hero__main > *,
  .hero__copy > .proof__list {
    animation: rise 0.9s var(--ease) both;
    animation-delay: calc(var(--i, 0) * 90ms);
  }
  .hero__main > :nth-child(2) {
    --i: 1;
  }
  .hero__main > :nth-child(3) {
    --i: 2;
  }
  .hero__copy > .proof__list {
    --i: 3;
  }
  .hero__media .photo {
    animation: settle 1.6s var(--ease) both;
  }

  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .js .reveal.is-in {
    opacity: 1;
    transform: none;
  }

  .bento__item:hover .photo {
    transform: scale(1.035);
  }
  .spot__photo {
    transition: transform 0.9s var(--ease);
  }
  .spot:hover .spot__photo {
    transform: scale(1.03);
  }
  .film__tab::after {
    transition: width 0.3s linear;
  }
  .map__dot {
    transition: background-color 0.2s, transform 0.2s var(--ease);
  }
  a.map__tag:hover .map__dot,
  .map__tag.is-hot .map__dot {
    transform: scale(1.3);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}
@keyframes settle {
  from {
    transform: scale(1.05);
  }
}

/* Mobile booking bar: appears once the hero buttons have scrolled away, hides on the booking section */

.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem var(--gutter) calc(0.7rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--bg);
  transform: translateY(110%);
  visibility: hidden;
}
.dock.is-on {
  transform: none;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .dock {
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
  }
  .dock.is-on {
    transition: transform 0.3s var(--ease);
  }
}
.dock__text {
  display: grid;
  min-width: 0;
  margin-right: auto;
  color: var(--ink-2);
  font-size: 0.875rem;
  line-height: 1.3;
}
.dock__text strong {
  color: var(--ink);
  font-size: 0.9375rem;
}
.dock .btn {
  min-height: 46px;
  padding-inline: 1.1rem;
}
.dock .icon-btn {
  width: 46px;
  height: 46px;
  flex: none;
}
@media (min-width: 900px) {
  .dock {
    display: none;
  }
}
@media (max-width: 899px) {
  body {
    padding-bottom: 76px;
  }
}

/* Photo lightbox (native modal dialog) */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(8 14 18 / 0.96);
  color: #f3f6f5;
}
.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
/* Two views in the same dialog: the overview of every photo, or one photo with its caption */
.lightbox[data-view="overview"] .lightbox__stage,
.lightbox[data-view="overview"] .lightbox__caption,
.lightbox[data-view="overview"] .lightbox__all,
.lightbox[data-view="photo"] .lightbox__overview {
  display: none;
}
.lightbox__tools {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.lightbox__all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: var(--r-s);
  background: rgb(8 14 18 / 0.55);
  color: #fff;
  font: 500 0.9375rem/1 var(--font-text);
  cursor: pointer;
}
.lightbox__all:hover,
.lightbox__part:hover {
  background: rgb(255 255 255 / 0.18);
}
.lightbox__overview {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--gutter) clamp(32px, 5vw, 64px);
  scroll-padding-top: 4.5rem;
}
.lightbox__parts {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.5rem var(--gutter) 0.9rem;
  overflow-x: auto;
  background: rgb(8 14 18 / 0.96);
  scrollbar-width: none;
}
.lightbox__part {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r-s);
  background: none;
  color: #f3f6f5;
  font: 500 0.9375rem/1 var(--font-text);
  cursor: pointer;
}
.lightbox__part span {
  color: #a9b7b4;
  font-variant-numeric: tabular-nums;
}
.lightbox__group {
  max-width: 1500px;
  margin-inline: auto;
}
.lightbox__group + .lightbox__group {
  margin-top: clamp(28px, 4vw, 48px);
}
.lightbox__group-title {
  margin-bottom: 0.9rem;
  color: #fff;
  font-size: 1.25rem;
  letter-spacing: -0.012em;
}
.lightbox__group-title:focus {
  outline: none;
}
/* Thumbnails keep the shape of their photo and flow in columns, like prints laid on a table */
.lightbox__thumbs {
  columns: 2;
  column-gap: 0.6rem;
}
.lightbox__thumbs li {
  margin-bottom: 0.6rem;
  break-inside: avoid;
}
.lightbox__thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-s);
  overflow: hidden;
  background: rgb(255 255 255 / 0.06);
  cursor: zoom-in;
}
.lightbox__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.15s;
}
.lightbox__thumb:hover img {
  opacity: 0.85;
}
@media (min-width: 700px) {
  .lightbox__thumbs {
    columns: 3;
    column-gap: 0.75rem;
  }
  .lightbox__thumbs li {
    margin-bottom: 0.75rem;
  }
}
@media (min-width: 1200px) {
  .lightbox__thumbs {
    columns: 4;
  }
}
.lightbox::backdrop {
  background: rgb(8 14 18 / 0.96);
}
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem var(--gutter);
}
.lightbox__count {
  color: #cfd8d6;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.lightbox__stage {
  position: relative;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding-inline: clamp(0.5rem, 5vw, 5.5rem);
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--r-s);
  object-fit: contain;
  touch-action: pan-y;
}
.lightbox__caption {
  max-width: 70ch;
  margin-inline: auto;
  padding: 0.9rem var(--gutter) 1.4rem;
  color: #e3eae8;
  font-size: 0.9375rem;
  text-align: center;
}
.lightbox .icon-btn {
  border-color: rgb(255 255 255 / 0.55);
  background: rgb(8 14 18 / 0.55);
  color: #fff;
}
.lightbox .icon-btn:hover {
  background: rgb(255 255 255 / 0.18);
}
.lightbox :focus-visible {
  outline-color: #fff;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.lightbox__nav--prev {
  left: clamp(0.25rem, 1.2vw, 1.25rem);
}
.lightbox__nav--next {
  right: clamp(0.25rem, 1.2vw, 1.25rem);
}
@media (max-width: 599px) {
  .lightbox__stage {
    padding-inline: 0;
  }
  .lightbox__nav {
    top: auto;
    bottom: 0.5rem;
    translate: none;
  }
}

/* Without JavaScript the calendar and the form cannot run: hide them and show the plain links. */
.nojs-note {
  display: none;
}
html.no-js .nojs-note {
  display: block;
  max-width: 44rem;
  margin-top: 1.5rem;
}
html.no-js [data-booker] {
  display: none;
}

@media print {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  .nav,
  .dock {
    position: static;
  }
  .dock,
  .lightbox {
    display: none;
  }
}