/* ==========================================================================
   Apartman Milly
   One idea: hlad, the shade. A family summer here moves from shade to shade.
   Palette from the terrace: a white wall in shade, terracotta floor tiles
   (the accent, used rarely), teak, dry reed, the green railing, the blue bay.
   Type: Bricolage Grotesque, Figtree, IBM Plex Mono.
   ========================================================================== */

:root {
  --canvas: #E6E9E4;
  --panel: #F3F3EE;
  --line: #C9CFC7;
  --ink: #1F2B26;
  --ink-2: #48524C;
  --ink-3: #56605A;
  --night: #17231F;
  --night-2: #1F2F29;
  --on-night: rgba(243, 243, 238, .88);
  --on-night-2: rgba(243, 243, 238, .68);
  --accent: #B0532B;
  --accent-hover: #944322;
  --accent-soft: #E0A37F;
  --reed: #D4B275;
  --sea: #2A6B93;
  --sea-line: #3B82AC;
  --sea-soft: #CFE2EC;

  --f-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);

  --gutter: clamp(1rem, 4vw, 3rem);
  --maxw: 76rem;
  --section: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  --head-h: 4.25rem;

  --t-sm: .875rem;
  --t-base: 1.0625rem;
  --t-md: 1.25rem;
  --t-lg: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --t-xl: clamp(2.2rem, 1.4rem + 3.4vw, 3.9rem);
  --t-hero: clamp(2.8rem, 1.4rem + 6vw, 6.4rem);

  /* Text over the film: a tight edge, a mid glow, a wide falloff. */
  --tshadow: 0 1px 2px rgba(8, 14, 11, .92), 0 3px 12px rgba(8, 14, 11, .7), 0 10px 44px rgba(8, 14, 11, .66);
}

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

html {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}
body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* The signature: the reed shade. Soft diagonal stripes, like the pergola's
   shade on the terrace floor, drifting on a long cycle behind everything. */
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: -20%;
  pointer-events: none;
  background: repeating-linear-gradient(116deg, rgba(212, 178, 117, 0) 0 34px, rgba(212, 178, 117, .06) 34px 44px, rgba(212, 178, 117, 0) 44px 78px);
  filter: blur(3px);
  animation: tide 70s var(--ease-in-out) -18s infinite alternate;
}
@keyframes tide {
  from { transform: translate3d(-2%, -1%, 0); }
  to { transform: translate3d(2%, 1%, 0); }
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p { max-width: 62ch; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

.wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); margin-inline: auto; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .7rem 1rem; border-radius: 8px; background: var(--ink); color: var(--panel);
  transition: top .25s var(--ease-out);
}
.skip:focus { top: 1rem; }
main:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono {
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: 1.04;
  letter-spacing: -.012em;
}
.lead { font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0 1.45rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .3s var(--ease-out);
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); }
.btn--ghost { border-color: currentColor; background: transparent; }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--panel); }
.btn--sm { min-height: 2.5rem; padding: 0 1.1rem; font-size: .9375rem; }
@media (pointer: coarse) {
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ---------- Header ---------- */

.head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--head-h);
  color: var(--panel);
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.head.is-solid {
  background: rgba(233, 234, 230, .92);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  box-shadow: 0 1px 0 var(--line);
  color: var(--ink);
}
.head__in { height: 100%; display: flex; align-items: center; gap: 1.5rem; }
.brand {
  margin-right: auto;
  font-family: var(--f-display);
  font-size: 1.125rem;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
}
.head:not(.is-solid) .brand,
.head:not(.is-solid) .nav a,
.head:not(.is-solid) .langs a { text-shadow: 0 1px 10px rgba(8, 14, 11, .55); }
.nav ul { display: flex; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block;
  padding-block: .4rem;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .4s var(--ease-out);
}
.nav a:hover { background-size: 100% 1.5px; }
.langs { display: flex; gap: .15rem; }
.langs a {
  display: inline-grid;
  place-items: center;
  min-width: 2.2rem;
  min-height: 2.2rem;
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: .75rem;
  letter-spacing: .06em;
  text-decoration: none;
  opacity: .72;
  transition: opacity .2s, background-color .2s;
}
.langs a:hover { opacity: 1; }
.langs a[aria-current="page"] { opacity: 1; box-shadow: inset 0 0 0 1.5px currentColor; }
@media (pointer: coarse) { .langs a { min-width: 44px; min-height: 44px; } }
@media (max-width: 960px) { .nav { display: none; } }
@media (max-width: 560px) {
  .head__cta { display: none; }
  .brand { font-size: 1rem; }
  .langs a { min-width: 2rem; }
}

/* ==========================================================================
   Hero: the scroll film (desktop) or the composed still (the five gates)
   ========================================================================== */

.hero { position: relative; height: 600vh; background: var(--night); }
.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
  color: var(--panel);
}
.hero__poster,
.hero__poster--end {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
}
.hero__poster--end { opacity: 0; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: translateZ(0);
  will-change: transform;
  transition: opacity .9s var(--ease-out);
}
.video-ready .hero__video { opacity: 1; }
/* Always on: no frame is ever raw behind the page. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, rgba(9, 16, 13, 0) 38%, rgba(9, 16, 13, .55) 100%),
    linear-gradient(to bottom, rgba(9, 16, 13, .42), rgba(9, 16, 13, 0) 22%);
}

/* ---- The caption bands ---- */

.band {
  position: absolute;
  z-index: 2;
  --o: 0;
  --k: 0;
  opacity: var(--o);
  text-shadow: var(--tshadow);
  pointer-events: none;
}
.band .btn { text-shadow: none; pointer-events: auto; }
/* Each band dims the film only while it is on, and never flattens it. The
   ellipse reaches its own box edges exactly, so it fades to nothing before
   anything could clip it, and the text sits on the flat middle of it. */
.band::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -60% -45%;
  pointer-events: none;
  opacity: calc(.25 + .75 * var(--k));
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(8, 14, 11, var(--scrim, .7)) 0%, rgba(8, 14, 11, calc(var(--scrim, .7) * .92)) 58%,
    rgba(8, 14, 11, calc(var(--scrim, .7) * .45)) 82%, rgba(8, 14, 11, 0) 100%);
}
.band > * { width: fit-content; max-width: 100%; }
.band--1 { left: var(--gutter); bottom: 14vh; max-width: min(46rem, 60vw); --scrim: .74; }
.band--2 { left: var(--gutter); bottom: 20vh; max-width: min(40rem, 54vw); --scrim: .74; }
.band--3 { left: var(--gutter); bottom: 20vh; max-width: min(40rem, 54vw); --scrim: .72; }
.band--4 {
  left: var(--gutter);
  bottom: 10vh;
  width: min(42rem, 56vw);
  --scrim: .86;
}
.band--4::before { inset: -46% -34%; }

.band__kicker {
  display: inline-block;
  padding: .4rem .65rem;
  border: 1px solid rgba(243, 243, 238, .18);
  border-radius: 9px;
  background: rgba(9, 16, 13, .74);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--panel);
  text-shadow: 0 1px 3px rgba(8, 14, 11, .85);
}
.hero__title {
  margin-top: .8rem;
  position: relative;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: .96;
  letter-spacing: -.025em;
}
/* eyes adjust: stepping from the sun into the shade, the words come into focus.
   A soft copy (a static blur, never an animated filter) fades out as the sharp
   words fade in. */
.hero__title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  filter: blur(9px);
  text-shadow: none;
  opacity: calc((1 - var(--k)) * .95);
  pointer-events: none;
}
.band--1 .hero__title .w { opacity: var(--k); }
.band--1 .band__kicker { opacity: calc(.2 + .8 * var(--k)); }
.band--1 .band__line { opacity: clamp(0, (var(--k) - .35) * 1.6, 1); }
.band__line { margin-top: 1rem; font-size: var(--t-md); color: rgba(243, 243, 238, .95); }
.band__big {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -.012em;
}
.band__small { margin-top: .7rem; font-size: var(--t-md); color: rgba(243, 243, 238, .94); }
.band__head {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 1.2rem + 3.8vw, 4.8rem);
  line-height: 1;
  letter-spacing: -.015em;
}
.band__sub {
  margin: 1.1rem 0 0;
  max-width: 40rem;
  font-size: var(--t-md);
  color: rgba(243, 243, 238, .95);
  opacity: var(--ks, 1);
  transform: translateY(calc((1 - var(--ks, 1)) * 12px));
}
.band__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .75rem;
  margin-top: 1.6rem;
  opacity: var(--kb, 1);
  transform: translateY(calc((1 - var(--kb, 1)) * 12px));
}
.band--4 .btn--ghost { color: var(--panel); }
.band--4 .btn--ghost:hover { background: var(--panel); color: var(--ink); border-color: var(--panel); }

/* Split text (built by the script): words and letters carry their own offsets. */
.w { display: inline-block; white-space: nowrap; }
.c { display: inline-block; }
/* breeze: each word drifts in sideways, a few pixels, like the reeds moving */
[data-fx="breeze"] .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateX(calc((1 - var(--kc)) * var(--jx, -18px)));
}
/* slats: letters arrive in alternating stripes from above and below, like light through the reeds */
[data-fx="weave"] .c {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * var(--jy, 0px)));
}
[data-fx="weave"] .band__small { opacity: clamp(0, (var(--k, 0) - .55) * 3, 1); }
/* (e) word-by-word rise into a staged settle */
[data-fx="settle"] .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 22px));
}

/* ---- Loading ring and scroll cue ---- */

.ring {
  position: absolute;
  z-index: 3;
  right: var(--gutter);
  bottom: 1.5rem;
  width: 2.6rem;
  height: 2.6rem;
  color: rgba(243, 243, 238, .85);
  transform: rotate(-90deg);
  transition: opacity .6s var(--ease-out);
}
.ring circle:first-child { opacity: .22; }
.video-ready .ring,
.video-failed .ring { opacity: 0; }
.cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.4rem;
  display: grid;
  justify-items: center;
  gap: .5rem;
  transform: translateX(-50%);
  font: 500 .6875rem/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(243, 243, 238, .72);
  opacity: var(--cue, 1);
  transition: opacity .4s;
}
.cue i {
  display: block;
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(to bottom, rgba(243, 243, 238, 0), rgba(243, 243, 238, .8));
  transform-origin: top;
  animation: cue 2.6s var(--ease-in-out) -1.1s infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 0; }
  25% { opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(2.6rem); opacity: 0; }
}

/* Short desktop windows keep the film but lose the small overlays. */
@media (max-height: 560px) { .cue { display: none; } }

/* ---- The five static-hero gates (kept identical to the script) ---- */

@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse), (orientation: landscape) and (pointer: coarse) and (max-height: 560px), (prefers-reduced-motion: reduce) {
  .hero { height: auto; }
  .hero__stage {
    position: relative;
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: calc(var(--head-h) + 1.5rem) 0 2.5rem;
  }
  .hero__poster { background-image: url(../img/hero-ending-1280.jpg); background-position: 50% 45%; }
  .hero__poster--end, .hero__video, .ring, .cue { display: none; }
  /* Stacked over the still: shade the top for the header, keep the view
     clear, darken under the words and the buttons. */
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(9, 16, 13, .74), rgba(9, 16, 13, .6) 34%, rgba(9, 16, 13, .42) 48%, rgba(9, 16, 13, .16) 60%, rgba(9, 16, 13, .4) 76%, rgba(9, 16, 13, .86));
  }
  .band { position: relative; inset: auto; opacity: 1; transform: none; max-width: none; width: auto;
          --o: 1 !important; --k: 1 !important; --ks: 1 !important; --kb: 1 !important; }
  /* Stacked, the bands sit close enough for one band's shade to reach the
     next band's words. So no band is its own layer here: every shade paints
     first and every line of text paints above all of them. */
  .band { z-index: auto; }
  .band::before { inset: -40% -18%; z-index: 0; }
  .band > * { position: relative; z-index: 1; }
  .band--1, .band--2 { margin-inline: var(--gutter); }
  .band--2 { margin-top: .9rem; }
  .band--2 .band__big { font-size: var(--t-lg); line-height: 1.2; }
  .band--3, .band--4 .band__head { display: none; }
  .band--4 { margin: auto var(--gutter) 0; text-align: left; }
  .band--4 .band__sub { margin-left: 0; }
  .band--4 .band__cta { justify-content: flex-start; }
  .band--4 > * { margin-left: 0; }
  .hero__title { transform: none; }
  .band .w, .band .c { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 720px), (orientation: portrait) and (max-width: 1024px), (orientation: portrait) and (pointer: coarse) {
  .hero__poster { background-image: url(../img/hero-ending-tall.jpg); background-position: 50% 50%; }
  /* Upright, the picture tells the story on its own: the pergola, the bay, the
     table in the shade. So only the name and the buttons sit on it, low, over
     the dark wood of the table; the view stays clear. */
  .hero__stage { justify-content: flex-end; }
  .band--2, .band--4 .band__sub { display: none; }
  .band--4 { margin-top: 1.5rem; }
  /* short screens: one button, so the view stays in sight */
  @media (max-height: 700px) { .band--4 .btn--ghost { display: none; } }
  .hero__scrim {
    background:
      linear-gradient(to bottom, rgba(9, 16, 13, .64), rgba(9, 16, 13, .34) 9%, rgba(9, 16, 13, 0) 18%, rgba(9, 16, 13, 0) 44%, rgba(9, 16, 13, .5) 58%, rgba(9, 16, 13, .78) 76%, rgba(9, 16, 13, .88));
  }
}

/* ==========================================================================
   Below the film
   ========================================================================== */

.section { padding-block: var(--section); position: relative; }
.kicker { display: block; margin-bottom: 1.1rem; color: var(--sea); }
.h2 { font-weight: 600; letter-spacing: -.022em; }

/* Between sections: a row of reed slats, swaying a little. */
.slats {
  display: block;
  height: 18px;
  background: repeating-linear-gradient(90deg, var(--reed) 0 3px, transparent 3px 9px);
  opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  transform-origin: 50% 0;
  animation: sway 11s var(--ease-in-out) -4s infinite alternate;
}
@keyframes sway { from { transform: skewX(-4deg); } to { transform: skewX(4deg); } }

/* Entrances: children arrive in turn, then the delays are retired. */
.js [data-in] { opacity: 0; transform: translateY(24px); }
.js [data-in].in {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease-out) calc(var(--i, 0) * 110ms), transform .9s var(--ease-out) calc(var(--i, 0) * 110ms);
}
.js [data-in].in.settled { transition-delay: 0s, 0s; }

/* ---- 2. The apartment ---- */
/* ---- 2. The apartment ---- */

.rooms__head { display: grid; gap: 1.25rem; margin-bottom: 2.5rem; }
@media (min-width: 960px) { .rooms__head { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 3rem; } }
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0 0 2.5rem;
  padding: 0;
  list-style: none;
}
.facts li {
  padding: .45rem .8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-family: var(--f-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--ink-2);
}
.mosaic { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaic figure { position: relative; }
.mosaic .ph { overflow: hidden; border-radius: 14px; background: var(--line); }
.mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.mosaic figure:hover img { transform: scale(1.03); }
.mosaic figcaption { margin-top: .55rem; font-size: var(--t-sm); color: var(--ink-3); }
/* Every row lines up: the living room on its own, then pairs of squares,
   and the terrace to close. */
.mosaic .ph { aspect-ratio: 1; }
.m-living, .m-terrace-in { grid-column: 1 / -1; }
.m-living .ph, .m-terrace-in .ph { aspect-ratio: 4 / 3; }
.m-bath { order: 1; }
.m-bed-two, .m-bed-one { order: 2; }
.m-terrace-in { order: 3; }
/* Wide: the living room beside the kitchen and terrace stacked, then the
   two bedrooms and the bathroom as three equal squares. */
@media (min-width: 860px) {
  .mosaic { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; }
  .mosaic figure { display: flex; flex-direction: column; order: 0; }
  .mosaic .ph { flex: 1 1 auto; min-height: 0; }
  .m-living { grid-column: 1 / 9; grid-row: 1 / 3; }
  .m-living .ph { aspect-ratio: auto; }
  .m-kitchen { grid-column: 9 / 13; grid-row: 1; }
  .m-terrace-in { grid-column: 9 / 13; grid-row: 2; }
  .m-kitchen .ph, .m-terrace-in .ph { aspect-ratio: 4 / 3; }
  .m-bed-two { grid-column: 1 / 5; grid-row: 3; }
  .m-bed-one { grid-column: 5 / 9; grid-row: 3; }
  .m-bath { grid-column: 9 / 13; grid-row: 3; }
}

/* ---- 1. The terrace, in four beats: the words stay, the photos come down beside them ---- */

.h3 { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.link { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.link:hover { color: var(--accent); }
.sec-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.split { position: relative; }
.split__grid { display: grid; gap: 2rem; }
.split__beats { display: grid; gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.split__n { font-size: .75rem; letter-spacing: .12em; color: var(--ink-3); }
.split__n b { font-weight: 500; color: var(--accent-hover); }
.split__beat .h3 { margin-top: .5rem; max-width: 12ch; }
.split__beat > p:last-child { margin-top: 1rem; max-width: 34ch; font-size: var(--t-md); line-height: 1.55; color: var(--ink-2); }
.split__bar { display: none; }
.split__window { position: relative; }
.split__reel { display: grid; gap: 1rem; }
.split__shot { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--night); }
.split__shot .zoom { position: absolute; inset: 0; display: block; }
.split__shot img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 960px) {
  .split__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
}

.js .split.is-live { height: calc(100svh + 4 * 70svh); }
.js .split.is-live .split__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.js .split.is-live .split__grid { width: min(100% - 2 * var(--gutter), var(--maxw)); align-items: center; }
.js .split.is-live .split__beats { display: block; position: relative; min-height: clamp(15rem, 36svh, 20rem); }
.js .split.is-live .split__beat { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.js .split.is-live .split__beat > * { opacity: 0; transform: translateY(1.4rem); transition: opacity .45s var(--ease-out), transform .7s var(--ease-out); }
.js .split.is-live .split__beat.is-past > * { transform: translateY(-1.4rem); transition-duration: .3s, .5s; }
.js .split.is-live .split__beat.is-on > * { opacity: 1; transform: none; }
.js .split.is-live .split__beat.is-on > :nth-child(2) { transition-delay: .06s; }
.js .split.is-live .split__beat.is-on > :nth-child(3) { transition-delay: .12s; }
.js .split.is-live .split__bar { display: flex; gap: .4rem; margin-top: 2rem; }
.split__bar i { position: relative; flex: 0 1 3rem; height: 3px; overflow: hidden; border-radius: 2px; background: var(--line); }
.split__bar i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left; }
.js .split.is-live .split__window { height: min(72svh, 40rem); overflow: hidden; border-radius: 18px; background: var(--night); box-shadow: 0 34px 70px -44px rgba(23, 35, 31, .6); }
/* the photos, bottom-up: the first beat's at the bottom, so the reel comes down */
.js .split.is-live .split__reel { position: absolute; inset: 0 0 auto 0; height: 400%; display: flex; flex-direction: column-reverse; gap: 0; will-change: transform; transform: translate3d(0, -75%, 0); }
.js .split.is-live .split__shot { flex: 1 1 0; aspect-ratio: auto; border-radius: 0; }
@media (max-width: 959px) {
  .js .split.is-live .split__pin { align-items: flex-start; padding-top: .75rem; }
  .js .split.is-live .split__grid { gap: 1.1rem; }
  .js .split.is-live .split__window { order: -1; height: 50svh; }
  .js .split.is-live .split__beats { min-height: 11.5rem; }
  .js .split.is-live .split__beat { top: 0; transform: none; }
  .js .split.is-live .split__bar { margin-top: .4rem; }
  .split__beat .h3 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .split__beat > p:last-child { margin-top: .6rem; font-size: 1rem; }
}

/* ---- 2. The apartment: a walk through the rooms, sideways ---- */

.rail { position: relative; margin-top: clamp(2rem, 4vw, 3rem); }
/* without the story: a row to swipe or scroll sideways */
.rail__track {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail__item { flex: none; margin: 0; width: min(84vw, 44rem); scroll-snap-align: center; }
.rail__item--tall { width: min(60vw, 26rem); }
.rail__item .zoom { display: block; overflow: hidden; border-radius: 16px; background: var(--line); aspect-ratio: 4 / 3; }
.rail__item--tall .zoom { aspect-ratio: 3 / 4; }
.rail__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.rail__item:hover img { transform: scale(1.03); }
.rail__item figcaption { margin-top: .7rem; font-size: var(--t-sm); color: var(--ink-2); }
.rail__item figcaption .mono { margin-right: .5rem; color: var(--accent-hover); }
.rail__foot { display: none; }
.js .rail.is-live { height: calc(100svh + var(--travel, 0px) * 1.15); }
.js .rail.is-live .rail__pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem; overflow: hidden; }
.js .rail.is-live .rail__track { overflow: visible; scroll-snap-type: none; will-change: transform; align-items: flex-end; }
/* every room at the same height, so the walk reads as one wall of photos */
.js .rail.is-live .rail__item { width: auto; }
.js .rail.is-live .rail__item .zoom { height: min(62svh, 34rem); width: auto; aspect-ratio: 4 / 3; }
.js .rail.is-live .rail__item--tall .zoom { aspect-ratio: 3 / 4; }
.js .rail.is-live .rail__foot { display: flex; align-items: center; gap: 1.5rem; }
.rail__hint { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.rail__bar { position: relative; flex: 1; max-width: 16rem; height: 3px; margin: 0; overflow: hidden; border-radius: 2px; background: var(--line); }
.rail__bar i { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@media (max-width: 959px) {
  .js .rail.is-live .rail__item .zoom { height: 50svh; }
}

/* ---- 3. A day in the shade: the scroll carries the sun ---- */

.js .dayrail.is-live { height: calc(100svh + 4 * 65svh); }
.js .dayrail.is-live .dayrail__pin { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden; }
.js .dayrail.is-live .dayrail__pin > .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); }
/* the light follows the hour: cool in the morning, bright at noon, gold at dinner */
.shade { position: relative; isolation: isolate; }
.shade::before, .shade::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity .6s linear; }
.shade::before { background: radial-gradient(90% 70% at 20% 0%, rgba(122, 170, 198, .22), transparent 70%); opacity: calc(1 - var(--tod, 0) * 1.6); }
.shade::after { background: radial-gradient(90% 70% at 80% 10%, rgba(226, 150, 74, .28), transparent 70%); opacity: calc((var(--tod, 0) - .55) * 2.4); }
.dayrail .shade__hint { display: flex; align-items: center; gap: .6rem; }
.js .dayrail.is-live .shade__hint::before { content: ""; flex: none; width: 1px; height: 1.6rem; background: linear-gradient(var(--reed), transparent); }
@media (max-width: 959px) {
  .js .dayrail.is-live .dayrail__pin { align-items: flex-start; padding-top: calc(var(--head-h) + .5rem); }
  .js .dayrail.is-live .shade__stage { margin-top: 1rem; gap: 1rem; }
  .js .dayrail.is-live .shade__photos { max-height: 30svh; }
  .js .dayrail.is-live .h2 { font-size: clamp(2rem, 8vw, 2.6rem); }
}

/* ---- 3. A day in the shade: the one thing to do with your hands ---- */

.shade { background: var(--night); color: var(--panel); overflow: clip; }   /* clip, not hidden: hidden would stop the pinned day from sticking */
.shade .h2 { color: var(--panel); }
.shade .kicker { color: var(--reed); }
.shade__hint { margin-top: 1rem; color: var(--on-night-2); }
.shade__stage { display: grid; gap: 2rem; margin-top: 2.5rem; }
@media (min-width: 960px) { .shade__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3.5rem; align-items: center; } }
.shade__photos {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  background: var(--night-2);
}
.shade__photos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s var(--ease-out);
}
.shade__photos img.is-on { opacity: 1; }
.dial {
  position: relative;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  border-radius: 14px;
}
.dial.is-dragging { cursor: grabbing; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; }
.dial__arc { fill: none; stroke: rgba(243, 243, 238, .3); stroke-width: 1.5; stroke-dasharray: 2 7; stroke-linecap: round; }
.dial__lit { fill: none; stroke: var(--reed); stroke-width: 2; stroke-linecap: round; }
.dial__tick circle { fill: var(--night); stroke: rgba(243, 243, 238, .45); stroke-width: 1.5; transition: fill .3s, stroke .3s; }
.dial__tick text { fill: var(--on-night-2); font: 500 15px var(--f-mono); letter-spacing: .06em; transition: fill .3s; }
.dial__tick.is-on circle { fill: var(--reed); stroke: var(--reed); }
.dial__tick.is-on text { fill: var(--panel); }
.dial__sun .core { fill: var(--reed); }
.dial__sun .glow { fill: var(--reed); opacity: .2; animation: glow 5s var(--ease-in-out) -2s infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes glow { from { transform: scale(.85); opacity: .14; } to { transform: scale(1.15); opacity: .26; } }
.dial:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 6px; }
.shade__now { margin-top: 1.2rem; min-height: 6.5rem; }
.shade__time { font: 500 .8125rem/1 var(--f-mono); letter-spacing: .12em; color: var(--reed); }
.shade__line {
  margin-top: .6rem;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--t-lg);
  line-height: 1.15;
  letter-spacing: -.012em;
}
.shade__line.is-new { animation: arrive .6s var(--ease-out); }
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.shade__done { margin-top: 1.4rem; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); visibility: hidden; }
.shade.is-done .shade__done { opacity: 1; transform: none; visibility: visible; }
.shade__done p { color: var(--on-night); }
.shade__done .btn { margin-top: .9rem; }

/* ---- 4. Around: the distances in words, the real map on request ---- */

.around__grid { display: grid; gap: 2.5rem; }
@media (min-width: 960px) { .around__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: 4rem; } }
.dist { margin-top: 2rem; border-top: 1px solid var(--line); }
.dist div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.dist dt { color: var(--ink); }
.dist dd { margin: 0; font: 500 .8125rem/1.3 var(--f-mono); color: var(--sea); text-align: right; }
.strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 3.5rem; }
@media (min-width: 860px) { .strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
.strip .frame { overflow: hidden; border-radius: 14px; aspect-ratio: 1; background: var(--line); }
.strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.strip figure:hover img { transform: scale(1.03); }
.strip figcaption { margin-top: .5rem; font-size: var(--t-sm); color: var(--ink-3); }


/* the enquiry: the boxes for a pet and for 18+ */
.check { display: flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; }
.check input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent); }

/* narrow phones: the place line stays on one row */
@media (max-width: 400px) { .band__kicker { font-size: .6875rem; letter-spacing: .08em; } }

/* the phone number, under the two send buttons */
.sum__call { font-size: var(--t-sm); color: var(--ink-2); }
.sum__call a { color: var(--sea); font-weight: 600; white-space: nowrap; }

/* the real map, only after a click: a still of the bay and the address until then */
.gmap { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; background: var(--night); box-shadow: 0 30px 60px -44px rgba(23, 35, 31, .5); }
@media (min-width: 960px) { .gmap { aspect-ratio: 5 / 6; } }
.gmap__gate { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 1rem; padding: clamp(1.25rem, 3vw, 2rem); color: var(--panel); }
.gmap__bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.gmap__gate::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 35, 31, .15) 0%, rgba(23, 35, 31, .55) 45%, rgba(23, 35, 31, .92) 100%); }
.gmap__pin { position: absolute; left: 50%; top: 32%; width: 1.6rem; height: 1.6rem; margin: -.8rem 0 0 -.8rem; border-radius: 50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.gmap__pin::after { content: ""; position: absolute; inset: .45rem; border-radius: 50%; background: var(--panel); }
.gmap__addr { font-size: var(--t-md); line-height: 1.4; }
.gmap__addr b { font-family: var(--f-display); font-weight: 600; font-size: 1.35rem; }
.gmap__note { max-width: 36ch; font-size: var(--t-sm); line-height: 1.45; color: rgba(243, 243, 238, .86); }
.gmap__note .link:hover { color: var(--reed); }
.gmap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--canvas); }
.gmap.is-live .gmap__gate { display: none; }
.addr { margin-top: 1.4rem; color: var(--ink-2); }
.addr .mono { display: block; margin-bottom: .25rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* the film at the top: the note that AI straightened and animated the photo */
.hero__ai {
  position: absolute;
  z-index: 4;
  right: var(--gutter);
  top: calc(var(--head-h) + .75rem);
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(23, 35, 31, .62);
  color: rgba(243, 243, 238, .92);
  font-size: .72rem;
  line-height: 1.3;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* the enquiry: the 18+ box, and a field that needs fixing */
.input[aria-invalid="true"] { border-color: #A3371E; box-shadow: 0 0 0 3px rgba(163, 55, 30, .15); }
.check input[aria-invalid="true"] { outline: 2px solid #A3371E; outline-offset: 2px; }

/* the foot: who rents, the legal pages, and "Stop animations" */
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(243, 243, 238, .14); font-size: var(--t-sm); color: var(--on-night-2); }
.foot__legal a { color: inherit; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 1.2rem; }
.foot__links a, .foot__motion { display: inline-block; padding-block: .3rem; }
.foot__links a[aria-current] { color: var(--panel); }
.foot__motion { border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.foot__motion:hover { color: var(--panel); }
[hidden] { display: none !important; }

/* the text pages: privacy, terms, accessibility */
.doc { padding: calc(var(--head-h) + clamp(2.5rem, 6vw, 5rem)) 0 var(--section); }
.doc .wrap { max-width: 46rem; }
.doc h1 { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem); line-height: 1.02; letter-spacing: -.02em; color: var(--ink); }
.doc h2 { margin-top: 2.4rem; font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--ink); }
.doc p, .doc ul { margin-top: 1rem; color: var(--ink-2); }
.doc ul { list-style: disc; padding-left: 1.25rem; }
.doc li + li { margin-top: .35rem; }
.doc .updated { font-size: var(--t-sm); color: var(--ink-3); }

/* "Stop animations": the drifting shade and every other small movement rest */
html.still { scroll-behavior: auto; }
html.still *, html.still *::before, html.still *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
html.still .lb.is-loading .lb__frame::after { animation-duration: .8s !important; animation-iteration-count: infinite !important; }

/* Without JavaScript the film never plays, so the first caption stands on the
   poster from the start: the name, the line and the way to the sea. */
.no-js .band--1 { --o: 1; --k: 1; }
.no-js .hero__poster:not(.hero__poster--end) { background-image: url(../img/hero-poster-1920.jpg); }

/* ---- 6. Good to know ---- */

.faq__grid { display: grid; gap: 2rem; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 4rem; } }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: .9rem 0;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  transform: translateY(-.15rem) rotate(45deg);
  transition: transform .35s var(--ease-out);
}
.qa[open] summary::after { transform: translateY(.1rem) rotate(-135deg); }
.qa p { padding: 0 0 1.2rem; color: var(--ink-2); }

/* ---- 7. Prices and dates ---- */

.book { position: relative; isolation: isolate; color: var(--panel); background: var(--night); }
.book__bg { position: absolute; z-index: -2; inset: 0; background-size: cover; background-position: 50% 80%; }
.book::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 34, 47, .92), rgba(20, 34, 47, .78) 40%, rgba(20, 34, 47, .94));
}
.book .h2 { color: var(--panel); }
.book__intro { display: grid; gap: 1.2rem; margin-bottom: 2.5rem; }
.book__intro p { color: var(--on-night); }
@media (min-width: 960px) { .book__intro { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: end; gap: 3rem; } }
.book__panel {
  display: grid;
  gap: 2rem;
  padding: clamp(1.25rem, 3vw, 2.5rem);
  border-radius: 22px;
  background: var(--panel);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
@media (min-width: 1080px) { .book__panel { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 3rem; } }

.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cal__nav { display: flex; gap: .5rem; }
.cal__nav button {
  width: 2.75rem;
  height: 2.75rem;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.cal__nav button:hover:not(:disabled) { border-color: var(--ink); }
.cal__nav button:disabled { opacity: .35; cursor: default; }
.cal__nav svg { width: 1rem; height: 1rem; margin: auto; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: var(--t-sm); color: var(--ink-3); }
.cal__legend span { display: inline-flex; align-items: center; gap: .4rem; }
.cal__legend i { width: .8rem; height: .8rem; border-radius: 3px; background: var(--sea-soft); }
.cal__legend .is-booked i { background: repeating-linear-gradient(135deg, #D9DCD6 0 3px, #EEF0EC 3px 6px); }
.cal__legend .is-sel i { background: var(--ink); }
.cal__months { display: grid; gap: 2rem; }
@media (min-width: 720px) { .cal__months { grid-template-columns: 1fr 1fr; } }
.cal__month h3 { margin-bottom: .6rem; font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; text-transform: capitalize; }
.cal__month table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal__month th { padding-bottom: .3rem; font: 500 .6875rem/1 var(--f-mono); letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
.cal__month td { padding: 0; }
.day {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 100%;
  aspect-ratio: 1 / 1.02;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--sea-soft);
  cursor: pointer;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), transform .2s var(--ease-out);
}
.day b { font-weight: 600; font-size: .9375rem; line-height: 1.1; }
.day small { font: 400 .625rem/1.1 var(--f-mono); color: var(--sea); }
.day:hover:not(:disabled) { background: #B9D3CD; transform: translateY(-1px); }
.day:disabled { cursor: default; background: transparent; color: #9AA1A9; }
.day:disabled small { color: transparent; }
.day.is-booked { background: repeating-linear-gradient(135deg, #E2E4DF 0 3px, #EEF0EC 3px 6px); color: #8C939C; }
.day.is-booked b { text-decoration: line-through; }
/* the morning after the season's last night: a departure only, in next month */
.day.is-out:not(:disabled):not(.is-end) { background: transparent; box-shadow: inset 0 0 0 1px var(--sea-line); }
.day.is-out:not(.is-end) small { color: var(--ink-3); }
.day.is-range { background: #C7D9D5; border-radius: 0; }
/* nights inside the stay read as nights, even the ones too early to leave on */
.day.is-range:disabled { color: var(--ink); }
.day.is-range:disabled small { color: var(--sea); }
.day.is-start, .day.is-end { background: var(--ink); color: var(--panel); }
.day.is-start small, .day.is-end small { color: var(--accent-soft); }
.day.is-start { border-radius: 8px 0 0 8px; }
.day.is-end { border-radius: 0 8px 8px 0; }
.day.is-start.is-end { border-radius: 8px; }
.cal__note { margin-top: 1rem; font-size: var(--t-sm); color: var(--ink-3); }
.rates { margin-top: 1.75rem; }
.rates__title { margin: 0 0 .5rem; font: 500 .6875rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.rates__list { margin: 0; padding: 0; list-style: none; }
@media (min-width: 560px) { .rates__list { columns: 2; column-gap: 2rem; } }
.rates__list li {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .55rem .5rem; border-top: 1px solid var(--line); break-inside: avoid;
  font-size: var(--t-sm); color: var(--ink-2);
  transition: background-color .3s var(--ease-out), color .3s var(--ease-out);
}
.rates__list span::first-letter { text-transform: uppercase; }
.rates__list b { font: 500 var(--t-sm)/inherit var(--f-mono); color: var(--ink); }
.rates__list li.is-on { background: var(--sea-soft); color: var(--ink); }

.sum { display: grid; gap: 1.1rem; align-content: start; }
.sum__dates { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.sum__dates div { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; }
.sum__dates dt { font: 500 .6875rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.sum__dates dd { margin-top: .35rem; font-weight: 600; }
.sum__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.sum__total strong { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; }
.sum__dates dd.is-empty { font-weight: 500; color: var(--ink-3); }
.sum__total.is-empty span { color: var(--ink-3); }
.sum__total.is-empty strong { font-size: 1.5rem; }
.sum__total strong small { font: 500 var(--t-sm)/1 var(--f-body); color: var(--ink-3); }
.sum__hint { font-size: var(--t-sm); color: var(--ink-3); }
.field { display: grid; gap: .35rem; }
.field label { font-size: var(--t-sm); font-weight: 600; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.input {
  width: 100%;
  min-height: 2.9rem;
  padding: .6rem .8rem;
  border: 1.5px solid #9AA1A9;
  border-radius: 10px;
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(154, 100, 32, .25); }
textarea.input { min-height: 5.5rem; resize: vertical; }
.sum__send { display: grid; gap: .6rem; }
.sum__send .btn { width: 100%; }
.sum__err { min-height: 1.2em; font-size: var(--t-sm); color: #9A3412; }
.sum__ok { font-size: var(--t-sm); color: var(--sea); }
.sum__how { font-size: .8125rem; color: var(--ink-3); }
.link-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--sea);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

/* ---------- Footer ---------- */

.foot { padding: 3.5rem 0 2.5rem; background: var(--night); color: var(--on-night); }
.foot__grid { display: grid; gap: 2rem; }
@media (min-width: 860px) { .foot__grid { grid-template-columns: 2fr 1fr 1fr; } }
.foot__name { font-family: var(--f-display); font-size: 1.5rem; color: var(--panel); }
.foot a { color: var(--panel); }
.foot p + p { margin-top: .4rem; }
.foot__langs { display: flex; gap: .75rem; font-family: var(--f-mono); font-size: .8125rem; }
.foot__credit { margin-top: 2.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(243, 243, 238, .14); font-size: var(--t-sm); color: var(--on-night-2); }

/* ---------- The photo viewer ---------- */

/* Every photo on the page opens whole. A small sign says so: always there on
   touch screens, on hover or focus with a mouse or keyboard. */
.zoom { display: block; position: relative; cursor: zoom-in; }

.zoom:focus-visible { outline-offset: -3px; }
.zoom::after {
  content: "";
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(20, 34, 47, .58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E") center / 1rem no-repeat;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(.88);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
  pointer-events: none;
}
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .zoom::after { opacity: 1; transform: none; } }

/* while open: the page stays put, and a sideways swipe turns the photo instead of going back a page */
html.lb-open, html.lb-open body { overflow: hidden; overscroll-behavior: none; }
.lb {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: rgba(10, 17, 24, .93);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--panel);
  opacity: 0;
  overscroll-behavior: none;
  transition: opacity .25s var(--ease-out);
}
.lb::backdrop { background: transparent; }
.lb.is-open { opacity: 1; }
.lb__fig {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 4.25rem 5.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.lb__frame { position: relative; display: grid; place-items: center; min-width: 3rem; min-height: 3rem; }
.lb__img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(calc(100vw - 11rem), 1800px);
  max-height: calc(100vh - 9.5rem);
  max-height: calc(100dvh - 9.5rem);
  border-radius: 8px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
  transition: opacity .35s var(--ease-out), transform .5s var(--ease-out);
}
/* between photos: the old one goes at once, the new one slides in from the side it came from */
.lb.is-loading .lb__img { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.985); transition: none; }
.lb__frame::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2rem;
  height: 2rem;
  margin: -1rem;
  border-radius: 50%;
  border: 2px solid rgba(243, 243, 238, .22);
  border-top-color: var(--panel);
  opacity: 0;
  pointer-events: none;
}
.lb.is-loading .lb__frame::after { opacity: 1; transition: opacity .2s .3s; animation: lb-spin .8s linear infinite; }
@keyframes lb-spin { to { transform: rotate(360deg); } }
.lb__cap { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35rem 1rem; max-width: 60rem; text-align: center; font-size: var(--t-sm); color: var(--on-night); }
.lb__count { font: 500 .75rem/1 var(--f-mono); letter-spacing: .06em; color: var(--on-night-2); }
.lb__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(243, 243, 238, .22);
  border-radius: 50%;
  background: rgba(243, 243, 238, .08);
  color: var(--panel);
  cursor: pointer;
  transition: background-color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.lb__btn:hover { background: rgba(243, 243, 238, .18); border-color: rgba(243, 243, 238, .4); }
.lb__btn svg { width: 1.3rem; height: 1.3rem; }
.lb__close { top: 1rem; right: 1rem; }
.lb__prev, .lb__next { top: 50%; margin-top: -1.5rem; }
.lb__prev { left: 1.25rem; }
.lb__next { right: 1.25rem; }
/* phones: the photo as wide as the screen, the arrows under the thumb */
@media (max-width: 720px) {
  .lb__fig { padding: 4rem .75rem 5.5rem; }
  .lb__img { max-width: calc(100vw - 1.5rem); max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); border-radius: 6px; }
  .lb__prev, .lb__next { top: auto; bottom: 1.1rem; margin-top: 0; }
  .lb__prev { left: 1rem; }
  .lb__next { right: 1rem; }
}

/* ---------- Tabs in the background stop moving ---------- */

body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }
.idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }

/* ---------- Reduced motion: everything in its finished state ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  body::before { animation: none; }
  .js [data-in] { opacity: 1; transform: none; }

}