/* The client kit's rental site: one template, every client (products/lead-engine/sites/rental/, made by scripts/client/make-site.py).
   The Kube rebuild (3 Oct): the photo is the first screen, a small centred name, light capitals (Josefin Sans 300) on cream, edge-to-edge
   photo grids with names on the photos, a highlights list that swaps the picture, How to book, FAQ, one closing call. The date bar and the
   houses answering for your dates are kept from Ledger: the booking is ours. One neutral look for every client (decided 2 Oct: no client
   colours on the website). Units, prices, photos and texts are read live by site.js. Flat: no shadows, no glows, no radius. */

@font-face { font-family: "Kit Title"; src: url("fonts/kit-title.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Kit Sans"; src: url("fonts/kit-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

html.site {
  --ground: #FAF7F1;    /* cream */
  --ground-2: #F0ECE3;  /* the FAQ band, the chosen nights */
  --card: #FFFEFB;      /* a card lying on the cream */
  --ink: #171612;       /* 17:1 on the ground */
  --muted: #5F5B53;     /* 6.4:1 on the ground, 5.8:1 on ground-2 */
  --line: #DCD6CA;      /* rules only */
  --err: #8E2A17;
  --on-photo: #FFFFFF;
  --title: "Kit Title", "Josefin Sans", "Futura", sans-serif;
  --sans: "Kit Sans", "Helvetica Neue", Arial, sans-serif;
  --gut: 32px;
  --hd: 72px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0);
  background: var(--ground);
  scroll-padding-top: var(--hd);
}
@media (max-width: 760px) { html.site { --gut: 16px; --hd: 60px; } }
html.site body { background: var(--ground); color: var(--ink); font: 300 15px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
html.site ::selection { background: var(--ink); color: var(--ground); }
html.site :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
html.site :focus:not(:focus-visible) { outline: none; }
/* Rings for the keyboard only, in every engine: WebKit also draws one on a dialog's first focus after a tap. site.js sets html.kbd on a key
   and takes it off on any pointer; without it, no ring. */
html.site:not(.kbd) :focus-visible, html.site:not(.kbd) :focus-visible::after { outline: none !important; }
html.site [hidden] { display: none !important; }
.skip { position: absolute; left: 12px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--ground); }
.skip:focus { top: 12px; }

/* ---------- Type: three sizes of the title face, the sans for everything else. Numbers never go in the title face (29 Sep). ---------- */
.sv-lab { font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.sv-d { font-family: var(--title); font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.08; text-wrap: balance; }
.sv-d1 { font-size: 44px; } .sv-d2 { font-size: 36px; } .sv-d3 { font-size: 28px; }
@media (max-width: 760px) { .sv-d1 { font-size: min(30px, 7.6vw); } .sv-d2 { font-size: 28px; } .sv-d3 { font-size: 21px; } }
.sv-d .dg { font-family: var(--sans); font-weight: 200; letter-spacing: 0; }
.sv-num, .sv-money { font-variant-numeric: tabular-nums lining-nums; }
.sv-money { white-space: nowrap; }
.sv-u { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ---------- Buttons: ink, flat, square. On a photo: cream. A secondary action is an underlined label (Kube's "Découvrir"). ---------- */
.sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 0 28px; background: var(--ink); color: var(--ground); font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; border: 0; border-radius: 0; text-align: center; }
.sv-btn--light { background: var(--ground); color: var(--ink); }
.sv-btn svg { flex: none; width: 18px; height: 18px; }
.sv-btn[disabled] { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); cursor: default; }
.sv-link { display: inline-block; padding: 6px 0; background: none; border: 0; font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
@media (hover: hover) { .sv-btn:not([disabled]):hover { background: #2A2823; } .sv-btn--light:not([disabled]):hover { background: #fff; } .sv-link:hover { text-decoration-thickness: 2px; } }

/* ---------- Header: clear on the hero photo, cream after it; it leaves going down and comes back on any scroll up (site.js). Fixed, so
   it never moves the page. The colour is a cream layer's opacity; the slide is a transform. ---------- */
.sv-hd { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hd); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--gut); color: var(--on-photo); }
.sv-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ground); border-bottom: 1px solid var(--line); opacity: 0; }
html.hd-solid .sv-hd, body[data-page="stay"] .sv-hd, body[data-page="cancel"] .sv-hd { color: var(--ink); }
html.hd-solid .sv-hd::before, body[data-page="stay"] .sv-hd::before, body[data-page="cancel"] .sv-hd::before { opacity: 1; }
html.hd-hide .sv-hd { transform: translateY(-100%); }
/* The hero's top scrim keeps the white header readable on a bright sky (measured, ≥ 4.5:1 at the 95th percentile). */
.sv-hd__nav { display: flex; gap: 28px; }
.sv-hd__name { font-family: var(--title); font-weight: 300; font-size: 21px; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; text-align: center; }
.sv-hd__r { justify-self: end; display: flex; align-items: center; gap: 20px; }
.sv-hd__menu { display: none; padding: 8px 0; background: none; border: 0; }
.sv-menu { inset: var(--hd) 0 auto; width: 100%; margin: 0; padding: 8px var(--gut) 20px; border: 0; border-bottom: 1px solid var(--line); background: var(--ground); color: var(--ink); }
.sv-menu a { display: block; padding: 14px 0; border-top: 1px solid var(--line); }
.sv-menu a:first-child { border-top: 0; }
@media (hover: hover) { .sv-hd__nav a:hover, .sv-hd__book:hover { text-decoration: underline; text-underline-offset: 5px; } }
@media (max-width: 860px) {
  .sv-hd { grid-template-columns: auto 1fr auto; }
  .sv-hd__nav { display: none; }
  .sv-hd__menu { display: block; }
  .sv-hd__name { font-size: 17px; letter-spacing: 0.1em; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) { .sv-hd__name { font-size: 15px; letter-spacing: 0.06em; } }

/* ---------- Hero: the photo is the first screen. The eyebrow, the headline and the date bar sit at its foot, centred. The photo is baked
   (make-site.py) and the text is static, so nothing arrives late and nothing moves. ---------- */
/* The height is set once: 100svh, or on a touch device the px arrive.js writes before the first paint and changes only on a new width
   (rotation). Real Safari (3 Oct recording) resized an svh box as its toolbar moved, and object-fit then rescaled the photo: it zoomed. */
.sv-hero { position: relative; height: 100vh; height: var(--hero-h, 100svh); min-height: 620px; color: var(--on-photo); overflow: hidden; background: #3a3833; }
.sv-hero__ph, .sv-hero__ph img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.sv-scrim { position: absolute; inset: 0; pointer-events: none; }
/* Dark only where the text sits: the text block draws its own gradient (::before), so it is as tall as the eyebrow, the headline and the bar
   for any headline length, and fades out 140 px above them. The rest of the photo keeps its evening light, under a thin band for the
   header. Measured by herocheck on the real photos (≥ 4.5:1); finalcheck measures the light above the text (3 Oct). */
.sv-hero .sv-scrim { background: linear-gradient(to bottom, rgba(12,11,9,.74) 0, rgba(12,11,9,.52) 72px, rgba(12,11,9,0) 150px); }
.sv-hero__c::before { content: ""; position: absolute; z-index: -1; inset: -140px 0 -44px; pointer-events: none;
  background: linear-gradient(to top, rgba(12,11,9,.80) 0, rgba(12,11,9,.66) calc(100% - 140px), rgba(12,11,9,.28) calc(100% - 70px), rgba(12,11,9,0) 100%); }
.sv-hero__c { position: absolute; isolation: isolate; inset: auto 0 44px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.sv-hero__eb { margin-bottom: 18px; }
.sv-hero__h { max-width: 920px; margin-bottom: 34px; }
.sv-hero__h.is-long { font-size: 34px; }   /* a long tagline (the client's words): a size smaller, so it stays a headline */

/* The date bar: Arrival · Departure · Guests · Check availability. Cream, flat, square. */
.sv-dbar { position: relative; display: grid; grid-template-columns: 1fr 1fr 150px 230px; width: min(920px, 100%); background: var(--ground); color: var(--ink); text-align: left; }
.sv-dbar__f { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 66px; padding: 13px 22px; background: none; border: 0; border-right: 1px solid var(--line); text-align: left; }
.sv-dbar__f > span { font: 500 10px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sv-dbar__f b { font: 400 16px/1.3 var(--sans); }
.sv-dbar__g .sv-step { height: 21px; }
.sv-dbar__g .sv-step__b { height: 21px; }
.sv-dbar__g .sv-step__v { font: 400 16px/1.3 var(--sans); }
@media (hover: hover) { button.sv-dbar__f:hover { background: var(--card); } }
.sv-dbar__go { min-height: 66px; }
.sv-ans { min-height: 1.4em; margin-top: 16px; }
html.site .sv-hero :focus-visible { outline-color: var(--on-photo); }
html.site .sv-hero .sv-dbar :focus-visible { outline-color: var(--ink); outline-offset: -4px; }

/* The − n + stepper. */
.sv-step { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sv-step__b { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; background: none; border: 0; color: var(--muted); font: 300 18px/1 var(--sans); }
.sv-step__b:disabled { opacity: 0.35; cursor: default; }
.sv-step__v { min-width: 24px; text-align: center; font: 400 16px/1.3 var(--sans); background: none; border: 0; padding: 0; appearance: textfield; -moz-appearance: textfield; }
.sv-step__v::-webkit-inner-spin-button, .sv-step__v::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* The calendar popover: it opens upward from the bar (the bar sits at the photo's foot). Two columns: the month; guests, the live answer, the search. */
.sv-dbar__pop { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 20; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; padding: 24px; background: var(--ground); color: var(--ink); border: 1px solid var(--line); text-align: left; transform-origin: 50% 100%; }
.sv-dbar__pop .sv-cal { grid-row: span 3; }
.sv-dbar__gr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-block: 1px solid var(--line); }
.sv-dbar__live { font-size: 14px; line-height: 1.5; }
.sv-dbar__live .sv-lab { color: var(--muted); }
.sv-dbar__done { width: 100%; align-self: end; }

@media (max-width: 760px) {
  .sv-hero { min-height: 0; }
  .sv-hero .sv-scrim { background: linear-gradient(to bottom, rgba(12,11,9,.74) 0, rgba(12,11,9,.52) 60px, rgba(12,11,9,0) 130px); }
  .sv-hero__c { bottom: 16px; }
  .sv-hero__c::before { inset: -110px 0 -16px; background: linear-gradient(to top, rgba(12,11,9,.82) 0, rgba(12,11,9,.70) calc(100% - 110px), rgba(12,11,9,.28) calc(100% - 50px), rgba(12,11,9,0) 100%); }
  .sv-hero__eb { margin-bottom: 12px; font-size: 10px; }
  .sv-hero__h { margin-bottom: 22px; }
  .sv-hero__h.is-long { font-size: min(22px, 5.4vw); letter-spacing: 0.04em; }
  .sv-dbar { grid-template-columns: 1fr 1fr; }
  .sv-dbar__f { min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .sv-dbar__f:nth-child(2) { border-right: 0; }
  .sv-dbar__g { border-bottom: 0; }
  .sv-dbar__go { min-height: 58px; padding: 0 14px; font-size: 11px; letter-spacing: 0.1em; }
  .sv-ans { margin-top: 12px; font-size: 10px; }
}

/* ---------- Section heads: an eyebrow, a title, a line. Centred, generous. ---------- */
.sv-sh { text-align: center; padding: 150px 16px 64px; }
.sv-sh .sv-lab { color: var(--muted); margin-bottom: 18px; }
.sv-sh > p:last-child:not(.sv-lab) { margin-top: 18px; color: var(--muted); }
@media (max-width: 760px) { .sv-sh { padding: 72px 16px 32px; } }

/* ---------- The houses: an edge-to-edge grid, the name and the answer for your dates on each photo. An odd last house goes wide. ---------- */
.sv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sv-tile { position: relative; aspect-ratio: 1 / 1; overflow: hidden; color: var(--on-photo); background: #3a3833; }
.sv-tile--wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.sv-grid--1 .sv-tile { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.sv-tile__ph { position: absolute; inset: 0; overflow: hidden; }
.sv-tile__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-tile .sv-scrim { background: linear-gradient(to top, rgba(12,11,9,.80) 0, rgba(12,11,9,.66) 28%, rgba(12,11,9,.25) 44%, rgba(12,11,9,0) 58%); }
/* The photo is the tile's link (the whole tile opens the house); the text sits over it and lets clicks through, except its own links. */
.sv-tile__c { position: absolute; inset: auto 0 52px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; pointer-events: none; }
.sv-tile__c a, .sv-tile__c button { pointer-events: auto; }
.sv-tile__ans { display: block; margin-top: 14px; }
.sv-tile__acts { display: flex; gap: 24px; margin-top: 14px; }
.sv-tile__acts .sv-link { color: var(--on-photo); }
html.site .sv-tile :focus-visible { outline-color: var(--on-photo); }
@media (max-width: 760px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv-tile, .sv-tile--wide, .sv-grid--1 .sv-tile { aspect-ratio: 4 / 5; grid-column: auto; }
  .sv-tile__c { bottom: 36px; }
}

/* ---------- The place: a list of every highlight; the picture beside it swaps to that house's own photo (hover, tap, focus). ---------- */
.sv-place { display: grid; grid-template-columns: 4fr 7fr; gap: var(--gut); max-width: 1512px; margin: 0 auto; padding: 150px var(--gut) 0; }
.sv-place__l { display: flex; flex-direction: column; min-width: 0; }
.sv-place__l > .sv-lab { color: var(--muted); margin-bottom: 16px; }
.sv-place__l > p:not(.sv-lab) { max-width: 30ch; margin-bottom: 56px; }
.sv-place__ph { position: relative; flex: 1; min-height: 320px; width: 78%; overflow: hidden; background: var(--ground-2); }
.sv-place__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The list sits at the foot of its row: with many highlights the photo grows to its last rule, with few the list comes down to the photo's foot. */
.sv-place ul { list-style: none; border-top: 1px solid var(--line); align-self: end; min-width: 0; }
.sv-place li { border-bottom: 1px solid var(--line); }
.sv-place__b { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; width: 100%; padding: 16px 0 14px; background: none; border: 0; text-align: left; color: var(--ink); }
/* An inactive row's title is dimmed to about 4:1, never Kube's 2.4:1 (3 Oct); its label keeps full muted contrast. */
.sv-place__b .sv-d { color: #77736B; }
.sv-place__b[aria-pressed="true"] .sv-d { color: var(--ink); }
.sv-place li:has(> [aria-pressed="true"]) { border-bottom-color: var(--ink); }
.sv-place__b .sv-lab { flex: none; color: var(--muted); }
html.site .sv-place__b:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .sv-place__b:hover .sv-d { color: var(--ink); } }
@media (max-width: 760px) {
  .sv-place { grid-template-columns: 1fr; gap: 0; padding-top: 72px; }
  .sv-place__l > p:not(.sv-lab) { margin-bottom: 28px; }
  /* A phone: the picture stays pinned at the top while the list scrolls under it, so a tap on any row shows its swap. Its top is a cream band
     as tall as the header, so the header can come back over it and cover nothing. */
  .sv-place__l { display: contents; }
  .sv-place__ph { position: sticky; top: 0; z-index: 2; flex: none; width: 100%; aspect-ratio: 16 / 10; min-height: 0; box-sizing: content-box; border-top: var(--hd) solid var(--ground); border-bottom: 20px solid var(--ground); margin-top: calc(var(--hd) * -1); }
  /* (3 Oct, Qasim's iPhone) the band under it too: the rows go under cream, never cut at the photo's edge. */
  .sv-place__b { min-height: 48px; padding: 13px 0 11px; align-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .sv-place__b .sv-lab { font-size: 10px; }
}

/* ---------- How to book: three steps between rules, one action under them. ---------- */
.sv-how { max-width: 1320px; margin: 0 auto; padding: 0 var(--gut); }
.sv-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.sv-steps li { display: flex; flex-direction: column; padding: 40px 36px 44px; border-right: 1px solid var(--line); }
.sv-steps li:first-child { padding-left: 0; }
.sv-steps li:last-child { padding-right: 0; border-right: 0; }
.sv-steps .sv-lab { color: var(--muted); margin-bottom: 28px; }
.sv-steps h3 { font: 400 20px/1.3 var(--sans); margin-bottom: 12px; }
.sv-steps p { color: var(--muted); }
.sv-how__go { text-align: center; padding-top: 56px; }
@media (max-width: 760px) {
  .sv-steps { grid-template-columns: 1fr; border-bottom: 0; }
  .sv-steps li, .sv-steps li:first-child, .sv-steps li:last-child { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .sv-steps .sv-lab { margin-bottom: 14px; }
  .sv-how__go .sv-btn { width: 100%; }
}

/* ---------- FAQ: native details rows. The answer appears at once and fades in (200 ms); + turns to −. ---------- */
.sv-faq { margin-top: 150px; padding-bottom: 150px; background: var(--ground-2); }
.sv-faq .sv-sh { padding-top: 140px; }
.sv-faq__l { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); border-bottom: 0; }
.sv-faq details { border-top: 1px solid var(--line); }
.sv-faq details:last-child { border-bottom: 1px solid var(--line); }
.sv-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; list-style: none; cursor: pointer; font: 500 13px/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; }
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after { content: "+"; flex: none; font: 300 20px/1 var(--sans); }
.sv-faq details[open] summary::after { content: "−"; }
.sv-faq details p { max-width: 62ch; padding: 0 0 26px; white-space: pre-line; }
html.site .sv-faq summary:focus-visible { outline-offset: 2px; }
@media (max-width: 760px) { .sv-faq { margin-top: 72px; padding-bottom: 64px; } .sv-faq .sv-sh { padding-top: 64px; } .sv-faq summary { font-size: 12px; padding: 18px 0; } }

/* ---------- The closing call: one full photo, one line, one button. ---------- */
.sv-close { position: relative; height: 88vh; min-height: 560px; color: var(--on-photo); overflow: hidden; background: #3a3833; }
.sv-close__ph { position: absolute; inset: 0; overflow: hidden; }
.sv-close__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-close .sv-scrim { background: linear-gradient(to top, rgba(12,11,9,.82) 0, rgba(12,11,9,.68) 40%, rgba(12,11,9,.25) 62%, rgba(12,11,9,0) 80%); }
.sv-close__c { position: absolute; inset: auto 0 72px; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 16px; }
.sv-close__c .sv-lab { margin-bottom: 20px; }
.sv-close__c h2 { margin-bottom: 22px; }
.sv-close__c p:not(.sv-lab) { max-width: 44ch; margin-bottom: 36px; }
html.site .sv-close :focus-visible { outline-color: var(--on-photo); }
@media (max-width: 760px) {
  .sv-close { height: 80vh; height: calc(var(--hero-h, 100svh) * 0.8); min-height: 0; }
  .sv-close .sv-scrim { background: linear-gradient(to top, rgba(12,11,9,.84) 0, rgba(12,11,9,.70) 330px, rgba(12,11,9,.3) 400px, rgba(12,11,9,0) 480px); }
  .sv-close__c { bottom: 40px; }
}

/* ---------- Footer: on the cream. The name, its line, the houses, booking links, the contact (real clients only), the credit. ---------- */
.sv-ft { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--gut); max-width: 1512px; margin: 0 auto; padding: 96px var(--gut) 36px; }
.sv-ft h4 { font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sv-ft ul { list-style: none; display: grid; gap: 6px; }
.sv-ft__name { font-size: 28px; margin-bottom: 12px; }
.sv-ft__p { max-width: 34ch; color: var(--muted); }
.sv-ft__p + .sv-ft__p { margin-top: 8px; }
.sv-ft__b { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.sv-ft__b a { text-decoration: underline; text-underline-offset: 3px; }
.sv-ft__b .sv-sig { display: inline-flex; flex: none; align-items: center; gap: 10px; align-self: flex-end; text-decoration: none; color: var(--muted); }
.sv-sig img { display: block; height: 16px; width: auto; }
@media (hover: hover) { .sv-ft__b .sv-sig:hover span { text-decoration: underline; text-underline-offset: 3px; } }
@media (hover: hover) { .sv-ft ul a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 760px) { .sv-ft { grid-template-columns: 1fr 1fr; padding-top: 56px; } .sv-ft > div:first-child { grid-column: 1 / -1; } .sv-ft__b { flex-direction: column; margin-top: 32px; } .sv-ft__b .sv-sig { align-self: flex-start; min-height: 44px; } }

/* ================= The house page ================= */
/* The first screen: the photo edge to edge on the left (baked by make-site.py), the name, the owner's words and the booking card on the right. */
.sv-st { display: grid; grid-template-columns: minmax(0, 1fr) 520px; min-height: calc(100vh - var(--hd)); margin-top: var(--hd); }
.sv-st__ph { position: relative; margin: 0; overflow: hidden; background: var(--ground-2); }
.sv-st__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-st__open { position: absolute; inset: 0; z-index: 1; width: 100%; padding: 0; background: none; border: 0; cursor: zoom-in; }
.sv-st__all { position: absolute; left: 20px; bottom: 20px; z-index: 2; padding: 10px 14px; background: var(--ground); color: var(--ink); border: 0; }
html.site .sv-st__open:focus-visible { outline: 2px solid var(--on-photo); outline-offset: -6px; }
.sv-st__p { display: flex; flex-direction: column; min-width: 0; padding: 44px 48px 40px; }
.sv-st__p > .sv-lab { color: var(--muted); margin-bottom: 14px; }
.sv-st__name { font-size: 56px; margin-bottom: 10px; overflow-wrap: anywhere; }
.sv-st__place { color: var(--muted); }
.sv-st__desc { max-width: 30ch; margin-top: 28px; font-size: 20px; line-height: 1.5; }
.sv-book { margin-top: 32px; min-width: 0; outline: none; }
.sv-st__p .sv-book { margin-top: auto; padding-top: 32px; }

/* Below: the highlights and Good to know, then the photos, then the other houses. */
.sv-st2 { display: grid; grid-template-columns: minmax(0, 1fr) 520px; padding: 120px 0; }
.sv-st2__l { max-width: 820px; padding: 0 48px 0 var(--gut); }
.sv-st2__l > .sv-lab, .sv-st2__r > .sv-lab { color: var(--muted); margin-bottom: 18px; }
.sv-st2 ul { list-style: none; border-top: 1px solid var(--line); }
.sv-st2 li { padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.sv-st2__r { padding: 0 48px; }
.sv-st2__r dl { border-top: 1px solid var(--line); }
.sv-st2__r dl div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sv-st2__r dt { color: var(--muted); }
.sv-st2__r dd { white-space: pre-line; }
.sv-st2--one { grid-template-columns: minmax(0, 1fr); }
.sv-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.sv-pgrid button { display: block; aspect-ratio: 3 / 2; width: 100%; padding: 0; overflow: hidden; background: var(--ground-2); border: 0; cursor: zoom-in; }
.sv-pgrid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-pgrid button:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 3 / 1; }
html.site .sv-pgrid button:focus-visible { outline: 2px solid var(--on-photo); outline-offset: -6px; }
.sv-others .sv-sh { padding-top: 140px; }
.sv-stay-none { max-width: 44rem; margin: 0 auto; padding: calc(var(--hd) + 96px) var(--gut) 96px; display: grid; gap: 18px; justify-items: start; }
.sv-bookbar { display: none; }
@media (max-width: 1100px) { .sv-st, .sv-st2 { grid-template-columns: minmax(0, 1fr) 440px; } .sv-st__p { padding: 36px 32px; } .sv-st2__r { padding: 0 32px; } .sv-st__name { font-size: 44px; } }
@media (max-width: 860px) {
  .sv-st { grid-template-columns: 1fr; min-height: 0; }
  .sv-st__ph { aspect-ratio: 4 / 5; }
  .sv-st__p { padding: 28px var(--gut) 0; }
  .sv-st__name { font-size: 36px; }
  .sv-st__desc { font-size: 18px; }
  .sv-st__p .sv-book { display: none; }
  .sv-st2 { grid-template-columns: 1fr; padding: 72px 0 64px; }
  .sv-st2__l { padding: 0 var(--gut) 48px; }
  .sv-st2__r { padding: 0 var(--gut); }
  .sv-st2__r dl div { grid-template-columns: 110px 1fr; }
  .sv-pgrid { grid-template-columns: 1fr; }
  .sv-pgrid button:last-child:nth-child(odd) { aspect-ratio: 3 / 2; }
  /* The book bar: pinned at the foot, ink, the one dark thing on the page. The footer leaves room for it (v3.1). */
  .sv-bookbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)) 16px; background: var(--ink); color: var(--ground); }
  .sv-bookbar small { display: block; font-size: 12px; color: #D9D4CA; }
  .sv-bookbar b { font: 500 15px/1.3 var(--sans); }
  .sv-bookbar .sv-btn { flex: none; min-height: 46px; padding: 0 22px; }
  html.site .sv-bookbar :focus-visible { outline-color: var(--ground); }
  body[data-page="stay"] .sv-ft, body.has-bar .sv-ft { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  /* The home page's bar leaves while the hero (its own date bar) or the closing call (its own button) is in view. */
  .sv-bookbar[data-home].is-off { transform: translateY(100%); visibility: hidden; }
  .sv-bookbar[data-home] { transition: transform 300ms var(--ease), visibility 0s; }
  .sv-bookbar[data-home].is-off { transition: transform 240ms var(--ease-in), visibility 0s 240ms; }
}

/* ================= The booking card: on the house page beside the photo, and in the sheet (a phone, the home page's tiles) ================= */
.sv-card { background: var(--card); border: 1px solid var(--line); }
.sv-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.sv-card__top b { font: 400 22px/1 var(--sans); }
.sv-card__top .sv-lab { color: var(--muted); }
.sv-form { display: grid; }
.sv-form > div { min-width: 0; }
.sv-card__s1, .sv-card__s2 { display: grid; }
.sv-card__s1 > *, .sv-card__s2 > * { padding-inline: 22px; }
/* Arrival · Departure: one button; it opens the calendar under it (it is open while the nights aren't chosen). */
.sv-dates { display: grid; grid-template-columns: 1fr 1fr; width: 100%; padding: 0 !important; background: none; border: 0; border-bottom: 1px solid var(--line); text-align: left; }
.sv-dates__c { display: grid; gap: 4px; padding: 14px 22px; min-width: 0; }
.sv-dates__c + .sv-dates__c { border-left: 1px solid var(--line); }
.sv-dates__c span { font: 500 10px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sv-dates__c b { font: 400 20px/1.25 var(--sans); white-space: nowrap; }
html.site .sv-dates:focus-visible { outline-offset: -3px; }
.sv-card .sv-cal { padding-block: 16px; border-bottom: 1px solid var(--line); }
.sv-card__ok { padding-block: 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.sv-card__ok.is-err { color: var(--err); }
.sv-card__guests { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.sv-card__guests > span:first-child, .sv-field > span:first-child { font: 500 10px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sv-card__guests .sv-err { flex-basis: 100%; }
.sv-sum { padding-block: 14px 6px; }
.sv-sum > .sv-lab { display: block; color: var(--muted); padding-bottom: 8px; }
.sv-sum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.sv-sum dd { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.sv-sum .sv-sum__t { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 500; font-size: 16px; }
.sv-sum .sv-sum__dep { color: var(--muted); }
.sv-sum small { display: block; padding: 4px 0 10px; color: var(--muted); font-size: 13px; }
.sv-card__go, .sv-send { width: 100%; padding: 0 !important; }
.sv-card__go .sv-btn, .sv-send { width: 100%; justify-content: space-between; padding: 0 22px !important; }
.sv-card__note { padding-block: 12px 16px; color: var(--muted); font-size: 13px; }
.sv-card__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 16px 4px; }
.sv-card__h .sv-lab { color: var(--muted); }
/* The summary: the house, the dates and guests, the total, in one block between rules. Then "Your details" heads the fields. */
.sv-card__recap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: baseline; padding-block: 12px 16px !important; border-bottom: 1px solid var(--line); }
.sv-card__recap b { font: 400 18px/1.3 var(--sans); }
.sv-card__recap span { grid-column: 1; color: var(--muted); font-size: 14px; }
.sv-card__recap .sv-money { grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right; font: 400 18px/1.3 var(--sans); }
.sv-card__recap .sv-money small { display: block; color: var(--muted); font-size: 12px; }
.sv-card__s2 > .sv-card__dh { padding-block: 16px 0; color: var(--muted); }
.sv-card__s2 > .sv-field, .sv-card__s2 > .sv-pair { padding-block: 10px 4px; }
.sv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* The demo's email is locked to the invite's address: a row of its own, so the whole address shows (it was cut at half width). */
.sv-pair:has(input[readonly]) { grid-template-columns: 1fr; }
.sv-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.sv-field input, .sv-field textarea { width: 100%; min-width: 0; height: 46px; padding: 10px 12px; background: var(--ground); color: var(--ink); border: 1px solid var(--line); border-radius: 0; -webkit-appearance: none; appearance: none; font-weight: 400; }
.sv-field textarea { height: auto; min-height: 96px; resize: vertical; }
.sv-field input[readonly] { background: transparent; color: var(--muted); }
.sv-field [aria-invalid="true"] { border-color: var(--err); }
.sv-field__hint { font-size: 12px; color: var(--muted); }
.sv-err { color: var(--err); font-size: 13px; font-weight: 400; }
.sv-ts { min-height: 0; padding-block: 14px 6px; }
.sv-ts iframe { display: block; }
.sv-ts:empty { padding: 0; }
.sv-status { padding-block: 6px; font-size: 14px; }
.sv-status:empty { padding-block: 0; }
.sv-status.is-err { color: var(--err); }
.sv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 420px) { .sv-pair { grid-template-columns: 1fr; } }

/* The month calendar: struck-out nights are booked; the chosen range on ground-2, its ends in ink. */
.sv-cal { display: grid; gap: 10px; }
.sv-cal__nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sv-cal__nav button { min-width: 40px; min-height: 40px; background: none; border: 1px solid var(--line); border-radius: 0; }
.sv-cal__nav button:disabled { opacity: 0.35; cursor: default; }
.sv-cal__m { font: 500 12px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; }
.sv-cal__g { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.sv-cal__w { padding-bottom: 4px; text-align: center; font: 500 10px/1.4 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sv-cal__d { height: 38px; display: grid; place-items: center; padding: 0; background: none; border: 1px solid transparent; border-radius: 0; font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.sv-cal__d:disabled { opacity: 0.35; cursor: default; }
.sv-cal__d.is-busy { opacity: 1; color: var(--muted); text-decoration: line-through; background: repeating-linear-gradient(135deg, rgba(23,22,18,.14) 0 1px, transparent 1px 5px); }
.sv-cal__d.is-in { background: var(--ground-2); }
.sv-cal__d.is-end { background: var(--ink); color: var(--ground); }
@media (hover: hover) { .sv-cal__d:hover:not(:disabled) { border-color: var(--ink); } }
html.site .sv-cal__d:focus-visible { outline-offset: 1px; }
.sv-cal__key { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); }
.sv-cal__key::before { content: ""; flex: none; width: 22px; height: 12px; background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); border: 1px solid var(--line); }
.sv-cal__hint { font-size: 13px; color: var(--muted); }

/* Sent. */
.sv-done { display: grid; gap: 14px; justify-items: start; padding: 22px; }
.sv-done .sv-lab { color: var(--muted); }
.sv-done h3 { font-family: var(--title); font-weight: 300; font-size: 30px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; }
html.site .sv-done h3:focus-visible { outline: none; }
.sv-done__note { color: var(--muted); font-size: 13px; }

/* The sheet: a dialog on the cream. A computer: from the right. A phone: from the foot, nearly full, drag to dismiss (site.js). */
.sv-sheet { position: fixed; inset: 0 0 0 auto; width: min(480px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; overflow: auto; border: 0; border-left: 1px solid var(--line); background: var(--ground); color: var(--ink); }
.sv-sheet::backdrop { background: rgba(23, 22, 18, 0.4); }
.sv-sheet__in { display: grid; gap: 18px; padding: 20px 24px calc(28px + env(safe-area-inset-bottom)); }
.sv-sheet__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.sv-sheet__top .sv-lab { color: var(--muted); margin-top: 8px; }
.sv-sheet__t { font-family: var(--title); font-weight: 300; font-size: 30px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1.1; }
.sv-sheet__x { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; background: none; border: 1px solid var(--line); border-radius: 0; }
.sv-sheet__x svg { width: 20px; height: 20px; }
.sv-sheet__b { display: grid; gap: 16px; }
.sv-sheet .sv-dbar__gr { border-color: var(--line); }
.sv-sheet .sv-dbar__done { width: 100%; }
.sv-grab { display: none; }
@media (max-width: 860px) {
  .sv-sheet { inset: auto 0 0 0; width: 100vw; height: calc(100dvh - 10px); max-height: calc(100dvh - 10px); border-left: 0; border-top: 1px solid var(--line); overscroll-behavior: contain; scroll-padding-top: 132px; }
  .sv-sheet__in { padding-top: 0; padding-inline: 16px; }
  .sv-sheet__top { position: sticky; top: 0; z-index: 3; margin-inline: -16px; padding: 24px 16px 14px; background: var(--ground); touch-action: none; cursor: grab; }
  .sv-grab { display: block; position: absolute; left: 50%; top: 10px; width: 40px; height: 4px; margin-left: -20px; background: var(--line); }
}

/* The full-screen viewer: each photo whole, on the ink. */
.sv-view { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--ink); color: var(--ground); }
.sv-view::backdrop { background: var(--ink); }
.sv-view__in { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; padding: 64px clamp(12px, 6vw, 96px) 20px; touch-action: pan-y pinch-zoom; }
.sv-view__f { display: grid; place-items: center; min-height: 0; margin: 0; }
.sv-view__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.sv-view__n { padding-top: 14px; text-align: center; }
.sv-view__b { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; color: var(--ground); background: rgba(23,22,18,.7); border: 1px solid rgba(250,247,241,.3); border-radius: 0; }
.sv-view__b svg { width: 22px; height: 22px; }
html.site .sv-view :focus-visible { outline-color: var(--ground); }
.sv-view__x { top: 8px; right: 8px; }
.sv-view__prev { left: clamp(8px, 1.5vw, 24px); top: 50%; translate: 0 -50%; }
.sv-view__next { right: clamp(8px, 1.5vw, 24px); top: 50%; translate: 0 -50%; }
@media (max-width: 860px) { .sv-view__in { padding-inline: 0; } .sv-view__prev, .sv-view__next { top: auto; bottom: 8px; translate: none; } }

/* Closed, not set up, nothing to book. */
.sv-closed { display: grid; gap: 18px; justify-items: center; max-width: 44rem; margin: 0 auto; padding: 96px var(--gut); text-align: center; }

/* ================= The cancel page ================= */
.sv-cancel { min-height: 62vh; max-width: 44rem; margin: 0 auto; padding: calc(var(--hd) + 64px) var(--gut) 120px; outline: none; }
.sv-cancel__in { display: grid; gap: 24px; }
.sv-cancel__k { color: var(--muted); }
.sv-cancel__t { outline: none; }
html.site .sv-cancel__t:focus-visible { outline: none; }
.sv-cancel__p { font-size: 17px; max-width: 36rem; }
.sv-cancel__p a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sv-ruled { list-style: none; border-bottom: 1px solid var(--line); }
.sv-ruled li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0 11px; border-top: 1px solid var(--line); }
.sv-ruled span { font: 500 11px/1.4 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sv-ruled b { font-weight: 400; text-align: right; }
.sv-heads { display: grid; gap: 10px; padding: 22px; background: var(--ground-2); }
.sv-heads h2 { color: var(--muted); }
.sv-heads__terms { font-size: 18px; white-space: pre-line; }
.sv-why { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.sv-why legend { margin-bottom: 10px; padding: 0; color: var(--muted); }
.sv-why__g { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-why__c { position: relative; }
.sv-why__c input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.sv-why__c span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); }
.sv-why__c input:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.sv-why__c input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.sv-cancel__act { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }

/* ================= The demo layer: only a demo client's site (config demo: true) ================= */
.sv-demo-gate { display: grid; gap: 12px; justify-items: start; padding-block: 16px 8px; }
.sv-demo-gate h3 { font: 400 18px/1.3 var(--sans); }
.sv-demo-gate p { max-width: 40ch; color: var(--muted); font-size: 14px; }
.sv-mb { padding: 120px var(--gut); border-top: 1px solid var(--line); }
.sv-mb__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 80px; align-items: center; max-width: 1512px; margin: 0 auto; }
.sv-mb__l { display: grid; gap: 22px; justify-items: start; }
.sv-mb__l > .sv-lab { color: var(--muted); }
.sv-mb__p { max-width: 54ch; }
.sv-mb__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.sv-mb__acts > .sv-lab { color: var(--muted); }
.sv-mb__fig { margin: 0; }
.sv-mb__shot { display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); background: var(--card); }
.sv-mb__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.sv-mb__fig figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--muted); }
.sv-mb__fig figcaption span:last-child { flex: none; white-space: nowrap; }
@media (hover: hover) { .sv-mb__fig a:hover figcaption span:last-child { text-decoration: underline; } }
@media (max-width: 860px) { .sv-mb { padding-block: 64px 8px; } .sv-mb__in { grid-template-columns: minmax(0, 1fr); } }
/* The Guest | Owner switch: demo chrome, deliberately plain system type, in the header (a bar the layout already has; v3.1). */
.demo-pill { display: flex; padding: 2px; background: #fff; border: 1px solid rgb(0 0 0 / 0.18); border-radius: 999px; font: 500 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; }
.demo-pill a { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; color: #222; border-radius: 999px; }
.demo-pill a[aria-current="page"] { background: #222; color: #fff; }
html.site .demo-pill a:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.demo-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: #d23a1e; }
@media (max-width: 860px) { html.is-demo .sv-hd__book { display: none; } .demo-pill a { padding: 0 10px; } }
@media (max-width: 380px) { .demo-pill a { padding: 0 8px; min-height: 28px; } }

.sv-wait { min-height: 320px; }

/* ================= Motion (the comps' spec, 3 Oct). Transform and opacity only; once per element; nothing loops or plays on its own;
   nothing holds content back. The date bar and the hero photo never move. With reduced motion: no movement, no parallax, no scale;
   reveals become a 200 ms fade; the crossfades stay (they explain a change). Sheets, the popover and the viewer: site.js (WAAPI). ================= */
@media (prefers-reduced-motion: no-preference) {
  /* The first screen: the eyebrow and the headline rise 12 px once (arrive.js sets html.arrive before the first paint, then removes it). */
  html.arrive .sv-hero__eb, html.arrive .sv-hero__h { animation: sv-arrive 600ms var(--ease) both; }
  html.arrive .sv-hero__h { animation-delay: 60ms; }
  @keyframes sv-arrive { from { opacity: 0; transform: translateY(12px); } }
  /* Scroll reveals: 700 ms, rise 18 px, once, 60 ms apart. */
  html.rv [data-reveal]:not(.is-seen) { opacity: 0; transform: translateY(18px); }
  html.rv [data-reveal] { transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--rv, 0) * 60ms); }
  /* The house page's text panel fades in (200 ms, opacity; the photo never fades). A FAQ answer fades in as its row opens. */
  html.is-live .sv-st__p { animation: sv-fade 200ms ease-out both; }
  .sv-faq details[open] p { animation: sv-fade 200ms ease-out both; }
  /* The header: the colour 200 ms, the slide 300 ms. */
  .sv-hd { transition: transform 300ms var(--ease), color 200ms ease; }
  .sv-hd::before { transition: opacity 200ms ease; }
  /* Tile hover (a laptop): the photo settles to 1.03 over 900 ms. */
  @media (hover: hover) and (pointer: fine) { .sv-tile__ph img { transition: transform 900ms var(--ease); } .sv-tile:hover .sv-tile__ph img { transform: scale(1.03); } }
  /* Press feedback. */
  .sv-btn, .sv-step__b, .sv-cal__d { transition: transform 140ms var(--ease), background-color 160ms ease; }
  .sv-btn:not([disabled]):active, .sv-step__b:active:not(:disabled) { transform: scale(0.97); }
  /* Parallax on the tiles and the closing photo: tied to the scroll (a scroll timeline, no script), ±4% of the height, the photo held at
     1.08 so no edge shows. A browser without scroll timelines keeps the photo still. */
  @supports (animation-timeline: view()) {
    .sv-px { position: absolute; inset: -4% 0; animation: sv-px linear both; animation-timeline: view(); }
    @keyframes sv-px { from { transform: translateY(-4%); } to { transform: translateY(4%); } }
  }
}
.sv-px { position: absolute; inset: 0; }
/* The answer for your dates and the hover list's picture: crossfades (kept with reduced motion; they explain a change). The house page's
   text panel fades in, 200 ms; the photo never fades. */
.sv-fade { animation: sv-fade 150ms ease-out both; }
.sv-place__ph img.is-next { opacity: 0; transition: opacity 300ms ease; }
.sv-place__ph img.is-next.is-in { opacity: 1; }
@keyframes sv-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html.rv [data-reveal]:not(.is-seen) { opacity: 0; }
  html.rv [data-reveal] { transition: opacity 200ms linear; }
}