/* Krua Bophut, "Fourteen to Eleven": one evening from 14.00 to 23.00. */

:root {
  --sand: #F0E4CF;
  --amber: #E8BC8C;
  --dusk: #3A2B38;
  --night: #0D1019;

  --ink: #2A1C12;
  --ink-2: #5B4232;
  --rule-l: rgba(42, 28, 18, .16);
  --n-ink: #F3EBDD;
  --n-ink-2: #B8AC9B;
  --rule-n: rgba(243, 235, 221, .16);

  --orange: #F37024;
  --on-orange: #24130A;

  --fg: var(--ink);
  --fg-2: var(--ink-2);
  --rule: var(--rule-l);

  --pad: clamp(20px, 4.5vw, 72px);
  --hh: 60px;

  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --out: cubic-bezier(.22, 1, .36, 1);
  --io: cubic-bezier(.65, 0, .35, 1);
  --wipe: cubic-bezier(.76, 0, .24, 1);
}
@media (min-width: 960px) { :root { --hh: 68px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--sand);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font: 400 17px/1.62 var(--sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px) { body { font-size: 16.5px; } }
img { display: block; max-width: 100%; height: auto; }
figure, h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
em { font-style: italic; }
main, footer, section { overflow-x: clip; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 3px; }
::selection { background: var(--orange); color: var(--on-orange); }

.dark { --fg: var(--n-ink); --fg-2: var(--n-ink-2); --rule: var(--rule-n); color: var(--fg); }

/* Static section colours: what you see with JS off. With JS the light sections turn
   transparent so the fixed sky behind them carries the colour of the hour. Night sections
   keep their own colour: the sky is already full night whenever they are on screen. */
.s-sand { background: var(--sand); }
.s-warm { background: #EDD3B1; }
.s-night { background: var(--night); }
html.js .s-sand, html.js .s-warm { background: transparent; }

/* ---------- the sky (page colour by the hour) ---------- */
.sky {
  display: none;
  position: fixed; z-index: -1; left: 0; right: 0; top: 0;
  height: 100vh; height: 100lvh;
  background: var(--sand);
  pointer-events: none;
}
html.js .sky { display: block; }
.sky i, .bar-sky i { position: absolute; inset: 0; opacity: 0; }
.sky i { will-change: opacity; }
.k1 { background: var(--amber); }
.k2 { background: var(--dusk); }
.k3 { background: var(--night); }

/* ---------- header: the hour marker ---------- */
.bar {
  position: fixed; z-index: 50; top: 0; left: 0; right: 0;
  height: var(--hh);
  padding: 0 var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--sand);
  color: var(--ink);
  transition: color .8s var(--io);
}
html.no-js .bar { display: none; }
html.night .bar { color: var(--n-ink); }
.bar-sky { position: absolute; inset: 0; z-index: -1; }
.bar-logo {
  display: block;
  width: clamp(104px, 8.6vw, 132px);
  padding: 12px 0; margin: -12px 0;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity .6s var(--out), transform .8s var(--out);
}
html.past .bar-logo, .bar-logo:focus-visible { opacity: 1; transform: none; }

.clock {
  display: flex; align-items: center;
  height: 1.25em;
  font: italic 400 19px/1 var(--serif);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: .01em;
}
@media (min-width: 960px) { .clock { font-size: 21px; } }
.dg { display: block; height: 1.25em; overflow: hidden; }
.st { display: block; transition: transform .6s var(--out); will-change: transform; }
.st b { display: block; height: 1.25em; line-height: 1.25em; font-weight: inherit; text-align: center; }
.sep { display: block; line-height: 1.25em; padding: 0 .04em; }
.clock.still .st { transition: none; }
html.rv .clock { opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity .9s var(--out) .35s, transform 1.1s var(--out) .35s; }
html.rv.go .clock { opacity: 1; transform: none; }

.track { position: absolute; left: var(--pad); right: var(--pad); bottom: 0; height: 0; pointer-events: none; }
.track::before {
  content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: currentColor; opacity: .16;
}
.track::after {
  content: ''; position: absolute; left: 0; right: 0; top: -6px; height: 5px;
  background: linear-gradient(90deg, currentColor 1px, transparent 1px) 0 0 / calc((100% - 1px) / 9) 100% repeat-x;
  opacity: .26;
}
.fill {
  position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: currentColor; opacity: .5;
  transform-origin: 0 50%; transform: scaleX(0);
}
.dot { position: absolute; left: -4px; top: -5px; width: 9px; height: 9px; will-change: transform; }
.dot i { position: absolute; inset: 0; border-radius: 50%; }
.sun { background: #EF9A47; box-shadow: 0 0 0 3px rgba(239, 154, 71, .18), 0 0 14px 3px rgba(239, 154, 71, .5); }
.moon { background: #F2EEE4; box-shadow: 0 0 0 3px rgba(242, 238, 228, .12), 0 0 14px 3px rgba(242, 238, 228, .4); opacity: 0; }

/* ---------- type ---------- */
.h2 {
  font: 340 clamp(36px, 4.3vw, 62px)/1.04 var(--serif);
  letter-spacing: -.018em;
  text-wrap: balance;
}
.h2 em, .h3 em { font-weight: 320; }
.h3 {
  font: 360 clamp(27px, 2.5vw, 38px)/1.1 var(--serif);
  letter-spacing: -.012em;
}
p { text-wrap: pretty; }

/* line masks for staggered heading reveals */
.lines .ln { display: block; overflow: hidden; padding: 0 .14em .16em 0; margin: 0 -.14em -.16em 0; }
.lines .ln > span { display: block; }

/* ---------- actions ---------- */
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; }
.btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 30px;
  border-radius: 999px;
  font: 600 16px/1 var(--sans); letter-spacing: .005em;
  text-decoration: none;
  transition: transform .5s var(--out);
}
.btn-call { background: var(--orange); color: var(--on-orange); }
.btn-call::before {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  box-shadow: 0 16px 32px -14px rgba(243, 112, 36, .9);
  opacity: 0; transition: opacity .5s var(--out);
}
.btn-call::after {
  content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit;
  background: #FFE7D2; mix-blend-mode: soft-light;
  opacity: 0; transition: opacity .5s var(--out);
}
.btn:focus-visible { outline-color: var(--fg); }
@media (hover: hover) {
  .btn-call:hover { transform: translate3d(0, -2px, 0); }
  .btn-call:hover::before { opacity: 1; }
  .btn-call:hover::after { opacity: .7; }
}
.btn-call:active { transform: scale(.98); }

.link-dir {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 52px;
  font: 600 16px/1 var(--sans);
  text-decoration: none;
}
.link-dir::before, .link-dir::after {
  content: ''; position: absolute; left: 0; right: 24px; bottom: 14px; height: 1px;
  background: currentColor;
}
.link-dir::before { opacity: .3; }
.link-dir::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--out); }
.link-dir svg, .aw-list svg {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s var(--out);
}
@media (hover: hover) {
  .link-dir:hover::after { transform: scaleX(1); }
  .link-dir:hover svg { transform: translate3d(4px, 0, 0); }
}

/* ---------- frames & parallax ---------- */
.lq { background-size: cover; background-position: center; }
.frame {
  position: relative; overflow: hidden;
  background-color: #D8C2A3; background-size: cover; background-position: center;
}
.dark .frame { background-color: #1A1A22; }
.par { position: absolute; left: 0; right: 0; top: -7%; bottom: -7%; }
html.js:not(.rm) .par { will-change: transform; }
.par img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 1 · hero, 14.00 ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "logo" "line" "photo" "meta";
  align-content: start;
  min-height: 100vh; min-height: 100svh;
  padding: calc(var(--hh) + 26px) 0 34px;
}
.logo {
  grid-area: logo;
  position: relative;
  width: calc(100% - 2 * var(--pad)); max-width: 560px;
  margin: 0 var(--pad);
  aspect-ratio: 1926 / 687;
}
.lg { position: absolute; display: block; height: auto; max-width: none; }
.lg-thai { left: 1.765%; top: 1.164%; width: 33.489%; }
.lg-word { left: .415%; top: 23.435%; width: 99.169%; }
.lg-tag { left: 41.641%; top: 85.298%; width: 57.529%; }

.hero-line {
  grid-area: line;
  margin: 18px var(--pad) 0;
  max-width: 19em;
  font: 360 21px/1.32 var(--serif);
  letter-spacing: -.004em;
  text-wrap: balance;
}
.hero-photo {
  grid-area: photo;
  position: relative; overflow: hidden;
  background-color: #C9A27E;
  margin-top: 22px;
  /* fill what the logo, line, hours and actions leave of the first screen */
  height: clamp(240px, calc(100vh - 332px - min(100vw - 2 * var(--pad), 560px) * .357), 600px);
  height: clamp(240px, calc(100svh - 332px - min(100vw - 2 * var(--pad), 560px) * .357), 600px);
}
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 42%; transform-origin: 58% 52%; }
.hero-meta { grid-area: meta; margin: 22px var(--pad) 0; display: grid; gap: 12px; }
.hours { font: 500 15px/1.3 var(--sans); letter-spacing: .01em; color: var(--fg-2); }
.hours .t { font: italic 400 22px/1 var(--serif); letter-spacing: 0; color: var(--fg); }
.hours .t:first-child { margin-left: .2em; }
.hours .dash { margin: 0 .12em; font: italic 400 22px/1 var(--serif); color: var(--fg); }

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto auto 1.2fr;
    grid-template-areas: ". photo" "logo photo" "line photo" "meta photo" ". photo";
    column-gap: clamp(48px, 5.5vw, 104px);
    height: 100vh; height: 100svh;
    min-height: 640px; max-height: 1200px;
    padding: calc(var(--hh) + 22px) 0 22px var(--pad);
  }
  .logo { width: 100%; max-width: 580px; margin: 0; }
  .hero-line { margin: 38px 0 0; font-size: clamp(24px, 1.95vw, 31px); max-width: 15em; }
  .hero-photo { height: auto; margin: 0; }
  .hero-photo img { object-position: 54% 50%; }
  .hero-meta { margin: 40px 0 0; gap: 18px; }
}

/* ---------- 2 · the house ---------- */
.house {
  display: grid; gap: 36px;
  padding: clamp(96px, 13vw, 200px) 0 clamp(80px, 10vw, 160px);
}
.house-copy { padding: 0 var(--pad); display: grid; gap: 18px; max-width: 36rem; }
.house-copy .h2 { margin-bottom: 6px; }
.house-copy { order: -1; }
.house-photo { aspect-ratio: 4 / 3; }
.house-photo img { object-position: 62% 50%; }
@media (min-width: 960px) {
  .house {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 112px);
    align-items: center;
    padding-right: var(--pad);
  }
  .house-photo { grid-column: 1; grid-row: 1; aspect-ratio: auto; height: min(78vh, 780px); }
  .house-copy { grid-column: 2; grid-row: 1; padding: 0; max-width: 30rem; }
}

/* ---------- 3 · the kitchen ---------- */
.kitchen { padding: clamp(64px, 7vw, 120px) 0 clamp(96px, 12vw, 180px); }
.kitchen-head { padding: 0 var(--pad); display: grid; gap: 18px; max-width: 40rem; }
.plates {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 44px; padding: 0 var(--pad);
  align-items: start;
}
.plate img { transition: transform 1.2s var(--out); }
.p1 { grid-column: 1 / -1; aspect-ratio: 4 / 3; margin: 0 calc(-1 * var(--pad)) 6px; }
.p2 { aspect-ratio: 4 / 5; }
.p3 { aspect-ratio: 4 / 5; margin-top: 56px; }
.p1 img { object-position: 50% 55%; }
.catch { margin-top: 72px; display: grid; gap: 26px; }
.catch-photo { aspect-ratio: 16 / 10; }
.catch-copy { padding: 0 var(--pad); display: grid; gap: 14px; max-width: 34rem; }
@media (min-width: 960px) {
  .kitchen { padding-left: var(--pad); padding-right: var(--pad); }
  .kitchen-head { padding: 0; max-width: 40rem; gap: 22px; }
  .plates {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px); row-gap: 0;
    margin-top: clamp(56px, 9vh, 104px); padding: 0;
  }
  .p1 { grid-column: 1 / 7; grid-row: 1 / 3; aspect-ratio: 3 / 2; margin: 0 0 0 calc(-1 * var(--pad)); }
  .p2 { grid-column: 8 / 12; grid-row: 1; aspect-ratio: 4 / 3; margin-top: 14vh; }
  .p3 { grid-column: 10 / 13; grid-row: 2; aspect-ratio: 1 / 1; margin-top: 5vh; }
  .catch {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(16px, 2vw, 32px);
    margin-top: clamp(96px, 16vh, 180px);
    align-items: end;
  }
  .catch-photo { grid-column: 3 / 10; aspect-ratio: 16 / 9; }
  .catch-copy { grid-column: 10 / 13; padding: 0 0 8px; }
}
@media (hover: hover) {
  .plate:hover img, .catch-photo:hover img { transform: scale(1.035); }
}

/* ---------- 4 · from sunset to starlight (pinned, scroll-scrubbed) ---------- */
.scene { position: relative; height: 260vh; height: 260svh; background: var(--night); }
.scene-pin {
  position: sticky; top: var(--hh);
  height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh));
  overflow: hidden;
  color: #F7F0E6;
}
html.no-js .scene { height: auto; }
html.no-js .scene-pin { position: relative; top: 0; height: 100vh; height: 100svh; }
.scene-media { position: absolute; inset: 0; background: #2A2230; }
.scene-img, .scene-img img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.scene-img img { object-fit: cover; object-position: 50% 50%; }
html.js .scene-img { will-change: opacity, transform; transform: scale(1.1); }
html.rm .scene-img { transform: none; }
.s-moon { opacity: 0; }
.scene-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 9, 15, 0) 30%, rgba(9, 9, 15, .45) 62%, rgba(9, 9, 15, .84) 100%),
    linear-gradient(90deg, rgba(9, 9, 15, .3), rgba(9, 9, 15, 0) 60%);
}
.scene-copy {
  position: absolute; left: var(--pad); right: var(--pad);
  bottom: clamp(36px, 9vh, 112px);
  max-width: 40rem;
}
.scene-words {
  margin-top: 18px;
  font: 360 clamp(20px, 1.8vw, 26px)/1.42 var(--serif);
  color: rgba(247, 240, 230, .94);
}

/* ---------- 5 · three places (sticky stage) ---------- */
.places { padding: clamp(104px, 14vw, 200px) 0 clamp(24px, 4vw, 64px); }
.places > .h2 { padding: 0 var(--pad); margin-bottom: clamp(32px, 5vw, 72px); }
.places-grid { position: relative; }
.places-stage {
  position: sticky; z-index: 2; top: var(--hh);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--night);
}
.places-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: scale(1.06);
  transition: opacity 1.1s var(--io), transform 2.4s var(--out);
}
.places-stage img.on { opacity: 1; transform: none; }
html.rm .places-stage img { transform: none; }
html.no-js .places-stage img:first-child { opacity: 1; transform: none; }
.places-list { position: relative; z-index: 1; }
.place {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  min-height: calc(100vh - var(--hh) - 75vw);
  min-height: calc(100svh - var(--hh) - 75vw);
  padding: 36px var(--pad);
}
.place p { max-width: 26em; color: var(--fg-2); }
@media (min-width: 960px) {
  .places-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(48px, 6vw, 112px);
    padding-left: var(--pad);
  }
  .places-stage {
    grid-column: 2; grid-row: 1;
    aspect-ratio: auto;
    height: min(70vh, 660px);
    top: calc(var(--hh) + (100vh - var(--hh) - min(70vh, 660px)) / 2);
  }
  .places-list { grid-column: 1; grid-row: 1; }
  .place { min-height: 82vh; padding: 0; gap: 18px; }
  .place .h3 { font-size: clamp(32px, 3.2vw, 46px); }
}

/* ---------- 6 · awards ---------- */
.awards { padding: clamp(64px, 9vw, 140px) var(--pad) clamp(72px, 10vw, 150px); }
.aw-list { border-top: 1px solid var(--rule); }
.aw-list li { border-bottom: 1px solid var(--rule); }
.aw-list a {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "src arrow" "name arrow";
  align-items: center; row-gap: 6px; column-gap: 20px;
  padding: 24px 0;
  text-decoration: none;
}
.aw-list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .8s var(--out);
}
.aw-src { grid-area: src; font: 500 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--fg-2); }
.aw-name { grid-area: name; font: 340 clamp(27px, 2.8vw, 40px)/1.1 var(--serif); letter-spacing: -.012em; }
.aw-name em { font-weight: 320; }
.aw-list svg { grid-area: arrow; width: 20px; height: 20px; }
@media (hover: hover) {
  .aw-list a:hover::after { transform: scaleX(1); }
  .aw-list a:hover svg { transform: translate3d(3px, -3px, 0); }
}
@media (min-width: 960px) {
  .aw-list a {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) auto;
    grid-template-areas: "src name arrow";
    padding: 34px 0;
  }
}

/* ---------- 7 · visit ---------- */
.visit { display: grid; gap: 40px; padding: 0 0 clamp(96px, 12vw, 180px); }
.visit-photo { aspect-ratio: 4 / 3; }
.visit-photo img { object-position: 0% 50%; }
.visit-copy { padding: 0 var(--pad); display: grid; gap: 30px; }
.info { display: grid; gap: 0; border-bottom: 1px solid var(--rule); }
.info > div {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 600px) { .info > div { grid-template-columns: 6rem minmax(0, 1fr); gap: 16px; } }
.info dt { font: 500 14px/1.75 var(--sans); letter-spacing: .02em; color: var(--fg-2); }
@media (min-width: 600px) { .info dt { padding-top: 1px; } }
.info dd { font-size: 17px; line-height: 1.6; overflow-wrap: anywhere; }
.info dd a {
  display: inline-flex; align-items: center; min-height: 44px; margin: -9px 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  transition: text-decoration-color .4s var(--out);
}
.info dd a + br + a { margin-top: -6px; }
@media (hover: hover) { .info dd a:hover { text-decoration-color: currentColor; } }
@media (min-width: 960px) {
  .visit {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: clamp(48px, 6vw, 112px);
    align-items: center;
    padding-right: var(--pad);
  }
  .visit-photo { aspect-ratio: auto; height: min(76vh, 760px); }
  .visit-copy { padding: 0; max-width: 34rem; gap: 36px; }
  .info > div { grid-template-columns: 7rem minmax(0, 1fr); }
}

/* ---------- footer, 23.00 ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px;
  padding: clamp(56px, 8vw, 112px) var(--pad) calc(28px + env(safe-area-inset-bottom));
}
.foot-logo { position: relative; width: clamp(200px, 20vw, 290px); aspect-ratio: 1926 / 687; }
.foot-meta { font: 500 13px/1.4 var(--sans); letter-spacing: .02em; color: var(--fg-2); }

/* ---------- motion (only after JS arms it: html.rv) ---------- */
@keyframes brush {
  from { clip-path: polygon(0 0, -2% 0, -6% 14%, -8% 30%, -12% 46%, -13% 62%, -17% 78%, -20% 100%, 0 100%); transform: translate3d(-1.2%, 0, 0); }
  to { clip-path: polygon(0 0, 124% 0, 120% 14%, 118% 30%, 114% 46%, 113% 62%, 109% 78%, 106% 100%, 0 100%); transform: none; }
}
@keyframes open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes zoom-in { from { transform: scale(1.24); } to { transform: scale(1.1); } }
@keyframes kenburns { from { transform: scale(1.1); } to { transform: translate3d(-1.6%, .8%, 0) scale(1.04); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }

html.rv .hero .lg { clip-path: polygon(0 0, -2% 0, -6% 14%, -8% 30%, -12% 46%, -13% 62%, -17% 78%, -20% 100%, 0 100%); }
html.rv.go .hero .lg { animation: brush 1.2s var(--wipe) both; }
html.rv.go .hero .lg-thai { animation-duration: .95s; animation-delay: .05s; }
html.rv.go .hero .lg-word { animation-duration: 1.35s; animation-delay: .3s; }
html.rv.go .hero .lg-tag { animation-duration: .9s; animation-delay: 1.15s; }

html.rv .hero-photo { clip-path: inset(100% 0 0 0); }
html.rv.go .hero-photo { animation: open 1.6s var(--io) .2s both; }
html.rv .hero-photo img { transform: scale(1.24); }
html.rv.go .hero-photo img { animation: zoom-in 2.4s var(--out) .2s both, kenburns 24s ease-in-out 2.6s infinite alternate; }

html.rv .hero-line, html.rv .hero-meta { opacity: 0; }
html.rv.go .hero-line { animation: rise 1.1s var(--out) .85s both; }
html.rv.go .hero-meta { animation: rise 1.1s var(--out) 1.1s both; }

/* scroll reveals */
html.rv .rv {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity .9s var(--out) var(--d, 0s), transform 1.1s var(--out) var(--d, 0s);
}
html.rv .rv.in { opacity: 1; transform: none; }

html.rv .lines .ln > span { transform: translate3d(0, 112%, 0); transition: transform 1s var(--out); }
html.rv .lines .ln:nth-child(2) > span { transition-delay: .09s; }
html.rv .lines .ln:nth-child(3) > span { transition-delay: .18s; }
html.rv .lines.in .ln > span { transform: none; }

html.rv .rimg { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--io); }
html.rv .house-photo.rimg { clip-path: inset(0 100% 0 0); }
html.rv .visit-photo.rimg { clip-path: inset(0 0 0 100%); }
html.rv .rimg.in { clip-path: inset(0 0 0 0); }
html.rv .rimg img { transform: scale(1.14); transition: transform 1.6s var(--out); }
html.rv .rimg.in img { transform: none; }
@media (hover: hover) {
  html.rv .plate.in:hover img, html.rv .catch-photo.in:hover img { transform: scale(1.035); }
}

html.rv .scene-words .w { opacity: 0; transition: opacity 1.2s var(--out); }
html.rv .scene-words .w:nth-child(2) { transition-delay: .12s; }
html.rv .scene-words .w:nth-child(3) { transition-delay: .24s; }
html.rv .scene-words .w:nth-child(4) { transition-delay: .36s; }
html.rv .scene-words .w:nth-child(5) { transition-delay: .48s; }
html.rv .scene-words.in .w { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .st, .btn, .link-dir svg, .aw-list svg, .plate img, .bar-logo { transition: none !important; }
  .places-stage img { transition: opacity .8s var(--io); }
}

/* ---------- blur-up previews (lqip from assets.json) ---------- */
.lq-deck-sunset{background-image:url(data:image/webp;base64,UklGRpIAAABXRUJQVlA4IIYAAAAwBACdASoYAA4APu1iqU2ppaOiMAgBMB2JZQCw7BxNZFSmZfsBVL0IQ4AA/gkGklayVce9g3l/NxEP4my5jfSDq0pbr/y/+UYtRdQeGST0KRXeVP+7CIm19q7wVvH97qrHrRJJuXlxccyK96PAgkT3u9ttpvgDrLcFGeg8AtuGfsscELCgAA==)}
.lq-hall-day{background-image:url(data:image/webp;base64,UklGRpIAAABXRUJQVlA4IIYAAAAQBACdASoYAA4APu1iqU2ppaOiMAgBMB2JYwCdABu1TpvhYGXbWg1QAAD+7Mi+pcbDMb9fvBZYmPKiD6brW++/PwoOWcDWCgMh1s/w1ASM7s8/xLyyEJF1D0UWCkijKz8EM9WUIKmuWcTt9yVZiq/QHdGwz1Y3Wq6pRcu3aFpPLoGED3QAAA==)}
.lq-food-20{background-image:url(data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAAAQBACdASoYAA0APu1iqU2ppaOiMAgBMB2JbACsH8ADMQnadiW+QtHm/AD+z2eSaj1R6V3vcH2Gm9VSKj5AtH7Eqoffzn+yMtDv73YKLZ6PRMnhb/y46mh4qb9rQ3B/ZnyTvNzNKoRR876wVL2OOpb3vbYvCTVQPFNIlkypUXOeIR7zcNpNcm6lfvdDxxCMCcuyMIRasDzsXVrKzMh34jn54AA=)}
.lq-food-17{background-image:url(data:image/webp;base64,UklGRr4AAABXRUJQVlA4ILIAAACQBACdASoYAA0APu1iqU2ppaOiMAgBMB2JbACdMoR4GdD0yPkg7QycuRM15QAA/sxdoBTu44WVoIQ7snQVqmyEBuGMDIRcjSHcInJOg+nvuL2i297zW9d7c1iK8AxT+rXll3UTYlx6VfbyWBaDt0iACnn7HijLzKi1ZbXmVY0GS/1X8SSo4qWb5b+si1SPyfBiIhl9CZz8EuIRt5+0sjf9UZ3FM3y0u9V+4M56ATCIlAAA)}
.lq-food-25{background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAABwBACdASoYAA0APu1iqU2ppaOiMAgBMB2JbACdMoGv/i2Nj0aRv+tDIQ+qAAD8VLNYFnsSjrrTzqdOweUTUve9frGoJ4sQ+obW7K6cJSvk4kFWbF1/KCUyS9kfBlNJjIxvUzxJorNbjYKPfkB0/yGOD0z4rDecmyeUjFvc+FbzGEz0iqLnMx5oUpTy/1w1Mub+kqaZFihy+q5FQ+PMF69nR4Vpu8y8xs6dy1JMq8pHOFn+DY4/XoTCs6AAAA==)}
.lq-seafood-ice{background-image:url(data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAAAwBACdASoYAA0APu1iqU2ppaOiMAgBMB2JQBOgZYA2aufz3limaIL3OOAA/umh0cAlxl28lI/f/LsKXcBtj6knFv4c4hkVG0UKKL7exSuNBut1At4s/apWUXeNTtRMqZg05I3M7OVFCeVJ2h8ixG0DwQai0UwZak/n5njC7SNIQKbU5dZlGgXj9WqBxpFxy+unSspnCSAAAA==)}
.lq-beach-sunset{background-image:url(data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAADwAwCdASoYAA4APu1kqU2ppaOiMAgBMB2JQBOgA79c+uRTGCvMpJZAAP7lCvjJ29jHz+wkD6LfbCui9dmdw7Mxkx10HsldLomqlz3hpS0m5l1DtJT5NGH0Yh/nOlytMGGNZKPGrtkxkUW05yX2KDIOifLRvKD31LMUH3QX3HaIdZYiVn7Y72KN8rPPwAAA)}
.lq-moon-beach{background-image:url(data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAAAQBACdASoYAA4APu1orU2ppqSiMAgBMB2JZgCdMoAKIuApMb/3CMV0MAD++47dPssOh2+lGqDsxPwSHB/I8pH/HrzuVocKS5Wl8swjPpzGuB71hmbNu0k1YfqxeBm9AwzAvJkn9+056qZewa2DpeAEyx+GrNP4wKU99SvJfx6dyFCx6AV/uBbZvoxhE8Dx9+8uAA==)}
.lq-deck-bluehour{background-image:url(data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAAAwBACdASoYAA0APu1iqU2ppaQiMAgBMB2JbACdACIj90vMZ57Npzr4kAAA/r5ntnhXg0KQ7QGL7pWrtTYQJM0412XPxFcK8H+UHbSIe15D5wyS2zNnXifHdFT60AX7RWBeLTJ8UadAE5wAQK2spXcYAAA=)}
.lq-hall-candle{background-image:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAACQBACdASoYAA4APu1iqU2ppaOiMAgBMB2JbACdMoAlxRYvsMpP/4Bsy6vSTWAA/ujxFXf5Qg5LvjR/LNqXeaupvkpOByTOG0FwpK61N8sfEUcV9dXS0Qj2uiEWGAtk4AJ4+iZQ4IMp1aSuXlvCnEpdUM8CSMKF0rAW794kqSGmgFNxv/f/haAjucQNneqS3VZcxlay1IcgDW0mIbs8gAAA)}
.lq-beach-night{background-image:url(data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAADQAwCdASoYAA0APu1iqU2ppaOiMAgBMB2JbACdL1AA8COQSgb7SAAA/nyeMefea2rQMxtLnoUqYg/nd3tu1ru9jNp58xarmpmR3gp/XWH6Dafql1thMIw+GF9GxLT5+p8W2t5Xt6kk5OXn9sKy2XQMU+qJaMCnY6pJIypGrO3s6JpJ7ESY+n/oQ3Us5QGoAAA=)}
.lq-house-dusk{background-image:url(data:image/webp;base64,UklGRpYAAABXRUJQVlA4IIoAAABwBACdASoYAA4APu1iqU2ppaOiMAgBMB2JaACdMoADTSEZgBegKi7bS8dRMAD+42/gM0DODcxRdCXidpfivWdqBH2UfxCKUTLIKbEHL9MFFb2aX5kq2G2YcPToKtZFmFweEnih/7b9WzNupvHDboYfamc7xCq31itt2SQxV6mIxGxrVzyFW7GgAAA=)}
@media (max-width:640px){.lq-deck-sunset{background-image:url(data:image/webp;base64,UklGRnwAAABXRUJQVlA4IHAAAABQBACdASoQABQAPu1iqU2ppaOiMAgBMB2JZQCsAB9j7KseAGK4UlZiasgAAPwpyet74x3Kf9sx+f6yK/AXmsOAyt/MT7YRj2+q2zrcMQsUmHEWOZ7SXL1NnIGUgfOqDO487fku8ILjmG1baV8CmqAA)}}