/* Royal Passover 2027 — SLS Playa Mujeres
   Palette: marina night, RP aqua (from the monogram), kiddush wine, shell, sand, brass.
   Wine is reserved for Yom Tov and for the one action that matters: inquiring. */

:root {
  --deep: #0f2a33;
  --deep-2: #173a45;
  --sea: #5bb5c1;
  --sea-ink: #256f7a;
  --wine: #7c2236;
  --wine-2: #9a2e45;
  --wine-wash: #f3e6e7;
  --shell: #f3f4f0;
  --paper: #fbfbf8;
  --sand: #e6e0d4;
  --sand-2: #d9d1c1;
  --brass: #a9844a;
  --ink: #14212a;
  --muted: #56646b;
  --line: rgba(20, 33, 42, .14);
  --line-strong: rgba(20, 33, 42, .28);

  --f-display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --f-body: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-heb: "Frank Ruhl Libre", "David", "Times New Roman", serif;
  --f-mono: "Familjen Grotesk", ui-monospace, "SF Mono", Menlo, monospace;

  --s-xs: .8125rem;  /* 13 */
  --s-sm: .9375rem;  /* 15 */
  --s-md: 1.0625rem; /* 17 */
  --s-lg: 1.3125rem; /* 21 */
  --s-xl: 1.75rem;   /* 28 */
  --s-2xl: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  --s-3xl: clamp(2.5rem, 1.6rem + 3.8vw, 4rem);
  --s-4xl: clamp(3rem, 1.6rem + 6vw, 6.25rem);

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--s-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--wine); color: #fff; }
:focus-visible { outline: 2px solid var(--sea-ink); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--deep); color: #fff; padding: 10px 14px; z-index: 100; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.heb { font-family: var(--f-heb); direction: rtl; unicode-bidi: isolate; }
.mono { font-family: var(--f-mono); font-size: var(--s-xs); letter-spacing: .06em; text-transform: uppercase; }
.eyebrow { font-family: var(--f-mono); font-size: var(--s-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-ink); display: flex; gap: .9em; align-items: baseline; flex-wrap: wrap; }
.eyebrow .heb { letter-spacing: 0; text-transform: none; font-size: 1.15em; color: var(--brass); }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.04; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: var(--s-4xl); }
h2 { font-size: var(--s-3xl); }
h3 { font-size: var(--s-xl); line-height: 1.15; }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0; max-width: 64ch; }
.lede { font-size: var(--s-lg); line-height: 1.5; color: var(--ink); max-width: 52ch; }
.muted { color: var(--muted); }
.stack { display: grid; gap: 1.1rem; align-content: start; }
.stack-lg { display: grid; gap: 2rem; align-content: start; }

/* ---------- utility bar + header ---------- */
.util {
  background: var(--deep); color: #cfe3e6;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase;
}
.util .wrap { display: flex; justify-content: space-between; gap: 1rem; padding-block: .55rem; flex-wrap: wrap; }
.util a { text-decoration: none; color: #fff; }
.util a:hover { color: var(--sea); }
.util .count b { color: #fff; font-weight: 500; }

.site-head {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  background: var(--shell);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; gap: 1.5rem; min-height: 72px; }
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.brand-mark { width: 30px; height: 42px; background: var(--deep); -webkit-mask: url(../img/rp-mark.png) center / contain no-repeat; mask: url(../img/rp-mark.png) center / contain no-repeat; flex: none; }
.brand-name { font-family: var(--f-display); font-size: 1.3rem; line-height: 1; letter-spacing: .01em; }
.brand-name small { display: block; font-family: var(--f-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: .35rem; }
.nav { display: flex; gap: 1.6rem; align-items: center; }
.nav a { text-decoration: none; font-size: var(--s-sm); position: relative; padding-block: .4rem; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--sea-ink); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  background: var(--wine); color: #fff; text-decoration: none; border: 0; cursor: pointer;
  padding: .85rem 1.35rem; font-size: var(--s-sm); font-weight: 500; letter-spacing: .02em;
  border-radius: 2px; transition: background .2s;
}
.btn:hover { background: var(--wine-2); }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn.ghost:hover { background: rgba(255,255,255,.08); }
.btn.light { background: var(--paper); color: var(--deep); }
.btn.light:hover { background: #fff; }
.btn .arr { transition: transform .2s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }
.menu-btn { display: none; background: none; border: 1px solid var(--line-strong); padding: .55rem .8rem; cursor: pointer; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; }

@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .site-head .btn { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: calc(72px + env(safe-area-inset-top, 0px)) 0 0 0; background: var(--shell);
    padding: 1rem var(--gutter) 2rem; overflow: auto; z-index: 39;
  }
  .nav.open a { font-family: var(--f-display); font-size: 2rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
  .nav.open a::after { display: none; }
  
}


/* ---------- home hero ---------- */
.hero { position: relative; color: #fff; background: var(--deep); isolation: isolate; overflow: hidden; }
.hero-img { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
@keyframes settle { from { transform: scale(1.04); } to { transform: none; } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,42,51,.45) 0%, rgba(15,42,51,0) 22%),
    linear-gradient(0deg, rgba(10,30,37,.94) 0%, rgba(10,30,37,.72) 42%, rgba(10,30,37,.25) 68%, rgba(10,30,37,0) 82%);
}
.hero .wrap { min-height: clamp(560px, 82vh, 860px); display: grid; align-content: end; padding-block: 7rem 2.5rem; }
.hero-meta { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: #d6ecef; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-bottom: 1.6rem; }
.hero-meta span + span::before { content: "/"; margin-right: 1.4rem; color: var(--sea); }
.hero h1 { font-size: clamp(3.1rem, 1.4rem + 7.2vw, 7.75rem); line-height: .94; max-width: 11ch; letter-spacing: -.025em; }
.hero h1 .ten { font-style: italic; color: var(--sea); }
.hero-foot { display: flex; flex-wrap: wrap; gap: 2rem 4rem; align-items: end; justify-content: space-between; margin-top: 2.2rem; }
.hero-foot p { font-size: var(--s-lg); line-height: 1.45; max-width: 40ch; color: #e8f1f2; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; }

/* ---------- the luach (program calendar) ---------- */
.luach-sec { padding-block: 4.5rem 5rem; }
.luach-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; flex-wrap: wrap; margin-bottom: 2rem; }
.luach-head h2 { font-size: var(--s-2xl); max-width: 20ch; }
.legend { display: flex; gap: 1.2rem; flex-wrap: wrap; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legend i { display: inline-block; width: .8rem; height: .8rem; vertical-align: -1px; margin-right: .45rem; border: 1px solid var(--line-strong); }
.legend .k-yt { background: var(--wine); border-color: var(--wine); }
.legend .k-sh { background: var(--deep); border-color: var(--deep); }
.legend .k-ch { background: var(--sand); }
.legend .k-tr { background: transparent; border-style: dashed; }

.luach-scroll { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: .5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: thin; }
.luach { display: grid; grid-template-columns: repeat(13, minmax(86px, 1fr)); gap: 4px; min-width: 1000px; list-style: none; margin: 0; padding: 0; }
.day {
  scroll-snap-align: start;
  appearance: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: .2rem;
  padding: .85rem .7rem .8rem; min-height: 212px;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform .2s var(--ease), box-shadow .2s;
  position: relative;
}
.day:hover { transform: translateY(-3px); }
.day .dow { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.day .num { font-family: var(--f-display); font-size: 2.6rem; line-height: 1; }
.day .mon { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.day .hd { font-family: var(--f-heb); direction: rtl; text-align: right; font-size: 1.05rem; align-self: end; opacity: .9; }
.day .lbl { font-size: .8rem; line-height: 1.25; font-weight: 500; border-top: 1px solid currentColor; border-color: rgba(127,127,127,.35); padding-top: .45rem; margin-top: .3rem; min-height: 2.6em; }
.day.tr { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); background-image: repeating-linear-gradient(135deg, transparent 0 7px, rgba(20,33,42,.04) 7px 8px); }
.day.ch { background: var(--sand); }
.day.yt { background: var(--wine); color: #fff; box-shadow: none; }
.day.sh { background: var(--deep); color: #fff; box-shadow: none; }
.day[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--shell), 0 0 0 4px var(--sea-ink); transform: translateY(-3px); }
.day[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 10px; height: 10px; background: var(--paper); transform: translateX(-50%) rotate(45deg); box-shadow: -1px -1px 0 var(--line); }
.luach-panel {
  margin-top: 1.1rem; background: var(--paper); border: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; padding: 1.8rem 2rem;
}
.luach-panel .when { display: grid; gap: .3rem; align-content: start; }
.luach-panel .when .big { font-family: var(--f-display); font-size: 2.2rem; line-height: 1.05; }
.luach-panel .when .heb { font-size: 1.35rem; color: var(--brass); }
.luach-panel ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.luach-panel li { padding-left: 1.2rem; position: relative; }
.luach-panel li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--brass); }
.luach-panel .omer { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: grid; gap: .5rem; align-content: start; border-left: 1px solid var(--line); padding-left: 1.5rem; }
.luach-panel .omer b { font-family: var(--f-display); font-size: 2.4rem; letter-spacing: 0; color: var(--ink); font-weight: 400; text-transform: none; line-height: 1; }
.luach-note { margin-top: .9rem; font-size: var(--s-xs); color: var(--muted); }
@media (max-width: 860px) {
  .luach-panel { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.4rem; }
  .luach-panel .omer { border-left: 0; border-top: 1px solid var(--line); padding: 1rem 0 0; }
}

/* ---------- generic sections ---------- */
.sec { padding-block: clamp(4rem, 8vw, 7.5rem); }
.sec.tight { padding-block: clamp(3rem, 5vw, 4.5rem); }
.sec.deep { background: var(--deep); color: #e7f0f1; }
.sec.deep .eyebrow { color: var(--sea); }
.sec.deep .muted { color: #a9c0c4; }
.sec.sand { background: var(--sand); }
.sec.paper { background: var(--paper); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sec-head .stack { gap: 1rem; }
@media (max-width: 860px) { .sec-head { grid-template-columns: 1fr; } }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* split: big image + text */
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split.rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.split.rev > .media { order: 2; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; } .split.rev > .media { order: 0; } }
.media { position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.tall img { aspect-ratio: 4 / 5; }
.media.wide img { aspect-ratio: 3 / 2; }
.media.pan img { aspect-ratio: 16 / 9; }
.cap { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: .6rem; }
.sec.deep .cap { color: #9db6ba; }

/* two-photo offset stack */
.duo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; }
.duo .a { grid-column: 1 / 10; grid-row: 1; }
.duo .b { grid-column: 7 / 13; grid-row: 1; margin-top: 45%; border: 8px solid var(--shell); }
.sec.sand .duo .b { border-color: var(--sand); }
.sec.deep .duo .b { border-color: var(--deep); }
.duo img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* fact list (numbers that are true) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.facts > div { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .15rem; }
.facts > div:nth-child(odd) { padding-right: 1.5rem; border-right: 1px solid var(--line); }
.facts > div:nth-child(even) { padding-left: 1.5rem; }
.facts b { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1.05; }
.facts span { font-size: var(--s-sm); color: var(--muted); }
.sec.deep .facts, .sec.deep .facts > div { border-color: rgba(255,255,255,.16); }
.sec.deep .facts span { color: #a9c0c4; }

/* links that read like a contents list */
.contents { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.contents a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-display); font-size: 1.45rem; transition: padding .25s var(--ease), color .2s; }
.contents a span { white-space: nowrap; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contents a:hover { padding-left: .6rem; color: var(--sea-ink); }
.sec.deep .contents, .sec.deep .contents a { border-color: rgba(255,255,255,.16); }
.sec.deep .contents a span { color: #9db6ba; }
.sec.deep .contents a:hover { color: var(--sea); }

/* ---------- menu card (restaurants) ---------- */
.menu-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-item { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .8rem; padding: 1rem 0; text-decoration: none; cursor: default; }
.menu-item .n { font-family: var(--f-display); font-size: 1.7rem; line-height: 1.1; transition: color .2s; }
.menu-item .dots { border-bottom: 1px dotted var(--line-strong); transform: translateY(-.35em); }
.menu-item .c { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: right; }
.menu-item .tag { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sea-ink); border: 1px solid currentColor; padding: .1rem .35rem; margin-left: .5rem; vertical-align: .35em; }
.menu-item:hover .n, .menu-item:focus .n, .menu-item.on .n { color: var(--sea-ink); }
.menu-item:focus { outline: none; }
.menu-item:focus-visible .n { text-decoration: underline; text-underline-offset: 6px; }
.menu-item .thumb { display: none; }
.menu-frame { position: sticky; top: 104px; }
.menu-frame .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); }
.menu-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.menu-frame img.on { opacity: 1; }
.menu-frame .desc { margin-top: 1rem; min-height: 3.2em; color: var(--muted); }
@media (max-width: 860px) {
  .menu-card { grid-template-columns: 1fr; }
  .menu-frame { display: none; }
  .menu-item { grid-template-columns: 1fr; gap: .2rem; }
  .menu-item .dots { display: none; }
  .menu-item .c { text-align: left; }
  .menu-item .thumb { display: block; aspect-ratio: 16/9; object-fit: cover; width: 100%; margin-top: .7rem; }
}

/* ---------- page header (inner pages) ---------- */
.ph { position: relative; color: #fff; background: var(--deep); isolation: isolate; overflow: hidden; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ph::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10,30,37,.88) 0%, rgba(10,30,37,.35) 55%, rgba(10,30,37,.15) 100%); }
.ph .wrap { min-height: clamp(380px, 56vh, 560px); display: grid; align-content: end; gap: 1rem; padding-block: 5rem 3rem; }
.ph .eyebrow { color: #cfe8eb; }
.ph .eyebrow .heb { color: #e9d3a9; }
.ph h1 { font-size: clamp(2.8rem, 1.5rem + 5.5vw, 6rem); max-width: 14ch; }
.ph p { font-size: var(--s-lg); color: #e5eff0; max-width: 46ch; line-height: 1.45; }
.subnav { background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 30; }
.subnav .wrap { display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; }
.subnav a { white-space: nowrap; text-decoration: none; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding-block: 1rem; color: var(--muted); border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a.on { color: var(--ink); border-bottom-color: var(--sea-ink); }
[id] { scroll-margin-top: 140px; }

/* ---------- rooms explorer ---------- */
.filters { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.chip { appearance: none; border: 1px solid var(--line-strong); background: transparent; padding: .5rem .95rem; border-radius: 999px; cursor: pointer; font-size: var(--s-sm); transition: background .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.filters .sep { width: 1px; height: 1.6rem; background: var(--line-strong); margin-inline: .5rem; }
.filters label.mono { color: var(--muted); }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 2.5rem 2rem; margin-top: 2rem; }
.room { display: grid; gap: .9rem; align-content: start; }
.room .pic { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.room .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.room:hover .pic img { transform: scale(1.025); }
.room-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.room h3 { font-size: 1.6rem; }
.room .view { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-ink); white-space: nowrap; padding-top: .45rem; }
.room dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; font-size: var(--s-sm); }
.room dt { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-top: .2em; }
.room dd { margin: 0; }
.area { display: flex; align-items: end; gap: .9rem; }
.area .sq { background: var(--sea); opacity: .55; flex: none; }
.area .t { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; color: var(--muted); font-variant-numeric: tabular-nums; }
.area .t b { font-family: var(--f-display); font-size: 1.4rem; color: var(--ink); font-weight: 400; letter-spacing: 0; }
.room-pick { justify-self: start; background: none; border: 0; padding: 0; cursor: pointer; font-size: var(--s-sm); color: var(--wine); text-decoration: underline; text-underline-offset: 4px; }
.empty { padding: 3rem 0; color: var(--muted); }

/* ---------- people ---------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 2.5rem 1.75rem; }
.person { display: grid; gap: .8rem; align-content: start; }
.person .pic { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.person .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.person.stage .pic img { filter: grayscale(1) contrast(1.06); }
.person .role { font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-ink); }
.person h3 { font-size: 1.5rem; }
.person p { font-size: var(--s-sm); color: var(--muted); }
.sec.deep .person p { color: #a9c0c4; }
.sec.deep .person .role { color: var(--sea); }

/* bill: a printed-program style listing for clergy, scholars */
.bill { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); border-top: 1px solid var(--line-strong); }
.bill > div { padding: 1.6rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--line); display: grid; gap: .5rem; align-content: start; }
.bill h3 { font-size: 2rem; }
.bill .role { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }

/* ---------- tiles / lists ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 1.25rem; }
.tile { display: grid; gap: .55rem; align-content: start; }
.tile img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.tile b { font-weight: 500; }
.taglist { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.taglist li { border: 1px solid var(--line-strong); padding: .35rem .8rem; font-size: var(--s-sm); border-radius: 999px; }
.sec.deep .taglist li { border-color: rgba(255,255,255,.25); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2rem 3rem; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ticks li { padding-left: 1.4rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: .55rem; height: .55rem; border: 1px solid var(--brass); transform: rotate(45deg); }

/* band strip of photos */
.strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 6px; }
.strip img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; min-height: 220px; }
.strip > :first-child { grid-row: span 2; }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; } .strip > :first-child { grid-column: span 2; grid-row: auto; } }

/* the "nights" mosaic */
.nights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.nights figure { margin: 0; position: relative; overflow: hidden; background: var(--deep-2); }
.nights img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform .6s var(--ease); }
.nights figure:hover img { transform: scale(1.04); }
.nights figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .8rem .7rem; background: linear-gradient(0deg, rgba(10,30,37,.85), transparent); color: #fff; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.nights .w2 { grid-column: span 2; }
.nights .w2 img { aspect-ratio: 2 / 1; }
@media (max-width: 860px) { .nights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nights .w2 { grid-column: span 2; } }

/* ---------- inquire CTA band ---------- */
.cta-band { background: var(--wine); color: #fff; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.cta-band h2 { font-size: var(--s-3xl); }
.cta-band p { color: #f6dfe3; }
.cta-band .acts { display: grid; gap: 1rem; justify-items: start; }
.cta-band .phone { font-family: var(--f-display); font-size: 2rem; text-decoration: none; }
.cta-band .phone:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
@media (max-width: 860px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { background: var(--deep); color: #b7cdd1; font-size: var(--s-sm); }
.foot .wrap { padding-block: 4rem 2rem; display: grid; gap: 3rem; }
.foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.foot h4 { margin: 0 0 .9rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sea); font-weight: 400; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.foot a { text-decoration: none; color: #e3eef0; }
.foot a:hover { color: var(--sea); }
.foot .brand-mark { display: block; background: var(--sea); width: 44px; height: 62px; }
.foot .sign { font-family: var(--f-display); font-size: 1.6rem; color: #fff; line-height: 1.2; margin-top: 1rem; max-width: 18ch; }
.foot-bot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; font-family: var(--f-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #7f9ca1; }
@media (max-width: 860px) { .foot-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-top { grid-template-columns: 1fr; } }

/* ---------- gallery ---------- */
.gal-filters { margin-bottom: 2rem; }
.gallery { columns: 3 300px; column-gap: 8px; }
.gallery button { display: block; width: 100%; margin: 0 0 8px; padding: 0; border: 0; background: var(--sand); cursor: zoom-in; break-inside: avoid; position: relative; overflow: hidden; }
.gallery img { width: 100%; height: auto; transition: transform .6s var(--ease), opacity .3s; }
.gallery button:hover img { transform: scale(1.025); }
.lightbox { position: fixed; inset: 0; background: rgba(8,22,27,.96); z-index: 90; display: grid; grid-template-rows: auto 1fr auto; color: #fff; }
.lightbox[hidden] { display: none; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(1rem + env(safe-area-inset-top, 0px)) var(--gutter) 1rem; font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; }
.lb-stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lb-stage img { max-height: 100%; max-width: 100%; object-fit: contain; }
.lb-bot { display: flex; justify-content: center; gap: 1rem; padding: 1rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
.lb-btn { background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; padding: .6rem 1.1rem; cursor: pointer; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; border-radius: 2px; }
.lb-btn:hover { border-color: #fff; }

/* ---------- forms (inquiry) ---------- */
.plan-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 980px) { .plan-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--paper); border: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { padding: 1rem 1.1rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--line); counter-increment: s; }
.steps li:last-child { border-right: 0; }
.steps li::before { content: counter(s) " "; color: var(--brass); }
.steps li.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--wine); }
.steps li.done { color: var(--sea-ink); }
@media (max-width: 560px) { .steps li { font-size: 0; padding: .9rem; } .steps li::before { font-size: .75rem; } .steps li.on::after { content: attr(data-l); font-size: .68rem; } }
.fs { border: 0; margin: 0; padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; gap: 1.6rem; }
.fs legend { padding: 0; font-family: var(--f-display); font-size: 2rem; line-height: 1.1; margin-bottom: .4rem; float: left; width: 100%; }
.fs legend + * { clear: both; }
.field { display: grid; gap: .45rem; align-content: start; }
.field > label, .field > .lab { font-size: var(--s-sm); font-weight: 500; }
.field .hint { font-size: var(--s-xs); color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; border: 1px solid var(--line-strong); background: #fff; padding: .8rem .9rem; border-radius: 2px; font-size: var(--s-md);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--sea-ink); outline-offset: 0; border-color: transparent; }
.field.err input, .field.err select { border-color: var(--wine); background: var(--wine-wash); }
.err-msg { color: var(--wine); font-size: var(--s-xs); font-weight: 500; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: .75rem; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt span { display: grid; gap: .25rem; border: 1px solid var(--line-strong); padding: 1rem 1.1rem; height: 100%; transition: border-color .2s, background .2s; }
.opt span b { font-weight: 500; }
.opt span small { color: var(--muted); font-size: var(--s-xs); }
.opt input:checked + span { border-color: var(--deep); background: #eef3f2; box-shadow: inset 0 0 0 1px var(--deep); }
.opt input:focus-visible + span { outline: 2px solid var(--sea-ink); outline-offset: 2px; }
.opt input:disabled + span { opacity: .45; cursor: not-allowed; }
.stepper { display: inline-grid; grid-template-columns: 2.6rem 3rem 2.6rem; border: 1px solid var(--line-strong); align-items: stretch; width: max-content; }
.stepper button { background: none; border: 0; cursor: pointer; font-size: 1.2rem; }
.stepper button:hover { background: var(--sand); }
.stepper output { display: grid; place-items: center; font-family: var(--f-display); font-size: 1.4rem; border-inline: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.kids-ages { display: flex; gap: .6rem; flex-wrap: wrap; }
.kids-ages select { width: auto; min-width: 7.5rem; }
.date-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 4px; }
.dbtn { appearance: none; border: 1px solid var(--line-strong); background: #fff; padding: .55rem .4rem; text-align: center; cursor: pointer; display: grid; gap: .05rem; line-height: 1.2; }
.dbtn .d1 { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dbtn .d2 { font-family: var(--f-display); font-size: 1.4rem; }
.dbtn .d3 { font-size: .66rem; color: var(--muted); }
.dbtn:hover:not(:disabled) { border-color: var(--ink); }
.dbtn:disabled { cursor: not-allowed; background: var(--wine-wash); border-color: transparent; color: var(--wine); }
.dbtn:disabled .d1, .dbtn:disabled .d3 { color: var(--wine); }
.dbtn[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.dbtn[aria-pressed="true"] .d1, .dbtn[aria-pressed="true"] .d3 { color: #cfe3e6; }
.dbtn.in { background: #e3eeee; }
.form-nav { display: flex; justify-content: space-between; gap: 1rem; padding: 1.2rem clamp(1.4rem, 3vw, 2.4rem); border-top: 1px solid var(--line); background: var(--shell); }
.summary { position: sticky; top: 104px; display: grid; gap: 1.2rem; }
.summary .card { background: var(--deep); color: #e7f0f1; padding: 1.8rem; display: grid; gap: 1rem; }
.summary h3 { font-size: 1.6rem; color: #fff; }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; font-size: var(--s-sm); }
.summary dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sea); padding-top: .25em; }
.summary dd { margin: 0; }
.summary .nights-big { font-family: var(--f-display); font-size: 3.2rem; line-height: 1; color: #fff; }
.done-card { padding: clamp(1.6rem, 4vw, 3rem); display: grid; gap: 1.2rem; }
.done-card h2 { font-size: var(--s-2xl); }
.copybox { white-space: pre-wrap; font-family: var(--f-mono); font-size: .78rem; background: var(--shell); border: 1px solid var(--line); padding: 1rem; max-height: 280px; overflow: auto; }

/* checklist */
.check-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 2rem 2.5rem; }
.check-groups h3 { font-size: 1.4rem; margin-bottom: .8rem; }
.check-groups ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.ck { display: grid; grid-template-columns: 1.3rem 1fr; gap: .7rem; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.ck input { appearance: none; width: 1.15rem; height: 1.15rem; border: 1px solid var(--line-strong); margin: .2rem 0 0; display: grid; place-items: center; cursor: pointer; background: #fff; }
.ck input:checked { background: var(--deep); border-color: var(--deep); }
.ck input:checked::after { content: ""; width: .32rem; height: .62rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.ck input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--brass); }
.ck small { display: block; color: var(--muted); font-size: var(--s-xs); text-decoration: none; }
.progress { display: flex; align-items: center; gap: 1rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.progress .bar { flex: 1; height: 2px; background: var(--line); position: relative; max-width: 320px; }
.progress .bar i { position: absolute; inset: 0 auto 0 0; background: var(--wine); transition: width .3s var(--ease); }
.linkbtn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* faq */
.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 1.3rem 2.5rem 1.3rem 0; font-family: var(--f-display); font-size: 1.45rem; line-height: 1.25; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: .4rem; top: 1.65rem; width: .7rem; height: .7rem; border: solid var(--ink); border-width: 0 1px 1px 0; transform: rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(.3rem) rotate(-135deg); }
.faq .a { padding: 0 0 1.5rem; color: var(--ink); display: grid; gap: .7rem; }
.faq .a p { color: #33424a; }

/* misc */
.note { font-size: var(--s-xs); color: var(--muted); }
.pill { display: inline-block; font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; padding: .2rem .5rem; border-radius: 999px; }
.callout { border-left: 2px solid var(--brass); padding: .2rem 0 .2rem 1.2rem; }
.big-quote { font-family: var(--f-display); font-size: clamp(1.8rem, 1rem + 2.8vw, 3.1rem); line-height: 1.15; max-width: 26ch; text-wrap: balance; }
.big-quote em { color: var(--sea-ink); }
.sec.deep .big-quote em { color: var(--sea); }


.toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--deep); color: #fff; padding: .8rem 1.2rem; font-size: var(--s-sm); z-index: 95; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.people.p3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (max-width: 640px) {
  .util .wrap { padding-block: .45rem; font-size: .68rem; }
  .util .u-mail, .util .u-sep2 { display: none; }
  .hero-meta { gap: .3rem 1rem; }
  .hero-meta span + span::before { content: none; }
  .hero .wrap { padding-block: 4.5rem 2rem; }
}

/* =====================================================================
   MOTION LAYER
   Everything here is progressive: elements are only hidden when the
   page has the .motion class (JS on, reduced-motion off).
   ===================================================================== */
:root {
  --out: cubic-bezier(.23, 1, .32, 1);        /* strong ease-out: entrances */
  --inout: cubic-bezier(.77, 0, .175, 1);     /* on-screen movement */
  --head-h: 73px;
}
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease both; }
::view-transition-new(root) { animation: vt-in .42s var(--out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* press feedback on everything pressable */
.btn, .chip, .day, .dbtn, .lb-btn, .menu-btn, .stepper button, .room-pick { transition-property: transform, background-color, color, border-color, box-shadow; transition-duration: .16s; transition-timing-function: ease-out; }
.btn:active, .chip:active, .dbtn:active:not(:disabled), .lb-btn:active, .menu-btn:active, .stepper button:active { transform: scale(.97); }
.day:active { transform: translateY(-3px) scale(.98); }

/* ghost buttons fill from the bottom on hover */
.btn.ghost { position: relative; overflow: hidden; isolation: isolate; }
.btn.ghost::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .08; transform: scaleY(0); transform-origin: bottom; transition: transform .35s var(--out); z-index: -1; }
@media (hover: hover) and (pointer: fine) { .btn.ghost:hover::before { transform: scaleY(1); } .btn.ghost:hover { background: transparent; } }

/* text links in copy: underline draws in */
.note a, .faq a, .summary a, .plan-grid .muted a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .3s var(--out); }
@media (hover: hover) { .note a:hover, .faq a:hover, .summary a:hover { background-size: 0 1px; background-position: 100% 100%; } }

/* ---------- scroll progress ---------- */
.site-head { transition: background-color .35s ease, border-color .35s ease, color .35s ease; }
.progress-line { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wine); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- home: header floats over the hero ---------- */
body.home .site-head:not(.solid) { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,.16); }
body.home .site-head:not(.solid) .brand-mark { background: #fff; }
body.home .site-head:not(.solid) .brand-name small { color: rgba(255,255,255,.7); }
body.home .site-head:not(.solid) .nav a[aria-current="page"] { color: var(--sea); }
body.home .site-head:not(.solid) .menu-btn { border-color: rgba(255,255,255,.5); color: #fff; }
.brand-mark { transition: background-color .35s ease; }
body.home .hero { margin-top: calc(var(--head-h) * -1); }
body.home .hero .wrap { padding-top: calc(var(--head-h) + 5rem); }

/* ---------- hero load sequence ---------- */
.hero h1 .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero h1 .line > span { display: inline-block; }
.hero-strip { margin: 2.6rem 0 0; display: grid; grid-template-columns: repeat(4, auto) 1fr; border-top: 1px solid rgba(255,255,255,.22); }
.hero-strip > div { padding: 1rem 2.2rem 0 0; margin-right: 2.2rem; border-right: 1px solid rgba(255,255,255,.16); display: grid; gap: .3rem; }
.hero-strip > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; justify-self: end; text-align: right; }
.hero-strip dt { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: #a9cfd4; }
.hero-strip dd { margin: 0; font-family: var(--f-display); font-size: 1.55rem; line-height: 1.1; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 860px) {
  .hero-strip { grid-template-columns: repeat(2, 1fr); }
  .hero-strip > div { border-right: 0; margin-right: 0; padding-right: 0; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: .9rem; }
  .hero-strip > div:last-child { justify-self: start; text-align: left; grid-column: span 2; border-bottom: 0; }
}

.motion .hero h1 .line > span { transform: translateY(105%); animation: rise 1.1s var(--out) var(--d, 0s) forwards; }
.motion .hero-in { opacity: 0; transform: translateY(14px); animation: fadeup .9s var(--out) var(--d, 0s) forwards; }
.hero-img { will-change: transform; }
@keyframes rise { to { transform: none; } }
@keyframes fadeup { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.08); } to { transform: none; } }

/* ---------- headline word rise ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }
.motion [data-split] .w > span { transform: translateY(108%); transition: transform .95s var(--out); transition-delay: calc(var(--wi, 0) * 38ms); }
.motion [data-split].in .w > span { transform: none; }

/* ---------- block reveals ---------- */
.motion [data-rv] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--out), transform .9s var(--out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion [data-rv].in { opacity: 1; transform: none; }

/* ---------- image reveals: unclip upward with a counter-scale ---------- */
.motion [data-img] { clip-path: inset(100% 0 0 0); transform: scale(1.14); transition: clip-path 1.25s var(--inout), transform 1.6s var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
.motion [data-img].in { clip-path: inset(0 0 0 0); transform: none; }
.media, .duo, .strip > *, .room .pic, .person .pic, .tile, .nights figure { overflow: hidden; }
.duo .a, .duo .b { overflow: hidden; }

/* parallax target */
[data-par] { will-change: transform; }

/* ---------- luach entrance + panel swap ---------- */
.motion .luach[data-rv-list] li { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--out), transform .7s var(--out); transition-delay: calc(var(--i, 0) * 45ms); }
.motion .luach[data-rv-list].in li { opacity: 1; transform: none; }
.luach-panel [data-f] { transition: opacity .22s ease, filter .22s ease, transform .22s ease; }
.luach-panel.swap [data-f] { opacity: 0; filter: blur(3px); transform: translateY(4px); }
.day::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 40%); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
@media (hover: hover) { .day:hover::before { opacity: 1; } }

/* ---------- rooms: to-scale squares grow in ---------- */
.motion .area .sq { transform: scale(.15); transform-origin: 0 100%; transition: transform 1.1s var(--out) .25s; }
.motion .room.in .area .sq { transform: none; }

/* ---------- menu frame: incoming photo settles ---------- */
.menu-frame img { transform: scale(1.05); transition: opacity .45s ease, transform 1.2s var(--out); }
.menu-frame img.on { transform: none; }
.menu-frame .desc { transition: opacity .2s ease; }
.menu-frame .desc.swap { opacity: 0; }
.menu-item .n { transition: color .2s ease, transform .35s var(--out); display: inline-block; }
@media (hover: hover) { .menu-item:hover .n, .menu-item.on .n { transform: translateX(6px); } }

/* ---------- photos breathe on hover (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .media img, .tile img, .person .pic img, .strip img { transition: transform 1.1s var(--out), filter .4s ease; }
  .media:hover img, .tile:hover img, .person:hover .pic img, .strip > :hover,
  .motion .media:hover img.in, .motion .tile:hover img.in, .motion .person:hover .pic img.in, .motion .strip > .in:hover { transform: scale(1.035); transition-delay: 0s; }
  .person.stage:hover .pic img { filter: grayscale(.2) contrast(1.02); }
}
.strip > img { transition: transform 1.1s var(--out); }

/* ---------- marquee ---------- */






@keyframes mq { to { transform: translateX(-50%); } }

/* ---------- gallery: photos fade in as they load ---------- */
.motion .gallery img { opacity: 0; transition: opacity .6s ease, transform .6s var(--out); }
.motion .gallery img.ld { opacity: 1; }
.gallery button::after { content: "View"; position: absolute; right: .7rem; bottom: .7rem; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(15,42,51,.75); padding: .3rem .55rem; opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s var(--out); }
@media (hover: hover) { .gallery button:hover::after { opacity: 1; transform: none; } }
.lightbox { animation: lb-in .25s ease both; }
.lb-stage img { animation: lb-img .45s var(--out) both; }
@keyframes lb-in { from { opacity: 0; } }
@keyframes lb-img { from { opacity: 0; transform: scale(.97); } }

/* ---------- form: steps slide in, summary values flash ---------- */
.motion [data-step]:not([hidden]) { animation: step-in .45s var(--out) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } }
.summary dd, .summary .nights-big { transition: color .5s ease; }
.summary .flash { color: var(--sea) !important; transition: none; }

/* ---------- mobile menu: links cascade ---------- */
.motion .nav.open > a { animation: fadeup .5s var(--out) both; animation-delay: calc(var(--i, 0) * 45ms); opacity: 0; transform: translateY(10px); }

/* ---------- faq answers open smoothly ---------- */
.motion .faq details[open] .a { animation: fadeup .4s var(--out) both; opacity: 0; transform: translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  
  
  
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* =====================================================================
   MOBILE-FIRST REFINEMENTS
   ===================================================================== */
.swipe-hint, .rail-meta, .mbar { display: none; }

/* sticky quick-contact bar */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  grid-template-columns: 1fr 1fr 1.3fr; gap: 1px;
  background: rgba(255,255,255,.12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -10px 30px rgba(15,42,51,.18);
  transform: translateY(105%); transition: transform .45s var(--out);
}
.mbar.show { transform: none; }
.mbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 58px; background: var(--deep); color: #fff; text-decoration: none; font-size: .95rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color .15s ease; }
.mbar a:active { background: var(--deep-2); }
.mbar .mbar-cta { background: var(--wine); }
.mbar .mbar-cta:active { background: var(--wine-2); }

/* swipe rails */
.rail-meta { align-items: center; gap: .9rem; margin-top: 1rem; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; }
.rail-bar { flex: 1; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.rail-bar i { position: absolute; inset: 0; background: var(--wine); transform-origin: left; transform: scaleX(.2); transition: transform .15s linear; }
.sec.deep .rail-meta { color: #9db6ba; }
.sec.deep .rail-bar { background: rgba(255,255,255,.18); }
.sec.deep .rail-bar i { background: var(--sea); }
.rail-hint { transition: opacity .3s ease; }
.rail-meta.moved .rail-hint { opacity: 0; }

@media (max-width: 860px) {
  :root { --head-h: 65px; }
  .site-head .wrap { min-height: 64px; }
  .nav.open { inset: 64px 0 0 0; padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px)); }
  
  
  
  .mbar { display: grid; }
  body:has(.mbar) .foot .wrap { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  .sec { padding-block: clamp(3.5rem, 12vw, 5rem); }
  .sec-head { margin-bottom: 1.8rem; }
  .split, .split.rev { gap: 2.2rem; }
  .ph .wrap { min-height: 64vh; padding-block: 4rem 2.2rem; }
  .duo .b { margin-top: 38%; border-width: 6px; }
  .big-quote { font-size: 2rem; }
}

@media (max-width: 700px) {
  /* rails: chefs, performers, bars, royal nights */
  .rail {
    display: grid !important; grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: 76%; gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; grid-column: auto !important; }
  .rail-meta { display: flex; }
  .nights.rail { grid-auto-columns: 70%; }
  .nights.rail img, .nights.rail .w2 img { aspect-ratio: 4 / 5; }
  .tiles.rail { grid-auto-columns: 64%; }
  .people.rail .pic { aspect-ratio: 4 / 5; }

  /* luach: swipe hint + edge fade */
  .swipe-hint { display: flex; gap: .5rem; align-items: center; color: var(--muted); font-size: .68rem; letter-spacing: .12em; margin: 0 0 .8rem; }
  .motion .swipe-hint span { animation: nudge 1.8s var(--inout) 1.2s 3; display: inline-block; }
  @keyframes nudge { 50% { transform: translateX(6px); } }
  .luach-scroll { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); transition: -webkit-mask-image .3s; }
  .luach-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
  .luach { grid-template-columns: repeat(13, 78px); min-width: 0; width: max-content; }
  .day { min-height: 188px; padding: .75rem .6rem; }
  .day .num { font-size: 2.2rem; }
  .luach-head h2 { font-size: 2rem; }
  .legend { gap: .5rem 1rem; }

  /* hero */
  .hero h1 { font-size: clamp(2.9rem, 13vw, 4rem); }
  .hero-foot { margin-top: 1.4rem; gap: 1.4rem; }
  .hero-foot p { font-size: var(--s-md); }
  .hero-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; min-height: 50px; }
  .hero-strip { margin-top: 1.8rem; }
  .hero-strip dd { font-size: 1.3rem; }

  /* touch ergonomics */
  .chip, .btn, .lb-btn { min-height: 44px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; padding-bottom: 2px; }
  .filters::-webkit-scrollbar { display: none; }
  .filters .chip { flex: none; }
  select, input, textarea { font-size: 16px !important; } /* stops iOS zoom-on-focus */
  .contents a { font-size: 1.3rem; padding-block: 1.05rem; }
  .facts b { font-size: 1.7rem; }
  .facts > div:nth-child(odd) { padding-right: 1rem; }
  .facts > div:nth-child(even) { padding-left: 1rem; }
  .strip img { min-height: 150px; }
  .menu-item .n { font-size: 1.55rem; }
  .people:not(.rail) { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .faq summary { font-size: 1.25rem; }
  .cta-band .phone { font-size: 1.8rem; }
  .gallery { columns: 2; column-gap: 6px; }
  .gallery button { margin-bottom: 6px; }

  /* plan page: summary first, compact */
  .plan-grid { display: flex; flex-direction: column; }
  .plan-grid .summary { order: -1; position: static; }
  .summary .card { padding: 1.1rem 1.2rem; grid-template-columns: auto 1fr; align-items: center; gap: .4rem 1.2rem; }
  .summary .card > .eyebrow { grid-column: 1 / -1; }
  .summary .nights-big { font-size: 2.6rem; }
  .summary dl { gap: .3rem .8rem; font-size: .85rem; }
  .summary > .note { display: none; }
  .form-nav { position: sticky; bottom: 0; z-index: 5; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); }
  .form-nav .btn { flex: 1; }
  .form-nav span:empty { display: none; }
  .fs legend { font-size: 1.7rem; }
}
body:has(.nav.open) .mbar { transform: translateY(105%); }
.demo-bar { background: #ecdcbc; color: var(--deep); font-size: .8rem; line-height: 1.4; text-align: center; padding: .55rem var(--gutter); }
.demo-bar a { color: var(--wine); font-weight: 500; }
.demo-form-note { margin: 0; padding: .8rem clamp(1.4rem, 3vw, 2.4rem); background: #f6eedf; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--deep); max-width: none; }

/* =====================================================================
   PHOTO LOADING — nothing pops: late photos fade, reveals wait for decode
   ===================================================================== */
.motion img.fade-ready:not(.ld) { opacity: 0; }
.motion img.fade-ready.ld { animation: imgfade .9s ease both; }
@keyframes imgfade { from { opacity: 0; } to { opacity: 1; } }
.motion .ph > img:not(.ld) { opacity: 0; }
.motion .ph > img.ld { animation: phin 2.4s var(--out) both; }
@keyframes phin { from { opacity: 0; transform: scale(1.08); } 35% { opacity: 1; } to { opacity: 1; transform: none; } }
/* tone the empty frame so a loading photo never sits on a white hole */
.media > img, .duo .a, .duo .b, .strip > *, .room .pic, .person .pic, .tile > img, .nights figure, .gallery button { background-color: #e4e0d6; }
.sec.deep .media > img, .sec.deep .duo .a, .sec.deep .duo .b, .sec.deep .strip > *, .nights figure { background-color: #183943; }

/* =====================================================================
   MONTAGE — the hero as a silent brand film
   ===================================================================== */
.hero-img { background: var(--deep); }
.shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s cubic-bezier(.4, 0, .2, 1); overflow: hidden; }
.shot.on { opacity: 1; }
.shot img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.motion .shot img:not(.ld) { opacity: 0; }
.motion .shot img.ld { transition: opacity 1.2s ease; }
.shot.play.kb-in img    { animation: kbIn 9.5s cubic-bezier(.33, 0, .5, 1) both; }
.shot.play.kb-out img   { animation: kbOut 9.5s cubic-bezier(.33, 0, .5, 1) both; }
.shot.play.kb-left img  { animation: kbLeft 9.5s cubic-bezier(.4, 0, .6, 1) both; }
.shot.play.kb-right img { animation: kbRight 9.5s cubic-bezier(.4, 0, .6, 1) both; }
.shot.play.kb-up img    { animation: kbUp 9.5s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes kbIn    { from { transform: scale(1.02); } to { transform: scale(1.14); } }
@keyframes kbOut   { from { transform: scale(1.16); } to { transform: scale(1.03); } }
@keyframes kbLeft  { from { transform: scale(1.14) translateX(3.2%); } to { transform: scale(1.14) translateX(-3.2%); } }
@keyframes kbRight { from { transform: scale(1.14) translateX(-3.2%); } to { transform: scale(1.14) translateX(3.2%); } }
@keyframes kbUp    { from { transform: scale(1.14) translateY(3%); } to { transform: scale(1.14) translateY(-2.5%); } }
.hero-img.paused .shot img { animation-play-state: paused !important; }

.reel { position: absolute; z-index: 2; top: calc(var(--head-h) + 1.4rem); right: var(--gutter); display: flex; align-items: center; gap: .9rem; color: #fff; font-family: var(--f-label); font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; }
.reel-cap { min-width: 13rem; text-align: right; transition: opacity .4s ease, transform .4s ease; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.reel-cap.swap { opacity: 0; transform: translateY(4px); }



@keyframes reelbar { to { transform: scaleX(1); } }
.reel-n { font-variant-numeric: tabular-nums; opacity: .7; }



.i-pause { width: 8px; height: 9px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; }
.reel.paused .i-pause { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; margin-left: 2px; }
.reel:not(.live) { display: none; }
@media (max-width: 700px) {
  .reel { top: auto; bottom: auto; top: calc(var(--head-h) + 1rem); gap: .6rem; }
  .reel-cap { min-width: 0; max-width: 46vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .reel-n { display: none; }
}

/* =====================================================================
   LUXURY PASS
   Labels move from typewriter mono to spaced capitals; champagne gold
   takes over from wine for ornament; wine is kept for Yom Tov only.
   ===================================================================== */
:root {
  --f-label: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-mono: var(--f-label);
  --gold: #a88a50;
  --gold-soft: #d8c29a;
  --ivory: #f7f4ec;
  --shell: #f4f3ee;
  --paper: #fbfaf6;
}
::selection { background: var(--deep); color: var(--ivory); }
body {
  background-color: var(--shell);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.16 0 0 0 0 0.2 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* labels: spaced capitals, never typewriter */
.eyebrow, .mono, .legend, .day .dow, .day .mon, .cap, .room .view, .room dt, .person .role, .bill .role, .steps li, .summary dt,
.hero-meta, .hero-strip dt, .subnav a, .foot h4, .foot-bot, .util, .menu-item .c, .menu-item .tag, .contents a span, .lb-top, .lb-btn,
.progress, .linkbtn, .rail-meta, .nights figcaption, .swipe-hint, .menu-btn, .pill, .area .t, .luach-panel .omer, .dbtn .d1 {
  font-family: var(--f-label); font-weight: 500;
}
.eyebrow { font-size: .68rem; letter-spacing: .3em; color: var(--gold); gap: 1rem; align-items: center; }
.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: .75; flex: none; }
.eyebrow .heb { color: var(--gold); opacity: .85; font-size: 1.05rem; }
.sec.deep .eyebrow, .ph .eyebrow, .cta-band .eyebrow { color: var(--gold-soft); }
.ph .eyebrow .heb, .sec.deep .eyebrow .heb { color: var(--gold-soft); }
.mono { letter-spacing: .2em; font-size: .66rem; }

/* headings: more air, finer tracking */
h1, h2, h3 { letter-spacing: -.018em; }
h2 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.6rem); line-height: 1.02; }
h1 em, h2 em, h3 em, .big-quote em { color: var(--gold); }
.sec.deep h2 em, .ph h1 em, .cta-band h2 em, .hero h1 .ten { color: var(--gold-soft); }
.lede { font-size: clamp(1.15rem, 1rem + .5vw, 1.35rem); line-height: 1.6; color: #2b3940; }
.sec { padding-block: clamp(5rem, 11vw, 10rem); }
.sec.tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
.sec-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }

/* utility bar & header */
.util { background: #0b2229; color: #b9cdd0; font-size: .62rem; letter-spacing: .22em; }
.util .count b { color: var(--gold-soft); font-weight: 500; }
.util a:hover { color: var(--gold-soft); }
.brand-name { font-size: 1.45rem; }
.brand-name small { letter-spacing: .32em; font-size: .56rem; font-family: var(--f-label); }
.nav { gap: 2.2rem; }
.nav a { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; }
.nav a::after { background: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); }
.progress-line { background: var(--gold); height: 1px; }

/* buttons: quiet, tailored */
.btn { background: var(--deep); color: var(--ivory); font-family: var(--f-label); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; padding: 1.1rem 1.9rem; border-radius: 0; font-weight: 500; }
.btn:hover { background: #163c47; }
.btn.ghost { color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn.light, .hero .btn:not(.ghost), .cta-band .btn:not(.ghost) { background: var(--ivory); color: var(--deep); }
.btn.light:hover, .hero .btn:not(.ghost):hover, .cta-band .btn:not(.ghost):hover { background: #fff; }
.hero .btn.ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.room-pick { color: var(--deep); text-decoration-color: var(--gold); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }

/* hero: full screen, cinematic */
.hero .wrap { min-height: max(620px, 100svh); }
.hero::before {
  background:
    linear-gradient(180deg, rgba(8,24,30,.55) 0%, rgba(8,24,30,0) 26%),
    linear-gradient(0deg, rgba(8,24,30,.92) 0%, rgba(8,24,30,.6) 36%, rgba(8,24,30,.12) 64%, rgba(8,24,30,0) 80%);
}
.hero-meta { font-size: .68rem; letter-spacing: .28em; color: var(--gold-soft); }
.hero h1 { font-weight: 400; letter-spacing: -.03em; }
.hero-strip { border-top-color: rgba(216,194,154,.35); }
.hero-strip > div { border-right-color: rgba(216,194,154,.22); }
.hero-strip dt { color: var(--gold-soft); letter-spacing: .26em; font-size: .6rem; }

/* page headers */
.ph .wrap { min-height: clamp(440px, 70vh, 680px); }
.ph::before { background: linear-gradient(0deg, rgba(8,24,30,.9) 0%, rgba(8,24,30,.45) 50%, rgba(8,24,30,.2) 100%); }
.subnav { background: rgba(251,250,246,.96); }
.subnav a { font-size: .64rem; letter-spacing: .24em; }
.subnav a:hover, .subnav a.on { border-bottom-color: var(--gold); }

/* the luach keeps wine for Yom Tov; selection ring becomes gold */
.day[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--shell), 0 0 0 3px var(--gold); }
.day .dow, .day .mon { letter-spacing: .2em; font-size: .6rem; }
.luach-panel { border-color: rgba(168,138,80,.3); }
.luach-panel li::before { background: var(--gold); }
.legend { font-size: .6rem; letter-spacing: .2em; }

/* lists, facts, contents */
.contents a { font-size: 1.6rem; }
.contents a:hover { color: var(--gold); }
.contents a span { letter-spacing: .22em; font-size: .6rem; }
.facts b { font-size: 2.6rem; font-weight: 400; }
.facts span { font-size: .9rem; }
.ticks li::before { border-color: var(--gold); width: .45rem; height: .45rem; }
.callout { border-left-color: var(--gold); }
.taglist li { border-color: rgba(168,138,80,.45); font-size: .85rem; letter-spacing: .02em; padding: .45rem 1rem; }
.sec.deep .taglist li { border-color: rgba(216,194,154,.4); }
.chip { font-size: .8rem; letter-spacing: .04em; }
.chip[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--ivory); }
.menu-item .n { font-size: 2rem; }
.menu-item:hover .n, .menu-item.on .n { color: var(--gold); }
.menu-item .dots { border-bottom-color: rgba(168,138,80,.5); }
.menu-item .c { letter-spacing: .2em; font-size: .6rem; }
.room h3 { font-size: 1.75rem; }
.room .view { color: var(--gold); letter-spacing: .2em; font-size: .6rem; }
.area .sq { background: var(--gold-soft); opacity: .7; }
.person .role, .bill .role { color: var(--gold); letter-spacing: .22em; font-size: .6rem; }
.sec.deep .person .role { color: var(--gold-soft); }
.big-quote { font-size: clamp(2rem, 1.1rem + 3vw, 3.4rem); line-height: 1.12; }
.cap { letter-spacing: .2em; font-size: .6rem; }

/* gilt frame on the offset photo */
.duo .b { border-color: var(--shell); box-shadow: 0 30px 60px -30px rgba(8,24,30,.45); }
.sec.paper .duo .b { border-color: var(--paper); }

/* the RP monogram as an ornament */
.orn { display: flex; align-items: center; justify-content: center; gap: 1.4rem; color: var(--gold); }
.orn::before, .orn::after { content: ""; height: 1px; width: min(18vw, 140px); background: linear-gradient(90deg, transparent, currentColor); opacity: .6; }
.orn::after { transform: scaleX(-1); }
.orn i { width: 22px; height: 30px; background: currentColor; -webkit-mask: url(../img/rp-mark.png) center / contain no-repeat; mask: url(../img/rp-mark.png) center / contain no-repeat; }
.sec.deep .orn, .cta-band .orn, .foot .orn { color: var(--gold-soft); }

/* call-to-action band: night photograph, not a flat color */
.cta-band { position: relative; isolation: isolate; background: var(--deep) url(../img/night-terrace.webp) center 40% / cover no-repeat; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,24,30,.95) 0%, rgba(8,24,30,.82) 55%, rgba(8,24,30,.6) 100%); }
.cta-band .wrap { padding-block: clamp(5rem, 10vw, 9rem); }
.cta-band p { color: #cbd9db; }
.cta-band .phone { font-size: 2.4rem; color: var(--ivory); }
.cta-band .mono { color: var(--gold-soft) !important; }

/* footer */
.foot { background: #0b2229; }
.foot h4 { color: var(--gold-soft); letter-spacing: .26em; font-size: .6rem; }
.foot .brand-mark { background: var(--gold-soft); }
.foot a:hover { color: var(--gold-soft); }
.foot-bot { letter-spacing: .18em; font-size: .58rem; }

/* marquee in gold italic */



/* forms */
.steps li.on { box-shadow: inset 0 -2px 0 var(--gold); }
.steps li::before { color: var(--gold); }
.opt input:checked + span { box-shadow: inset 0 0 0 1px var(--deep); background: #f1efe7; }
.summary .card { background: var(--deep); }
.summary dt { color: var(--gold-soft); }
.progress .bar i { background: var(--gold); }

/* mobile bar */
.mbar .mbar-cta { background: var(--gold); color: #0b2229; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.mbar .mbar-cta:active { background: #94784a; }
.mbar a { font-size: .82rem; letter-spacing: .06em; }

@media (max-width: 700px) {
  h2 { font-size: clamp(2.3rem, 9vw, 3rem); }
  .contents a { font-size: 1.35rem; }
  .btn { padding: 1rem 1.4rem; }
  .hero .wrap { min-height: 100svh; }
  .eyebrow::before { width: 1.6rem; }
}
.hero::before {
  background:
    linear-gradient(180deg, rgba(8,24,30,.6) 0%, rgba(8,24,30,0) 28%),
    linear-gradient(0deg, rgba(8,24,30,.94) 0%, rgba(8,24,30,.72) 40%, rgba(8,24,30,.3) 70%, rgba(8,24,30,.1) 100%),
    linear-gradient(90deg, rgba(8,24,30,.45) 0%, rgba(8,24,30,0) 60%);
}
.hero-meta, .hero h1, .hero-foot p { text-shadow: 0 2px 24px rgba(8,24,30,.45); }
.orn.left { justify-content: flex-start; } .orn.left::before { display: none; }

/* =====================================================================
   NEW: Royal Stories · kids ladder · kids finder · headliners
   ===================================================================== */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- stories row (sits right under the hero, in the thumb zone) ---------- */
.stories { background: var(--paper); border-bottom: 1px solid rgba(168,138,80,.22); }
.stories .wrap { display: flex; align-items: center; gap: 2.5rem; padding-block: 1.6rem; }
.stories-lbl { margin: 0; display: grid; gap: .2rem; flex: none; }
.stories-lbl span { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; }
.stories-lbl small { font-family: var(--f-label); font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.stories-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.6rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.stories-row::-webkit-scrollbar { display: none; }
.story-btn { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; display: grid; justify-items: center; gap: .55rem; scroll-snap-align: start; color: var(--ink); -webkit-tap-highlight-color: transparent; }
.story-btn .ring { width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: conic-gradient(from 210deg, #d8c29a, #a88a50, #e9dcc0, #a88a50, #d8c29a); transition: transform .2s var(--out); }
.story-btn .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); background: #e4e0d6; }
.story-btn.seen .ring { background: rgba(20,33,42,.18); }
.story-btn .lbl { font-family: var(--f-label); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500; }
.story-btn:active .ring { transform: scale(.94); }
@media (hover: hover) { .story-btn:hover .ring { transform: scale(1.05); } }
@media (max-width: 700px) {
  .stories .wrap { padding-block: 1.1rem; gap: 0; display: block; }
  .stories-lbl { display: none; }
  .stories-row { gap: 1rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .story-btn .ring { width: 66px; height: 66px; }
}

/* ---------- story viewer ---------- */
.sv { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; gap: 1.5rem; background: rgba(5,12,15,.92); opacity: 0; transition: opacity .25s ease; }
.sv.open { opacity: 1; }
.sv-bg { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.sv-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) saturate(1.2); opacity: .45; transform: scale(1.2); }
.sv-card { position: relative; width: min(420px, 92vw); aspect-ratio: 9 / 16; max-height: 92vh; border-radius: 14px; overflow: hidden; background: #0b2229; box-shadow: 0 40px 80px rgba(0,0,0,.5); transform: scale(.96); transition: transform .3s var(--out); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.sv.open .sv-card { transform: none; }
.sv-media { position: absolute; inset: 0; }
.sv-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; }
.sv-media img.on { opacity: 1; animation: svzoom 6s linear both; }
@keyframes svzoom { from { transform: scale(1.06); } to { transform: scale(1); } }
.sv.paused .sv-media img.on { animation-play-state: paused; }
.sv-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, transparent 22%, transparent 55%, rgba(5,15,19,.85) 100%); }
.sv-bars { position: absolute; z-index: 3; top: calc(.8rem + env(safe-area-inset-top, 0px)); left: .8rem; right: .8rem; display: flex; gap: 4px; }
.sv-bars span { flex: 1; height: 2px; background: rgba(255,255,255,.3); border-radius: 2px; overflow: hidden; }
.sv-bars i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(0); }
.sv-head { position: absolute; z-index: 4; top: calc(1.5rem + env(safe-area-inset-top, 0px)); left: .9rem; right: .6rem; display: flex; align-items: center; gap: .65rem; color: #fff; }
.sv-head > div { margin-right: auto; display: grid; line-height: 1.2; }
.sv-head b { font-family: var(--f-display); font-weight: 400; font-size: 1.15rem; }
.sv-head small { font-family: var(--f-label); font-size: .55rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.sv-mark { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-soft); -webkit-mask: url(../img/rp-mark.png) center / 62% no-repeat; mask: url(../img/rp-mark.png) center / 62% no-repeat; box-shadow: inset 0 0 0 30px var(--gold-soft); }
.sv-icon { width: 38px; height: 38px; display: grid; place-items: center; background: none; border: 0; color: #fff; font-size: 1.6rem; cursor: pointer; line-height: 1; }
.sv.paused .sv-head .i-pause { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.sv-tap { position: absolute; z-index: 2; top: 0; bottom: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-tap.prev { left: 0; width: 34%; }
.sv-tap.next { right: 0; width: 66%; }
.sv-foot { position: absolute; z-index: 3; left: 1.2rem; right: 1.2rem; bottom: calc(1.4rem + env(safe-area-inset-bottom, 0px)); display: grid; gap: .9rem; justify-items: start; pointer-events: none; }
.sv-cap { margin: 0; color: #fff; font-family: var(--f-display); font-size: 1.6rem; line-height: 1.15; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
.sv-link { pointer-events: auto; position: relative; z-index: 5; background: var(--ivory); color: var(--deep); text-decoration: none; font-family: var(--f-label); font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; padding: .85rem 1.2rem; font-weight: 500; }
.sv-nav { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: #fff; font-size: 1.6rem; cursor: pointer; display: grid; place-items: center; line-height: 1; transition: background-color .2s ease; }
.sv-nav:hover { background: rgba(255,255,255,.16); }
@media (max-width: 700px) {
  .sv { background: #000; }
  .sv-card { width: 100vw; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
  .sv-nav, .sv-bg { display: none; }
}

/* ---------- kids age ladder: a growth chart, shortest to tallest ---------- */
.ladder { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end; min-height: 300px; }
.ladder li { display: grid; grid-template-rows: 1fr auto auto auto auto; height: 300px; align-items: end; }
.ladder .bar { align-self: end; height: var(--h); min-height: 40px; border-top: 2px solid currentColor; background: linear-gradient(180deg, color-mix(in srgb, currentColor 18%, transparent), color-mix(in srgb, currentColor 4%, transparent)); transform-origin: bottom; }
.ladder b { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; line-height: 1; margin-top: .8rem; color: var(--ink); font-variant-numeric: lining-nums; }
.ladder small { font-family: var(--f-label); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.ladder .prog { margin-top: .55rem; font-family: var(--f-label); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.ladder .grp { font-size: .82rem; color: var(--muted); }
.ladder .dc { color: #5a9aa3; } .ladder .kc { color: var(--gold); } .ladder .tn { color: var(--deep); }
.motion .ladder .bar { transform: scaleY(.08); transition: transform 1.1s var(--out); transition-delay: calc(var(--i, 0) * 70ms + 150ms); }
.motion .ladder.in .bar, .motion .ladder li.in .bar { transform: none; }
@media (max-width: 700px) {
  .ladder { grid-template-columns: 1fr; min-height: 0; gap: 0; border-top: 1px solid var(--line); }
  .ladder li { height: auto; grid-template-columns: 4.2rem 1fr; grid-template-rows: auto auto; column-gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--line); align-items: center; position: relative; }
  .ladder .bar { position: absolute; left: 0; top: 0; bottom: 0; height: auto; width: var(--h); min-height: 0; border-top: 0; border-left: 2px solid currentColor; opacity: .6; z-index: -1; transform-origin: left; }
  .motion .ladder .bar { transform: scaleX(.05); }
  .ladder b { grid-row: span 2; margin: 0 0 0 .7rem; font-size: 1.5rem; }
  .ladder small { display: none; }
  .ladder .prog { margin: 0; }
}

/* ---------- headliners teaser (home) ---------- */
.hl-teaser { position: relative; overflow: hidden; color: #f3eee2; background: radial-gradient(60% 80% at 75% 60%, #24414a 0%, #0b1a1f 60%, #070d10 100%); }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: 2rem; padding-top: clamp(4.5rem, 9vw, 8rem); }
.hl-grid .stack-lg { padding-bottom: clamp(4.5rem, 9vw, 8rem); }
.hl-names { display: grid; font-size: clamp(3rem, 1.6rem + 5.4vw, 6.4rem); line-height: .98; letter-spacing: -.03em; }
.hl-names em { color: var(--gold-soft); }
.hl-teaser .lede { color: #c7d6d8; }
.hl-teaser .eyebrow { color: var(--gold-soft); }
.hl-star { margin: 0; align-self: end; display: flex; justify-content: center; position: relative; }
.hl-star::before { content: ""; position: absolute; inset: 10% 5% 0; background: radial-gradient(closest-side, rgba(216,194,154,.35), transparent); filter: blur(10px); }
.hl-star img { position: relative; width: min(100%, 440px); height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.45)); }
@media (max-width: 860px) {
  .hl-grid { grid-template-columns: 1fr; }
  .hl-grid .stack-lg { padding-bottom: 0; }
  .hl-star img { width: min(78%, 340px); }
}

/* ---------- kids finder ---------- */
.finder { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.finder-in { display: grid; gap: 1rem; position: sticky; top: 130px; }
.kid-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.kid-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n sel x" "seg seg seg"; align-items: center; gap: .55rem .8rem; padding: .9rem 1rem; background: #fff; border: 1px solid var(--line); }
.kid-n { grid-area: n; font-family: var(--f-label); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.kid-row select { grid-area: sel; width: 100%; border: 1px solid var(--line-strong); background: var(--paper); padding: .6rem .7rem; font-size: 1rem; border-radius: 0; }
.kid-x { grid-area: x; width: 36px; height: 36px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.kid-x:disabled { opacity: .25; cursor: default; }
.seg { grid-area: seg; display: inline-grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-strong); justify-self: start; }
.seg button { border: 0; background: none; padding: .45rem 1.1rem; cursor: pointer; font-size: .85rem; }
.seg button[aria-pressed="true"] { background: var(--deep); color: var(--ivory); }
.add-kid { justify-self: start; background: none; border: 1px dashed var(--gold); color: var(--deep); padding: .75rem 1.2rem; cursor: pointer; font-family: var(--f-label); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; }
.add-kid:hover { background: rgba(168,138,80,.08); }
.finder-out { display: grid; gap: 1.2rem; justify-items: start; }
.finder-sum { margin: 0; font-family: var(--f-display); font-size: 1.45rem; line-height: 1.25; }
.kid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1rem; width: 100%; }
.kid-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid currentColor; padding: 1.3rem 1.3rem 1.2rem; display: grid; gap: .9rem; align-content: start; color: var(--gold); }
.kid-card.dc { color: #5a9aa3; } .kid-card.tn { color: var(--deep); }
.kid-card header { display: grid; gap: .25rem; color: var(--ink); }
.kc-who { font-family: var(--f-label); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.kid-card h3 { font-size: 1.65rem; }
.kc-group { font-size: .92rem; color: var(--ink); font-weight: 500; }
.kc-staff { list-style: none; margin: 0; padding: .8rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .45rem; color: var(--ink); }
.kc-staff li { display: grid; line-height: 1.3; }
.kc-staff b { font-weight: 500; font-size: .95rem; }
.kc-staff span { font-size: .8rem; color: var(--muted); }
.kc-day { margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.5; }
.kc-day span { display: block; font-family: var(--f-label); font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.kc-night { margin: 0; font-size: .8rem; color: var(--muted); font-style: italic; }
@media (max-width: 860px) { .finder { grid-template-columns: 1fr; } .finder-in { position: static; } }

/* ---------- headliners page ---------- */
.stage-hero { position: relative; overflow: hidden; color: #f3eee2; background: #070b0d; isolation: isolate; }
body:has(.stage-hero) .site-head:not(.solid) { }
.stage-glow { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.stage-glow i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(60px); opacity: .55; }
.stage-glow i:first-child { right: -18vmax; top: -10vmax; background: radial-gradient(closest-side, rgba(168,138,80,.55), transparent); }
.stage-glow i:last-child { left: -25vmax; bottom: -35vmax; background: radial-gradient(closest-side, rgba(46,127,134,.45), transparent); }
.motion .stage-glow i:first-child { animation: drift 18s var(--inout) infinite alternate; }
.motion .stage-glow i:last-child { animation: drift 22s var(--inout) infinite alternate-reverse; }
@keyframes drift { to { transform: translate(-6vmax, 4vmax) scale(1.08); } }
.stage-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; gap: 2rem; min-height: clamp(560px, 88vh, 900px); padding-top: clamp(3.5rem, 7vw, 6rem); }
.stage-copy { padding-bottom: clamp(3.5rem, 8vw, 7rem); }
.stage-copy .eyebrow { color: var(--gold-soft); }
.stage-copy .lede { color: #c9d5d6; max-width: 38ch; }
.star-name { display: grid; font-size: clamp(4.2rem, 2rem + 10vw, 10.5rem); line-height: .88; letter-spacing: -.045em; }
.star-name em { color: var(--gold-soft); padding-left: .35em; }
.stage-star { margin: 0; align-self: end; display: flex; justify-content: center; }
.stage-star img { width: min(100%, 560px); height: auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.motion .stage-star img { animation: rise-in 1.4s var(--out) .2s both; }
@keyframes rise-in { from { opacity: 0; transform: translateY(40px); } }
@media (max-width: 860px) {
  .stage-grid { grid-template-columns: 1fr; min-height: 0; padding-top: 3rem; }
  .stage-copy { padding-bottom: 0; }
  .stage-star img { width: min(80%, 360px); }
}

.festival { position: relative; overflow: hidden; color: #f3eee2; background: #0a0612; isolation: isolate; }
.fest-bg { position: absolute; inset: 0; z-index: -1; }
.fest-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: saturate(1.1); }
.fest-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,6,18,.75) 0%, rgba(10,6,18,.3) 40%, rgba(10,6,18,.95) 100%); }
.fest-wrap { display: grid; justify-items: center; text-align: center; padding-top: clamp(4.5rem, 9vw, 8rem); }
.fest-head { display: grid; justify-items: center; gap: .8rem; }
.fest-head .eyebrow { color: var(--gold-soft); }
.fest-head .eyebrow::before { display: none; }
.fest-head h2 { font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem); line-height: .95; }
.fest-head h2 em { color: var(--gold-soft); }
.fest-tag { margin: 0; font-family: var(--f-label); font-size: .8rem; letter-spacing: .5em; text-transform: uppercase; color: #e9d9f3; }
.fest-acts { display: flex; justify-content: center; align-items: flex-end; gap: clamp(0rem, 3vw, 3rem); margin-top: 2.5rem; width: 100%; }
.fa { margin: 0; position: relative; display: grid; justify-items: center; }
.fa img { height: clamp(260px, 42vw, 560px); width: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.fa figcaption { position: absolute; bottom: 8%; font-family: var(--f-display); font-size: clamp(2rem, 1rem + 3vw, 3.6rem); text-shadow: 0 4px 30px rgba(0,0,0,.8); white-space: nowrap; }
.fest-support { margin: 0; padding: 2rem 0 clamp(3.5rem, 7vw, 6rem); display: flex; gap: 1.2rem 1.6rem; flex-wrap: wrap; justify-content: center; align-items: center; font-family: var(--f-label); text-transform: uppercase; letter-spacing: .3em; font-size: .78rem; font-weight: 500; border-top: 1px solid rgba(216,194,154,.3); width: min(100%, 720px); max-width: none; }
.fest-support i { color: var(--gold-soft); font-style: normal; font-size: .7rem; letter-spacing: 0; }

.acts-sec .acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 1.6rem; }
.act { display: grid; gap: .45rem; justify-items: start; }
.act .plinth { width: 100%; aspect-ratio: 4 / 4.4; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; background: radial-gradient(70% 60% at 50% 100%, rgba(216,194,154,.28), transparent 70%), linear-gradient(180deg, #13303a, #0c2129); border-bottom: 1px solid rgba(216,194,154,.4); }
.act .plinth img { height: 94%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; transition: transform .8s var(--out); }
@media (hover: hover) { .act:hover .plinth img { transform: translateY(-6px) scale(1.02); } }
.act .role { margin-top: .5rem; font-family: var(--f-label); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-soft); }
.act h3 { font-size: 1.7rem; color: #f3eee2; }
.ny-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
@media (max-width: 860px) { .ny-grid { grid-template-columns: 1fr; } .acts-sec .acts:not(.rail) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .acts.rail { grid-auto-columns: 70%; } .fa img { height: clamp(220px, 62vw, 340px); } }
/* review fixes */
.menu-item .tag { color: var(--gold); border-color: rgba(168,138,80,.6); }
.hl-teaser { margin-top: -1px; }
@media (max-width: 860px) {
  .menu-item.on .n { color: var(--ink); transform: none; }
}
@media (max-width: 700px) {
  .menu-list.rail { grid-auto-columns: 78%; }
  .menu-list.rail li { border-bottom: 0; }
  .menu-list.rail .menu-item { display: grid; grid-template-columns: 1fr; gap: .25rem; padding: 0; }
  .menu-list.rail .thumb { order: -1; margin: 0 0 .8rem; aspect-ratio: 4 / 3; }
  .ladder li { grid-template-columns: 5.4rem 1fr; grid-template-areas: "age prog" "unit grp"; row-gap: .1rem; }
  .ladder b { grid-area: age; grid-row: auto; white-space: nowrap; font-size: 1.45rem; margin-left: .7rem; }
  .ladder small { display: block; grid-area: unit; margin-left: .7rem; font-size: .52rem; }
  .ladder .prog { grid-area: prog; }
  .ladder .grp { grid-area: grp; }
}
.eyebrow { flex-wrap: nowrap; }
.eyebrow::before { align-self: center; }
@media (max-width: 700px) {
  .fest-acts { gap: .5rem; align-items: flex-end; }
  .fa { flex: 1 1 0; min-width: 0; }
  .fa img { height: auto; width: 100%; max-height: 300px; object-fit: contain; object-position: bottom; }
  .fa.matt img { max-height: 260px; }
  .fa figcaption { position: static; font-size: 1.7rem; margin-top: .4rem; }
  .fest-support { font-size: .66rem; letter-spacing: .24em; }
}
/* header: never wrap; collapse to the menu below 1280px */
.brand-name, .nav a, .site-head .btn, .menu-btn { white-space: nowrap; }
@media (max-width: 1279px) {
  .nav { display: none; }
  .menu-btn { display: inline-flex; }
  .site-head > .wrap > .btn { display: none; }
  .nav.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; left: 0; right: 0; bottom: 0; background: var(--shell);
    padding: 1rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px)); overflow: auto; z-index: 39;
  }
  .nav.open a { font-family: var(--f-display); font-size: 2rem; letter-spacing: -.01em; text-transform: none; padding-block: .7rem; border-bottom: 1px solid var(--line); }
  .nav.open a::after { display: none; }
  
  
  
}
@media (min-width: 1280px) and (max-width: 1440px) { .nav { gap: 1.6rem; } }
.site-head { transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.site-head.solid { box-shadow: 0 10px 30px -18px rgba(8,24,30,.25); }

/* =====================================================================
   HEADER: every page always visible, no menu button
   ≥1280px  one row:  logo · links · inquiry button
   <1280px  two rows: logo (+ button on tablets) / a swipeable row of links
   ===================================================================== */
.menu-btn { display: none !important; }
.site-head { transition: transform .35s var(--out), background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.subnav { top: calc(var(--head-vis, var(--head-h)) + env(safe-area-inset-top, 0px)); transition: top .35s var(--out); }
[id] { scroll-margin-top: calc(var(--head-h) + 70px); }

@media (max-width: 1279px) {
  .site-head .wrap { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-top: .7rem; }
  .brand { margin-right: auto; padding-bottom: .6rem; }
  .site-head > .wrap > .btn { display: inline-flex; padding: .8rem 1.2rem; margin-bottom: .6rem; }
  .nav {
    display: flex !important; order: 3; flex: 0 0 calc(100% + var(--gutter) * 2);
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
    gap: 2rem; justify-content: safe center; align-items: stretch;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    border-top: 1px solid var(--line);
    position: static; inset: auto; background: none; z-index: auto;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: none; display: flex; align-items: center; min-height: 46px; padding-block: 0; font-size: .64rem; letter-spacing: .2em; }
  .nav a::after { bottom: -1px; height: 2px; }
  body.home .site-head:not(.solid) .nav { border-top-color: rgba(255,255,255,.18); }
}
@media (max-width: 700px) {
  .site-head > .wrap > .btn { display: none; }   /* the bottom bar carries Inquire on phones */
  .brand { padding-bottom: .55rem; }
  .brand-name { font-size: 1.3rem; }
  .nav { justify-content: flex-start; gap: 1.5rem;
    -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .nav.at-end { -webkit-mask-image: none; mask-image: none; }
  .nav a { font-size: .62rem; letter-spacing: .18em; }
}
@media (max-width: 700px) {
  .nav { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 86%, transparent); }
  .nav.at-start { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); }
  .nav.at-end { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
  .nav.at-start.at-end { -webkit-mask-image: none; mask-image: none; }
}

/* =====================================================================
   CONSISTENCY SYSTEM (Royal)
   One section template, one card, one color rhythm:
   dark only at the top (page hero) and bottom (sign-up band, footer);
   everything between sits on the same light ground, divided by a hairline.
   ===================================================================== */
.sec, .sec.paper, .sec.sand, .sec.deep, .luach-sec { background: var(--shell); color: var(--ink); }
.sec { padding-block: clamp(4.5rem, 8vw, 7rem); }
.sec + .sec, .luach-sec + .sec, .sec + .luach-sec, .stories + .sec, .stories + .luach-sec, .subnav + .sec { border-top: 0; }
main > :is(.sec, .luach-sec) + :is(.sec, .luach-sec) {
  background-image: linear-gradient(rgba(168,138,80,.3), rgba(168,138,80,.3));
  background-size: min(calc(var(--max) - var(--gutter) * 2), calc(100% - var(--gutter) * 2)) 1px;
  background-position: top center; background-repeat: no-repeat;
}
.luach-sec { padding-block: clamp(4.5rem, 8vw, 7rem); }

/* deep sections are retired: undo every dark-ground override */
.sec.deep .eyebrow { color: var(--gold); }
.sec.deep .muted, .sec.deep p, .sec.deep .lede { color: inherit; }
.sec.deep .muted { color: var(--muted); }
.sec.deep .facts, .sec.deep .facts > div { border-color: var(--line); }
.sec.deep .facts span { color: var(--muted); }
.sec.deep .facts b { color: var(--ink); }
.sec.deep .contents, .sec.deep .contents a { border-color: var(--line); }
.sec.deep .contents a span { color: var(--muted); }
.sec.deep .taglist li { border-color: rgba(168,138,80,.45); }
.sec.deep .person p { color: var(--muted); }
.sec.deep .person .role { color: var(--gold); }
.sec.deep .rail-meta { color: var(--muted); }
.sec.deep .rail-bar { background: var(--line); }
.sec.deep .rail-bar i { background: var(--gold); }
.sec.deep h2 em { color: var(--gold); }
.sec.deep .duo .b { border-color: var(--shell); }
.sec.deep .cap { color: var(--muted); }
.sec.deep .btn.ghost { color: var(--ink) !important; }

/* one photo layout: photo left (7), text right (5) — always the same way round */
.split, .split.rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.split.rev > .media { order: 0; }
.media.tall img, .media.wide img, .media.pan img, .media > img { aspect-ratio: 4 / 3; }
.duo { display: block; }
.duo .b { display: none; }
.duo .a { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 900px) { .split, .split.rev { grid-template-columns: 1fr; } }

/* one grid of photos: even columns, 4:3, captions below — no mosaics */
.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.strip > :first-child { grid-row: auto; grid-column: auto; }
.strip img { aspect-ratio: 4 / 3; min-height: 0; height: auto; }
.nights { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.nights .w2 { grid-column: auto; }
.nights img, .nights .w2 img { aspect-ratio: 4 / 3; }
.nights figure { background: none; overflow: visible; }
.nights figure img { background: #e4e0d6; }
.nights figcaption { position: static; padding: .8rem 0 0; background: none; color: var(--ink); font-size: .62rem; letter-spacing: .22em; }
.tile img { aspect-ratio: 4 / 3; }
.tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 2rem 1.5rem; }
@media (max-width: 700px) { .strip { grid-template-columns: 1fr 1fr; gap: .8rem; } .nights.rail { grid-auto-columns: 76%; } }

/* the card: photo 4:3, gold label, title, one line, link */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.75rem; }
.cardx { display: grid; align-content: start; }
.cardx > a { display: grid; gap: .55rem; text-decoration: none; color: inherit; }
.cx-pic { aspect-ratio: 4 / 3; overflow: hidden; background: #e4e0d6; margin-bottom: .5rem; }
.cx-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--out); }
.cx-pic.cut { background: linear-gradient(180deg, #ece7dc, #e0d8c8); display: flex; align-items: flex-end; justify-content: center; }
.cx-pic.cut img { width: auto; height: 94%; object-fit: contain; object-position: bottom; }
.cx-label { font-family: var(--f-label); font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.cardx h3 { font-size: 1.65rem; }
.cardx p { font-size: .95rem; color: var(--muted); margin: 0; }
.cx-more { font-family: var(--f-label); font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 500; color: var(--ink); margin-top: .3rem; display: inline-flex; gap: .5em; }
.cx-more::after { content: "→"; transition: transform .25s var(--out); }
@media (hover: hover) and (pointer: fine) {
  .cardx a:hover .cx-pic img { transform: scale(1.035); }
  .cardx a:hover .cx-pic.cut img { transform: translateY(-4px); }
  .cardx a:hover .cx-more::after { transform: translateX(4px); }
  .cardx a:hover h3 { color: var(--gold); }
}
@media (max-width: 860px) { .cards:not(.rail) { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cards.rail { grid-auto-columns: 80%; } }

/* section heads always the same: label + headline left, intro + link right */
.sec-head { align-items: end; }
.sec-head .stack .btn, .sec-head .stack > a.btn { justify-self: start; }
.luach-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem 4rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 860px) { .luach-head { grid-template-columns: 1fr; } }
.luach-head h2 { font-size: clamp(2.6rem, 1.5rem + 4.2vw, 4.6rem); max-width: none; }
.ladder { margin-top: .5rem; }

/* stories strip sits on the same ground as everything else */
.stories { background: var(--shell); border-bottom: 0; }
.rail-bar i { background: var(--gold); }
@media (max-width: 700px) { .nights.rail img, .nights.rail .w2 img, .tiles.rail img { aspect-ratio: 4 / 3; } .nights.rail, .tiles.rail { grid-auto-columns: 80%; } }

/* =====================================================================
   ONE COLOR SCHEME (Royal): the hero photo is the only dark element.
   Top bar, sign-up band and footer join the same light ground;
   calendar days use soft tints instead of solid red/navy blocks.
   ===================================================================== */
.util { background: var(--shell); color: var(--muted); border-bottom: 1px solid var(--line); }
.util a { color: var(--ink); }
.util a:hover { color: var(--gold); }
.util .count b { color: var(--gold); }

.cta-band { background: var(--shell); color: var(--ink); border-top: 0; }
.cta-band::before { display: none; }
main > :is(.sec, .luach-sec) + .cta-band {
  background-image: linear-gradient(rgba(168,138,80,.3), rgba(168,138,80,.3));
  background-size: min(calc(var(--max) - var(--gutter) * 2), calc(100% - var(--gutter) * 2)) 1px;
  background-position: top center; background-repeat: no-repeat;
}
.cta-band .eyebrow { color: var(--gold); }
.cta-band h2 em { color: var(--gold); }
.cta-band p { color: var(--muted); }
.cta-band .btn.light, .cta-band .btn:not(.ghost) { background: var(--deep); color: var(--ivory); }
.cta-band .btn.light:hover, .cta-band .btn:not(.ghost):hover { background: #163c47; }
.cta-band .phone { color: var(--ink); }
.cta-band .mono { color: var(--gold) !important; }
.cta-band .orn { color: var(--gold); }

.foot { background: var(--paper); color: var(--muted); border-top: 1px solid rgba(168,138,80,.3); }
.foot a { color: var(--ink); }
.foot a:hover { color: var(--gold); }
.foot h4 { color: var(--gold); }
.foot .sign { color: var(--ink); }
.foot .brand-mark { background: var(--deep); }
.foot .orn { color: var(--gold); }
.foot-bot { border-top-color: var(--line); color: var(--muted); }

/* calendar: tints, not blocks */
.day.yt { background: #f4e6e6; color: var(--wine); box-shadow: inset 0 0 0 1px rgba(124,34,54,.25); }
.day.sh { background: #e7ecee; color: var(--deep); box-shadow: inset 0 0 0 1px rgba(15,42,51,.2); }
.day.ch { background: var(--paper); }
.day.tr { background-color: transparent; }
.legend .k-yt { background: #f4e6e6; border-color: rgba(124,34,54,.45); }
.legend .k-sh { background: #e7ecee; border-color: rgba(15,42,51,.35); }
.legend .k-ch { background: var(--paper); }
.dbtn:disabled { background: #f4e6e6; }

/* the slideshow runs quietly: no visible controls */
.reel { display: none !important; }

/* =====================================================================
   HOME AS THE MENU (Royal): no header menu. One row per page,
   photo and text alternating sides, identical in every other respect.
   ===================================================================== */
.site-head .wrap { flex-wrap: nowrap !important; padding-top: 0 !important; min-height: 72px; }
.brand { margin-right: auto; padding-bottom: 0 !important; }
.site-head > .wrap > .btn { display: inline-flex !important; margin-bottom: 0 !important; }
@media (max-width: 700px) { .site-head > .wrap > .btn { display: none !important; } .site-head .wrap { min-height: 64px; } }

.rows { background: var(--shell); padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.mrow { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(2.5rem, 5vw, 4rem); position: relative; }
.mrow + .mrow::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: rgba(168,138,80,.28); }
.mrow:nth-child(even) .mrow-pic { order: 2; }            /* zigzag: photo left, then photo right */
.mrow-pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e4e0d6; }
.mrow-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.mrow-pic.cut { background: linear-gradient(180deg, #ece7dc, #e0d8c8); display: flex; align-items: flex-end; justify-content: center; }
.mrow-pic.cut img { width: auto; height: 92%; object-fit: contain; object-position: bottom; }
.mrow-copy { display: grid; gap: 1.1rem; justify-items: start; max-width: 34rem; }
.mrow:nth-child(even) .mrow-copy { justify-self: end; }
.mrow-copy h2 { font-size: clamp(2.3rem, 1.4rem + 3vw, 3.8rem); }
.mrow-copy .lede { color: var(--muted); }
.mrow-copy .btn { margin-top: .4rem; }
@media (hover: hover) and (pointer: fine) { .mrow:hover .mrow-pic img { transform: scale(1.03); } .mrow:hover .mrow-pic.cut img { transform: translateY(-4px); } }
@media (max-width: 860px) {
  .mrow { grid-template-columns: 1fr; gap: 1.4rem; }
  .mrow:nth-child(even) .mrow-pic { order: 0; }            /* phones: photo always on top */
  .mrow:nth-child(even) .mrow-copy { justify-self: start; }
}
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0b2229 url(../img/cancun3-poster.webp) center / cover; }

/* LOGO INTRO (option D, light on metal): first visit per session only.
   The monogram fades up over the film, one gold glint crosses it, the name settles,
   then the whole lockup lifts away and the hero copy arrives on its usual schedule. */
.intro { display: none; }
.intro-on .intro {
  display: grid; place-content: center; justify-items: center; text-align: center;
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(8,26,32,.5), rgba(8,26,32,.12) 70%, transparent);
  animation: intro-out .8s cubic-bezier(.65,0,.35,1) 3s forwards;
}
.intro-mark {
  width: clamp(76px, 9vw, 116px); aspect-ratio: 480 / 707;
  -webkit-mask: url(../img/rp-mark-mask.png) center / contain no-repeat; mask: url(../img/rp-mark-mask.png) center / contain no-repeat;
  background: linear-gradient(100deg, #cdb882 38%, #fffbea 50%, #cdb882 62%) 100% 0 / 300% 100%;
  opacity: 0; animation: intro-in .7s ease-out forwards, intro-glint 1.3s cubic-bezier(.45,0,.25,1) .6s forwards;
}
.intro-name { font-family: var(--f-display); font-size: clamp(1.15rem, .9rem + 1vw, 1.7rem); letter-spacing: .26em; text-transform: uppercase; color: #f3e6c4; margin-top: 1.1rem; padding-left: .26em; }
.intro-tag { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--gold-soft); margin-top: .7rem; padding-left: .3em; }
.intro-name, .intro-tag { opacity: 0; transform: translateY(6px); animation: intro-up .9s cubic-bezier(.23,1,.32,1) 1.3s forwards; }
.intro-tag { animation-delay: 1.55s; }
.intro-name, .intro-tag, .intro-mark { text-shadow: 0 2px 24px rgba(8,24,30,.45); }
@keyframes intro-in { to { opacity: 1; } }
@keyframes intro-up { to { opacity: 1; transform: none; } }
@keyframes intro-glint { to { background-position: 0 0; } }
@keyframes intro-out { to { opacity: 0; transform: translateY(-14px) scale(.98); visibility: hidden; } }
/* hold the hero copy and the bar until the lockup has lifted */
.intro-on { --intro-delay: 3.25s; }
.motion.intro-on .hero h1 .line > span { animation-delay: calc(var(--d, 0s) + var(--intro-delay)); }
.motion.intro-on .hero-in { animation-delay: calc(var(--d, 0s) + var(--intro-delay)); }
.intro-on .util, .intro-on .site-head .wrap { opacity: 0; animation: intro-in .8s ease-out var(--intro-delay) forwards; }
.intro-on.intro-skip { --intro-delay: 0s; }
.intro-on.intro-skip .intro { animation: intro-out .35s ease-out forwards; }

/* TYPE: Bellefair replaces Bodoni Moda as the display face (headlines only; layout unchanged).
   Bellefair has one weight and no italic, so emphasis stays upright and gold. */
:root { --f-display: "Bellefair", Georgia, serif; }
h1 em, h2 em, h3 em, .hero h1 .ten { font-style: normal; }
.hero h1 { max-width: none; letter-spacing: -.01em; }
.hero h1 .line > span { white-space: nowrap; }
.hero h1 { font-size: min(clamp(3.1rem, 1.4rem + 7.2vw, 7.75rem), 11.5vw); }
@media (max-width: 640px) { .hero h1 { font-size: min(15.5vw, 4.2rem); } }

/* HOME PHOTOS, option D "slow settle": fade in, then ease from a slight zoom to rest. No crop wipe. */
.motion .mrow-pic [data-img] { clip-path: none; opacity: 0; transform: scale(1.1); transition: none; }
.motion .mrow-pic [data-img].in { opacity: 1; transform: none;
  transition: opacity .8s ease-out, transform 2.6s cubic-bezier(.25,.1,.25,1); }
.motion .mrow-pic img.fade-ready.ld { animation: none; }
@media (hover: hover) and (pointer: fine) {
  .motion .mrow:hover .mrow-pic [data-img].in { transform: scale(1.03); transition: opacity .8s ease-out, transform 1.2s var(--out); }
  .motion .mrow:hover .mrow-pic.cut [data-img].in { transform: translateY(-4px); }
}

/* MENU ROWS, tighter: same zigzag, photo + text side by side down to tablet width,
   a slightly larger photo column, less air between rows; phones stack with a shorter photo. */
.rows { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 4.5rem); }
.mrow { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); padding-block: clamp(1.8rem, 3.5vw, 3rem); }
.mrow:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.mrow-copy { gap: .9rem; }
@media (max-width: 860px) {
  .mrow, .mrow:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; }
  .mrow:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .mrow:nth-child(even) .mrow-pic { order: 2; }
  .mrow:nth-child(even) .mrow-copy { justify-self: end; }
  .mrow-copy h2 { font-size: clamp(1.8rem, 1rem + 2.6vw, 2.4rem); }
  .mrow-copy .lede { font-size: 1rem; }
  .mrow-copy .btn { font-size: .7rem; }
}
@media (max-width: 640px) {
  .mrow, .mrow:nth-child(even) { grid-template-columns: 1fr; gap: 1.1rem; padding-block: 1.6rem; }
  .mrow:nth-child(even) .mrow-pic { order: 0; }
  .mrow:nth-child(even) .mrow-copy { justify-self: start; }
  .mrow-pic { aspect-ratio: 3 / 2; }
  .mrow-copy h2 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); }
}

/* BODY TEXT: EB Garamond for paragraphs and running text. Labels and buttons keep --f-label.
   Garamond's small x-height reads tiny at sans sizes, so normalise it. */
:root { --f-body: "EB Garamond", Garamond, "Times New Roman", serif; }
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ===== BUG SWEEP (swarm audit) ===== */
/* Excursions: trip rows are li > span (no link) and were unstyled */
.contents.trips li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-size: 1.45rem; line-height: 1.2; }
.contents.trips li span.mono { white-space: nowrap; font-family: var(--f-label); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .contents.trips li { font-size: 1.25rem; padding-block: .9rem; } }
/* phone bottom bar: solid all the way down through the home-indicator strip */
.mbar { background: var(--deep); gap: 0; }
.mbar a + a { box-shadow: inset 1px 0 0 rgba(255,255,255,.12); }
/* plan: form card keeps full width on every step on phones */
@media (max-width: 700px) { .plan-grid { align-items: stretch; } .plan-grid .form-card { width: 100%; } }
/* first calendar day / story circle starts at the gutter, not flush to the edge */
.luach-scroll, .stories-row { scroll-padding-inline: var(--gutter); }
.split > * { min-width: 0; }   /* columns never grow past the screen (excursions trips list on phones) */
/* Royal Nights: caption belongs to its own photo, never touching the next row */
.nights figure { display: flex; flex-direction: column; }
.nights img, .nights .w2 img { height: auto; }
/* plan intro: breathing room above the divider */
.plan-intro { padding-bottom: 2.5rem; }
/* 13-day luach fits the page on desktops instead of hiding Sun 2 off the edge */
@media (min-width: 900px) {
  .luach-scroll { margin-inline: 0; padding-inline: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .luach { grid-template-columns: repeat(13, minmax(0, 1fr)); min-width: 0; width: auto; }
}
/* focus ring stays visible on dark surfaces */
.foot, .hero, .cta-band, .lb, .sv, .mbar, .sec.deep { --ring: #fff; }
:focus-visible { outline-color: var(--ring, var(--sea-ink)); }
.contents.trips li > span:not(.mono) { min-width: 0; }
.stack-lg > * { min-width: 0; }
.nights img { flex: none; }
html, body { overflow-x: clip; }   /* safety net: pre-reveal zooms can never cause sideways scroll */
.mbar a { font-family: var(--f-label); }

/* HOME OPENING, Belmond-style: the film and the name, nothing else.
   The lockup plays its glint once per session, then stays. The headline, facts and buttons
   live in the next section and play their entrance when it scrolls into view. */
.hero-stage { min-height: max(560px, 100svh); }
.hero-stage::before { background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(8,24,30,.5), rgba(8,24,30,.12) 70%, transparent), linear-gradient(180deg, rgba(8,24,30,.45) 0%, rgba(8,24,30,0) 24%); }
.hero-stage .intro, .intro-on .hero-stage .intro {
  display: grid; place-content: center; justify-items: center; text-align: center;
  position: absolute; inset: 0; z-index: 3; pointer-events: none; background: none; animation: none;
}
.hero-stage .intro-mark { width: clamp(92px, 11vw, 140px); opacity: 1; animation: none; background-position: 0 0; }
.hero-stage .intro-name { margin: 1.3rem 0 0; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.5rem); letter-spacing: .3em; padding-left: .3em; opacity: 1; transform: none; animation: none; }
.intro-on .hero-stage .intro-mark { opacity: 0; animation: intro-in .7s ease-out forwards, intro-glint 1.3s cubic-bezier(.45,0,.25,1) .6s forwards; background-position: 100% 0; }
.intro-on .hero-stage .intro-name { opacity: 0; transform: translateY(6px); animation: intro-up .9s cubic-bezier(.23,1,.32,1) 1.3s forwards; }
.intro-on.intro-skip .hero-stage .intro { animation: none; }
.intro-on.intro-skip .hero-stage :is(.intro-mark, .intro-name) { animation: none; opacity: 1; transform: none; background-position: 0 0; }
.stage-cue { position: absolute; left: 50%; bottom: 1.6rem; z-index: 3; width: 44px; height: 56px; translate: -50% 0; display: grid; place-items: center; }
.stage-cue span { width: 1px; height: 40px; background: linear-gradient(rgba(243,230,196,0), rgba(243,230,196,.85)); transform-origin: top; animation: cue 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.intro-on .stage-cue { opacity: 0; animation: intro-in .8s ease-out 2.4s forwards; }
.intro-on { --intro-delay: 2.4s; }

/* the copy section that used to sit on the film */
body.home .hero-copy { margin-top: 0; }
.hero-copy::before { content: none; }
.hero-copy .wrap, body.home .hero-copy .wrap { min-height: 0; padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3rem, 6vw, 4.5rem); align-content: start; }
.hero-copy :is(.hero-meta, h1, .hero-foot p) { text-shadow: none; }
.motion .hero-copy h1 .line > span, .motion .hero-copy .hero-in { animation-play-state: paused; }
.motion .hero-copy.go h1 .line > span, .motion .hero-copy.go .hero-in { animation-play-state: running; }
.intro-on .hero-copy { --intro-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .stage-cue span { animation: none; transform: none; } }
/* while the film fills the screen, the big lockup is the brand: the header keeps only its button */
body.home .site-head:not(.solid) .brand { opacity: 0; pointer-events: none; }
body.home .site-head .brand { transition: opacity .4s ease; }
.hero-stage .intro-name { text-shadow: 0 2px 30px rgba(8,24,30,.7), 0 0 2px rgba(8,24,30,.35); }
.hero-stage .intro-mark { filter: drop-shadow(0 4px 22px rgba(8,24,30,.55)); }

/* HOME OPENING v2: glass + focus pull (chosen from the opening test, version I).
   First visit per session: the film starts out of focus, a gold hairline draws the RP mark, the mark forms
   as warm frosted glass over the film, the film racks into focus, then the name's letters close in.
   Later visits (and reduced motion) show the finished lockup over a sharp film. */
.hero-stage .intro-mark { position: relative; background: none; filter: none; -webkit-mask: none; mask: none; width: clamp(96px, 11vw, 150px); }
.hero-stage .intro-mark .glass { position: absolute; inset: 0;
  -webkit-mask: url(../img/rp-mark-mask.png) center / contain no-repeat; mask: url(../img/rp-mark-mask.png) center / contain no-repeat;
  -webkit-backdrop-filter: blur(10px) saturate(.45) brightness(1.55); backdrop-filter: blur(10px) saturate(.45) brightness(1.55);
  background: linear-gradient(160deg, rgba(246,220,166,.7), rgba(206,166,98,.48) 50%, rgba(238,208,150,.62)); }
.hero-stage .intro-mark .outline { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hero-stage .intro-mark .outline path { fill: none; stroke: #f0dcae; stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hero-stage .intro-name { letter-spacing: .3em; padding-left: .3em; }
.hero-stage .intro-name > span > span { display: inline-block; }
/* a still film grain over the stage, so the glass sits inside the footage */
.stage-grain { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .1; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the sequence (first visit only) */
.intro-on .hero-stage .intro-mark { opacity: 1; animation: none; }
.intro-on .hero-stage .intro-mark .outline path { stroke-dashoffset: 1; animation: rp-draw 2.6s cubic-bezier(.65,0,.35,1) .6s forwards; }
.intro-on .hero-stage .intro-mark .glass { opacity: 0; animation: rp-frost 2.6s cubic-bezier(.16,1,.3,1) 1.6s forwards; }
.intro-on .hero-stage .hero-video video { animation: rp-focus 4.6s cubic-bezier(.45,0,.2,1) .2s both; }
.intro-on .hero-stage .intro-name { opacity: 1; transform: none; animation: none; }
/* letters close in with transforms (animating letter-spacing makes the lockup shimmer) */
.intro-on .hero-stage .intro-name > span > span { opacity: 0; filter: blur(5px); transform: translateX(var(--dx));
  animation: rp-letter 1.4s cubic-bezier(.16,1,.3,1) calc(3s + var(--i) * 55ms) forwards, rp-close 3.2s cubic-bezier(.16,1,.3,1) 3s forwards; }
@keyframes rp-draw { to { stroke-dashoffset: 0; } }
@keyframes rp-frost { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: none; } }
@keyframes rp-focus { from { filter: blur(18px) brightness(.85); transform: scale(1.07); } to { filter: none; transform: none; } }
@keyframes rp-letter { to { opacity: 1; filter: none; } }
@keyframes rp-close { to { transform: none; } }
.intro-on { --intro-delay: 3.6s; }
.intro-on .stage-cue { animation-delay: 4.2s; }
/* a tap skips straight to the finished lockup */
.intro-on.intro-skip .hero-stage :is(.intro-mark .glass, .intro-mark .outline path, .hero-video video, .intro-name > span > span) { animation: none; opacity: 1; filter: none; transform: none; stroke-dashoffset: 0; }

/* HOME WELCOME, redesigned to belong with the photo rows below it: same ivory page, same width and
   gutters, same Bellefair headline scale, same gold hairlines. Headline left, description and actions
   right, then a quiet ruled strip of facts. */
.welcome { background: var(--shell); color: var(--deep); }
.welcome-in { max-width: var(--max); margin-inline: auto; padding: clamp(4rem, 8vw, 7rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem clamp(2.5rem, 6vw, 6rem); align-items: end; }
.welcome-head { display: grid; gap: 1.1rem; }
.welcome h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 1.6rem + 4.2vw, 5.4rem); line-height: .98; letter-spacing: -.01em; margin: 0; color: var(--deep); }
.welcome h1 em { font-style: normal; color: var(--gold); }
.welcome-side { display: grid; gap: 1.6rem; justify-items: start; max-width: 34rem; padding-bottom: .4rem; }
.welcome-side .lede { margin: 0; }
.welcome-acts { display: flex; flex-wrap: wrap; gap: .8rem; }
.welcome-facts { grid-column: 1 / -1; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; display: grid; grid-template-columns: repeat(5, auto); justify-content: space-between;
  border-top: 1px solid rgba(168,138,80,.28); border-bottom: 1px solid rgba(168,138,80,.28); }
.welcome-facts > div { display: grid; gap: .35rem; padding: 1.15rem clamp(.8rem, 2vw, 2rem); position: relative; }
.welcome-facts > div:first-child { padding-left: 0; }
.welcome-facts > div:last-child { padding-right: 0; }
.welcome-facts > div + div::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 1px; background: rgba(168,138,80,.28); }
.welcome-facts dt { font-family: var(--f-mono); font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold-ink, var(--gold)); }
.welcome-facts dd { margin: 0; font-family: var(--f-display); font-size: clamp(1.25rem, 1rem + .8vw, 1.65rem); line-height: 1.1; color: var(--deep); font-variant-numeric: lining-nums; white-space: nowrap; }
@media (max-width: 860px) {
  .welcome-in { grid-template-columns: 1fr; align-items: start; }
  .welcome-side { max-width: none; }
}
@media (max-width: 640px) {
  .welcome-acts { width: 100%; display: grid; grid-template-columns: 1fr; }
  .welcome-acts .btn { width: 100%; justify-content: center; min-height: 50px; }
  .welcome-facts { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .welcome-facts > div, .welcome-facts > div:first-child, .welcome-facts > div:last-child { padding: 1rem 0; }
  .welcome-facts > div + div::before { content: none; }
  .welcome-facts > div:nth-child(n+2) { border-top: 1px solid rgba(168,138,80,.2); }
  .welcome-facts > div:first-child { grid-column: 1 / -1; }
  .welcome-facts > div:nth-child(odd):not(:first-child) { padding-left: 1rem; border-left: 1px solid rgba(168,138,80,.2); }
}

/* HOME: the film stays pinned while the welcome text rises over it. The logo lockup fades and lifts away
   as the text arrives, a scrim deepens behind the text so it reads, and once the facts strip has passed,
   the film scrolls off with it and the photo rows come up. --p (0 to 1) is set by motion.js from scroll. */
.stage-wrap { position: relative; --p: 0; }
.stage-wrap .hero-stage { position: sticky; top: 0; height: max(560px, 100svh); min-height: 0; }
body.home .stage-wrap .hero-stage { margin-top: calc(var(--head-h) * -1); top: 0; }
.hero-stage .stage-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(6,20,25,.28), rgba(6,20,25,.5) 45%, rgba(6,20,25,.6)); opacity: 0; }
.stage-wrap .hero-stage .intro { will-change: opacity, transform; }

/* tight: the text starts rising almost at once (hidden at rest so the opening stays just the logo) */
.stage-wrap .welcome { position: relative; z-index: 3; background: transparent; color: var(--ivory); margin-top: -16vh; }
/* motion.js fades these per scroll frame on the elements themselves (a CSS variable on the wrapper
   restyled the whole stage, video included, on every scroll tick, which made phones drop video frames) */
.stage-wrap.js-p .welcome { opacity: 0; }
/* once the lockup has faded, switch the frosted glass off: it re-blurs the live film on every frame */
.hero-stage.glass-off .intro-mark .glass { visibility: hidden; }
.stage-wrap .welcome-in { padding-block: 0 clamp(2.5rem, 9vh, 5rem); }
.stage-wrap .welcome h1 { color: #fff; text-shadow: 0 2px 30px rgba(4,14,18,.35); }
.stage-wrap .welcome h1 em { color: var(--gold-soft); }
.stage-wrap .welcome .eyebrow { color: var(--gold-soft); }
.stage-wrap .welcome .lede { color: rgba(245,239,226,.9); }
.stage-wrap .welcome .btn.ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); background: transparent; }
.stage-wrap .welcome .btn.ghost:hover { background: rgba(255,255,255,.1); }
.stage-wrap .welcome-facts { border-color: rgba(216,194,154,.35); }
.stage-wrap .welcome-facts > div + div::before { background: rgba(216,194,154,.3); }
.stage-wrap .welcome-facts dt { color: var(--gold-soft); }
.stage-wrap .welcome-facts dd { color: #fff; }
@media (max-width: 640px) {
  .stage-wrap .welcome-facts > div:nth-child(n+2) { border-top-color: rgba(216,194,154,.25); }
  .stage-wrap .welcome-facts > div:nth-child(odd):not(:first-child) { border-left-color: rgba(216,194,154,.25); }
}
/* the small logo returns to the bar once the big lockup has faded */
body.home .site-head.brand-on:not(.solid) .brand { opacity: 1; pointer-events: auto; }

/* PAGE COLOUR: Stone (option 3), a soft warm grey like limestone, site-wide. */
:root { --shell: #e6e1d8; }

/* PHOTOS: softly rounded corners everywhere a photo sits in the page (not full-bleed headers,
   the film or the lightbox). The clip lives on the frame, so hover zooms stay inside the curve. */
:root { --r-photo: 14px; }
@media (max-width: 640px) { :root { --r-photo: 10px; } }
:is(.mrow-pic, .media, .pic, .cx-pic, .tile, .nights figure, .menu-frame .pic, .gallery button) {
  border-radius: var(--r-photo); overflow: hidden; isolation: isolate;
  /* clip-path holds the curve while a photo inside is zooming; Safari drops plain overflow+radius clipping
     on animated children, which made the corners flash square */
  clip-path: inset(0 round var(--r-photo)); }
:is(.strip > img, .duo img, .menu-item .thumb) { border-radius: var(--r-photo); }
.menu-item .thumb { border-radius: calc(var(--r-photo) * .6); }

/* FOOTER, tightened: one row of four columns down to tablet width, smaller links set close together,
   and no ornament above (the monogram already opens the brand column). */
.foot .orn { display: none; }
.foot .wrap { padding-block: clamp(2.2rem, 4vw, 3rem) 1.4rem; gap: 1.8rem; }
.foot-top { grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: 1.5rem 2rem; align-items: start; }
.foot .brand-mark { width: 32px; height: 46px; }
.foot .sign { font-size: 1.25rem; margin-top: .7rem; max-width: 16ch; }
.foot h4 { margin: 0 0 .6rem; }
.foot ul { gap: .15rem; }
.foot-top a { font-size: .98rem; line-height: 1.5; }
.foot-top > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
.foot-bot { padding-top: 1.1rem; }
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-top > div:first-child { grid-column: 1 / -1; display: flex; align-items: center; gap: .9rem; }
  .foot-top > div:first-child .sign { margin: 0; max-width: none; }
}
@media (max-width: 640px) {
  .foot .wrap { padding-top: 2.2rem; gap: 1.4rem; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }
  .foot-top > div:nth-child(2) { grid-column: 1 / -1; }
  .foot-top > div:nth-child(2) ul { grid-template-columns: 1fr 1fr; }
  .foot-top > div:nth-child(4) ul { grid-template-columns: 1fr; }
  .foot-top a { min-height: 40px; font-size: .95rem; }
}
/* phones: the welcome block fits one screen when the glide frames it */
@media (max-width: 640px) {
  .stage-wrap .welcome-in { gap: 1.1rem; }
  .stage-wrap .welcome-head { gap: .6rem; }
  .stage-wrap .welcome h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .stage-wrap .welcome-side { gap: 1rem; }
  .stage-wrap .welcome-side .lede { font-size: 1rem; line-height: 1.45; }
  .stage-wrap .welcome-acts { gap: .55rem; }
  .stage-wrap .welcome-acts .btn { min-height: 46px; }
  .stage-wrap .welcome-facts { margin-top: .4rem; grid-template-columns: 1fr 1fr; }
  .stage-wrap .welcome-facts > div, .stage-wrap .welcome-facts > div:first-child, .stage-wrap .welcome-facts > div:last-child { padding: .65rem 0; grid-column: auto; border-left: 0; }
  .stage-wrap .welcome-facts > div:nth-child(even) { padding-left: .9rem; border-left: 1px solid rgba(216,194,154,.25); }
  .stage-wrap .welcome-facts > div:nth-child(n+3) { border-top: 1px solid rgba(216,194,154,.25); }
  .stage-wrap .welcome-facts dd { font-size: 1.12rem; white-space: normal; }
}
/* the concept tag: a quiet pill at the start of the top strip, on every screen size */
.util .u-concept { flex: none; font-family: var(--f-mono); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  color: var(--gold-ink, #86692f); border: 1px solid rgba(168,138,80,.45); border-radius: 99px; padding: .22rem .6rem; margin-right: .9rem; white-space: nowrap; }
.util .u-concept:hover { background: rgba(168,138,80,.12); }
@media (max-width: 700px) { .util .wrap > .u-concept { display: inline-block; } .util .wrap { gap: .6rem; } .util .u-concept { margin-right: 0; } }

/* welcome facts: four items now (the dates moved up into the eyebrow) */
.welcome-facts { grid-template-columns: repeat(4, auto); }
.stage-wrap .welcome .eyebrow { white-space: nowrap; }
@media (max-width: 640px) {
  .stage-wrap .welcome-facts > div:nth-child(odd), .stage-wrap .welcome-facts > div:nth-child(odd):not(:first-child) { padding-left: 0; border-left: 0; }
  .stage-wrap .welcome .eyebrow { white-space: normal; }
}

/* HOME SCROLL, v3: the welcome text is exactly one screen tall over the pinned film, its content centred
   under the bar, so there is no empty run after it. Native scroll snapping (proximity) settles on the film,
   on the welcome screen, and on the start of the rows; scroll-snap-stop keeps one swipe from flying past
   the welcome screen. Anywhere else the page scrolls freely. */
/* desktop only: on touch screens the snapping fought the finger and the momentum scroll */
@media (hover: hover) and (pointer: fine) { html:has(body.home) { scroll-snap-type: y proximity; } }
.stage-wrap { scroll-snap-align: start; }
.stage-wrap .welcome { margin-top: 0; min-height: 100svh; display: grid; align-content: center;
  scroll-snap-align: start; }
.stage-wrap .welcome-in, .stage-wrap .welcome-in[style] { padding-block: calc(var(--head-h) + 1.5rem) 2rem !important; }
.rows { scroll-snap-align: start; }
/* welcome screen: anchored bottom-left like a film title card, full width to the page gutter */
.stage-wrap .welcome { align-content: end; }
.stage-wrap .welcome-in { max-width: none; margin-inline: 0; padding-inline: var(--gutter); }
.stage-wrap .welcome-in, .stage-wrap .welcome-in[style] { padding-block: calc(var(--head-h) + 1.5rem) clamp(1.6rem, 4vh, 2.8rem) !important; }
.welcome h1 .ten { font-variant-numeric: lining-nums; letter-spacing: -.02em; }
.welcome h1 .ten sup { font-size: .42em; vertical-align: .95em; line-height: 0; margin-left: .04em; letter-spacing: .02em; }

/* The glass firms up: it arrives very clear, then a warm gold body fills in over a few seconds,
   ending clearly gold but still visibly glass (the film still reads through it). */
.hero-stage .intro-mark .glass::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(240,212,152,.62), rgba(198,156,86,.5) 50%, rgba(232,200,140,.58)); opacity: 1; }
.intro-on .hero-stage .intro-mark .glass::after { opacity: 0; animation: rp-firm 3.2s cubic-bezier(.45,0,.25,1) 3.4s forwards; }
@keyframes rp-firm { to { opacity: 1; } }
.intro-on.intro-skip .hero-stage .intro-mark .glass::after { animation: none; opacity: 1; }

/* HOME OPENING v3: into the mark (motion lab demo 1, chosen). The page opens on Stone with the Cancún film
   playing inside the RP monogram. Scrolling moves the camera straight into the centre of the mark; the gaps
   between the letters flood with the same film, so the sea fills the screen with no drop-off. Then the
   welcome title plays by itself over the film (no scrolling needed to find it). motion.js drives the mask. */
.stage-wrap { height: 250svh; }
.stage-wrap .hero-stage { background: var(--shell); }
.stage-wrap .hero-stage::before, .stage-wrap .stage-grain { display: none; }
.stage-wrap .hero-video { will-change: auto; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-image: url(../img/rp-mark-mask.png); mask-image: url(../img/rp-mark-mask.png);
  -webkit-mask-size: 0 0; mask-size: 0 0; -webkit-mask-composite: source-over; mask-composite: add; }
.stage-wrap .hero-video video { background: transparent; }
.zoom-name, .zoom-tag { position: absolute; left: 0; right: 0; z-index: 1; margin: 0; text-align: center; pointer-events: none; }
.zoom-name { font-family: var(--f-display); text-transform: uppercase; letter-spacing: .3em; padding-left: .3em; color: var(--deep);
  font-size: clamp(1.2rem, .9rem + 1.4vw, 2.1rem); }
.zoom-tag { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; color: var(--gold-ink, var(--gold)); }
.stage-wrap .stage-cue span { background: linear-gradient(rgba(15,42,51,0), rgba(15,42,51,.6)); }
.stage-wrap .hero-stage .stage-scrim { background: linear-gradient(0deg, rgba(6,20,25,.72), rgba(6,20,25,.34) 48%, rgba(6,20,25,.12)); transition: opacity .6s ease; }
.stage-wrap .hero-stage.titled .stage-scrim { opacity: 1; transition: opacity 2s cubic-bezier(.22,1,.36,1); }

/* the welcome card sits inside the pinned stage, anchored bottom-left like a film title */
.stage-wrap .hero-stage .welcome { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; min-height: 0; margin: 0; display: block; opacity: 1; }
.stage-wrap .hero-stage .welcome-in { padding-top: 0 !important; }
.stage-wrap .welcome h1 { max-width: none; }
.stage-wrap .welcome h1 .ten { font-style: normal; }
.stage-wrap .welcome h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.stage-wrap .welcome h1 .ln > span { display: inline-block; }
/* it plays on its own: each line rises out of its mask and comes into focus, then the rest settles in */
.stage-wrap .welcome :is(.eyebrow, h1 .ln > span, h1 sup, .lede, .welcome-acts, .welcome-facts > div) {
  opacity: 0; transition: opacity .45s ease, transform .5s ease, filter .45s ease; }
.stage-wrap .welcome h1 .ln > span { transform: translate3d(0, 105%, 0); filter: blur(10px); }
.stage-wrap .welcome :is(.eyebrow, .lede, .welcome-acts, .welcome-facts > div) { transform: translate3d(0, 12px, 0); }
.stage-wrap .welcome h1 sup { display: inline-block; transform: translate3d(0, 8px, 0); }
.stage-wrap .welcome.in :is(.eyebrow, h1 .ln > span, h1 sup, .lede, .welcome-acts, .welcome-facts > div) {
  opacity: 1; transform: none; filter: blur(0);
  transition: opacity 1.6s cubic-bezier(.22,1,.36,1), transform 1.9s cubic-bezier(.22,1,.36,1), filter 1.6s cubic-bezier(.22,1,.36,1); }
.stage-wrap .welcome.in .eyebrow { transition-delay: .25s; }
.stage-wrap .welcome.in h1 .ln:first-child > span { transition-delay: .55s; }
.stage-wrap .welcome.in h1 .ln:last-child > span { transition-delay: .95s; }
.stage-wrap .welcome.in h1 sup { transition-delay: 1.45s; }
.stage-wrap .welcome.in .lede { transition-delay: 1.35s; }
.stage-wrap .welcome.in .welcome-acts { transition-delay: 1.6s; }
.stage-wrap .welcome.in .welcome-facts > div { transition-delay: calc(1.85s + var(--k, 0) * .12s); }
.stage-wrap .welcome-facts > div:nth-child(2) { --k: 1; }
.stage-wrap .welcome-facts > div:nth-child(3) { --k: 2; }
.stage-wrap .welcome-facts > div:nth-child(4) { --k: 3; }
/* until the title has played, nothing in the card can be clicked or tabbed to by accident */
.stage-wrap .welcome:not(.in) { pointer-events: none; }
@media (max-width: 640px) {
  .stage-wrap .welcome-in, .stage-wrap .welcome-in[style] { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-wrap .welcome :is(.eyebrow, h1 .ln > span, h1 sup, .lede, .welcome-acts, .welcome-facts > div) { transition: none !important; }
}
/* desktop snapping: rest on the mark, on the full film (where the title plays), and on the rows */
.stage-wrap .hero-stage .welcome { scroll-snap-align: none; }
.zoom-end { position: absolute; left: 0; top: 105svh; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
.stage-wrap :is(.zoom-name, .zoom-tag) { max-width: none; width: auto; }
/* on the Stone opening the light hairlines meant for the film would show: hide them until the film fills the screen */
body.home .site-head:not(.solid):not(.brand-on) { border-bottom-color: transparent; }
body.home .site-head:not(.solid):not(.brand-on) .nav { border-top-color: transparent; }
.stage-wrap .welcome-facts { transition: border-color .6s ease; }
.stage-wrap .welcome:not(.in) .welcome-facts { border-color: transparent; }

/* backend form states */
.form-error{margin:0 clamp(1.4rem,3vw,2.4rem) 1rem;padding:.9rem 1rem;border-left:2px solid var(--wine);background:var(--wine-wash);color:var(--ink);font-size:var(--s-sm)}
.form-error p{margin:0 0 .6rem}.form-error p:last-child{margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}