/* The wedding site — its own room, not a denz rubrique.

   Provence rather than pool-blue: linen, the ochre of the château's façade,
   olive and terracotta. Deliberately calmer than the app — this page will one
   day be the first thing guests see, and it should feel like an invitation,
   not a dashboard. */

:root {
  --linen:      #faf6ef;
  --linen-2:    #f3ecdf;
  --ink:        #4a3730;
  --ink-dim:    #8a7368;
  --ochre:      #e0a56e;   /* the façade */
  --ochre-deep: #b57a45;
  --terracotta: #c96f4a;
  --olive:      #7d8b6a;
  --olive-deep: #5d6b4d;
  --gold:       #c9a227;
  --line:       #e5d9c5;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* Only Jost 300-500 is loaded: a default bold (700) would be faked by the
   browser. 500 is the site's emphasis weight everywhere else too. */
strong, b { font-weight: 500; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0 0 .4em; }
h2 { font-size: clamp(28px, 4vw, 40px); }
.muted { color: var(--ink-dim); }

/* ------------------------------------------------------------ preview */
.preview-ribbon {
  position: fixed; top: 18px; right: -34px; z-index: 50;
  transform: rotate(45deg);
  background: var(--terracotta); color: #fff;
  font: 500 11px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase;
  padding: 8px 40px;
  box-shadow: 0 2px 10px rgba(74, 55, 48, .25);
  pointer-events: none;
}

/* ------------------------------------------------------------ hero */
.hero {
  min-height: 92svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 0 20px 64px;
  background:
    radial-gradient(60% 40% at 50% 0%, #fdf0e4 0%, transparent 70%),
    radial-gradient(50% 35% at 85% 90%, #f0ede2 0%, transparent 60%),
    var(--linen);
  position: relative;
}
/* A full-bleed banner: cropped wide (cover) rather than shown as a square, with
   the edges faded into the linen so the painting's ragged paper border never
   shows and it melts into the page. */
.hero-art {
  display: block; width: calc(100% + 40px); margin: 0 -20px 36px;
  height: clamp(300px, 58svh, 680px); object-fit: cover; object-position: 50% 45%;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent),
                      linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, #000 70%, transparent),
              linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
/* On a wide screen the same wide crop shows only a thin slice of a 4:3 painting,
   so give it more height (still cover, so it fills the sides). */
@media (min-width: 900px) {
  .hero-art { height: clamp(520px, 86svh, 980px); object-position: 50% 40%; }
}
.eyebrow {
  font: 300 13px/1 var(--sans); letter-spacing: .45em; text-transform: uppercase;
  color: var(--ochre-deep); margin: 0 0 18px;
}
.hero h1 {
  font-size: clamp(44px, 9vw, 96px);
  font-weight: 500; letter-spacing: .01em; margin: 0;
}
.hero .amp {
  font-style: italic; color: var(--ochre-deep);
  font-size: .75em; padding: 0 .08em;
}
.hero .where {
  margin: 26px 0 6px;
  font-family: var(--serif); font-size: clamp(17px, 2.4vw, 22px);
  font-style: italic; color: var(--ink-dim);
}
.hero .when {
  font: 300 13px/1 var(--sans); letter-spacing: .35em; text-transform: uppercase;
  color: var(--ink-dim); margin: 10px 0 0;
}
.down {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: var(--ink-dim); text-decoration: none; font-size: 22px;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateX(-50%) translateY(8px); } }

/* ------------------------------------------------------------ venue */
.venue {
  max-width: 1060px; margin: 0 auto; padding: 72px 20px 40px;
}
.venue h2 { text-align: center; }
/* Same hairline the .block sections have; the venue is wider than a block, so
   the line is drawn at block width to match. */
.venue::before {
  content: ""; display: block; max-width: 680px; margin: -72px auto 72px;
  border-top: 1px solid var(--line);
}
.venue-sub {
  text-align: center; margin: -4px 0 14px; font-weight: 400;
  font-style: italic; color: var(--ink-dim);
}
.lede {
  max-width: 620px; margin: 0 auto 36px; text-align: center;
  color: var(--ink-dim); font-size: 18px;
}

.stage-wrap {
  position: relative;
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(74, 55, 48, .35);
  background: linear-gradient(#e8ecdf, #f2ead9);
}
#stage { width: 100%; height: min(66svh, 620px); touch-action: none; }
#stage canvas { display: block; }

.stage-ui {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  padding: 0 12px 12px; pointer-events: none;
}
.viewpoints { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; pointer-events: auto; }
.viewpoints button {
  font: 500 12px/1 var(--sans); letter-spacing: .08em;
  color: var(--ink); background: rgba(250, 246, 239, .92);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
  transition: transform .15s ease, background .15s, color .15s;
}
.viewpoints button:hover { transform: translateY(-2px); }
.viewpoints button.on { background: var(--olive); border-color: var(--olive-deep); color: #fff; }
.hint {
  font: 400 12px/1 var(--sans); letter-spacing: .12em;   /* light 11px over a moving picture was hard to read on a phone */
  color: rgba(74, 55, 48, .55);
}

/* floating labels projected from the 3D scene */
#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.label3d {
  position: absolute; transform: translate(-50%, -130%);
  font: 500 11px/1 var(--sans); letter-spacing: .1em;
  color: var(--ink);
  background: rgba(250, 246, 239, .9);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 11px; white-space: nowrap;
  transition: opacity .25s;
}
.label3d::after {
  content: ''; position: absolute; left: 50%; top: 100%;
  width: 1px; height: 9px; background: var(--ink-dim);
}

/* ------------------------------------------------------------ rooms */
.rooms-panel {
  max-width: 1060px; margin: 26px auto 0;
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 26px 28px;
}
.rooms-panel h3 { font-size: 24px; }
#rooms-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.room-chip {
  font: 500 13px/1.3 var(--sans);
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--linen); color: var(--ink);
  padding: 10px 14px; cursor: pointer;
  transition: transform .15s ease, border-color .15s, background .15s;
}
.room-chip:hover { transform: translateY(-2px); border-color: var(--ochre-deep); }
.room-chip.on { background: var(--ochre); border-color: var(--ochre-deep); }
.room-chip small { display: block; color: var(--ink-dim); font-weight: 300; margin-top: 2px; }

/* ------------------------------------------------------------ blocks */
.block {
  max-width: 720px; margin: 0 auto; padding: 64px 20px;
  text-align: center; border-top: 1px solid var(--line);
}
.couple-art { max-width: 720px; margin: 0 auto; padding: 48px 20px 0; }
.couple-art img { display: block; width: 100%; height: auto; }
.couple-art + .block { border-top: 0; }
.placeholder {
  color: var(--ink-dim); font-family: var(--serif);
  font-style: italic; font-size: 19px;
}

.travel-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px; margin-top: 26px; text-align: left;
}
.travel-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 20px 22px;
}
.travel-card h3 { font-family: var(--sans); font-weight: 500; font-size: 15px; }
.travel-card p { margin: 0; color: var(--ink-dim); font-size: 15px; }

.rsvp { padding-bottom: 90px; }

.foot {
  border-top: 1px solid var(--line);
  padding: 34px 20px; text-align: center;
  color: var(--ink-dim);
  font: 300 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
}

@media (max-width: 640px) {
  .rooms-panel { margin-inline: 12px; }
  .venue { padding-top: 56px; }
}

/* serif italic like the other notes: Jost has no italic loaded, so a sans
   italic would be a faked slant */
.tiny-note { font-family: var(--serif); font-size: 15px; margin-top: 14px; font-style: italic; }

/* ------------------------------------------------------------ interior mode */
.enter-btn {
  position: absolute; top: 14px; left: 14px;
  font: 500 12px/1 var(--sans); letter-spacing: .08em;
  color: #fff; background: var(--ochre-deep);
  border: 0; border-radius: 999px;
  padding: 10px 18px; cursor: pointer;
  box-shadow: 0 3px 12px rgba(74, 55, 48, .3);
  transition: transform .15s ease;
  pointer-events: auto;
}
.enter-btn:hover { transform: translateY(-2px); }
.enter-btn:disabled { opacity: .8; cursor: progress; transform: none; }

/* veil over the stage while estate.glb is on its way */
.stage-loading {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center;
  font: italic 400 17px/1.3 var(--serif); color: var(--ink-dim);
  background: radial-gradient(ellipse at 50% 55%, rgba(250, 246, 239, .6), rgba(232, 220, 198, .95));
  transition: opacity .6s ease;
  animation: stage-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
}
.stage-loading.done { opacity: 0; animation: none; }
@keyframes stage-breathe { 50% { color: var(--ochre-deep); } }
@media (prefers-reduced-motion: reduce) { .stage-loading { animation: none; } }

.floor-picker {
  position: absolute; top: 14px; right: 14px;
  display: none; flex-direction: column; gap: 6px;
  pointer-events: auto;
}
.stage-wrap.inside .floor-picker { display: flex; }
.floor-picker button {
  font: 500 12px/1 var(--sans);
  color: var(--ink); background: rgba(250, 246, 239, .92);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 9px 14px; cursor: pointer; text-align: left;
  transition: transform .15s ease, background .15s, color .15s;
}
.floor-picker button:hover { transform: translateX(-2px); }
.floor-picker button.on { background: var(--ochre-deep); border-color: var(--ochre-deep); color: #fff; }
.floor-picker small { display: block; font-weight: 300; opacity: .75; margin-top: 2px; }

.stage-wrap.inside .viewpoints { display: none; }

/* ------------------------------------------------------------ language */
.lang-switch {
  position: fixed; top: 16px; left: 16px; z-index: 40;
  display: flex; gap: 4px;
  background: rgba(250, 246, 239, .9);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px;
}
.lang-switch button {
  font: 500 11px/1 var(--sans); letter-spacing: .1em;
  color: var(--ink-dim); background: none; border: 0;
  border-radius: 999px; padding: 7px 10px; cursor: pointer;
}
.lang-switch button.on { background: var(--ochre); color: var(--ink); }

/* ------------------------------------------------------------ zen mode */
.zen-btn {
  position: absolute; bottom: 14px; right: 14px; z-index: 5;
  width: 40px; height: 40px;
  font-size: 17px; line-height: 1;
  background: rgba(250, 246, 239, .92);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: transform .15s ease, opacity .3s;
  pointer-events: auto;
}
.zen-btn:hover { transform: translateY(-2px); }
.stage-wrap.zen .zen-btn { opacity: .45; }
.stage-wrap.zen .zen-btn:hover { opacity: 1; }
.stage-wrap.zen .stage-ui,
.stage-wrap.zen .enter-btn,
.stage-wrap.zen .floor-picker,
.stage-wrap.zen #labels { display: none; }

/* On a phone the viewpoint pills were wrapping into two rows over the
   painting; one sliding row keeps the canvas clear. */
@media (max-width: 640px) {
  .viewpoints {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    max-width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .viewpoints::-webkit-scrollbar { display: none; }
  .viewpoints button { flex: 0 0 auto; padding: 8px 13px; }
  .hint { display: none; }
}

/* building tabs above the floor buttons in interior mode */
.floor-picker .bldg-tabs { display: flex; gap: 4px; }
.floor-picker .bldg-tabs button { flex: 1; padding: 7px 8px; text-align: center; font-size: 11px; }

/* ------------------------------------------------------------ gallery */
#gallery { max-width: 1060px; }
.gallery { columns: 3 240px; column-gap: 12px; margin-top: 26px; }
.gallery .ph {
  display: block; width: 100%; margin: 0 0 12px; padding: 0; border: 0;
  background: none; cursor: zoom-in; break-inside: avoid;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 28px -18px rgba(74, 55, 48, .5);
}
.gallery .ph img { display: block; width: 100%; height: auto; transition: transform .4s; }
.gallery .ph:hover img { transform: scale(1.03); }
/* the 240px minimum column width collapses to one column on a phone */
@media (max-width: 640px) {
  .gallery { columns: 2; column-gap: 8px; }
  .gallery .ph { margin-bottom: 8px; border-radius: 10px; }
}
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(40, 28, 22, .86); }
.lightbox figure { margin: 0; text-align: center; }
.lightbox img { max-width: 94vw; max-height: 84vh; border-radius: 8px; }
.lightbox figcaption { color: #f3ecdf; font: italic 18px/1.4 var(--serif); margin-top: 10px; }
.lb-close {
  position: fixed; top: 14px; right: 18px; z-index: 2; width: 40px; height: 40px;
  border-radius: 50%; border: 0; background: rgba(250, 246, 239, .9);
  font-size: 26px; line-height: 1; cursor: pointer; color: var(--ink);
}

/* ------------------------------------------------------------ rsvp form */
.rsvp-form { margin-top: 26px; text-align: left; display: grid; gap: 16px; }
.rsvp-form h3 { font-family: var(--serif); font-size: 24px; margin: 8px 0 0; text-align: center; }
.rsvp-field { display: grid; gap: 6px; font-size: 14px; color: var(--ink-dim); }
.rsvp-field input, .rsvp-field textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; width: 100%;
}
.rsvp-field input:focus, .rsvp-field textarea:focus { outline: 2px solid var(--ochre); border-color: var(--ochre-deep); }
.rsvp-row { display: flex; gap: 22px; flex-wrap: wrap; }
.rsvp-row label, .rsvp-day label { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.rsvp-days { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 14px 18px; }
.rsvp-days .muted { margin: 0 0 6px; font-size: 14px; }
.rsvp-day { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 7px 0; }
.rsvp-day b { font-weight: 500; flex: 1 0 100%; }
.rsvp-form input[type=radio] { accent-color: var(--terracotta); width: 18px; height: 18px; }
.rsvp-add, .rsvp-send {
  font: 500 15px var(--sans); border-radius: 999px; padding: 12px 24px; cursor: pointer;
  border: 1px solid var(--ochre-deep); background: transparent; color: var(--ink); justify-self: center;
}
.rsvp-send { background: var(--terracotta); border-color: var(--terracotta); color: #fff; padding: 14px 36px; }
.rsvp-send:disabled { opacity: .6; }
.rsvp-hp { position: absolute; left: -9999px; height: 0; opacity: 0; }
.rsvp-error { color: #a33; text-align: center; margin: 0; }
.rsvp-thanks { margin-top: 26px; padding: 26px 20px; text-align: center; border: 2px solid #5a8a5e; background: rgba(90, 138, 94, .12); border-radius: 14px; }
.rsvp-check { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #5a8a5e; color: #fff; font-size: 30px; }
.rsvp-thanks-main { font-family: var(--serif); font-size: 24px; margin: 14px 0 6px; }
.rsvp-thanks-hint { margin: 0; opacity: .75; font-size: 15px; }

.schedule-more { margin-top: 28px; font-size: 16px; line-height: 1.65; }
.schedule-more h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 28px 0 6px; }
.schedule-more p { margin: 0 0 12px; color: var(--ink-dim); }
.schedule-more strong { color: var(--ink); font-weight: 500; }
.schedule-more .sign { margin-top: 28px; font-family: var(--serif); font-style: italic; font-size: 19px; }

/* Always-visible shortcut to the RSVP form, sat between the language switch
   (left) and the preview ribbon (right corner). */
.rsvp-nav {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 40;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--terracotta); text-decoration: none;
  border-radius: 999px; padding: 11px 18px;
  box-shadow: 0 2px 8px rgba(74, 55, 48, .2);
}

/* The weekend as a poster: one framed card, a row per day with the date as a big numeral
   (same serif / ochre / spaced-caps vocabulary as the hero). The numerals are CSS so the
   three translations need no extra markup. */
.schedule-more .days {
  position: relative; margin: 32px 0 8px; padding: 14px 26px;
  background:
    radial-gradient(70% 40% at 50% 0%, #fdf0e4 0%, transparent 75%),
    var(--linen-2);
  border: 1px solid var(--ochre);
  outline: 1px solid var(--ochre); outline-offset: -8px;
  box-shadow: 0 6px 24px rgba(74, 55, 48, .08);
}
.schedule-more .days::before, .schedule-more .days::after {
  content: "✦"; position: absolute; left: 50%; transform: translateX(-50%);
  color: var(--ochre-deep); background: var(--linen); padding: 0 10px; font-size: 14px; line-height: 1;
}
.schedule-more .days::before { top: -8px; }
.schedule-more .days::after { bottom: -8px; }
.schedule-more .day {
  display: grid; grid-template-columns: 112px 1fr; column-gap: 22px; align-items: start;
  padding: 26px 0; border-top: 1px solid var(--line);
}
.schedule-more .day:first-child { border-top: 0; }
.schedule-more .day h3 {
  grid-column: 1; grid-row: 1 / span 6; margin: 0; text-align: center;
  font: 300 12px/1 var(--sans); letter-spacing: .35em; text-transform: uppercase;
  color: var(--ink-dim); padding-left: .35em;
}
.schedule-more .day h3::before {
  display: block; margin-bottom: 10px;
  font: 500 62px/.9 var(--serif); letter-spacing: 0; color: var(--ochre-deep);
}
.schedule-more .day:nth-child(1) h3::before { content: "18"; }
.schedule-more .day:nth-child(2) h3::before { content: "19"; }
.schedule-more .day:nth-child(3) h3::before { content: "20"; }
.schedule-more .day p { grid-column: 2; text-align: left; margin: 0 0 14px; font-family: var(--serif); font-size: 19px; line-height: 1.45; }
.schedule-more .day p:last-child { margin-bottom: 0; }
.schedule-more .day strong {
  display: block; margin-bottom: 3px;
  font: 500 12px/1.4 var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--terracotta);
}
@media (max-width: 520px) {
  .schedule-more .days { padding: 8px 16px; }
  .schedule-more .day { grid-template-columns: 74px 1fr; column-gap: 14px; }
  .schedule-more .day h3 { font-size: 10px; letter-spacing: .22em; padding-left: .22em; }
  .schedule-more .day h3::before { font-size: 46px; }
  .schedule-more .day p { font-size: 17px; }
}
/* Desktop: the card is a comfortable poster width rather than a narrow strip. */
@media (min-width: 901px) {
  #schedule { max-width: 860px; }
}
.schedule-more .ps { margin-top: 14px; font-size: 15px; color: var(--ink-dim); }

/* Château guests and the rest see different copy (see invite.js). */
body:not([data-stay="chateau"]) [data-for="chateau"],
body[data-stay="chateau"] [data-for="other"] { display: none; }

/* ------------------------------------------------------------ help (bank details) */
.paybox {
  max-width: 520px; margin: 18px auto 0; padding: 18px 22px;
  border: 1px solid var(--ochre); border-radius: 10px; background: var(--linen-2);
}
.paybox .paypane { margin: 0; overflow-wrap: anywhere; }
.paybox .paypane[hidden] { display: none; }
.paybox .nowrap { white-space: nowrap; }
.paytabs { display: flex; justify-content: center; gap: 10px; margin: 0 0 16px; }
.paytabs button {
  font: 500 15px/1 var(--sans); letter-spacing: .08em; padding: 11px 22px; cursor: pointer;
  color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 999px;
}
.paytabs button.on { background: var(--olive); border-color: var(--olive-deep); color: #fff; }

.stay-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin-top: 26px; text-align: left;
}
.stay-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; display: flex; flex-direction: column;
}
/* Photo slot: drop assets/stay/<name>.jpg in and it shows; until then a soft wash. */
.stay-img {
  aspect-ratio: 3 / 2; background: #efe3d6 center / cover no-repeat;
}
.stay-img-ibis { background-image: url(/static/wedding/assets/stay/ibis.jpg), linear-gradient(135deg, #f1e4d3, #e8d2c0); }
.stay-img-tourelle { background-image: url(/static/wedding/assets/stay/tourelle.jpg), linear-gradient(135deg, #f1e4d3, #e8d2c0); }
.stay-img-lacoste { background-image: url(/static/wedding/assets/stay/lacoste.jpg), linear-gradient(135deg, #f0dcd2, #e3c3b3); }
.stay-img-jourdan { background-image: url(/static/wedding/assets/stay/jourdan.jpg), linear-gradient(135deg, #eadfcf, #d9c7a8); }
.stay-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.stay-tier { margin: 0 0 4px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.stay-body h3 { margin: 0 0 8px; }
.stay-body p:not(.stay-tier) { margin: 0 0 16px; color: var(--ink-dim); font-size: 15px; }
.stay-book {
  margin-top: auto; align-self: flex-start; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); color: inherit; text-decoration: none; font-size: 14px;
}
.stay-book:hover { background: #faf6ef; }
.stay-body p.stay-dist { margin: -6px 0 16px; font-size: 13px; color: var(--ink); }
/* On a phone the four cards stacked made a very long scroll, so they become a
   swipeable carousel: one card at a time, snapping, the next one peeking in
   from the edge so it is obvious there is more. The row runs to the screen
   edges (out of the block's 20px padding) and dots below say where you are. */
.stay-dots { display: none; }
@media (max-width: 640px) {
  .stay-grid {
    display: flex; gap: 12px; overflow-x: auto;
    margin: 26px -20px 0; padding: 2px 20px 6px;
    scroll-snap-type: x mandatory; scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .stay-grid::-webkit-scrollbar { display: none; }
  .stay-card { flex: 0 0 82%; scroll-snap-align: start; }
  .stay-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
  .stay-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--line); transition: background .2s, transform .2s;
  }
  .stay-dots span.on { background: var(--olive); transform: scale(1.15); }
}
.stay-more { margin: 22px 0 0; text-align: center; color: var(--ink-dim); }
.stay-more a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }