/* ============================================================
   dayonkàmu — Cebu City
   Warm light body, espresso dark bands, champagne gold accents.

   The palette is taken from the unit itself: walnut slats, brass
   fixtures, gold-veined marble, cream linen. The room was already
   this colour — the site just follows it.

   Gold has two values on purpose. #D4A85A is correct on espresso
   and as a button fill (8.1:1 with ink on top), but only reaches
   1.8:1 as text on the paper ground, so light surfaces use the
   deeper #7A5A1C (5.3:1) instead. Never swap them.
   ============================================================ */

:root {
  /* ground */
  --espresso:    #16120E;
  --espresso-2:  #221B14;
  --paper:       #F4F1EC;
  --paper-hi:    #FBFAF7;
  --sand:        #E7E1D7;

  /* ink */
  --ink:         #1A1714;
  --ink-soft:    #5A5249;
  --ink-faint:   #8B8377;
  --cream:       #F2EFE8;
  --cream-soft:  #B9AF9F;

  /* accent */
  --gold:        #D4A85A;
  --gold-lift:   #E5BE73;
  --gold-mid:    #9C7628;
  --gold-deep:   #7A5A1C;

  /* lines */
  --rule:        rgba(26, 23, 20, 0.12);
  --rule-soft:   rgba(26, 23, 20, 0.07);
  --rule-dark:   rgba(242, 239, 232, 0.15);
  --rule-dark-2: rgba(242, 239, 232, 0.08);

  /* type */
  --display: "Fraunces", "Hoefler Text", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;

  /* rhythm */
  --gut:  1.5rem;
  --pad:  1.25rem;
  --sect: 4rem;
  --r:    14px;
  --r-lg: 20px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 760px) {
  :root { --pad: 3rem; --sect: 6rem; }
}

/* ---------- base ---------- */

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 3px; border-radius: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--espresso); color: var(--cream);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 720px; }

/* ---------- shared bits ---------- */

.eyebrow {
  font-family: var(--body);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .9rem;
}
.eyebrow--dark { color: var(--gold-deep); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .95rem; font-weight: 600; letter-spacing: .01em;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.btn--gold  { background: var(--gold); color: var(--ink); }
.btn--gold:hover:not(:disabled)  { background: var(--gold-lift); color: var(--ink); transform: translateY(-1px); }
.btn--gold:disabled { background: var(--sand); color: var(--ink-faint); cursor: not-allowed; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--lg    { padding: 1.05rem 2.1rem; font-size: 1rem; }
.btn--block { width: 100%; }

.ico-star { width: 1em; height: 1em; color: var(--gold); }

/* ---------- nav ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(22, 18, 14, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--rule-dark-2);
}

.nav__in {
  max-width: 1200px; margin: 0 auto;
  padding: .9rem var(--pad);
  display: flex; align-items: center; gap: 1.5rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--cream);
  margin-right: auto;
}
.brand__mark { width: 26px; height: 32px; color: var(--gold); flex: none; }
/* The real wordmark, lifted from the end card of the walkthrough video. */
.brand__wm { width: 150px; height: auto; display: block; }
.brand--foot .brand__wm { width: 170px; }
@media (max-width: 560px) { .brand__wm { width: 122px; } }

.nav__links { display: none; gap: 1.6rem; }
.nav__links a {
  color: var(--cream); text-decoration: none;
  font-size: .92rem; font-weight: 500;
  opacity: .85; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.nav__links a:hover { opacity: 1; color: var(--gold); }

.nav__cta { padding: .6rem 1.15rem; font-size: .86rem; }

@media (max-width: 560px) { .nav__cta { padding: .5rem .85rem; font-size: .78rem; } }
@media (min-width: 900px) { .nav__links { display: flex; } }

/* ---------- motion system ----------
   Reveals are opt-in, not opt-out. Without JS, or with reduced motion,
   every .rv element is simply visible — the class only does something
   once JS has confirmed motion is wanted and added .motion to <html>.
   That way the page is never left parked at opacity 0 waiting on an
   observer that may never fire.                                        */

.rv { }

html.motion .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  will-change: opacity, transform;
}
html.motion .rv.is-in { opacity: 1; transform: none; }

html.motion .rv-1 { transition-delay: .09s; }
html.motion .rv-2 { transition-delay: .18s; }
html.motion .rv-3 { transition-delay: .27s; }
html.motion .rv-4 { transition-delay: .36s; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(88vh, 820px);
  display: flex; align-items: flex-end;
  background: var(--espresso);
  overflow: hidden;
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  transform: scale(1.06);
}
/* The walkthrough is a moving tour, not a calm loop — it belongs in its
   own section further down, not behind the headline. The hero keeps the
   best still and drifts slowly instead. */
html.motion .hero__img {
  animation: heroDrift 32s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.2%, -1.4%, 0); }
}

/* Two layers: a vertical wash that carries the headline block, plus a
   left-weighted one so the eyebrow and body copy stay legible even when
   the photo goes bright behind them — the window blows out around the
   top of the text on narrow screens otherwise. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(14, 11, 8, .94) 0%, rgba(14, 11, 8, .84) 30%, rgba(14, 11, 8, .58) 58%, rgba(14, 11, 8, .34) 78%, rgba(14, 11, 8, .52) 100%),
    linear-gradient(to right, rgba(14, 11, 8, .55) 0%, rgba(14, 11, 8, .18) 46%, rgba(14, 11, 8, 0) 72%);
}

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.5rem;
  transform: translateX(-50%);
  width: 1px; height: 46px;
  background: rgba(242, 239, 232, .22);
  overflow: hidden; z-index: 2;
}
.hero__scroll span {
  position: absolute; inset: 0;
  background: var(--gold);
}
html.motion .hero__scroll span { animation: scrollHint 2.6s var(--ease) infinite; }
@keyframes scrollHint {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 700px) { .hero__scroll { display: none; } }

.hero__body {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px; margin: 0 auto;
  padding: 7rem var(--pad) 3.5rem;
  color: var(--cream);
}

.hero__title {
  font-size: clamp(3.2rem, 12vw, 6.4rem);
  line-height: .95;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
  color: var(--cream);
}

.hero__gloss {
  max-width: 44ch;
  font-size: 1.06rem;
  color: var(--cream-soft);
  margin-bottom: 1.6rem;
}
.hero__gloss em { color: var(--cream); font-style: italic; }

.hero__facts {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem;
  font-size: .9rem; color: var(--cream-soft);
  margin-bottom: 2rem;
}
.rating {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--cream); font-weight: 700;
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--cream-soft); opacity: .5; }

/* ---------- bands ---------- */

.band { padding-block: var(--sect); }
.band--paper { background: var(--paper); }
.band--sand  { background: var(--sand); }
.band--dark  { background: var(--espresso); color: var(--cream); }
.band--tight { padding-top: 0; }

.shead { max-width: 62ch; margin-bottom: 2.75rem; }
.shead h2 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); margin-bottom: .9rem; }
.shead__sub { color: var(--ink-soft); font-size: 1.02rem; max-width: 58ch; }
.shead--onDark h2 { color: var(--cream); }
.shead--onDark .shead__sub { color: var(--cream-soft); }

/* ---------- booker ---------- */

.booker { display: grid; gap: var(--gut); }

@media (min-width: 940px) {
  .booker { grid-template-columns: minmax(0, 1fr) 20.5rem; align-items: start; }
}

.cal {
  background: var(--paper-hi);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}

.cal__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem;
}
.cal__title {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600;
  margin: 0; text-align: center; flex: 1;
}
.cal__nav {
  width: 2.3rem; height: 2.3rem; flex: none;
  border: 1px solid var(--rule); background: transparent;
  border-radius: 50%; cursor: pointer; color: var(--ink);
  font-size: 1rem; line-height: 1;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.cal__nav:hover:not(:disabled) { border-color: var(--ink); background: var(--sand); }
.cal__nav:disabled { opacity: .3; cursor: not-allowed; }

.cal__months { display: grid; gap: 1.75rem; }
@media (min-width: 620px) { .cal__months { grid-template-columns: 1fr 1fr; } }

.mon__name {
  font-family: var(--display); font-size: .98rem; font-weight: 600;
  text-align: center; margin: 0 0 .6rem;
}
.mon__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mon__dow {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
  text-align: center; padding-bottom: .35rem;
}

.day {
  aspect-ratio: 1; border: 0; background: transparent;
  font-family: var(--body); font-size: .84rem; color: var(--ink);
  border-radius: 8px; cursor: pointer; padding: 0;
  font-variant-numeric: tabular-nums;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.day:hover:not(:disabled) { background: rgba(212, 168, 90, .16); }
.day.is-empty { visibility: hidden; cursor: default; }

/* Four states, four distinct fills. A strikethrough alone was too quiet:
   at a glance the booked nights read the same as the free ones, which is
   the one thing this calendar must never do. */

/* Past — quiet, out of the way, not confusable with sold. */
.day.is-past {
  color: var(--ink-faint); cursor: not-allowed; opacity: .45;
}

/* Booked — a solid fill matching the legend swatch, so sold nights are
   obvious without reading anything. */
.day.is-busy {
  background: var(--sand);
  /* Darker than --ink-faint on purpose: that pairing only reached 2.9:1
     against the sand fill. This is 5.1:1, so the date is still legible
     while clearly reading as inactive. */
  color: #635B51;
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(26, 23, 20, .5);
}

.day.is-busy:hover, .day.is-past:hover { background: var(--sand); }
.day.is-past:hover { background: transparent; }

/* Nights between the two chosen dates — gold family, so the selection
   reads as one block and never borrows the booked colour. */
.day.is-in-range {
  background: rgba(212, 168, 90, .26);
  border-radius: 0;
  color: var(--ink);
}

/* The chosen check-in and check-out themselves. */
.day.is-edge {
  background: var(--gold); color: var(--ink); font-weight: 700;
  text-decoration: none; opacity: 1;
}
.day.is-edge.is-start { border-radius: 8px 0 0 8px; }
.day.is-edge.is-end   { border-radius: 0 8px 8px 0; }
.day.is-edge.is-only  { border-radius: 8px; }

/* Fail-closed states. If availability cannot be verified the grid is
   removed outright rather than drawn as free — an open calendar we
   cannot stand behind is how a site double-books its own owner. */
.cal.is-locked .cal__months,
.cal.is-locked .cal__key,
.cal.is-locked .cal__bar { display: none; }

.cal__locked { padding: 1.5rem .5rem; text-align: center; }
.cal__locked h3 { font-size: 1.2rem; margin-bottom: .7rem; }
.cal__locked p {
  font-size: .93rem; color: var(--ink-soft);
  max-width: 46ch; margin-inline: auto; margin-bottom: 1.4rem;
}
.cal__lockedBtns { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.cal__sample {
  margin: -.25rem 0 1rem;
  padding: .7rem .9rem;
  background: var(--cut-bg, #F0DED8);
  border: 1px solid rgba(154, 63, 43, .3);
  border-radius: 8px;
  font-size: .78rem; line-height: 1.5;
  color: #7A2E1E;
  font-weight: 500;
}

.cal__key {
  display: flex; flex-wrap: wrap; gap: .4rem 1.1rem;
  margin: 1.25rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--rule-soft);
  font-size: .78rem; color: var(--ink-soft);
}
.cal__fresh {
  flex-basis: 100%;
  color: var(--gold-deep); font-weight: 500;
  padding-top: .3rem;
}
.cal__key span { display: inline-flex; align-items: center; gap: .4rem; }
.k { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.k--free { background: var(--paper-hi); border: 1px solid var(--rule); }
.k--sel  { background: var(--gold); }
.k--busy { background: var(--sand); }

/* quote panel */

.quote {
  background: var(--espresso);
  color: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.5rem;
}
@media (min-width: 940px) { .quote { position: sticky; top: 92px; } }

.quote__rate { margin: 0 0 .5rem; font-size: .88rem; color: var(--cream-soft); }
.quote__rate small {
  font-size: .72rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--gold); display: block; margin-bottom: .1rem;
}
.quote__rate b {
  font-family: var(--display); font-size: 1.85rem; font-weight: 600;
  color: var(--cream); display: inline-block; margin-right: .35rem;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.quote__vary {
  font-size: .78rem; line-height: 1.55; color: var(--cream-soft);
  opacity: .82; margin: 0 0 1.25rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule-dark-2);
}

.quote__rows { margin: 0 0 1.1rem; display: grid; gap: .1rem; }
.quote__rows > div {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 0;
  border-bottom: 1px solid var(--rule-dark-2);
}
.quote__rows dt { font-size: .74rem; letter-spacing: .11em; text-transform: uppercase; color: var(--cream-soft); }
.quote__rows dd { margin: 0; font-size: .94rem; font-weight: 600; text-align: right; }

/* The select's drop-down list is painted by the browser, not by this
   stylesheet — so cream text on the panel became cream text on the
   browser's default white popup, i.e. invisible. `color-scheme: dark`
   is what tells the browser to draw that popup, the checkbox and the
   scrollbars to match a dark surface. The explicit option colours are
   a fallback for engines that ignore it. */
.quote { color-scheme: dark; }

.sel {
  background: rgba(255,255,255,.06); color: var(--cream);
  border: 1px solid var(--rule-dark); border-radius: 8px;
  padding: .4rem .6rem; font-family: var(--body); font-size: .9rem;
}
.sel:focus { border-color: var(--gold); }
.sel option {
  background: var(--espresso-2);
  color: var(--cream);
}
.sel option:checked { background: var(--gold); color: var(--ink); }

.check { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .88rem; font-weight: 500; }
.check input { accent-color: var(--gold); width: 1rem; height: 1rem; }

.quote__total { margin-bottom: 1.1rem; padding-top: .3rem; }
.quote__line {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: .9rem; padding: .4rem 0; color: var(--cream-soft);
  font-variant-numeric: tabular-nums;
}
.quote__line--sum {
  border-top: 1px solid var(--rule-dark);
  margin-top: .45rem; padding-top: .8rem;
  color: var(--cream); font-weight: 700; font-size: 1.06rem;
}

.quote__note { font-size: .85rem; color: var(--cream-soft); margin-bottom: 1rem; }
.quote__note.is-warn { color: var(--gold-lift); }
.quote__fine { font-size: .76rem; color: var(--cream-soft); opacity: .8; margin: .85rem 0 0; text-align: center; }

.btn--ghostDark { background: transparent; color: var(--cream); border-color: var(--rule-dark); }
.btn--ghostDark:hover { background: rgba(255,255,255,.07); color: var(--cream); border-color: var(--cream-soft); }

.quote__done { display: grid; gap: .6rem; }
.quote__doneHead {
  font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--cream);
  margin: 0; font-variation-settings: "SOFT" 40, "WONK" 1;
}
.quote__doneSub { font-size: .84rem; color: var(--cream-soft); margin: 0 0 .4rem; }

.linkish {
  background: none; border: 0; padding: .35rem 0;
  color: var(--gold); font-family: var(--body); font-size: .84rem;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--gold-lift); }

/* ---------- specs + gallery ---------- */

.specs {
  list-style: none; margin: 0 0 2.25rem; padding: 1.25rem 0;
  display: flex; flex-wrap: wrap; gap: 2.25rem;
  border-block: 1px solid var(--rule);
}
.specs li { display: flex; align-items: baseline; gap: .45rem; }
.specs b {
  font-family: var(--display); font-size: 1.7rem; font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.specs span { font-size: .9rem; color: var(--ink-soft); }

/* Bento: the room photo earns a big tile, the details sit around it.
   Tile sizes follow what the picture is worth, not a repeating pattern. */
.bento {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 140px;
}
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 178px; gap: 1rem; }
}
.b-lg   { grid-column: span 2; grid-row: span 2; }
.b-tall { grid-row: span 2; }
.b-wide { grid-column: span 2; }

.gal__it { margin: 0; position: relative; cursor: zoom-in; overflow: hidden; border-radius: var(--r); }
.gal__it img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.gal__it:hover img { transform: scale(1.035); }
.gal__it figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .85rem .65rem;
  font-size: .78rem; color: #fff;
  background: linear-gradient(to top, rgba(14,11,8,.72), transparent);
  opacity: 0; transition: opacity .3s var(--ease);
}
.gal__it:hover figcaption, .gal__it:focus-within figcaption { opacity: 1; }

/* ---------- cinematic tour ----------
   The one big move on the page. The video pins for three screens of
   scroll while the line over it changes; everything else on the site
   stays quiet so this lands. Without JS it degrades to a normal
   full-width video with the first line over it.                       */

.tour { position: relative; background: var(--espresso); height: 300vh; }
@media (max-width: 760px) { .tour { height: 240vh; } }

.tour__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  display: grid; place-items: center;
}

.tour__vid {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}

.tour__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 50%, rgba(14,11,8,.18) 0%, rgba(14,11,8,.62) 78%),
    linear-gradient(to top, rgba(14,11,8,.72), rgba(14,11,8,.12) 45%, rgba(14,11,8,.5));
}

.tour__beats {
  position: relative; z-index: 2;
  width: 100%; max-width: 1200px;
  padding-inline: var(--pad);
  display: grid;
}

.beat {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  font-size: clamp(2.1rem, 6.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--cream);
  text-wrap: balance;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.beat.is-on { opacity: 1; transform: none; }
/* Without JS the first line still reads. */
html:not(.motion) .beat { opacity: 0; }
html:not(.motion) .beat[data-beat="0"] { opacity: 1; transform: none; }

.tour__toggle {
  position: absolute; z-index: 3;
  right: var(--pad); bottom: 2.2rem;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: rgba(242, 239, 232, .1);
  border: 1px solid var(--rule-dark);
  color: var(--cream);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color .3s var(--ease);
}
.tour__toggle:hover { background: rgba(242, 239, 232, .22); }
.tour__toggle svg { width: 1.05rem; height: 1.05rem; }

/* Phones get the poster and an obvious tap target instead of a silent
   7MB download. The control grows so it reads as "play this", not as a
   secondary toggle. */
.tour.is-tapToPlay .tour__toggle {
  width: 4.6rem; height: 4.6rem;
  right: 50%; bottom: 50%;
  transform: translate(50%, 50%);
  background: rgba(212, 168, 90, .95);
  border-color: transparent;
  color: var(--ink);
}
.tour.is-tapToPlay .tour__toggle svg { width: 1.5rem; height: 1.5rem; margin-left: 3px; }
.tour.is-tapToPlay .tour__toggle:hover { background: var(--gold-lift); }
.tour.is-tapToPlay .tour__cap::after { content: " · tap to play"; }

.tour__cap {
  position: absolute; z-index: 3;
  left: var(--pad); bottom: 2.6rem;
  margin: 0;
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cream-soft);
}
@media (max-width: 620px) { .tour__cap { display: none; } }

/* ---------- amenities ---------- */

.two { display: grid; gap: 2.5rem; }
@media (min-width: 860px) { .two { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }
.two--map { align-items: start; }

.amen h3 {
  font-size: 1.25rem; margin-bottom: 1rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--rule);
}
.amen__sub { font-size: .82rem; letter-spacing: .11em; text-transform: uppercase; color: var(--gold-deep); margin: 1.75rem 0 .75rem; font-family: var(--body); font-weight: 700; }

.amen__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.amen__list li {
  font-size: .95rem; padding: .48rem 0 .48rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--rule-soft);
}
.amen__list li::before {
  content: ""; position: absolute; left: 0; top: 1.1em;
  width: 7px; height: 7px; border-radius: 50%;
  border: 1.5px solid var(--gold-mid);
}
.amen__list--tight li { padding-block: .38rem; }
.amen__note { margin-top: 1.25rem; font-size: .88rem; color: var(--ink-soft); font-style: italic; }

.strip {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
  margin-top: 3rem;
}
@media (min-width: 760px) { .strip { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.strip figure { margin: 0; }
.strip img { border-radius: var(--r); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
/* The sauna frame is portrait-ish; centre-cropping it lands on blank wall. */
.strip img.crop-right { object-position: 72% center; }
.strip figcaption { font-size: .8rem; color: var(--ink-soft); margin-top: .5rem; }

/* ---------- location ---------- */

.near { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.near li {
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .1rem;
}
.near b { font-size: .98rem; }
.near span { font-size: .88rem; color: var(--ink-soft); }
.near__note { font-size: .9rem; color: var(--ink-soft); margin-bottom: 1.5rem; }

.mapfig { margin: 0; }
.mapfig img { border-radius: var(--r-lg); width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.mapfig figcaption { font-size: .84rem; color: var(--ink-soft); margin-top: .7rem; }

/* ---------- reviews ---------- */

.score {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  padding: 1.25rem 0 2.25rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--rule-dark-2);
}
.score__n {
  font-family: var(--display); font-size: 3.2rem; font-weight: 600;
  line-height: 1; color: var(--cream);
  font-variation-settings: "SOFT" 40, "WONK" 1;
}
.score__stars { display: inline-flex; gap: .15rem; }
.score__stars svg { width: 1.1rem; height: 1.1rem; color: var(--gold); }
.score__c { font-size: .9rem; color: var(--cream-soft); }

.revs { columns: 1; column-gap: 1.25rem; }
@media (min-width: 700px)  { .revs { columns: 2; } }
@media (min-width: 1050px) { .revs { columns: 3; } }

.rev {
  break-inside: avoid; page-break-inside: avoid;
  background: var(--espresso-2);
  border: 1px solid var(--rule-dark-2);
  border-radius: var(--r);
  padding: 1.3rem;
  margin-bottom: 1.25rem;
}
.rev__head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .2rem; }
.rev__name { font-family: var(--display); font-size: 1.02rem; font-weight: 600; color: var(--cream); font-variation-settings: "SOFT" 40, "WONK" 1; }
.rev__stars { display: inline-flex; gap: .08rem; flex: none; }
.rev__stars svg { width: .78rem; height: .78rem; color: var(--gold); }
.rev__meta { font-size: .76rem; color: var(--cream-soft); opacity: .8; margin-bottom: .75rem; }
.rev__text { font-size: .92rem; color: var(--cream-soft); margin: 0; line-height: 1.6; }
.rev__tr { font-size: .72rem; color: var(--cream-soft); opacity: .6; margin-top: .6rem; }

.revs__more { margin-top: 1.25rem; text-align: center; }
.revs__more a { color: var(--gold); font-weight: 600; font-size: .94rem; }
.revs__more a:hover { color: var(--gold-lift); }

/* ---------- hosts ---------- */

.hosts { text-align: center; }
.hosts__mark { width: 40px; height: 50px; color: var(--gold-mid); margin: 0 auto 1.5rem; display: block; }
.hosts h2 { font-size: clamp(1.9rem, 4.6vw, 2.7rem); margin-bottom: 1.25rem; }
.hosts__copy { color: var(--ink-soft); font-size: 1.02rem; max-width: 54ch; margin-inline: auto; margin-bottom: 1rem; }
.hosts__copy em { color: var(--ink); font-style: italic; }
.hosts__sig { font-family: var(--display); font-size: 1.05rem; margin-top: 1.5rem; color: var(--ink); }

/* ---------- practical ---------- */

.facts3 { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
@media (min-width: 640px)  { .facts3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .facts3 { grid-template-columns: repeat(3, 1fr); } }
.facts3 > div { background: var(--sand); padding: 1.4rem; }
.facts3 h4 { font-size: 1.02rem; margin-bottom: .45rem; }
.facts3 p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ---------- cta ---------- */

.cta { text-align: center; }
.cta__mark { width: 42px; height: 52px; color: var(--gold); margin: 0 auto 1.5rem; display: block; }
.cta h2 { font-size: clamp(2.1rem, 5.5vw, 3.2rem); color: var(--cream); margin-bottom: .9rem; }
.cta p { color: var(--cream-soft); margin-bottom: 2rem; }

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

.foot { background: var(--espresso); color: var(--cream-soft); padding: var(--sect) 0 2rem; border-top: 1px solid var(--rule-dark-2); }
.foot__in { display: grid; gap: 2.25rem; }
@media (min-width: 760px) { .foot__in { grid-template-columns: 2fr 1fr 1fr; gap: 3rem; } }

.brand--foot { margin-right: 0; margin-bottom: .9rem; }
.foot__brand p { font-size: .88rem; line-height: 1.7; margin: 0; }

.foot__col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.foot__col h5 {
  font-family: var(--body); font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .35rem;
}
.foot__col a { color: var(--cream-soft); text-decoration: none; font-size: .9rem; transition: color .25s var(--ease); }
.foot__col a:hover { color: var(--gold); }

.foot__base {
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark-2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem;
  font-size: .82rem;
}
.foot__base p { margin: 0; }
.foot__base p:first-child { font-family: var(--display); font-style: italic; color: var(--cream); }

/* ---------- lightbox ---------- */

.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10, 8, 6, .95);
  display: grid; place-items: center;
  padding: 3.5rem 1rem;
}
.lb[hidden] { display: none; }
.lb__f { margin: 0; max-width: 1100px; width: 100%; }
.lb__f img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--r); }
.lb__f figcaption { color: var(--cream-soft); font-size: .88rem; text-align: center; margin-top: .9rem; }

.lb__x, .lb__p, .lb__n {
  position: absolute; background: rgba(255,255,255,.09);
  border: 1px solid var(--rule-dark); color: var(--cream);
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  cursor: pointer; font-size: 1.1rem; line-height: 1;
  display: grid; place-items: center;
  transition: background-color .25s var(--ease);
}
.lb__x:hover, .lb__p:hover, .lb__n:hover { background: rgba(255,255,255,.2); }
.lb__x { top: 1.25rem; right: 1.25rem; font-size: 1.6rem; }
.lb__p { left: 1rem;  top: 50%; transform: translateY(-50%); }
.lb__n { right: 1rem; top: 50%; transform: translateY(-50%); }

@media (max-width: 620px) {
  .lb__p { left: 1rem; top: auto; bottom: 1.25rem; transform: none; }
  .lb__n { right: 1rem; top: auto; bottom: 1.25rem; transform: none; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .gal__it:hover img { transform: none; }
  /* Reveals resolve to plain visible content rather than animating. */
  html.motion .rv { opacity: 1; transform: none; }
  .hero__img { transform: none; }
  .hero__scroll { display: none; }
  /* The pinned tour becomes an ordinary video with one line over it. */
  .tour { height: auto; }
  .tour__stage { position: static; height: auto; aspect-ratio: 16 / 9; }
  .beat { opacity: 0; }
  .beat[data-beat="0"] { opacity: 1; transform: none; }
}