/* Cielo Samui, concept B: "Folio"
   Editorial quiet luxury on white-concrete paper. Mobile first; breakpoints 768 and 1024.
   Hidden reveal states exist only under html.fx (added by the head script when motion is allowed).
   Hover states live under (hover: hover) and (pointer: fine), so a tap on a phone never leaves one stuck. */

:root {
  --paper: #F4F0E8;
  --paper-2: #EDE6DA;
  --sand: #E5D8BD;
  --ink: #222323;
  --muted: #5C574D;
  --line: rgba(34, 35, 35, .15);
  --line-soft: rgba(34, 35, 35, .08);
  --gold: #A18955;          /* brand gold: logo, hairlines, the main action fill */
  --gold-ink: #7A6538;      /* gold-looking text and field lines on paper, 4.9:1 */
  --gold-ink-2: #6B5931;    /* gold-looking text on sand, 4.6:1+ */
  --serif: "Ibarra Real Nova", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --curtain: cubic-bezier(.77, 0, .18, 1);
  --sweep: cubic-bezier(.7, 0, .2, 1);
  --m: 16px;                 /* page gutter */
  --gap: 16px;
  --hd: 64px;
  color-scheme: light;
}
@media (min-width: 768px) { :root { --m: 40px; --gap: 22px; --hd: 72px; } }
@media (min-width: 1024px) { :root { --m: clamp(48px, 5vw, 80px); --gap: 24px; --hd: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
html:not(.lenis) { scroll-behavior: smooth; }
html.rm { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: url(grain.webp);
  background-size: 320px 320px;
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul, address { margin: 0; }
ol, ul { padding: 0; list-style: none; }
address { font-style: normal; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(161, 137, 85, .28); }
:focus-visible { outline: 2px solid var(--gold-ink); outline-offset: 3px; border-radius: 2px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 12px 18px; background: var(--ink); color: var(--paper);
  font-size: 15px; text-decoration: none;
  transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

/* ------------------------------------------------------------------ type */
/* the brand's display pattern: a roman line, then an italic line */
.h1 {
  font-family: var(--serif); font-weight: 400; font-style: normal;
  font-size: clamp(38px, 10.6vw, 46px); line-height: 1.04; letter-spacing: -.014em;
}
.h1 .ln + .ln > * { font-style: italic; }
.h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 9.4vw, 44px); line-height: 1.02; letter-spacing: -.016em;
}
.h2 em, .ft-quote em { font-style: italic; }
.stand, .k-lead {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(22px, 5.8vw, 25px); line-height: 1.38; letter-spacing: -.004em;
}
.body { max-width: 34em; }
.cap { font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; color: var(--muted); }
.aside { color: var(--muted); }

/* lines for the reveal: each .ln clips its own inner line */
.ln { display: block; overflow: hidden; padding: 0 .08em .1em; margin: 0 -.08em -.1em; }
.ln > * { display: block; text-wrap: balance; }

/* links: a hairline that sweeps */
.link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .6s var(--sweep), color .3s ease;
}
/* standalone links get a 44px tap target; the hairline stays under the text */
.link.tap { display: inline-block; padding: 9px 0; line-height: 26px; background-position: 0 calc(100% - 8px); }
.link .i { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; margin-left: 6px; transition: transform .5s var(--ease); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 0;
  font: 500 15px/1 var(--sans); letter-spacing: .06em;
  text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.btn .i { width: 20px; height: 20px; flex: none; transition: transform .6s var(--ease); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:active { background: #8F7A4B; transition-duration: .1s; }
.btn-line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-line:active { background: rgba(34, 35, 35, .08); transition-duration: .1s; }
.btn-lg { min-height: 56px; padding: 0 30px; font-size: 16px; }

@media (hover: hover) and (pointer: fine) {
  .link:hover { background-size: 0 1px; background-position: 100% 100%; }
  .link.tap:hover { background-position: 100% calc(100% - 8px); }
  .link:hover .i { transform: translateX(4px); }
  .btn:hover .i { transform: translateX(5px); }
  .btn-gold:hover { background: var(--ink); color: var(--paper); }
  .btn-line:hover { background: var(--ink); color: var(--paper); }
}

/* ------------------------------------------------------------------ header */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--hd);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.hd::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(161,137,85,0), rgba(161,137,85,.55) 20%, rgba(161,137,85,.55) 80%, rgba(161,137,85,0));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s var(--sweep);
}
.hd.is-solid { background-color: rgba(244, 240, 232, .95); }
.hd.is-solid::after { transform: none; }
.hd-in {
  height: 100%; padding: 0 var(--m);
  display: flex; align-items: center; gap: 6px;
}
/* the symbol stays at BRAND.md's 48px minimum; hidden (and out of the tab order) until the big logo has scrolled away */
.hd-mark {
  display: grid; place-items: center; width: 48px; height: 56px; margin-left: -6px;
  color: var(--gold);
  opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease), visibility 0s .6s;
}
.hd-mark svg { width: 38px; height: 48px; }
.hd.show-mark .hd-mark { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition-delay: 0s; }
.hd-nav { display: flex; margin-left: auto; }
.hd-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px;
  font: 500 14px/1 var(--sans); letter-spacing: .05em; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hd-nav a::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%; transition: transform .55s var(--sweep);
}
.btn-hd {
  min-height: 40px; padding: 0 16px; margin-left: 6px; gap: 0;
  background: transparent; color: var(--ink); border-color: var(--gold);
  font-size: 14px; letter-spacing: .05em;
  position: relative;
}
.btn-hd::before { content: ""; position: absolute; inset: -3px 0; } /* 46px tap target */
.btn-hd:active { background: rgba(161, 137, 85, .2); transition-duration: .1s; }
.btn-hd .wide { display: none; }
@media (hover: hover) and (pointer: fine) {
  .hd-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
  .btn-hd:hover { background: var(--gold); color: var(--ink); }
}
@media (min-width: 768px) {
  .hd-nav a { padding: 0 16px; font-size: 14px; }
  .hd-nav a::after { left: 16px; right: 16px; }
  .btn-hd { margin-left: 14px; padding: 0 20px; min-height: 44px; }
  .btn-hd::before { inset: 0; }
  .btn-hd .wide { display: inline; white-space: pre; }
}

/* ------------------------------------------------------------------ I. cover */
/* Phones: the arch fills whatever height the logo, the title and the action leave, so "Book your stay"
   stays on the first screen at Safari's real visible height (390x664) as well as at 390x844. */
.cover {
  --logo-w: clamp(124px, 20vh, 150px);
  --h1: clamp(38px, 10.6vw, 46px);
  position: relative; overflow-x: clip;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "logo place" "print print" "text text";
  column-gap: var(--gap);
  padding: calc(var(--hd) + 2px) var(--m) 14px;
}
@supports (height: 100svh) { .cover { --logo-w: clamp(124px, 20svh, 150px); } }
.cover-logo { grid-area: logo; align-self: end; }
.logo { width: var(--logo-w); height: auto; color: var(--gold); overflow: visible; }
.cover-place {
  grid-area: place; align-self: end; justify-self: end; text-align: right;
  max-width: 11em; padding-bottom: 6px;
  font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.38; color: var(--muted);
}
.cover-place .br { display: block; }
.cover-print {
  grid-area: print; position: relative; margin-top: 12px;
  width: 100%;
  height: clamp(250px, calc(100vh - var(--hd) - 2px - var(--logo-w) * 1.125 - 12px - 14px - var(--h1) * 2.08 - 14px - 48px - 14px), calc((100vw - 2 * var(--m)) * 1.2));
  justify-self: center;
}
@supports (height: 100svh) {
  .cover-print { height: clamp(250px, calc(100svh - var(--hd) - 2px - var(--logo-w) * 1.125 - 12px - 14px - var(--h1) * 2.08 - 14px - 48px - 14px), calc((100vw - 2 * var(--m)) * 1.2)); }
}
.cover-arch {
  position: absolute; inset: 0;
  border-radius: 999px 999px 0 0; overflow: hidden;
  background: var(--paper-2);
  isolation: isolate;
}
.cover-arch::before, .stage-frame::before, .pi::before, .room-ph::before, .pan-band::before, .card-ph::before {
  content: ""; position: absolute; inset: -8%; z-index: -1;
  background: var(--lq, none) center / cover no-repeat; filter: blur(18px); transform: scale(1.1);
}
.cover-arch img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; }
/* the gold hairline arch sits 9px outside the photo on every side (app.js redraws it to the measured box) */
.arch-line {
  position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); max-width: none;
  fill: none; stroke: var(--gold); stroke-width: 1; overflow: visible; pointer-events: none;
}
.arch-line path { vector-effect: non-scaling-stroke; }
.leaf { position: absolute; pointer-events: none; user-select: none; height: auto; max-width: none; }
/* phones: the engraving sits in the empty corner beside the logo, clear of the arch */
.leaf-hero { width: 170px; right: -34px; top: calc(-1 * var(--logo-w) * 1.125 - 6px); opacity: .28; z-index: -1; transform: rotate(-6deg); }
.cover-text { grid-area: text; padding-top: 14px; }
.h1 { font-size: var(--h1); }
.cover-after { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 14px; }

@media (min-width: 768px) {
  .cover { --logo-w: 190px; --h1: 60px; padding-top: calc(var(--hd) + 16px); padding-bottom: 28px; }
  .cover-print {
    margin-top: 20px; width: auto; aspect-ratio: 556 / 640;
    height: clamp(320px, calc(100vh - var(--hd) - 16px - 214px - 20px - 20px - 125px - 16px - 52px - 28px), 62vh);
  }
  @supports (height: 100svh) {
    .cover-print { height: clamp(320px, calc(100svh - var(--hd) - 16px - 214px - 20px - 20px - 125px - 16px - 52px - 28px), 62svh); }
  }
  .leaf-hero { width: 240px; right: -150px; top: 2%; opacity: .32; transform: rotate(-8deg); }
  .cover-text { padding-top: 20px; }
  .cover-after { margin-top: 16px; }
  .cover .btn-gold { min-height: 52px; }
}
@media (min-width: 1024px) {
  .cover {
    --logo-w: clamp(200px, min(17vw, 30vh), 320px);
    --h1: clamp(52px, 5.4vw, 88px);
    min-height: 100vh;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
    grid-template-areas: none;
    padding: calc(var(--hd) + 20px) var(--m) clamp(36px, 5vh, 64px);
    align-items: start;
  }
  @supports (height: 100svh) {
    .cover { --logo-w: clamp(200px, min(17vw, 30svh), 320px); min-height: 100svh; padding-bottom: clamp(36px, 5svh, 64px); }
  }
  .cover-logo { grid-column: 1 / span 5; grid-row: 1; align-self: start; }
  .cover-place { grid-column: 1 / span 5; grid-row: 2; align-self: start; justify-self: start; text-align: left; padding: 30px 0 0; max-width: 15em; font-size: 18px; }
  .cover-text { grid-column: 1 / span 6; grid-row: 3; align-self: end; padding: 0 0 0; }
  .cover-print {
    grid-column: 7 / span 6; grid-row: 1 / span 3; justify-self: end; align-self: stretch;
    margin: 0 9px 0 0;
    height: calc(100vh - var(--hd) - 20px - clamp(36px, 5vh, 64px) - 9px);
    min-height: 560px; max-height: none; width: auto;
    aspect-ratio: 556 / 719;
  }
  @supports (height: 100svh) {
    .cover-print { height: calc(100svh - var(--hd) - 20px - clamp(36px, 5svh, 64px) - 9px); }
  }
  /* the leaf tucks behind the arch's upper-left shoulder */
  .leaf-hero { width: clamp(300px, 26vw, 420px); right: auto; left: -18%; top: 4%; transform: none; opacity: .38; }
  .cover-after { margin-top: 32px; gap: 18px 32px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .cover { --h1: clamp(48px, 4.8vw, 88px); }   /* keeps a clear gap between the title and the arch on small laptops */
}
@media (min-width: 1600px) {
  .cover-print { grid-column: 6 / span 7; aspect-ratio: 556 / 660; }
}

/* ------------------------------------------------------------------ prints (photos framed like prints) */
.print { position: relative; }
.pi { position: absolute; inset: 0; display: block; overflow: hidden; isolation: isolate; background: var(--paper-2); }
.pi img { width: 100%; height: 100%; object-fit: cover; }
/* arch-topped prints echo the logo's window */
[data-reveal="arch"] .pi { border-radius: 999px 999px 0 0; }

/* ------------------------------------------------------------------ II. arrival */
.arrival {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 60px var(--m) 52px;
}
.arr-text { grid-column: 1 / -1; grid-row: 1; }
.arr-text .h2 { margin-bottom: 26px; }
.arr-body { grid-column: 1 / -1; grid-row: 2; margin-top: 18px; color: var(--muted); }
.arr-a { grid-column: 2 / -1; grid-row: 3; aspect-ratio: 4 / 5; margin-top: 32px; }
/* on phones the small print overlaps the arch: a paper mat and a paper ground, so it reads as a blank print the photo wipes into */
.arr-b { grid-column: 1 / span 3; grid-row: 4; aspect-ratio: 2 / 3; margin-top: -88px; z-index: 1; background: var(--paper); box-shadow: 0 0 0 8px var(--paper); }
@media (min-width: 768px) {
  .arrival { grid-template-columns: repeat(12, minmax(0, 1fr)); padding: 120px var(--m) 140px; }
  .arr-text { grid-column: 1 / span 10; }
  .arr-body { grid-column: 1 / span 8; }
  .arr-a { grid-column: 5 / span 7; }
  .arr-b { grid-column: 1 / span 5; margin-top: -160px; }
}
@media (min-width: 1024px) {
  .arrival { padding: clamp(104px, 12svh, 140px) var(--m) clamp(80px, 9svh, 112px); align-items: start; }
  .arr-a { grid-column: 1 / span 4; grid-row: 1 / span 2; margin: 0; }
  .arr-text { grid-column: 6 / span 7; grid-row: 1; padding-top: 4%; }
  .arr-text .h2 { margin-bottom: 40px; }
  .arr-text .stand { max-width: 20em; }
  .arr-b { grid-column: 6 / span 2; grid-row: 2; margin-top: 64px; box-shadow: none; background: none; align-self: start; }
  .arr-body { grid-column: 9 / span 4; grid-row: 2; align-self: start; margin: 58px 0 0; max-width: 24em; }
  .h2 { font-size: clamp(44px, 4.3vw, 66px); }
  .stand, .k-lead { font-size: clamp(25px, 2.15vw, 31px); }
}

/* ------------------------------------------------------------------ III. rooms index */
.rooms { position: relative; padding: 8px 0 64px; }
.rooms::before, .places::before, .book::before, .kohco::before {
  content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); height: 1px;
  background: linear-gradient(90deg, rgba(161,137,85,.7), rgba(161,137,85,.25) 60%, rgba(161,137,85,0));
  transform-origin: 0 50%;
}
.rooms-head { padding: 48px var(--m) 22px; }
.rooms-head .h2 { margin-bottom: 18px; }
.rooms-lede { color: var(--muted); max-width: 30em; }
.cols { display: none; }
.grp { margin-top: 22px; }
.grp-h {
  padding: 0 var(--m) 14px;
  font: italic 400 24px/1.2 var(--serif);
}
.rail {
  display: flex; gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
  padding: 0 var(--m) 6px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.room { position: relative; flex: 0 0 78%; scroll-snap-align: start; }
.room-ph {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 3; background: var(--paper-2);
}
.room-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .9s ease; }
.room-ph img.is-off { opacity: 0; }
/* phones: only the photo is a button (next photo); app.js adds it */
.ph-btn {
  position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.ph-btn:focus-visible { outline-offset: -4px; }
/* frame dashes sit under the photo, in ink, so they read on pale floors */
.dash { display: flex; gap: 5px; height: 2px; margin-top: 10px; }
.dash i { display: block; width: 14px; height: 2px; background: rgba(34, 35, 35, .3); transition: width .6s var(--ease), background-color .6s ease; }
.dash i.on { width: 30px; background: var(--gold-ink); }
.room-row {
  position: relative;
  display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
  column-gap: 10px; row-gap: 0;
  padding: 12px 0 6px;
}
.row-btn { display: none; }
.no { grid-column: 1; grid-row: 1; font: 400 15px/1 var(--serif); color: var(--gold-ink); font-variant-numeric: lining-nums tabular-nums; }
.nm { grid-column: 2 / -1; grid-row: 1; min-width: 0; }
.nm-t { display: block; font: 400 23px/1.15 var(--serif); letter-spacing: -.005em; }
.nm-2 { display: block; }
.nw { white-space: nowrap; }
.sub { display: block; margin-top: 4px; font: italic 400 16px/1.35 var(--serif); color: var(--muted); }
.sz, .gu { grid-row: 2; margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.sz { grid-column: 2; }
.gu { grid-column: 3; }
.gu::before { content: "·"; margin: 0 8px 0 2px; }
.pr { grid-column: 2 / -1; grid-row: 3; margin-top: 2px; font: 400 18px/1.3 var(--serif); }
.pr i { font-style: italic; color: var(--muted); margin-right: 2px; }
.stage { display: none; }
.rooms-foot { padding: 24px var(--m) 0; }

@media (min-width: 768px) and (max-width: 1023px) {
  .room { flex-basis: 44%; }
}

@media (min-width: 1024px) {
  .rooms { padding: 0 0 clamp(96px, 11svh, 130px); }
  .rooms-head {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    align-items: end; padding: 88px var(--m) 52px;
  }
  .rooms-head .h2 { grid-column: 1 / span 6; margin: 0; }
  .rooms-lede { grid-column: 8 / span 5; max-width: 26em; padding-bottom: 6px; }
  .index {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    padding: 0 var(--m); align-items: start;
  }
  .index-list { grid-column: 1 / span 7; }
  .cols, .room-row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 84px 128px 148px;
    column-gap: 16px; align-items: baseline;
  }
  .cols {
    padding: 0 0 12px; border-bottom: 1px solid var(--line);
    font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
  .cols .c-pr { text-align: right; }
  .grp { margin-top: 0; }
  .grp-h { padding: 34px 0 10px; font-size: 26px; color: var(--ink); }
  .grp + .grp .grp-h { padding-top: 46px; }
  .rail { display: block; overflow: visible; padding: 0; scroll-snap-type: none; }
  .room { border-top: 1px solid var(--line); }
  .room:last-child { border-bottom: 1px solid var(--line); }
  .room-ph, .dash { display: none; }
  .room-row { padding: 20px 0 19px; row-gap: 0; transition: color .4s ease; }
  /* desktop: the whole row is one button that drives the stage */
  .row-btn {
    display: block; position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: transparent; border-radius: 0;
  }
  .row-btn:focus-visible { outline-offset: -2px; }
  .room-row::before {   /* active hairline in gold */
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--sweep);
  }
  .no { grid-column: 1; grid-row: 1; transition: color .4s ease; }
  .nm { grid-column: 2; grid-row: 1; transition: transform .7s var(--ease); }
  .nm-t { font-size: clamp(23px, 1.75vw, 27px); }
  .sub { font-size: 15px; }
  .sz, .gu, .pr { grid-row: 1; margin: 0; }
  .sz { grid-column: 3; }
  .gu { grid-column: 4; padding-right: 6px; }
  .gu::before { content: none; }
  .pr { grid-column: 5; text-align: right; font-size: 19px; white-space: nowrap; }
  .room.is-on .nm { transform: translateX(8px); }
  .room.is-on .room-row::before { transform: none; }
  .room.is-on .no { color: var(--ink); }
  .index-list:focus-within .room:not(.is-on) .room-row { color: var(--muted); }

  .stage {
    display: block; grid-column: 8 / span 5;
    position: sticky; top: calc(var(--hd) + max(16px, (100svh - var(--hd) - 760px) / 2));
    margin-top: 2px;
  }
  .stage-frame {
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 4 / 5; max-height: calc(100svh - var(--hd) - 120px); width: 100%;
    background: var(--paper-2);
  }
  .stage-frame.ready::before { content: none; }
  /* each new frame is a fresh layer on top; the one below stays opaque, so a crossfade never dips */
  .st-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.06);
    transition: opacity 1s ease, transform 7s var(--ease);
  }
  .st-img.is-on { opacity: 1; transform: none; }
  .stage-cap {
    display: flex; align-items: center; gap: 18px; padding-top: 14px; min-height: 58px;
    border-bottom: 1px solid var(--line);
  }
  .st-name { flex: 1; min-width: 0; font: italic 400 19px/1.25 var(--serif); }
  .st-count { font: 400 15px/1 var(--serif); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em; }
  .st-nav { display: flex; gap: 2px; margin-right: -12px; }
  .st-btn {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
    border: 0; background: none; color: var(--ink); transition: color .3s ease;
  }
  .st-btn .i { width: 22px; height: 22px; transition: transform .5s var(--ease); }
  .st-btn .flip { transform: scaleX(-1); }
  .rooms-foot { grid-column: 1 / -1; padding: 30px var(--m) 0; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .room-row:hover .nm { transform: translateX(8px); }
  .index-list:hover .room:not(.is-on) .room-row { color: var(--muted); }
  .index-list:hover .room:not(.is-on) .nm-t { color: #4A463E; }
  .st-prev:hover .i { transform: scaleX(-1) translateX(4px); }
  .st-next:hover .i { transform: translateX(4px); }
}

/* ------------------------------------------------------------------ IV. pan: a print within the margins */
.pan { padding: 0 0 36px; }
.pan-band {
  position: relative; overflow: hidden; isolation: isolate;
  margin: 0 var(--m);
  height: 58svh; min-height: 400px; max-height: 620px;
  background: var(--paper-2);
}
.pan-track { position: absolute; top: 0; bottom: 0; left: 0; width: auto; aspect-ratio: 1920 / 1040; height: 100%; will-change: transform; }
.pan-track img { width: 100%; height: 100%; object-fit: cover; }
.pan-cap { padding: 18px var(--m) 0; max-width: 40em; }
@media (min-width: 768px) {
  .pan { padding-bottom: 56px; }
  .pan-band {
    max-width: 1680px; margin-inline: max(var(--m), (100% - 1680px) / 2);
    height: min(66svh, 720px, (100vw - 2 * var(--m)) * .6); min-height: 0; max-height: none;
  }
  /* 118% of the band, never wider than the 1920px source; anchored low so the sand, pool and sala lead */
  .pan-track { width: min(118%, 1920px); height: auto; top: auto; bottom: -4%; }
  .pan-cap { margin-left: auto; margin-right: max(0px, (100% - 1680px) / 2); padding-right: var(--m); max-width: 34em; }
}

/* ------------------------------------------------------------------ V. KohCo Beach */
.kohco { position: relative; isolation: isolate; padding: 56px 0 64px; overflow: hidden; }
.warm {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(229,216,189,0) 0%, #E5D8BD 6%, #E2D3B5 60%, #E2D3B5 90%, rgba(226,211,181,0) 100%);
  opacity: 1;
}
.leaf-k { width: 210px; right: -70px; top: 30px; opacity: .4; z-index: -1; transform: scaleX(-1) rotate(-14deg); }
.k-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gap); padding: 0 var(--m); }
.k-text { grid-column: 1 / -1; }
.kohco-logo { width: 210px; height: auto; color: var(--gold); margin-bottom: 28px; }
.k-text .h2 { margin-bottom: 24px; }
.k-lead { margin-bottom: 18px; }
.k-text .body { color: #4F4A41; margin-bottom: 22px; }
.k-main { grid-column: 1 / -1; margin: 36px 0 0; aspect-ratio: 4 / 3; }
/* the small print: a mat that always matches the ground under it (sand as the page warms, paper as it cools),
   a gold hairline at its edge, and a mat-coloured ground so the photo wipes into a blank print */
.k-small {
  --mat: 8px;
  grid-column: 1 / span 3; aspect-ratio: 2 / 3; margin-top: -64px; z-index: 1;
  background: linear-gradient(rgb(226 211 181 / var(--warm, 1)), rgb(226 211 181 / var(--warm, 1))), var(--paper);
  box-shadow: 0 0 0 var(--mat) rgb(226 211 181 / var(--warm, 1)), 0 0 0 var(--mat) var(--paper);
  outline: 1px solid rgba(161, 137, 85, .55); outline-offset: calc(var(--mat) - 1px);
}
@media (min-width: 768px) {
  .k-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .k-text { grid-column: 1 / span 9; }
  .k-main { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .k-small { grid-column: 1 / span 4; margin-top: -140px; }
}
@media (min-width: 1024px) {
  .kohco { padding: 96px 0 clamp(120px, 14svh, 160px); }
  .leaf-k { width: 460px; right: auto; left: -80px; top: auto; bottom: 40px; transform: rotate(4deg); opacity: .45; }
  .k-grid { align-items: start; }
  .k-text { grid-column: 1 / span 5; grid-row: 1 / span 2; padding-top: 10px; padding-right: calc(3vw + 16px); }
  .kohco-logo { width: 240px; margin-bottom: 52px; }
  .k-text .h2 { margin-bottom: 30px; }
  .k-main { grid-column: 6 / span 7; grid-row: 1; margin: 0 calc(var(--m) * -1) 0 0; aspect-ratio: 3 / 2; }
  .k-small { --mat: 10px; grid-column: 6 / span 3; grid-row: 2; margin: -150px 0 0 -20px; }
}

/* ------------------------------------------------------------------ VI. designed for natural living: one photo rail, then the list */
.places { position: relative; padding: 64px 0 64px; }
.pl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 0 var(--m); margin-bottom: 28px; }
.pl-nav { display: none; gap: 6px; flex: none; }
@media (min-width: 768px) { .pl-nav { display: flex; } }
.pl-btn {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--gold-ink); border-radius: 50%; background: transparent; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
}
.pl-btn .i { width: 20px; height: 20px; }
.pl-btn .flip { transform: scaleX(-1); }
.pl-btn:active { background: rgba(161, 137, 85, .18); }
.pl-btn:disabled { opacity: .3; cursor: default; }
.pl-rail {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
  scrollbar-width: none;
  padding-bottom: 6px;
}
.pl-rail::-webkit-scrollbar { display: none; }
.pl-rail:focus-visible { outline-offset: -2px; }
.pl-rail.is-drag { scroll-snap-type: none; cursor: grabbing; }
.pl-track { position: relative; display: flex; align-items: flex-start; gap: 14px; width: max-content; padding: 0 var(--m); }
.card { flex: 0 0 74vw; scroll-snap-align: start; }
.card-ph {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  aspect-ratio: 4 / 5; background: var(--paper-2);
  transform-origin: 50% 50%;
}
.card-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.fx .card-ph img { transform: scale(1.12); }
.card figcaption { padding-top: 14px; max-width: 26em; }
.card-t { display: block; font: 400 23px/1.2 var(--serif); letter-spacing: -.004em; }
.card-d { display: block; margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.amen { margin-top: 40px; padding: 0 var(--m); display: grid; column-gap: var(--gap); }
.amen li { padding: 16px 0 16px; border-top: 1px solid var(--line); }
.amen li:last-child { border-bottom: 1px solid var(--line); }
.amen h3 { font: 400 24px/1.2 var(--serif); letter-spacing: -.004em; margin-bottom: 4px; }
.amen p { color: var(--muted); font-size: 16px; line-height: 1.6; }
.amen .link { color: var(--ink); white-space: nowrap; }
.amen .link.tap { padding: 9px 0; margin: -9px 0; }
@media (hover: hover) and (pointer: fine) {
  .pl-rail { cursor: grab; }
  .pl-btn:hover:not(:disabled) { border-color: var(--gold); background: rgba(161, 137, 85, .12); }
}
@media (min-width: 768px) {
  .places { padding: 120px 0 130px; }
  .card { flex-basis: 44vw; }
  .amen { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .amen li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .places { padding: clamp(100px, 12svh, 140px) 0 clamp(100px, 12svh, 140px); }
  .pl-head { margin-bottom: 56px; }
  .pl-track { gap: 28px; }
  .card { flex-basis: clamp(300px, 26vw, 420px); }
  .card-odd { margin-top: 56px; }
  .card-t { font-size: 24px; }
  .amen { margin-top: 72px; column-gap: calc(var(--gap) * 3); }
  .amen li { padding: 20px 0 20px; }
  .amen h3 { font-size: 26px; margin-bottom: 6px; }
}

/* ------------------------------------------------------------------ VII. booking */
.book { position: relative; padding: 64px var(--m) 72px; }
.book .h2 { margin-bottom: 34px; }
.bk-print { display: none; }
.bk-line { display: grid; border-top: 1px solid var(--line); }
.seg {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 62px; border-bottom: 1px solid var(--line);
  font: 400 23px/1.2 var(--serif);
}
.seg label { cursor: pointer; }
.seg-date label::first-letter { text-transform: uppercase; }
/* the date reads as a serif label ("Tue 13 Oct"); the native input sits over it, transparent, so the picker and the GET fallback still work */
.dt { position: relative; display: inline-flex; min-width: 0; }
.seg input[type="date"] {
  min-width: 0; width: 11.2em; max-width: 100%; min-height: 44px; padding: 0 2px;
  border: 0; border-bottom: 1px solid var(--gold-ink); border-radius: 0; background: transparent;
  font: 400 19px/1.2 var(--serif); color: var(--ink); text-align: left;
  -webkit-appearance: none; appearance: none;
}
.seg input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.seg input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.dt-v { display: none; }
.js .dt-v {
  display: flex; align-items: center; min-width: 6.2em; min-height: 44px; padding: 0 2px;
  border-bottom: 1px solid var(--gold-ink);
  font: 400 23px/1.2 var(--serif); font-variant-numeric: lining-nums; white-space: nowrap;
  pointer-events: none;
}
.js .seg .dt input[type="date"] {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font-size: 19px;
}
.js .seg .dt input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.js .dt:focus-within .dt-v { outline: 2px solid var(--gold-ink); outline-offset: 4px; border-radius: 2px; }
.seg-step { flex-direction: row-reverse; }
.seg-step label::first-letter { text-transform: uppercase; }
.stp { display: inline-flex; align-items: center; gap: 2px; }
.stp-b {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--gold-ink); border-radius: 50%; background: transparent;
  font: 400 22px/1 var(--sans); color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .3s ease, background-color .3s ease;
}
.stp-b:active { background: rgba(161, 137, 85, .2); }
.stp-b:disabled { opacity: .35; cursor: default; background: transparent; border-color: var(--gold-ink); }
.stp-v {
  width: 2.2em; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: center;
  font: 400 24px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.stp-v::-webkit-outer-spin-button, .stp-v::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bk-go { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 30px; }
.bk-go .btn { width: 100%; }
.bk-note { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--muted); }
.bk-note span { display: block; }
.bk-err { min-height: 0; margin-top: 10px; font-size: 15px; color: #8A2F1F; }
.bk-err:empty { display: none; }
.bk-alt { margin-top: 30px; display: grid; gap: 2px; color: var(--muted); font-size: 16px; }
.bk-alt .link { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .stp-b:hover:not(:disabled) { border-color: var(--gold); background: rgba(161,137,85,.12); }
}
@media (min-width: 768px) {
  .book { padding: 120px var(--m) 130px; }
  .bk-line { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .bk-go { flex-direction: row; align-items: center; gap: 16px; }
  .bk-go .btn { width: auto; }
}
@media (min-width: 1024px) {
  .book {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
    grid-template-rows: auto auto 1fr;
    padding: clamp(100px, 12svh, 140px) var(--m) clamp(100px, 12svh, 140px);
    align-items: start;
  }
  .book .h2 { grid-column: 1 / span 7; grid-row: 1; margin-bottom: 52px; }
  .bk { grid-column: 1 / span 7; grid-row: 2; }
  .bk-alt { grid-column: 1 / span 7; grid-row: 3; margin-top: 44px; gap: 0; }
  /* the page closes on the arch: one arch-topped print with the hero's gold hairline, 9px outside it */
  .bk-print {
    display: block; grid-column: 8 / span 5; grid-row: 1 / span 3; align-self: center;
    justify-self: end; width: calc(100% - 18px - 2vw); margin: 9px 9px 9px 0; aspect-ratio: 4 / 5;
  }
  .bk-print::after {
    content: ""; position: absolute; inset: -9px; border: 1px solid var(--gold); border-radius: 999px 999px 0 0; pointer-events: none;
  }
  /* the calm typographic line */
  .bk-line {
    display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
    column-gap: 0; row-gap: 18px;
    border: 0; padding: 0 0 36px; border-bottom: 1px solid var(--line);
    font: 400 clamp(26px, 2.25vw, 33px)/1.3 var(--serif);
  }
  .seg { display: inline-flex; align-items: center; min-height: 0; border: 0; font: inherit; justify-content: flex-start; gap: 16px; }
  .seg:nth-child(2n) { margin-left: 30px; }
  .seg:nth-child(2n)::before { content: ""; width: 28px; height: 1px; background: var(--gold); align-self: center; margin-right: 14px; }
  .seg-date + .seg-date label::first-letter { text-transform: none; }
  .seg-step { flex-direction: row; }
  .seg-step label::first-letter { text-transform: none; }
  .seg input[type="date"] { width: 8.2em; max-width: none; font-size: inherit; min-height: 52px; }
  .js .dt-v { font-size: inherit; min-height: 52px; min-width: 5.6em; }
  .seg-step .stp { margin-right: 2px; }
  .stp-v { font-size: inherit; width: 1.6em; }
  .bk-go { margin-top: 34px; }
  .bk-note { margin-top: 18px; }
  .bk-note span { display: inline; }
  .bk-note span + span::before { content: " "; }
}

/* ------------------------------------------------------------------ VIII. footer */
.ft {
  position: relative; overflow: hidden;
  background-color: var(--paper-2);
  background-image: url(grain.webp); background-size: 320px 320px;
  padding: 64px var(--m) 24px;
}
.ft-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px var(--gap); }
.ft-quote { grid-column: 1 / -1; font: 400 clamp(28px, 7.4vw, 34px)/1.15 var(--serif); letter-spacing: -.01em; }
.ft-col { font-size: 16px; line-height: 1.65; }
.ft-visit { grid-column: 1 / -1; }
.ft-h { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.ft-col p + p { margin-top: 0; }
.ft-col address + p { margin-top: 10px; }
.ft-name { margin: 56px 0 28px; color: var(--gold); }
.ft-name svg { width: 100%; height: auto; will-change: transform; transition: transform 1.1s var(--ease); }
.ft-base {
  display: flex; flex-wrap: wrap; gap: 8px 22px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.ft-base .link { color: var(--ink); }
.ft-base p { line-height: 26px; }
.ft-base p:not(:has(.link)) { padding: 9px 0; }
.ft-base .demo { font-size: 13px; }
@media (min-width: 768px) {
  .ft { padding: 120px var(--m) 32px; }
  .ft-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .ft-quote { grid-column: 1 / span 12; }
  .ft-visit { grid-column: 1 / span 5; }
  .ft-talk { grid-column: 6 / span 4; }
  .ft-follow { grid-column: 10 / span 3; }
}
@media (min-width: 1024px) {
  .ft { padding: clamp(96px, 12svh, 140px) var(--m) 32px; }
  .ft-quote { grid-column: 1 / span 6; font-size: clamp(32px, 2.8vw, 42px); }
  .ft-visit { grid-column: 7 / span 3; }
  .ft-talk { grid-column: 10 / span 2; }
  .ft-follow { grid-column: 12 / span 1; }
  .ft-name { margin: clamp(90px, 12svh, 140px) 0 40px; width: 74%; }
  .ft-base { justify-content: flex-start; }
  .ft-base p:last-child { margin-left: auto; }
}

/* ================================================================== motion (only under html.fx) */

/* generic fade-rise */
.fx .rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.fx .rv.in { opacity: 1; transform: none; }

/* line-by-line headings and split paragraphs */
.fx .rv-l .ln > *, .fx [data-lines].split .ln > * {
  transform: translateY(108%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--i, 0) * 85ms + var(--d, 0s));
}
.fx .rv-l.in .ln > *, .fx [data-lines].split.in .ln > * { transform: none; }
.fx [data-lines]:not(.split):not(.in) { opacity: 0; }

/* print wipes with a gentle scale (the clip sits on the inner layer so the observer still sees the figure) */
.fx [data-reveal] .pi { clip-path: inset(100% 0 0 0); transition: clip-path 1.2s var(--curtain); }
.fx [data-reveal="left"] .pi { clip-path: inset(0 100% 0 0); }
.fx [data-reveal] .pi img { transform: scale(1.14); transition: transform 2s var(--ease); }
.fx [data-reveal].in .pi { clip-path: inset(0 0 0 0); }
.fx [data-reveal].in .pi img { transform: none; }
/* the window opens: an arch-topped inset grows to the full print */
.fx [data-reveal="arch"] .pi { clip-path: inset(18% 12% 18% 12% round 999px 999px 0 0); transition: clip-path 1.5s var(--ease); }
.fx [data-reveal="arch"].in .pi { clip-path: inset(0 0 0 0 round 999px 999px 0 0); }
.fx .bk-print::after { opacity: 0; transition: opacity 1.4s ease .7s; }
.fx .bk-print.in::after { opacity: 1; }

/* section hairlines draw from the left */
.fx .rooms::before, .fx .places::before, .fx .book::before, .fx .kohco::before { transform: scaleX(0); transition: transform 1.6s var(--sweep); }
.fx .rooms.in-line::before, .fx .places.in-line::before, .fx .book.in-line::before, .fx .kohco.in-line::before { transform: none; }

/* KohCo: the page warms as you arrive (opacity only); app.js drives --warm on .kohco */
.fx .kohco { --warm: 0; }
.fx .warm { opacity: var(--warm, 0); }

/* footer name rises */
.fx .ft-name svg { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s var(--curtain), transform 1.1s var(--ease); }
.fx .ft-name.in svg { clip-path: inset(0 0 0 0); }

/* cover on a repeat visit: quick and quiet */
.fx.repeat .cover-arch img { animation: settle 2.6s var(--ease) both; }
.fx.repeat .cover .h1 .ln > * { animation: lineUp .9s var(--ease) both; animation-delay: calc(.1s + var(--i) * 80ms); }
.fx.repeat .cover-after, .fx.repeat .cover-place { animation: fadeUp .8s var(--ease) .25s both; }

/* ------------------------------------------------------------------ the intro (first visit this session, readable by about 1.6 s, settled by 2.3 s)
   The frame leads: the logo's arch draws from 0 s while the photo's window opens, then the palm grows,
   then sun and sea, then the name. A wheel, touch or key fast-forwards it (app.js), it never snaps. */
.logo .trunk { transform-box: fill-box; transform-origin: 50% 100%; }
.logo .crown { transform-box: fill-box; transform-origin: 50% 50%; }
.logo .tagwipe { transform-box: fill-box; transform-origin: 50% 50%; }
.logo .draw path, .arch-line path { stroke-dasharray: none; }

.intro .logo .draw path, .intro .arch-line path { stroke-dasharray: 1 1; }
.intro #m-arch .draw path { animation: draw 1.1s var(--ease) both; }
.intro #m-arch .draw path:nth-child(n+3) { animation-delay: .08s; }
.intro .logo .trunk { animation: grow .8s var(--sweep) .4s both; }
.intro .logo .crown { animation: crown 1s var(--ease) .78s both; }
.intro #m-sunsea .draw path { animation: draw .9s var(--sweep) .7s both; }
.intro #m-sunsea .draw path.sun { animation-delay: .86s; }
.intro .lg-name path { animation: rise .9s var(--ease) both; animation-delay: calc(.92s + var(--i) * 55ms); }
.intro .logo .tagwipe { animation: wipeX 1s var(--ease) 1.12s both; }

.intro .arch-line path { animation: draw 1.5s var(--sweep) .3s both; }
.intro .cover-arch { animation: archUp 1.25s var(--curtain) .3s both; }
.intro .cover-arch img { animation: settle 2.9s var(--ease) .3s both; }
.intro .leaf-hero { animation: leafIn 1.6s var(--ease) 1.1s both; }
.intro .cover .h1 .ln > * { animation: lineUp 1s var(--ease) both; animation-delay: calc(1.05s + var(--i) * 95ms); }
.intro .cover-place { animation: fadeUp .9s var(--ease) 1.2s both; }
.intro .cover-after { animation: fadeUp .9s var(--ease) 1.35s both; }
.intro .hd-in { animation: fadeIn .8s ease .3s both; }

@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes crown { from { transform: scale(0); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes wipeX { from { transform: scaleX(0); } to { transform: none; } }
/* the curtain fades in over its first fifth, so it never opens on a dark row of pixels */
@keyframes archUp { 0% { clip-path: inset(100% 0 0 0); opacity: 0; } 20% { opacity: 1; } 100% { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
@keyframes lineUp { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes leafIn { from { opacity: 0; clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ no JS / reduced motion: content shows directly */
html:not(.js) .hd { background-color: rgba(244, 240, 232, .95); }
/* without JS the header mark stays hidden at the top (the big logo is right there); where CSS scroll timelines
   exist it fades in once the logo has scrolled away */
@supports (animation-timeline: scroll()) {
  html:not(.js) .hd-mark {
    visibility: visible; pointer-events: auto;
    animation: markIn linear both; animation-timeline: scroll(root); animation-range: 260px 380px;
  }
}
@keyframes markIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
html:not(.js) .rail, html:not(.js) .pl-rail { scroll-snap-type: x proximity; }
html:not(.js) .pl-rail { scrollbar-width: thin; scrollbar-color: rgba(34, 35, 35, .3) transparent; padding-bottom: 14px; }
html:not(.js) .pl-rail::-webkit-scrollbar { display: block; height: 6px; }
html:not(.js) .pl-rail::-webkit-scrollbar-thumb { background: rgba(34, 35, 35, .3); border-radius: 3px; }
html:not(.js) .pl-nav, html:not(.js) .st-nav, html:not(.js) .st-count { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; scroll-behavior: auto !important; }
  .st-img { transform: none !important; transition: opacity .8s ease !important; }
  .nm, .room-row::before, .hd::after, .link, .btn .i, .link .i { transition-duration: .001s !important; }
}