/* Celestial Retreat · Noir & Gold */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-300italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/static/fonts/cormorant-garamond-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --ink: #0b0b0b;
  --ink-2: #141311;
  --gold: #c9a96e;
  --gold-dim: #5e4f35;
  --ivory: #f3eee3;
  --mute: #cfc6b4;
  /* derived tones, from the approved mockups */
  --line: #2a2620;
  --ash: #a59d8c;   /* the counter's Y */
  --smoke: #3a352c; /* the counter's slash */
  --parchment: #e6e0d3;

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* type scale */
  --t-display: clamp(2.4rem, 6vw, 4.6rem);
  --t-numeral: clamp(4.5rem, 12vw, 7.5rem);
  --t-title: clamp(2rem, 4vw, 3rem);
  --t-price: clamp(1.9rem, 3.4vw, 2.6rem);
  --t-body: 0.875rem;
  --t-label: .75rem;

  /* space */
  --gutter: clamp(16px, 4vw, 72px); /* 16px on phones */
  --section: clamp(6rem, 14vw, 11rem);
  --strip-h: 2.5rem;

  /* motion: slow, calm, mechanical at the end */
  --ease: cubic-bezier(.16, .84, .24, 1);
}

/* Phones: body copy at 15px, sections a little closer together. Fine print is raised in
   "phones: type and touch" near the end. Desktop keeps the scale above. */
@media (max-width: 599px) {
  :root {
    --t-body: .9375rem;
    --section: 5rem;
  }
}

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

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
h1, h2, p, dl, dd, figure { margin: 0; }
[id] { scroll-margin-top: calc(var(--strip-h) + 1rem); }
[hidden] { display: none !important; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 30;
  padding: .75rem 1.25rem;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { top: 1rem; }

/* ---- type ------------------------------------------------------------- */

.eb {
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  /* tracking adds space after the last letter; balance it so centred labels sit true */
  margin-right: -.14em;
}

.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: .04em;
  text-wrap: balance;
}

.title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--ivory);
  text-wrap: balance;
}
.title--italic { font-style: italic; }
/* a number in a heading set as the counter sets it: upright figures, in gold (owner, 2 Nov 2026) */
.num {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum";
  color: var(--gold);
}

.body {
  max-width: 34em;
  color: var(--mute);
  line-height: 1.9;
  text-wrap: pretty;
}

/* ---- buttons ---------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 1.05rem 2.25rem;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font: 400 var(--t-label)/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  text-wrap: balance;
  cursor: pointer;
  transition: background-color .6s var(--ease), color .6s var(--ease);
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn--solid { background: var(--gold); color: var(--ink); }
.btn--solid:hover { background: var(--ivory); border-color: var(--ivory); }
.btn[disabled] { opacity: .5; cursor: progress; }

.claimed {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ivory);
}

/* ---- pinned strip ----------------------------------------------------- */

.strip {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .25rem .9rem;
  min-height: var(--strip-h);
  padding: .55rem var(--gutter);
  background: var(--gold);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .8s var(--ease), visibility 0s .8s;
}
.strip.is-shown {
  transform: none;
  visibility: visible;
  transition: transform .8s var(--ease), visibility 0s;
}
.strip b {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
/* each half keeps its words together; the strip wraps between the halves */
.strip-msg, .strip-cta {
  display: inline-flex;
  align-items: baseline;
  gap: .9rem;
  white-space: nowrap;
}
.strip-cta::before { content: "·"; margin-right: .9rem; }

/* Phones: the full wording, set as two centred lines (message, then action).
   The line break takes the place of the middle dot. */
@media (max-width: 599px) {
  :root { --strip-h: 3.875rem; }
  .strip { flex-direction: column; gap: .3rem; }
  .strip-msg { gap: .7rem; }
  .strip-cta::before { content: none; }
}

/* Back to the top: a small round button in the strip's right-hand corner, shown from the
   second screen on (html.is-scrolled, site.js). Dark on the gold strip, and on the night
   where a page has no strip. */
.to-top {
  position: fixed;
  top: calc((var(--strip-h) - 2rem) / 2);
  right: clamp(.75rem, 2vw, 1.5rem);
  z-index: 21;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-.5rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease), visibility 0s .5s;
}
.to-top::before { content: ""; position: absolute; inset: -.6rem; } /* a 44px target */
.is-scrolled .to-top {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .4s var(--ease), visibility 0s;
}
.to-top:hover { color: var(--ivory); border-color: var(--gold); }
.to-top:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .to-top, .is-scrolled .to-top { transform: none; }
}

/* ---- hero (layout A) -------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
  padding: 7rem var(--gutter) clamp(2.5rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
/* Clip the settle zoom without making the hero a scroll container: with hidden, a browser
   scroll to something in the hero (scrollIntoView, find in page) scrolled the hero itself
   mid-zoom, and the page came to rest on the wrong slide. hidden stays for Safari before 16. */
@supports (overflow: clip) {
  .hero { overflow: clip; }
}
.hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 45%;
}
.hero::after {
  /* A light veil: the render is the hero shot, so it shows nearly whole (owner, 2 Nov 2026:
     it was darkened to near black behind the words). Night gathers only at the foot, under the
     counter and the button, and a touch at the top for the nav; the words carry their own
     shadow (.hero-copy). */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 34% 30% at 50% 50%, rgba(11, 11, 11, .45) 0%, rgba(11, 11, 11, .22) 55%, rgba(11, 11, 11, 0) 100%),
    linear-gradient(to bottom, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, .25) 12%, rgba(11, 11, 11, 0) 26%),
    linear-gradient(to top, rgba(11, 11, 11, .88) 0%, rgba(11, 11, 11, .55) 22%, rgba(11, 11, 11, .28) 45%, rgba(11, 11, 11, .08) 70%, rgba(11, 11, 11, 0) 100%);
}
/* A phone shows about a quarter of each render's width: keep the subject in that slice.
   The mirrored pod: its near corner and roof line, so it reads as a box, not a wall of glass.
   The pod's back: the door, centred. */
@media (max-width: 599px) {
  .hero-image--front { object-position: 38% 45%; }
  .hero-image--back { object-position: 55% 45%; }
  .hero-image--bedroom { object-position: 44% 50%; }
  /* the words fill the width of a phone: so does the shade behind them */
  .hero::after {
    background:
      radial-gradient(ellipse 75% 32% at 50% 44%, rgba(11, 11, 11, .5) 0%, rgba(11, 11, 11, .25) 55%, rgba(11, 11, 11, 0) 100%),
      linear-gradient(to bottom, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, .25) 12%, rgba(11, 11, 11, 0) 26%),
      linear-gradient(to top, rgba(11, 11, 11, .88) 0%, rgba(11, 11, 11, .55) 22%, rgba(11, 11, 11, .28) 45%, rgba(11, 11, 11, .08) 70%, rgba(11, 11, 11, 0) 100%);
  }
}
/* A bright render (the glass bedroom on the Founder Stay page): a deeper veil over all of it,
   deepest at the top, where the gold nav and wordmark would sink into the ceiling's slats. */
.hero--dim::after,
.hero--dim.hero::after {
  background:
    radial-gradient(ellipse 46% 40% at 50% 50%, rgba(11, 11, 11, .55) 0%, rgba(11, 11, 11, .3) 60%, rgba(11, 11, 11, 0) 100%),
    linear-gradient(to bottom, rgba(11, 11, 11, .85) 0%, rgba(11, 11, 11, .55) 16%, rgba(11, 11, 11, .2) 34%, rgba(11, 11, 11, 0) 50%),
    linear-gradient(to top, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .6) 24%, rgba(11, 11, 11, .25) 50%, rgba(11, 11, 11, 0) 70%),
    linear-gradient(rgba(11, 11, 11, .5), rgba(11, 11, 11, .5));
}
/* the words fill a phone's width: so does the shade behind them, as on the homepage */
@media (max-width: 599px) {
  .hero--dim::after,
  .hero--dim.hero::after {
    background:
      radial-gradient(ellipse 85% 42% at 50% 46%, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, .32) 60%, rgba(11, 11, 11, 0) 100%),
      linear-gradient(to bottom, rgba(11, 11, 11, .85) 0%, rgba(11, 11, 11, .55) 16%, rgba(11, 11, 11, .2) 34%, rgba(11, 11, 11, 0) 50%),
      linear-gradient(to top, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .6) 24%, rgba(11, 11, 11, .25) 50%, rgba(11, 11, 11, 0) 70%),
      linear-gradient(rgba(11, 11, 11, .5), rgba(11, 11, 11, .5));
  }
}
.hero.hero--dim:not(.hero--plain) .hero-copy { text-shadow: 0 1px 3px rgba(11, 11, 11, .85), 0 2px 24px rgba(11, 11, 11, .9); }
.hero--dim .hero-copy > .eb { color: #e3c992; } /* the lighter gold, as over the homepage's render */
@media (prefers-reduced-motion: no-preference) {
  .hero-image { animation: settle 6s var(--ease) both; }
}
@keyframes settle {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: none; }
}

.nav {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 1.75rem var(--gutter);
  font-size: var(--t-label);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav a { position: relative; text-decoration: none; transition: color .6s var(--ease); }
.nav a::before { content: ""; position: absolute; inset: -.85rem -.75rem; } /* 44px tap area, same look */
.nav .nav-mark::before { inset: -.2rem -.5rem; }
.nav-link { color: var(--ivory); justify-self: start; }
.nav-link--end { justify-self: end; }
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--gold); }
.nav-mark {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 400;
  letter-spacing: .14em;
  margin-right: -.14em;
  color: var(--gold);
}
@media (max-width: 639px) {
  .nav {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "mark mark" "start end";
    row-gap: 1.1rem;
    padding-top: 1.5rem;
    font-size: .75rem;
    letter-spacing: .14em;
  }
  .nav-mark { grid-area: mark; justify-self: center; }
  .nav-link--start { grid-area: start; }
  .nav-link--end { grid-area: end; }
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* the words read over the lighter veil by a soft shadow of their own */
.hero:not(.hero--plain) .hero-copy { text-shadow: 0 1px 3px rgba(11, 11, 11, .6), 0 2px 22px rgba(11, 11, 11, .75); }
/* over the render the counter's dark slash would vanish: a pale one instead */
.hero:not(.hero--plain) .counter-slash { color: rgba(230, 224, 211, .55); }
/* "Opening July 2027" under the called-out "Pre-sale opens 1 January 2027" while that day is ahead. */
.eb--aside {
  margin-top: .7rem;
  font-size: var(--t-label);
  letter-spacing: .2em;
  margin-right: -.2em;
  color: var(--ivory);
}
.hero-copy .display { margin: 1rem 0 clamp(1.5rem, 4vh, 2.5rem); }
/* The nearer date on the opening screen ("Pre-sale opens 1 January 2027", then "Opening July
   2027"): larger than a label, between two short gold rules, and lifted off the render so it
   reads at a glance (owner, 2 Nov 2026). */
.eb--callout {
  display: inline-flex;
  align-items: center;
  gap: .9em;
  font-size: clamp(.8125rem, 1.15vw, 1.0625rem);
  letter-spacing: .24em;
  margin-right: 0;
  color: #e3c992; /* a lighter gold than --gold, to stand off the render */
  /* a deep dark halo, tight at the letters and wide behind the line, so the words pop
     off the bright sky (owner, 2 Nov 2026) */
  text-shadow:
    0 0 3px rgba(11, 11, 11, .95),
    0 0 8px rgba(11, 11, 11, .9),
    0 0 18px rgba(11, 11, 11, .85),
    0 0 36px rgba(11, 11, 11, .75);
  padding: .9em 1.6em;
  margin-block: -.9em;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(11, 11, 11, .65) 0%, rgba(11, 11, 11, .36) 55%, rgba(11, 11, 11, 0) 100%);
}
.eb--callout::before,
.eb--callout::after { content: ""; width: 2.25em; height: 1px; background: currentColor; opacity: .7; }
/* the tracking after the last letter widens the right-hand gap; match it on the left */
.eb--callout::before { margin-right: .24em; }
/* on a phone the pre-sale line only fits on one line without the rules and the wide tracking */
@media (max-width: 599px) {
  .eb--callout { letter-spacing: .12em; margin-right: -.12em; text-wrap: balance; }
  .eb--callout::before,
  .eb--callout::after { display: none; }
}
/* The opening screen's one line of plain words under the headline. */
.hero-sub { max-width: 30em; margin: calc(-1 * clamp(.5rem, 2vh, 1.25rem)) 0 clamp(1.5rem, 4vh, 2.5rem); text-align: center; text-wrap: balance; }
.hero-copy .counter { margin-bottom: clamp(1.75rem, 4.5vh, 2.75rem); }
.hero-copy .claimed { margin-bottom: 1.5rem; }

/* A phone on its side: the opening screen is only ~390px tall. Set everything closer and a
   size smaller so the headline, the counter and the button all fit on the one screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero { padding-top: 4.75rem; padding-bottom: 1.25rem; }
  .nav { padding-top: 1.1rem; padding-bottom: 1.1rem; }
  .hero-copy .display { margin: .35rem 0 .6rem; font-size: 2.1rem; }
  .hero-copy .counter { --t-numeral: 3.4rem; margin-bottom: 1rem; }
  .hero-copy .counter-label { margin-top: .2rem; }
  .hero-copy .counter-ticks { margin-top: .5rem; }
  .hero-copy .counter-ticks i { height: 14px; }
  .hero-copy .counter-ticks--rows i { height: 6px; }
  .hero-copy .btn { padding-block: .85rem; }
  .hero-copy > .body { margin-bottom: 1rem; }
  .hero-sub { display: none; }
}

/* ---- counter ---------------------------------------------------------- */

.counter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: .9rem;
  font-family: var(--serif);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}
.counter-x,
.counter-y {
  font-size: var(--t-numeral);
  line-height: 1;
}
.counter-x { color: var(--gold); }
.counter-y { color: var(--ash); }
/* the slash stands as tall as the numbers (owner, 2 Nov 2026: at 57% it was too small) */
.counter-slash {
  font-size: var(--t-numeral);
  line-height: 1;
  color: var(--smoke);
}
.counter-label {
  flex-basis: 100%;
  margin-top: .65rem;
  margin-right: -.14em;
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.counter-ticks {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-top: 1rem;
}
/* One row per 40 places at most (founders.Counts.tick_rows): 60 is two rows of 30. */
.tick-row {
  display: flex;
  justify-content: center;
  column-gap: inherit;
}
.counter-ticks i {
  width: 5px;
  height: 18px;
  background: var(--gold);
  opacity: 0;
  transition: opacity .25s;
}
.counter-ticks i.on { opacity: 1; }
.counter-ticks i.gone { opacity: .18; }
/* Past 40, shorter ticks keep the rows a compact block: two rows of 30 stand about as tall as
   one row of 40, and five rows of 40 (200) still fit beside the button. */
.counter-ticks--rows { row-gap: 4px; }
.counter-ticks--rows i { height: 9px; }
/* The Galaxy Fold's 280 px cover screen: 40 ticks at 5 px with 3 px gaps (317 px) ran off both
   edges. Narrower ticks and gaps fit them (238 px). */
@media (max-width: 339px) {
  .counter-ticks { gap: 2px; }
  .counter-ticks i { width: 4px; }
}

/* odometer (counter.js): one column per digit, rolled with translateY */
.odo {
  display: inline-flex;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  /* soften the window's edges, like a date wheel turning behind a bezel */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.odo-col {
  display: flex;
  flex-direction: column;
  transition: transform 2.2s var(--ease);
}
.odo-col span { display: block; height: 1em; }

/* Until counter.js has wound the dials back to 00, keep the numbers out of sight.
   The delayed reveal is a safety net in case the script never arrives. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .counter[data-counter]:not(.is-mounted) :is(.counter-x, .counter-y, .counter-ticks) {
    opacity: 0;
    animation: reveal 0s 3s forwards;
  }
}
@keyframes reveal { to { opacity: 1; } }

/* ---- the pod (layout B, split) ---------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  min-height: min(88vh, 860px);
  background: var(--ink-2);
}
.split-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: var(--section) clamp(2rem, 6vw, 6.5rem);
}
.split-image { position: relative; min-height: 22rem; }
.split-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 30% 50%;
}
/* Wider screens: a photo beside its words fades into the page on the side facing them, as the
   wet area's render does (owner, 2 Nov 2026); not the gift certificate, a card on the page. */
@media (min-width: 900px) {
  .split:not(.split--paper) .split-image img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18%);
    mask-image: linear-gradient(to right, transparent 0, #000 18%);
  }
  .split--flip:not(.split--paper) .split-image img {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 18%);
    mask-image: linear-gradient(to left, transparent 0, #000 18%);
  }
}
@media (max-width: 899px) {
  .split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .split-image { order: -1; min-height: 0; aspect-ratio: 4 / 3.4; }
  .split-text { padding: 4rem var(--gutter) 5rem; gap: 1.25rem; }
  /* the photo's foot fades into the page above the words, as the wet area's does (owner,
     2 Nov 2026); not the gift certificate, a card lying on the page */
  .split:not(.split--paper) .split-image img {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%);
    mask-image: linear-gradient(to top, transparent 0, #000 16%);
  }
}
/* Phones: a square of the bedroom, from the glass on the left to the far side of the bed.
   It keeps the bed and the walls of glass whole and leaves the renderer's mark off the edge. */
@media (max-width: 599px) {
  .split-image { aspect-ratio: 1 / 1; }
  .split-image img { object-position: 12% 50%; }
  .split-text { padding: 3rem var(--gutter) 4rem; }
}

/* ---- solis (layout C, overlay) ---------------------------------------- */

.overlay {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(92vh, 900px);
  overflow: hidden;
  isolation: isolate;
}
.overlay-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
}
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(11, 11, 11, .94) 0%, rgba(11, 11, 11, .6) 40%, rgba(11, 11, 11, 0) 68%);
}
.overlay-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: min(44%, 34rem);
  padding: var(--section) 0 var(--section) clamp(2rem, 6vw, 6.5rem);
}
.overlay-text .body { color: var(--parchment); }
/* Phones and narrow tablets: text over a fade would hide the benches and the window, so the
   whole render comes first, uncropped, and the words sit beneath it on the night. Only the
   floor at the render's foot fades into the page. */
@media (max-width: 899px) {
  .overlay { flex-direction: column; align-items: stretch; min-height: 0; }
  .overlay-image {
    position: static;
    height: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 16%);
    mask-image: linear-gradient(to top, transparent 0, #000 16%);
  }
  .overlay::after { content: none; }
  .overlay-text { width: 100%; padding: 2.25rem var(--gutter) 4.5rem; gap: 1.25rem; }
}

/* ---- the land --------------------------------------------------------- */

.land {
  padding: var(--section) var(--gutter);
  text-align: center;
}
.land-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(3rem, 7vw, 5.5rem);
}
.land-text .body { max-width: 31em; text-wrap: balance; }
.land-image { max-width: 1200px; margin: 0 auto; }
.land-image img {
  width: 100%;
  /* quiet the aerial's greens so it sits in the night palette */
  filter: saturate(.62) brightness(.8) contrast(1.06);
}

/* ---- the founder stay ------------------------------------------------- */

.offer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: var(--section) var(--gutter);
  border-top: 1px solid var(--line);
  text-align: center;
}
/* "The Founder Stay" is what is on sale first: its label a step up from the others (owner, 2 Nov 2026) */
.eb--feature { font-size: clamp(.9375rem, 1.25vw, 1.125rem); letter-spacing: .2em; margin-right: -.2em; }
.offer-lead { max-width: 28em; }
.offer-terms {
  display: flex;
  justify-content: center;
  gap: clamp(2.5rem, 7vw, 6rem);
  margin: 1.5rem 0 1rem;
}
.offer-terms div { display: flex; flex-direction: column-reverse; align-items: center; gap: .5rem; }
.offer-terms dd {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-price);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: lining-nums;
}
.offer-terms s {
  margin-right: .35rem;
  font-size: .6em;
  color: var(--mute);
  text-decoration-thickness: 1px;
}
.offer-terms dt {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.offer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
}
.offer-actions .claimed { flex-basis: 100%; }
.fine {
  max-width: 40em;
  margin-top: 1.5rem;
  font-size: .75rem;
  line-height: 1.9;
  color: var(--mute);
}
.fine--balanced { text-wrap: balance; }
/* one line where it fits (owner, 2 Nov 2026); phones wrap it, balanced */
@media (min-width: 760px) {
  .fine--one-line { max-width: none; white-space: nowrap; }
}
@media (max-width: 599px) {
  .offer-terms { flex-direction: column; gap: 2rem; }
  .offer-actions { flex-direction: column; align-self: stretch; }
  .offer-actions .btn { width: 100%; }
}

/* ---- waitlist (and quiet centred panels elsewhere) -------------------- */

.waitlist,
.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: var(--section) var(--gutter);
  background: var(--ink-2);
  text-align: center;
}
.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: min(100%, 26rem);
  margin-top: 1.5rem;
  text-align: left;
}
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.optional { letter-spacing: .1em; text-transform: none; }
.field input {
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--gold-dim);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font: 400 1.35rem/1.3 var(--serif);
  transition: border-color .6s var(--ease);
}
.field input:focus { outline: none; border-bottom-color: var(--gold); }
.field input:focus-visible,
.field textarea:focus-visible {
  /* a line under the field is too quiet to find with a keyboard: ring it, in gold */
  outline: 1px solid var(--gold);
  outline-offset: 3px;
  border-bottom-color: var(--gold);
}
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .9rem;
  align-items: start;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--parchment);
  cursor: pointer;
}
.consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin: .2rem 0 0;
  accent-color: var(--gold);
}
.waitlist-form .btn { align-self: center; margin-top: .5rem; }
.waitlist-error {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  text-align: center;
  color: var(--gold);
}
.waitlist-done {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-title);
  color: var(--gold);
}
.waitlist-done:focus { outline: none; }

/* ---- what's included -------------------------------------------------- */
/* Home: one quiet row of four. Each item sits under a short gold rule. */
.highlights {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(5rem, 10vw, 8rem) var(--gutter) 0;
  text-align: center;
}
.highlights-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 4vw, 4.5rem);
  width: min(100%, 70rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.highlights-list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
}
.highlights-list li::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  margin-bottom: .6rem;
  background: var(--gold);
}
.highlights-list h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--ivory);
  text-wrap: balance;
}
.highlights-list p {
  max-width: 17rem;
  font-size: .8125rem;
  line-height: 1.85;
  color: var(--mute);
  text-wrap: pretty;
}
.more {
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--gold-dim);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  margin-right: -.14em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  transition: border-color .6s var(--ease);
}
.more { position: relative; }
.more::before { content: ""; position: absolute; inset: -1rem -.75rem -.6rem; } /* 44px tap area, same look */
.more:hover { border-color: var(--gold); }
@media (max-width: 999px) {
  .highlights-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 38rem); }
}
@media (max-width: 599px) {
  .highlights-list { grid-template-columns: 1fr; gap: 2.75rem; }
}

/* The Retreat: the full list, grouped. The pod on the left; outside and arriving on the right. */
.included {
  padding: var(--section) var(--gutter);
}
.included-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  text-align: center;
}
.included-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: clamp(3.5rem, 6vw, 4.5rem) clamp(3rem, 8vw, 8rem);
  width: min(100%, 64rem);
  margin: 0 auto;
}
.included-group:first-child { grid-row: span 2; }
.included-label {
  margin: 0 0 1.1rem;
  font-size: var(--t-label);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.included-list { border-top: 1px solid var(--gold-dim); }
.included-list > div {
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--line);
}
.included-list dt {
  font-family: var(--serif);
  font-size: 1.4rem;
  line-height: 1.3;
  color: var(--ivory);
}
.included-list dd {
  margin-top: .3rem;
  font-size: .8125rem;
  line-height: 1.8;
  color: var(--mute);
  text-wrap: pretty;
}
@media (max-width: 799px) {
  .included-groups { grid-template-columns: 1fr; grid-template-rows: none; }
  .included-group:first-child { grid-row: auto; }
}
/* Outside and arriving: the BBQ shelter fills half the screen on the left, as the bedroom does
   on the right beside the pod (owner, 2 Nov 2026). Laptops set the two short lists side by
   side beside it, so the slide fits its screen; phones stack them under the photo. */
.split--flip .split-image img { object-position: 55% 60%; }
.included-stack {
  display: grid;
  gap: clamp(1.75rem, 4.5vh, 3rem);
  margin-top: clamp(.5rem, 2vh, 1.5rem);
}
@media (min-width: 900px) {
  .split--flip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split--flip .split-text { padding-inline: clamp(2rem, 4.5vw, 5rem); gap: clamp(1rem, 2.6vh, 1.5rem); }
  .split--flip .included-stack { margin-top: clamp(0rem, 1.2vh, 1.5rem); }
  .included-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1.75rem, 3vw, 3rem);
    align-items: start;
  }
}
@media (max-width: 899px) {
  .split--flip .split-image { aspect-ratio: 4 / 5; }
}
@media (max-width: 599px) {
  .split--flip .split-image { aspect-ratio: 4 / 5; }
  .split--flip .split-image img { object-position: 55% 60%; }
}

/* Recovery: the steam and the valley stay in the frame at every width. */
.split--recovery .split-image img { object-position: 50% 55%; }
@media (max-width: 899px) { .split--recovery .split-image { aspect-ratio: 4 / 5; } }
@media (max-width: 599px) {
  .split--recovery .split-image { aspect-ratio: 4 / 5; }
  .split--recovery .split-image img { object-position: 50% 55%; }
}

/* As a Gift: the real certificate, lying like a printed card on a dark table (owner, 2 Nov
   2026). The whole page shows, so the picture is never cropped. */
.split--paper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.split--paper .split-text { text-align: left; }
.split--paper .offer-lead { max-width: 30em; }
.split-image--paper {
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #221f1a 0%, var(--ink-2) 75%);
}
.split-image--paper img {
  position: static;
  height: auto;
  object-fit: contain;
  transform: rotate(-2deg);
  box-shadow: 0 2.5rem 4.5rem rgba(0, 0, 0, .7), 0 0 0 1px rgba(201, 169, 110, .2);
}
@media (max-width: 899px) {
  .split--paper { grid-template-columns: minmax(0, 1fr); }
  .split--paper .split-image { aspect-ratio: auto; padding: 3rem var(--gutter) 1rem; }
  .split--paper .split-image img { width: 92%; } /* room for the tilted corners */
}

/* The pod's own list, alone on its slide: one group, its items in two columns where they fit. */
.included-groups--one { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
@media (min-width: 900px) {
  .included-groups--one .included-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(3rem, 8vw, 8rem); }
}

/* ---- footer ----------------------------------------------------------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: clamp(4rem, 8vw, 6rem) var(--gutter) 3rem;
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .75rem;
  color: var(--mute);
}
.footer-mark {
  font-family: var(--serif);
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  margin-right: -.14em;
  color: var(--gold);
  text-decoration: none;
  position: relative;
}
.footer-mark::before { content: ""; position: absolute; inset: -.6rem -.6rem; }
.footer-tag { max-width: 36em; letter-spacing: .08em; text-wrap: balance; }
/* One line wherever it fits (owner, 2 Nov 2026); phones still wrap it, balanced. */
@media (min-width: 760px) {
  .footer-tag { max-width: none; white-space: nowrap; }
}
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  letter-spacing: .08em;
}
.footer-meta li + li::before { content: "·"; margin: 0 .8rem; color: var(--gold-dim); }
.footer-meta a { position: relative; text-decoration: none; transition: color .6s var(--ease); }
.footer-meta a::before { content: ""; position: absolute; inset: -.8rem -.6rem; }
.footer-meta a:hover { color: var(--gold); }
@media (max-width: 599px) {
  .footer-meta { flex-direction: column; gap: .75rem; }
  .footer-meta li + li::before { content: none; }
  .footer-meta a::before { inset: -.9rem -.75rem; }
}

/* ---- supporting pages ------------------------------------------------- */

/* Inner pages open with a shorter layout A; --plain drops the render for the night alone. */
.hero--page { min-height: 78vh; min-height: 78svh; }
.hero--plain {
  min-height: 0;
  padding-top: clamp(10rem, 24vh, 13rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}
.hero--plain::after { content: none; }
.hero--page.hero--plain { min-height: 78vh; min-height: 78svh; justify-content: center; }
.hero-copy > .body { margin-bottom: 2.25rem; }
.hero-copy > .body:last-child { margin-bottom: 0; }
.hero-copy .fine { margin-top: 2.5rem; }

.mail {
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--gold-dim);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 4.4vw, 2.4rem);
  font-weight: 400;
  color: var(--gold);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color .6s var(--ease);
}
.mail:hover { border-color: var(--gold); }

/* the Founder Stay, line by line */
.ledger,
.faq {
  width: min(100%, 46rem);
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  text-align: left;
}
.ledger > div {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: .35rem 2.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.ledger dt {
  padding-top: .55rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.ledger dd {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ivory);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.ledger dd span {
  display: block;
  margin-top: .4rem;
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--mute);
  text-wrap: pretty;
}
.faq > div { padding: 1.75rem 0; border-bottom: 1px solid var(--line); }
.faq dt {
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--ivory);
}
.faq dd { margin-top: .6rem; color: var(--mute); line-height: 1.9; }

/* The Plan: the steps on a gold line that draws itself in as the slide arrives (owner, 2 Nov
   2026). Across on a laptop, down on a phone. The nearest step's dot is filled. */
.timeline {
  --dot: 9px;
  --rise: 2.25rem; /* from the line down to the words */
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  width: min(100%, 66rem);
  margin-top: clamp(.5rem, 2.5vh, 2rem);
  padding: var(--rise) 0 0;
  list-style: none;
  text-align: left;
}
.timeline::before {
  content: "";
  position: absolute;
  inset: calc(var(--dot) / 2 - .5px) 0 auto 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold) 0%, var(--gold) 80%, rgba(201, 169, 110, 0) 100%);
  transform-origin: left center;
}
.timeline-step { position: relative; }
.timeline-step::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--rise));
  left: 0;
  width: var(--dot);
  height: var(--dot);
  box-sizing: border-box;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 5px var(--ink);
}
.timeline-step:first-child::before { background: var(--gold); }
.timeline-when {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--gold);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.timeline-what {
  margin-top: .45rem;
  font-family: var(--serif);
  font-size: 1.45rem;
  line-height: 1.3;
  color: var(--ivory);
}
.timeline-detail {
  margin-top: .5rem;
  font-size: var(--t-body);
  line-height: 1.8;
  color: var(--mute);
  text-wrap: pretty;
}
@media (max-width: 759px) {
  .timeline {
    --rise: 0rem;
    grid-auto-flow: row;
    gap: 1.6rem;
    padding: 0 0 0 2rem;
  }
  .timeline::before {
    inset: .5rem auto 0 calc(var(--dot) / 2 - .5px);
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, var(--gold) 0%, var(--gold) 80%, rgba(201, 169, 110, 0) 100%);
    transform-origin: center top;
  }
  .timeline-step::before { top: .5rem; left: -2rem; }
  .timeline-what { margin-top: .2rem; font-size: 1.3rem; }
  .timeline-detail { margin-top: .3rem; }
}
/* It plays once the slide has arrived and stopped (slides.js sets is-arrived when the glide
   ends), from the first dot. Leaving resets it at once, so it never rewinds while out of view. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .slides-on .timeline::before { transform: scaleX(0); }
  .slides-on .timeline-step { opacity: 0; transform: translateY(.6rem); }
  .slides-on .is-arrived .timeline::before { transform: none; transition: transform 2.2s cubic-bezier(.5, 0, .25, 1) .1s; }
  .slides-on .is-arrived .timeline-step {
    opacity: 1;
    transform: none;
    transition: opacity 1s var(--ease) .35s, transform 1s var(--ease) .35s;
  }
  .slides-on .is-arrived .timeline-step:nth-child(2) { transition-delay: .67s; }
  .slides-on .is-arrived .timeline-step:nth-child(3) { transition-delay: .99s; }
  .slides-on .is-arrived .timeline-step:nth-child(4) { transition-delay: 1.31s; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) and (max-width: 759px) {
  .slides-on .timeline::before { transform: scaleY(0); }
  .slides-on .is-arrived .timeline::before { transform: none; }
}
.faq a, .prose a, .fine a, .offer-lead a {
  color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}
@media (max-width: 599px) {
  .ledger > div { grid-template-columns: 1fr; padding: 1.25rem 0; }
  .ledger dt { padding-top: 0; }
}

/* terms and privacy: one readable column */
.prose {
  width: min(100%, calc(40rem + 2 * var(--gutter)));
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) var(--section);
  color: var(--mute);
  line-height: 1.9;
}
.prose h2 {
  margin: 3.25rem 0 1rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.55rem, 2.6vw, 1.9rem);
  line-height: 1.2;
  color: var(--ivory);
}
.prose h2:first-child { margin-top: 0; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1rem; }
.prose ul { margin: 0; padding-left: 1.1rem; }
.prose li + li { margin-top: .6rem; }
.prose li::marker { color: var(--gold-dim); }
.prose strong { font-weight: 400; color: var(--parchment); }

/* ---- reserve ---------------------------------------------------------- */

.reserve-hero { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.reserve-hero .display { margin-bottom: 1.25rem; }
.reserve-hero .hero-copy > .body { margin-bottom: 0; }
.remain {
  margin-top: 1.75rem;
  margin-right: -.14em;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

.reserve {
  width: min(100%, calc(34rem + 2 * var(--gutter)));
  margin: 0 auto;
  padding: 0 var(--gutter) var(--section);
}
.notice {
  margin-bottom: 2.5rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--gold-dim);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  text-align: center;
  color: var(--parchment);
}

/* I Choose · II Details · III Pay (reserve.js moves between them) */
.steps {
  display: none;
  justify-content: center;
  gap: clamp(1.25rem, 5vw, 2.75rem);
  margin: 0 0 3rem;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--line);
  list-style: none;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.steps li { display: flex; align-items: baseline; gap: .6rem; transition: color .6s var(--ease); }
.steps span, .step-title span {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .08em;
}
.steps [aria-current] { color: var(--gold); }

.reserve-form { display: flex; flex-direction: column; gap: 2.5rem; }
.step {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.step-title {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .25rem;
  padding: 0;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.label {
  padding: 0;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* For me / As a gift, and the gift email's two ways */
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.choices legend { margin-bottom: .75rem; }
.choices--stacked { grid-template-columns: 1fr; }
.choice { position: relative; display: block; cursor: pointer; }
.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: block;
  padding: 1.05rem 1rem;
  border: 1px solid var(--gold-dim);
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.2;
  text-align: center;
  color: var(--mute);
  transition: border-color .6s var(--ease), color .6s var(--ease), background-color .6s var(--ease);
}
.choices--stacked .choice span { padding: .9rem 1.1rem; font-size: 1.15rem; text-align: left; }
.choice:hover span { border-color: var(--gold); color: var(--ivory); }
.choice input:checked + span {
  border-color: var(--gold);
  background: rgba(201, 169, 110, .08);
  color: var(--gold);
}
.choice input:focus-visible + span { outline: 1px solid var(--gold); outline-offset: 4px; }

/* nights: − [n] + */
.stepper { display: flex; align-items: center; gap: 1.25rem; }
.field .stepper input {
  width: 4.5rem;
  padding: .2rem 0 .35rem;
  font-size: 2.6rem;
  line-height: 1;
  text-align: center;
  font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.stepper-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--gold-dim);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  font: 400 1.4rem/1 var(--sans);
  cursor: pointer;
  transition: border-color .6s var(--ease), opacity .6s var(--ease);
}
.stepper-btn:hover { border-color: var(--gold); }
.stepper-btn[aria-disabled="true"] { opacity: .3; cursor: default; }

.hint { font-size: .75rem; line-height: 1.6; color: var(--mute); }
.field-error {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--gold);
}
.field textarea {
  padding: .6rem 0;
  border: 0;
  border-bottom: 1px solid var(--gold-dim);
  border-radius: 0;
  background: transparent;
  color: var(--ivory);
  font: 400 1.2rem/1.45 var(--serif);
  resize: vertical;
  transition: border-color .6s var(--ease);
}
.field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field [aria-invalid="true"] { border-bottom-color: var(--gold); }

/* The gift's own fields follow the choice: here in CSS, in reserve.js where :has is missing. */
.gift-fields {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.reserve-form:has(input[name="is_gift"][value="false"]:checked) .gift-fields { display: none; }
.gift-label { margin-bottom: -.75rem; color: var(--gold); }
.consent small {
  display: block;
  margin-top: .2rem;
  font-size: .75rem;
  color: var(--mute);
}

/* the live summary, set like the offer's figures */
.reserve .summary {
  margin: 0;
  padding: 2.25rem 0 0;
  border-top: 1px solid var(--line);
}
.summary-rate {
  margin-top: -1.25rem;
  font-size: .75rem;
  text-align: center;
  color: var(--mute);
}
/* Totals are only shown once reserve.js runs and keeps them live. Until then (or if it never
   arrives) the per-night amounts show instead, so a changed number of nights can never sit
   beside a stale total. This follows .is-live, never the scripting media feature. */
.static { display: none; }
.reserve-form:not(.is-live) .live { display: none; }
.reserve-form:not(.is-live) .static { display: inline; }
.reserve-form:not(.is-live) .stepper-btn { display: none; }
.summary .static { font-size: .62em; }

.pay {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.pay-btn { width: min(100%, 22rem); padding-block: 1.25rem; }
.refund {
  margin-top: 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--parchment);
  text-wrap: balance;
}
.pay .fine { margin-top: 1rem; text-wrap: balance; }
.form-problem {
  margin-bottom: 1.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
}

.step-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.btn-quiet {
  padding: 1rem .25rem;
  border: 0;
  background: none;
  color: var(--mute);
  font: 400 var(--t-label)/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .6s var(--ease);
}
.btn-quiet:hover { color: var(--gold); }

/* With scripting, the step labels are drawn from the first paint, so the top of the form doesn't
   move when reserve.js arrives. Only reserve.js hides steps: if it never runs, the whole form
   stays usable. Nothing to do with prices depends on these media blocks. */
.reserve-form.is-live .step-nav { display: flex; }
.reserve-form.is-live[data-current="3"] .summary { padding-top: 0; border-top: 0; }
@media (scripting: enabled) {
  .steps { display: flex; }
  .step-title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 599px) {
  .choice span { padding: .95rem .5rem; font-size: 1.15rem; }
  .steps { gap: .7rem; font-size: .75rem; letter-spacing: .14em; }
  .step-nav { flex-direction: column-reverse; gap: .5rem; }
  .step-nav .btn, .pay-btn { width: 100%; }
}

/* ---- thank you -------------------------------------------------------- */

.thanks-view, .thanks-block { display: flex; flex-direction: column; align-items: center; }
.thanks-view .display { margin: 1rem 0 1.5rem; }
.founder-no {
  margin-top: 1.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.5rem, 7.5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--gold);
  font-variant-numeric: lining-nums;
  text-wrap: balance;
}
.founder-no + .display { margin-top: .75rem; font-size: clamp(1.6rem, 3.4vw, 2.3rem); color: var(--parchment); }
.thanks-ledger { width: min(100%, 34rem); margin: .5rem 0 2rem; }
.thanks-ledger > div { grid-template-columns: 9rem minmax(0, 1fr); }
.ledger dd .amount { display: inline; margin: 0; font: inherit; color: inherit; }
.gift-line { margin-bottom: 1rem; color: var(--parchment); }
.thanks-view .btn { margin-top: 2.5rem; }
.confirming { color: var(--parchment); }
@media (prefers-reduced-motion: no-preference) {
  .confirming { animation: breathe 2.4s var(--ease) infinite alternate; }
}
@keyframes breathe { from { opacity: .45; } to { opacity: 1; } }
@media (max-width: 599px) {
  .thanks-ledger > div { grid-template-columns: 1fr; }
}

/* ---- admin ------------------------------------------------------------ */
/* The owner's pages (admin.html, admin_login.html): the same tokens, a quieter, practical
   layout. Wide tables scroll inside .adm-scroll; the page itself never scrolls sideways. */

.adm {
  width: min(100%, 92rem);
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem) var(--gutter) clamp(3rem, 8vw, 6rem);
}

.adm-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.adm-mark {
  margin: 0;
  font: 400 clamp(1.35rem, 2.4vw, 1.8rem)/1.2 var(--serif);
  letter-spacing: .02em;
  color: var(--ivory);
}
.adm-head .btn-quiet { padding: .75rem 0; }

.adm-notice {
  margin-top: 1.5rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--gold-dim);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--parchment);
}

.adm-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1.75rem;
  border: 1px solid var(--line);
  background: var(--line);
}
.adm-summary > div { padding: 1rem 1.25rem 1.1rem; background: var(--ink-2); }
.adm-summary > div:last-child { grid-column: 1 / -1; } /* five figures: no empty cell on phones */
@media (min-width: 720px) {
  .adm-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .adm-summary > div:last-child { grid-column: auto; }
}
.adm-summary dt {
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.adm-summary dd {
  margin: .4rem 0 0;
  font: 400 2rem/1.1 var(--serif);
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.adm-section { margin-top: clamp(2.5rem, 6vw, 4rem); }
.adm-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  margin-bottom: 1rem;
}
.adm-title {
  margin: 0;
  font: 400 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--serif);
  color: var(--ivory);
}
.adm-count {
  margin-left: .6rem;
  font: 400 var(--t-label)/1 var(--sans);
  letter-spacing: .14em;
  color: var(--mute);
  vertical-align: middle;
}
.adm-btn { padding: .8rem 1.4rem; }

.adm-scroll {
  position: relative; /* contains .adm-sr, which would otherwise widen the page */
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border: 1px solid var(--line);
}
.adm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  line-height: 1.5;
}
.adm-table th {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--gold-dim);
  background: var(--ink-2);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  color: var(--mute);
}
.adm-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  white-space: nowrap;
  color: var(--parchment);
}
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover td { background: rgba(201, 169, 110, .04); }
.adm-num { font-variant-numeric: tabular-nums; }
.adm-row--expired td,
.adm-row--refunded td { color: var(--mute); }
.adm-sub { display: block; font-size: .8125rem; color: var(--mute); }
.adm-no {
  padding: .1rem .45rem;
  background: rgba(201, 169, 110, .14);
  color: var(--ivory);
}
.adm-flag {
  padding: .15rem .5rem;
  background: var(--gold);
  color: var(--ink);
}
.adm-table form { margin: 0; }
.adm-resend { padding: 0; font-size: .75rem; white-space: nowrap; color: var(--gold); }
.adm-resend:hover { color: var(--ivory); }
.adm-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.adm-empty {
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--mute);
}

.adm-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding-top: clamp(3rem, 16vh, 9rem);
  text-align: center;
}
.adm-login-problem {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
}
.adm-login-form {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: min(100%, 22rem);
  margin-top: 1.5rem;
  text-align: left;
}
.adm-login-form .btn { margin-top: .5rem; }

.adm-tabs {
  display: flex;
  gap: 2rem;
  margin-top: .25rem;
  border-bottom: 1px solid var(--line);
}
.adm-tab {
  padding: .9rem 0 .8rem;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mute);
}
.adm-tab:hover { color: var(--ivory); }
.adm-tab[aria-current="page"] { border-bottom-color: var(--gold); color: var(--ivory); }

/* ---- admin: the Founder Stay sales switch ----------------------------- */
/* The state is always a word (Open / Closed); the colour only repeats it: gold when open,
   muted when closed. Buttons and fields are 44px or taller on phones. */

.adm-sales,
.adm-offered {
  display: grid;
  gap: 1.25rem 2.5rem;
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
}
@media (min-width: 720px) {
  .adm-sales,
  .adm-offered { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); padding: 1.5rem 1.75rem 1.75rem; }
}
.adm-sales-head > * { margin: 0; }
.adm-sales-title {
  font: 400 .75rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.adm-sales-status {
  margin-top: .4rem;
  font: 400 2.4rem/1.1 var(--serif);
}
.adm-sales-status--open { color: var(--gold); }
.adm-sales-status--closed { color: var(--mute); }
.adm-sales-sold { margin-top: .5rem; font-size: .875rem; color: var(--parchment); }
.adm-sales-when { margin-top: .25rem; font-size: .8125rem; color: var(--mute); }
.adm-sales-body { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.adm-sales-body > p { margin: 0; }
.adm-sales-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: min(100%, 26rem);
  margin: 0;
}
.adm-sales-form .field { align-self: stretch; }
.adm-sales-form .btn { min-height: 44px; }
.adm-sales-warn,
.adm-sales-problem {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
}
.adm-sales-warn { color: var(--parchment); }
.adm-sales-problem { color: var(--gold); }
.adm-sales-effect,
.adm-sales-check { font-size: .8125rem; line-height: 1.55; color: var(--mute); }
.adm-sales-check { padding-top: .9rem; border-top: 1px solid var(--line); }
.adm-notice--sales > p { margin: 0; }
.adm-notice--sales .adm-sales-form {
  margin-top: 1rem;
  font-family: var(--sans);
  font-style: normal;
}
@media (max-width: 599px) {
  .adm-sales-title { font-size: .75rem; }
  .adm-sales-form .btn { align-self: stretch; padding-block: .95rem; }
}

/* ---- admin: analytics ------------------------------------------------- */
/* A dark-surface chart system: one gold series, ivory and taupe ink, hairline grid. The
   charts are server-rendered SVG and HTML bars; admin-charts.js adds the hover readouts. */

.ana-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
}
.ana-range { display: flex; flex-wrap: wrap; gap: .5rem; }
.ana-range-link {
  padding: .65rem 1rem;
  border: 1px solid var(--line);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--mute);
}
.ana-range-link:hover { border-color: var(--gold-dim); color: var(--ivory); }
.ana-range-link[aria-current="page"] { border-color: var(--gold); color: var(--ivory); }
.ana-hint {
  margin: 0;
  font-size: .75rem;
  line-height: 1.5;
  color: var(--mute);
}
.ana-empty { margin-top: 2rem; }

.ana-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 1.5rem 0 0;
  border: 1px solid var(--line);
  background: var(--line);
}
.ana-tiles > .ana-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .ana-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ana-tiles > .ana-tile:last-child:nth-child(odd) { grid-column: auto; }
}
.ana-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.ana-tiles--3 > .ana-tile:last-child:nth-child(odd) { grid-column: auto; }
@media (min-width: 900px) { .ana-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ana-tile { min-width: 0; padding: 1rem 1.1rem 1.1rem; background: var(--ink-2); }
.ana-tile dt {
  font-size: .75rem;
  line-height: 1.6;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.ana-value {
  margin: .45rem 0 0;
  font: 400 clamp(1.5rem, 3vw, 2rem)/1.1 var(--sans);
  color: var(--ivory);
}
.ana-change {
  margin: .4rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--mute);
}
.ana-change span { color: var(--ash); }
@media (max-width: 480px) { .ana-change span { display: block; } }

/* the line chart */
.ana-chart { margin: 0; }
.ana-plot-wrap { display: flex; gap: .6rem; }
.ana-y {
  position: relative;
  flex: 0 0 auto;
  min-width: 1.6rem;
  height: 220px;
  font-size: .8125rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--mute);
}
.ana-y span { position: absolute; right: 0; transform: translateY(50%); line-height: 1; }
.ana-plot-area { position: relative; flex: 1 1 auto; min-width: 0; height: 220px; outline-offset: 4px; }
.ana-plot { display: block; width: 100%; height: 100%; overflow: visible; }
.ana-grid { stroke: var(--line); stroke-width: 1; }
.ana-grid--base { stroke: var(--smoke); }
.ana-area { fill: var(--gold); fill-opacity: .1; }
.ana-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ana-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--ink); /* the surface ring */
  pointer-events: none;
}
.ana-cross {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--mute);
  opacity: .5;
  pointer-events: none;
}
.ana-x {
  position: relative;
  height: 1.6rem;
  margin-left: 2.2rem;
  font-size: .8125rem;
  color: var(--mute);
}
.ana-x span { position: absolute; top: .55rem; transform: translateX(-50%); white-space: nowrap; }
.ana-x span:first-child { transform: none; }
.ana-x span:last-child { transform: translateX(-100%); }
@media (max-width: 600px) { .ana-x .is-minor { display: none; } }

.ana-tip {
  position: fixed;
  z-index: 10;
  min-width: 7rem;
  padding: .55rem .75rem .6rem;
  border: 1px solid var(--gold-dim);
  background: var(--ink-2);
  pointer-events: none;
}
.ana-tip b {
  display: flex;
  align-items: center;
  gap: .5rem;
  font: 400 1rem/1.2 var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}
.ana-tip b::before { content: ""; width: 12px; height: 2px; border-radius: 1px; background: var(--gold); }
.ana-tip span { display: block; margin-top: .2rem; font-size: .75rem; color: var(--mute); }

.ana-details { margin-top: 1rem; }
.ana-details > summary {
  display: inline-block;
  padding: .5rem 0;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  cursor: pointer;
  list-style: none;
}
.ana-details > summary::-webkit-details-marker { display: none; }
.ana-details > summary::before { content: "+ "; }
.ana-details[open] > summary::before { content: "− "; }
.ana-details > summary:hover { color: var(--ivory); }
.ana-details[open] > .ana-bars { margin-top: .75rem; }
.ana-table-wrap { max-height: 22rem; margin-top: .5rem; overflow-y: auto; }

/* the bars (funnel and homepage reach) */
.ana-bars { margin: 0; padding: 0; list-style: none; }
.ana-bar-row { padding: .7rem 0 .8rem; border-top: 1px solid var(--line); outline-offset: 2px; }
.ana-bar-row:last-child { border-bottom: 1px solid var(--line); }
.ana-bar-row:hover .ana-fill, .ana-bar-row:focus-visible .ana-fill { filter: brightness(1.15); }
/* Narrow screens: the label, then its figures on a line of their own, then the bar. */
.ana-bar-head {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin-bottom: .6rem;
}
.ana-bar-label { font-size: .8125rem; color: var(--parchment); }
.ana-bar-fig {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .9rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: var(--mute);
}
.ana-bar-fig b { font-weight: 400; color: var(--ivory); }
.ana-track { height: 10px; }
.ana-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--gold); }
.ana-fill.is-some { min-width: 3px; }
@media (min-width: 900px) {
  .ana-bar-row {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr) 17rem;
    align-items: center;
    column-gap: 1.5rem;
  }
  .ana-bar-head { display: contents; }
  .ana-bar-label { grid-column: 1; grid-row: 1; }
  .ana-track { grid-column: 2; grid-row: 1; }
  .ana-bar-fig { grid-column: 3; grid-row: 1; justify-content: flex-end; }
}

.ana-subtitle {
  margin: 2rem 0 .9rem;
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.adm-table td.ana-wrap { white-space: normal; overflow-wrap: anywhere; min-width: 10rem; }


/* ---- the homepage as slides (slides.js) ------------------------------- */
/* slides.js puts .slides-on on <html>; without it (no script, or a failure) the homepage is
   an ordinary scrolling page and none of this applies. The container glides one whole
   slide at a time. Each slide is exactly one screen tall (--vh, measured by the script) and
   scrolls inside itself when its content is taller. Every slide after the first sits below
   the gold strip (--head-h); the opening screen carries its own nav. */
.slide-inner--end { display: flex; flex-direction: column; }

.slides-on,
.slides-on body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
/* .slides is the scroll container: a glide eases its scrollTop, and find in page, screen
   readers and anchors scroll it natively, both ways. Wheel, touch and keys are intercepted
   by the script, so they only ever glide. No scrollbar: the page is read slide by slide. */
.slides-on .slides {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: none;
  overflow-anchor: none;
  scrollbar-width: none;
}
.slides-on .slides::-webkit-scrollbar { display: none; }
.slides-on .track { position: relative; }
.slides-on .slide {
  position: relative;
  height: var(--vh, 100vh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.slides-on .slide:focus { outline: none; }
.slides-on .slide + .slide { padding-top: var(--head-h, 0px); }
.slides-on .slide-inner { min-height: 100%; }
/* An anchor (or anything the browser scrolls to) stops just below the strip, which is
   exactly the slide's own top padding: a section lands on its slide's top, never above it
   and never pushed up under the strip. */
.slides-on [id] { scroll-margin-top: var(--head-h, 0px); }

/* each section, centred in its screen */
.slides-on .highlights {
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}
.slides-on .land {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2.5rem, 6vh, 5rem);
}
.slides-on .land-text { margin-bottom: clamp(2rem, 5vh, 3.5rem); }
/* the aerial fits the screen beneath its words, so the slide does not need to scroll */
.slides-on .land-image img {
  width: auto;
  max-height: max(14rem, calc(var(--vh, 100vh) - var(--head-h, 0px) - 24rem));
  margin-inline: auto;
}
/* The aerial fills its section edge to edge, and the words sit at its foot on a short fade
   from the bottom (owner, 2 Nov 2026: it was shrunk to the height left under the words; then
   the fade moved from the top to the bottom, and narrower). The crop keeps the top of the
   render, so the horizon shows (owner, 2 Nov 2026); on screens wider than the render the foot
   of the boundary line goes under the fade. Phones too, as every other photo there is a
   background (owner, 2 Nov 2026): a phone shows the middle of the hill, the boundary line
   running off at the sides, under a taller fade for the longer words. */
@media all {
  .land,
  .slides-on .land {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(92vh, 900px);
    padding: clamp(3rem, 9vh, 6.5rem) var(--gutter);
  }
  .slides-on .land { min-height: 100%; } /* the whole slide, as .slide-inner is elsewhere */
  .slides-on .land { padding-bottom: clamp(2rem, 6vh, 4rem); }
  .land-text, .slides-on .land-text { margin-bottom: 0; text-shadow: 0 1px 16px rgba(11, 11, 11, .85), 0 0 4px rgba(11, 11, 11, .5); }
  .land-text .body { color: var(--parchment); }
  .land-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    max-width: none;
    margin: 0;
  }
  .land-image picture { display: block; height: 100%; }
  .land-image img,
  .slides-on .land-image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 50% 0%;
  }
  .land::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .72) 18%, rgba(11, 11, 11, .2) 32%, rgba(11, 11, 11, 0) 40%);
  }
}
@media (max-width: 899px) {
  .land-image img,
  .slides-on .land-image img { object-position: 54% 0%; }
  .land::after {
    background: linear-gradient(to top, rgba(11, 11, 11, .94) 0%, rgba(11, 11, 11, .8) 26%, rgba(11, 11, 11, .3) 44%, rgba(11, 11, 11, 0) 56%);
  }
}
.slides-on .offer {
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  border-top: 0;
}
.slides-on .slide-inner--end .waitlist {
  flex: 1 0 auto;
  justify-content: center;
  padding-block: clamp(3rem, 8vh, 6rem);
}
.slides-on .slide-inner--end .footer { padding-top: clamp(2.5rem, 6vh, 4rem); }
/* The Retreat's slides: the recovery panel and the list of inclusions centred in their
   screens, and the closing offer sharing the last screen with the footer, as the list does
   on the homepage. */
.slides-on .panel { justify-content: center; }
.slides-on .included {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 5rem);
}
.slides-on .included-head { margin-bottom: clamp(1.75rem, 5vh, 4rem); }
.slides-on .slide-inner--end > .offer { flex: 1 0 auto; }
/* The Founder Stay's slides, laptops up: the offer's rows in two columns, each row's label
   above its words, and the questions in two columns, so each screen holds its section. */
@media (min-width: 900px) {
  .slides-on .ledger {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    width: min(100%, 62rem);
  }
  .slides-on .ledger > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding-block: clamp(.55rem, 1.6vh, 1.5rem); }
  .slides-on .ledger dt { padding-top: 0; }
  .slides-on .ledger dd { font-size: clamp(1.2rem, 2.6vh, 1.45rem); text-wrap: pretty; }
  .slides-on .ledger dd span { margin-top: .2rem; line-height: 1.65; }
  .slides-on .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    width: min(100%, 64rem);
  }
  .slides-on .faq > div { padding-block: clamp(.7rem, 2vh, 1.75rem); }
  .slides-on .faq dt { font-size: clamp(1.2rem, 2.6vh, 1.45rem); }
  .slides-on .faq dd { margin-top: .35rem; line-height: 1.75; }
  .slides-on .offer { gap: clamp(.75rem, 2vh, 1.5rem); padding-block: clamp(1.25rem, 4vh, 6rem); }
  .slides-on .offer .fine { margin-top: clamp(.25rem, 1vh, 1.5rem); }
  /* the opening screen: less night above the words on a short screen */
  .slides-on .hero--plain {
    justify-content: center;
    padding-top: clamp(5rem, 12vh, 10rem);
    padding-bottom: clamp(1.25rem, 3vh, 3rem);
  }
  .slides-on .hero--plain .display { margin: .5rem 0 clamp(.75rem, 2.4vh, 2rem); }
  .slides-on .hero--plain .hero-copy > .body { margin-bottom: clamp(1rem, 3vh, 2.25rem); }
  .slides-on .hero--plain .counter { margin-bottom: clamp(1rem, 3vh, 2.75rem); }
}
/* Wider screens: the list and the footer share one screen, down to 1280×720. Their spacing
   follows the screen's height. (Phones, narrower, let this slide scroll inside itself.) */
@media (min-width: 600px) {
  .slides-on .slide-inner--end .waitlist {
    gap: clamp(.75rem, 2vh, 1.5rem);
    padding-block: clamp(1.25rem, 4.5vh, 5rem);
  }
  .slides-on .slide-inner--end .waitlist-form { gap: clamp(1rem, 2.4vh, 1.75rem); margin-top: .5rem; }
  .slides-on .slide-inner--end .waitlist-form .btn { margin-top: 0; }
  .slides-on .slide-inner--end .footer {
    gap: clamp(.5rem, 1.4vh, 1.25rem);
    padding-top: clamp(1.25rem, 3.5vh, 4rem);
    padding-bottom: clamp(1.25rem, 3vh, 3rem);
  }
}
/* Laptops, down to a 1366×768 screen (about 650px of window): every slide fits its screen,
   so a glide always comes to rest with nothing left to scroll (owner, 2 Nov 2026). The
   words beside the bedroom take padding from the screen's height, not its width; email and
   name sit side by side; the pod's list of inclusions tightens on short screens. */
@media (min-width: 900px) {
  .slides-on .split-text { padding-block: clamp(2rem, 8vh, 6rem); }
  .slides-on .slide-inner--end .waitlist-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
    width: min(100%, 36rem);
  }
  .slides-on .slide-inner--end .waitlist-form > :not(.field) { grid-column: 1 / -1; }
  .slides-on .slide-inner--end .waitlist-form .btn { justify-self: center; }
}
@media (min-width: 900px) and (max-height: 800px) {
  .slides-on .included-list > div { padding-block: clamp(.6rem, 1.8vh, 1.35rem); }
}
@media (max-width: 899px) {
  /* The image at the head of its screen, the words centred in what is left. The column is
     minmax(0, 1fr): a plain 1fr would let the stretched square image widen it past the
     screen, and the slide's overflow-x would cut the words off at the right. */
  .slides-on .split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .slides-on .overlay-text { flex: 1 0 auto; justify-content: center; }
}

/* ---- phones: type and touch ------------------------------------------- */
/* Labels are 12px everywhere already. On a phone no running text is set under 15px; fine print,
   hints and the footer are 13px. */
@media (max-width: 599px) {
  .highlights-list p,
  .included-list dd,
  .consent { font-size: .9375rem; }
  .fine,
  .hint,
  .summary-rate,
  .consent small,
  .footer,
  .ana-hint { font-size: .8125rem; }
}

/* Small controls reach 44px with an invisible hit area, so nothing moves on desktop. */
.adm-head .btn-quiet,
.adm-resend { position: relative; }
.adm-head .btn-quiet::before { content: ""; position: absolute; inset: -.25rem -.5rem; }
.adm-resend::before { content: ""; position: absolute; inset: -1.15rem -.5rem; }
@media (max-width: 599px) {
  .adm-btn { padding-block: .95rem; }
  .ana-range-link { padding-block: .9rem; }
}

/* ---- reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}

/* System status (admin Overview): ivory text; a gold dot and the words "Needs attention" mark
   a line to look at. No red anywhere, by design. */
.adm-status {
  margin-top: 1.75rem;
  padding: 1.25rem 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--ivory);
}
@media (min-width: 720px) { .adm-status { padding: 1.5rem 1.75rem 1.75rem; } }
.adm-status-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; }
.adm-status-head > * { margin: 0; }
.adm-status-overall { font-size: var(--t-body); color: var(--ivory); }
.adm-status-list { display: grid; gap: 0; margin: 1rem 0 0; }
.adm-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem 1.5rem;
  padding: .65rem 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 720px) { .adm-status-row { grid-template-columns: 14rem minmax(0, 1fr); } }
.adm-status-row dt {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}
.adm-status-row dd { margin: 0; font-size: var(--t-body); color: var(--ivory); overflow-wrap: anywhere; }
.adm-status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: .1em;
}
.adm-status-flag {
  margin-left: .5rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.adm-void { display: grid; gap: .3rem; margin-top: .5rem; }
.adm-void input { width: 6rem; }