/* Journeyful motion layer.
   Rules:
   - Only transform and opacity animate, so motion stays on the compositor.
   - Anything hidden for a reveal is hidden by a class JS adds (.rv, .is-split)
     under html.js. With no JS every element is visible as published.
   - prefers-reduced-motion: reduce switches every effect off at the bottom
     of this file. */

/* ——— Self-hosted fonts (were Google Fonts; Source Sans 3 was loaded and
   never rendered, Instrument Sans always wins the stack) ——— */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("/fonts/fraunces-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --jf-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --jf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --jf-dur-reveal: 1100ms;
  --jf-dur-slow: 1600ms;
}

/* ——— Editorial type rhythm ——— */
h1, h2 { font-optical-sizing: auto; text-wrap: balance; }
p, li { text-wrap: pretty; }
.section-head h2 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; letter-spacing: -0.035em; }
.section-head .eyebrow,
.jf-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.section-head .eyebrow::before,
.jf-kicker::before {
  content: "";
  width: 2.25rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  transform-origin: left center;
}
.hero-bleed h1 { font-weight: 400; letter-spacing: -0.04em; }
.hero-bleed h1 em,
.byd-feature h2 em,
.coast-head h2 em { font-style: italic; font-weight: 300; }
.page-hero-photo h1 { font-weight: 400; }

/* ——— Header: state on scroll ——— */
.site-header {
  transition: transform 520ms var(--jf-ease-out), background-color 360ms ease, border-color 360ms ease;
}
.site-header .logo,
.site-header .nav-links a,
.site-header .nav-toggle { transition: color 360ms ease, background-color 360ms ease, border-color 360ms ease; }
/* The on-hero bar fades into the photo instead of ending in a hard edge.
   Text sits in the top 70%, where the scrim is still >= --jf-scrim. */
.site-header.on-hero:not(.scrolled):not(.nav-open) {
  background: linear-gradient(180deg, var(--jf-scrim-header) 0%, var(--jf-scrim) 70%, rgba(26, 22, 20, 0) 100%) border-box;
}
.site-header.is-hidden:not(.nav-open) { transform: translate3d(0, -100%, 0); }

/* ——— Links: underline draws on hover ——— */
.card-link,
.footer-col a,
.breadcrumb a,
.coast-panel-cta,
.byd-feature .byd-note a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 1px;
  transition: background-size 480ms var(--jf-ease-out), color 220ms ease;
  text-decoration: none;
}
.card-link:hover, .card-link:focus-visible,
.footer-col a:hover, .footer-col a:focus-visible,
.breadcrumb a:hover, .breadcrumb a:focus-visible,
.coast-panel:hover .coast-panel-cta, .coast-panel-cta:focus-visible,
.byd-feature .byd-note a:hover {
  background-position: 0 100%;
  background-size: 100% 1px;
}
.prose a:not(.btn):not(.btn-stack) {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  background-image: linear-gradient(var(--jf-terracotta), var(--jf-terracotta));
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: 0% 2px;
  transition: background-size 480ms var(--jf-ease-out), text-decoration-color 220ms ease;
}
.prose a:not(.btn):not(.btn-stack):hover {
  text-decoration-color: transparent;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.card-link .arr,
.coast-panel-cta .arr { display: inline-block; transition: transform 480ms var(--jf-ease-out); }
.card:hover .card-link .arr,
.coast-panel:hover .coast-panel-cta .arr { transform: translateX(5px); }

/* ——— Buttons: fill sweep + magnetic pull (JS sets --mx/--my) ——— */
.btn, .btn-stack {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--mx, 0px), var(--my, 0px), 0);
  transition: transform 600ms var(--jf-ease-out), background-color 300ms ease, color 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.btn:hover { transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) - 1px), 0); }
.btn::before, .btn-stack::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--jf-action-hover);
  transform: translate3d(-101%, 0, 0);
  transition: transform 560ms var(--jf-ease-out);
}
.btn-secondary::before { background: var(--jf-ink); }
.btn-ghost::before { background: var(--jf-cream-deep); }
.btn-on-dark::before, .btn-affiliate::before { background: rgba(255, 252, 247, 0.16); }
.btn:hover::before, .btn:focus-visible::before,
.btn-stack:hover::before, .btn-stack:focus-visible::before { transform: translate3d(0, 0, 0); }
.btn > span.btn-label { display: inline-block; transform: translate3d(var(--tx, 0px), var(--ty, 0px), 0); transition: transform 600ms var(--jf-ease-out); }
.btn-arrow { display: inline-block; transition: transform 480ms var(--jf-ease-out); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ——— Cards: slow zoom, caption lift ——— */
.card { transition: box-shadow 600ms var(--jf-ease-out), transform 600ms var(--jf-ease-out); }
.card-media img { transition: transform 1400ms var(--jf-ease-out); transform: scale(1.001); }
.card:hover .card-media img { transform: scale(1.07); }
.card-body { transition: transform 600ms var(--jf-ease-out); }
.card:hover .card-body { transform: translate3d(0, -4px, 0); }
.card:hover { transform: translate3d(0, -4px, 0); }

/* ——— Hero (home): cinematic, Ken Burns, crossfading slides ——— */
.hero-bleed { min-height: 100vh; min-height: 100svh; }
.hero-bleed .hero-media,
.page-hero-photo .hero-media {
  position: absolute;
  inset: -6% 0 -6% 0;
  z-index: -1;
  overflow: hidden;
  will-change: transform;
}
.page-hero-photo .hero-media { z-index: 0; }
.page-hero-photo::after { z-index: 0; }
.hero-media picture { position: absolute; inset: 0; display: block; }
.hero-media .hero-bleed-photo,
.hero-media .page-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: auto;
}
.hero-slide { opacity: 0; transition: opacity 1800ms var(--jf-ease-in-out); }
.hero-slide.is-active { opacity: 1; }
.hero-slide.is-leaving { opacity: 1; }
.js .hero-media .hero-slide.is-active img,
.js .hero-media .hero-slide.is-leaving img {
  animation: jf-kenburns 14s linear both;
}
.js .hero-media .hero-slide:nth-child(2n).is-active img,
.js .hero-media .hero-slide:nth-child(2n).is-leaving img { animation-name: jf-kenburns-alt; }
@keyframes jf-kenburns {
  from { transform: scale(1.14) translate3d(-1.5%, 1%, 0); }
  to   { transform: scale(1.02) translate3d(0, 0, 0); }
}
@keyframes jf-kenburns-alt {
  from { transform: scale(1.04) translate3d(1.5%, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1%, -1.5%, 0); }
}
/* Page heroes settle rather than drift */
.js .page-hero-photo .hero-media img { animation: jf-settle 2600ms var(--jf-ease-out) both; }
@keyframes jf-settle { from { transform: scale(1.12); } to { transform: scale(1.02); } }

.hero-bleed-inner { max-width: 46rem; }
.hero-bleed h1 { font-size: clamp(2.75rem, 7.4vw, 6.5rem); max-width: 12ch; line-height: 1; }

/* Hero intro: staggered rise. CSS only, so it always finishes. */
.js .hero-bleed-inner > :not(h1),
.js .page-hero-photo .container > :not(h1):not(.profile-hero-panel),
.js .page-hero-photo .profile-hero-panel > div > :not(h1),
.js .page-hero-photo .cta-stack,
.js .hero-corner,
.js .hero-meta {
  animation: jf-rise 1200ms var(--jf-ease-out) both;
  animation-delay: calc(var(--d, 0) * 1ms + 350ms);
}
.js .hero-bleed-inner > .eyebrow { --d: 0; }
.js .hero-bleed-inner > .lede { --d: 650; }
.js .hero-bleed-inner > .btn-row { --d: 820; }
.js .hero-corner { --d: 1050; }
.js .hero-meta { --d: 1250; }
.js .page-hero-photo .lede { --d: 600; }
.js .page-hero-photo .cta-stack { --d: 800; }
@keyframes jf-rise {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Headline: line-by-line rise. JS splits lines and adds .is-split. The
   headline is never hidden: each line starts partly inside its mask, so it
   paints on the first frame (it is the LCP element on phones) and rises. */
.ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ln-i { display: block; animation: jf-line 1400ms var(--jf-ease-out) both; animation-delay: calc(var(--i, 0) * 110ms); }
@keyframes jf-line { from { transform: translate3d(0, 62%, 0); } to { transform: none; } }

/* Hero foot: scroll cue + slide counter */
.hero-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  width: min(100% - 2 * var(--jf-gutter), var(--jf-max));
  margin: 0 auto;
  padding: 0 0 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  color: var(--jf-on-photo);
  font-size: var(--jf-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.scroll-cue { display: inline-flex; align-items: center; gap: 0.85rem; }
.scroll-cue-line { position: relative; width: 1px; height: 2.75rem; overflow: hidden; background: rgba(255, 252, 247, 0.25); }
.scroll-cue-line::after {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 1px; height: 100%;
  background: var(--jf-paper);
  transform: translate3d(0, -100%, 0);
  animation: jf-cue 2400ms var(--jf-ease-in-out) 2s infinite;
}
@keyframes jf-cue {
  0%   { transform: translate3d(0, -100%, 0); }
  55%  { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 100%, 0); }
}
.slide-count { display: flex; align-items: center; gap: 0.75rem; text-align: right; }
.slide-count[hidden] { display: none; }
.slide-bar { position: relative; width: 4.5rem; height: 1px; background: rgba(255, 252, 247, 0.3); overflow: hidden; }
.slide-bar i { position: absolute; inset: 0; background: var(--jf-paper); transform-origin: left center; transform: scaleX(0); }
.slide-bar i.run { animation: jf-bar var(--slide-ms, 7000ms) linear both; }
@keyframes jf-bar { to { transform: scaleX(1); } }
.slide-name { display: inline-block; min-width: 9ch; }
@media (max-width: 599px) { .slide-name { display: none; } }
@media (min-width: 900px) {
  .hero-bleed-layout { padding-bottom: calc(var(--jf-space-9) + 2rem); }
}
@media (max-width: 899px) {
  .hero-bleed-layout { padding-bottom: 5.5rem; }
  .hero-corner { display: none; }
}

/* ——— Scroll reveals ——— */
.js .rv {
  opacity: 0;
  transform: translate3d(0, var(--rv-y, 40px), 0);
  transition: opacity var(--jf-dur-reveal) var(--jf-ease-out), transform var(--jf-dur-reveal) var(--jf-ease-out);
  transition-delay: calc(var(--rv-i, 0) * 90ms);
}
.js .rv.rv-soft { --rv-y: 16px; }
.js .rv.rv-scale { transform: scale(0.94); }
.js .rv.is-in { opacity: 1; transform: none; }
/* After the reveal, hand transform back to hover effects */
.js .rv.rv-done { transition: box-shadow 600ms var(--jf-ease-out), transform 600ms var(--jf-ease-out); transition-delay: 0s; }

/* Card image unveils from a slight zoom as the card arrives */
.js .card.rv .card-media img { transform: scale(1.18); }
.js .card.rv.is-in .card-media img { transform: scale(1.001); transition: transform 1800ms var(--jf-ease-out); }
.js .card.rv.rv-done:hover .card-media img { transform: scale(1.07); }
.js .card.rv.rv-done:hover { transform: translate3d(0, -4px, 0); }

/* ——— Parallax ——— */
[data-parallax] { will-change: transform; }

/* ——— Destination strip: horizontal, pinned on desktop ——— */
.coast { background: var(--jf-ink); color: var(--jf-paper); position: relative; }
.coast-sticky { padding: var(--jf-space-8) 0; }
.coast-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-bottom: 2rem;
}
.coast-head .eyebrow { color: var(--jf-on-photo-eyebrow); }
.coast-head h2 { color: var(--jf-paper); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; margin: 0; max-width: 14ch; }
.coast-head p { color: var(--jf-on-photo); max-width: 30rem; margin: 0; }
.coast-progress { display: none; }
.coast-track {
  display: flex;
  gap: 1.25rem;
  padding: 0 var(--jf-gutter) 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--jf-gutter);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.coast-track::-webkit-scrollbar { display: none; }
.coast-panel {
  position: relative;
  flex: 0 0 min(84vw, 30rem);
  scroll-snap-align: start;
  border-radius: var(--jf-radius-l);
  overflow: hidden;
  background: #2a231f;
  isolation: isolate;
  color: var(--jf-paper);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
}
.coast-panel:hover { color: var(--jf-paper); }
.coast-panel-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.coast-panel-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.12) translate3d(var(--px, 0px), 0, 0);
  transition: transform 1400ms var(--jf-ease-out);
}
.coast-panel:hover .coast-panel-media img { transform: scale(1.18) translate3d(var(--px, 0px), 0, 0); }
.coast-panel::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26, 22, 20, 0.15) 0%, rgba(26, 22, 20, 0.35) 35%, var(--jf-scrim) 62%, var(--jf-scrim-header) 100%);
}
.coast-panel-body { padding: 1.75rem 1.6rem 1.6rem; }
.coast-num {
  display: block;
  font-family: var(--jf-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 1rem;
  color: var(--jf-on-photo-eyebrow);
  margin-bottom: 0.4rem;
}
.coast-panel h3 { color: var(--jf-paper); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 400; margin: 0 0 0.6rem; }
.coast-panel p { color: var(--jf-on-photo); font-size: 0.98rem; margin: 0 0 1.1rem; max-width: 30ch; }
.coast-panel-cta { color: var(--jf-on-photo-link); font-weight: 600; font-size: 0.92rem; }
.coast-end {
  aspect-ratio: auto;
  background: var(--jf-cream);
  color: var(--jf-ink);
  justify-content: center;
  padding: 2rem 1.75rem;
}
.coast-end::before { display: none; }
.coast-end .coast-num { color: var(--jf-terracotta-deep); font-weight: 400; }
.coast-end h3 { color: var(--jf-ink); font-size: clamp(1.75rem, 3vw, 2.4rem); }
.coast-end ul { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.coast-end li { border-top: 1px solid var(--jf-line); margin: 0; }
.coast-end li:last-child { border-bottom: 1px solid var(--jf-line); }
.coast-end a {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 52px; padding: 0.5rem 0;
  color: var(--jf-ink); text-decoration: none; font-family: var(--jf-serif); font-size: 1.25rem;
  transition: color 300ms ease, padding 0ms;
}
.coast-end a .arr { transition: transform 480ms var(--jf-ease-out); }
.coast-end a:hover { color: var(--jf-terracotta-deep); }
.coast-end a:hover .arr { transform: translateX(6px); }

/* Pinned mode (JS, desktop, motion allowed): vertical scroll drives the track */
.coast.is-pinned .coast-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: calc(var(--header-h) + 1.5rem) 0 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.coast.is-pinned .coast-track {
  overflow: visible;
  scroll-snap-type: none;
  padding-left: max(var(--jf-gutter), calc((100vw - var(--jf-max)) / 2));
  padding-right: max(var(--jf-gutter), calc((100vw - var(--jf-max)) / 2));
  width: max-content;
  will-change: transform;
}
.coast.is-pinned .coast-panel { flex-basis: auto; width: min(40vw, 36rem); height: min(62vh, 36rem); aspect-ratio: auto; }
.coast.is-pinned .coast-panel.coast-end { width: min(30vw, 24rem); }
.coast.is-pinned .coast-progress {
  display: block;
  position: relative;
  width: min(100% - 2 * var(--jf-gutter), var(--jf-max));
  margin: 2rem auto 0;
  height: 1px;
  background: rgba(255, 252, 247, 0.18);
}
.coast-progress i { position: absolute; inset: 0; background: var(--jf-on-photo-link); transform-origin: left center; transform: scaleX(var(--p, 0)); }

/* ——— Baan Yin Dee feature (home) ——— */
.byd-feature {
  position: relative;
  background: #14100e;
  color: var(--jf-paper);
  overflow: hidden;
  padding: var(--jf-space-9) 0 0;
}
.byd-feature-grid {
  display: grid;
  gap: 3rem;
  align-items: center;
}
.byd-media { position: relative; margin-bottom: 2.5rem; }
.byd-main > [data-parallax] { position: absolute; inset: -8% 0; }
.byd-main picture, .byd-inset picture { display: block; width: 100%; height: 100%; }
.byd-main figcaption { z-index: 1; }
.byd-main {
  position: relative;
  margin: 0;
  border-radius: var(--jf-radius-l);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 78vh;
}
.byd-main img, .byd-inset img { width: 100%; height: 100%; object-fit: cover; }

.byd-inset {
  position: absolute;
  margin: 0;
  right: -1rem;
  bottom: -2.5rem;
  width: 46%;
  aspect-ratio: 4 / 5;
  border-radius: var(--jf-radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  border: 6px solid #14100e;
}
.byd-media figcaption {
  position: absolute; left: 1rem; bottom: 1rem;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--jf-on-photo); background: var(--jf-scrim); padding: 0.35rem 0.65rem; border-radius: var(--jf-radius-pill);
}
.byd-copy .eyebrow { color: var(--jf-on-photo-eyebrow); }
.byd-feature h2 {
  color: var(--jf-paper);
  font-size: clamp(3.25rem, 8vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin-bottom: 1.5rem;
}
.byd-lede { font-family: var(--jf-serif); font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--jf-on-photo); max-width: 34ch; }
.byd-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 0.5rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255, 252, 247, 0.16);
  border-bottom: 1px solid rgba(255, 252, 247, 0.16);
}
.byd-stats dt { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jf-on-photo-eyebrow); order: 2; }
.byd-stats div { display: flex; flex-direction: column; gap: 0.25rem; }
.byd-stats dd { margin: 0; font-family: var(--jf-serif); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; color: var(--jf-paper); font-variant-numeric: tabular-nums; }
.byd-stats dd small { font-size: 0.45em; margin-left: 0.15em; color: var(--jf-on-photo); }
.byd-feature .btn-row { margin-top: 2rem; }
.byd-feature .btn-primary { padding: 1.15rem 1.9rem; font-size: 1rem; }
.byd-note { font-size: 0.85rem; color: var(--jf-on-photo); max-width: 44ch; margin-top: 1.25rem; }
.byd-feature .byd-note a { color: var(--jf-on-photo-link); }
@media (min-width: 900px) {
  .byd-feature-grid { grid-template-columns: 1.05fr 1fr; gap: 5rem; }
  .byd-media { margin-bottom: 0; }
}

/* Photo ribbon: drifts sideways with scroll */
.byd-ribbon {
  margin-top: var(--jf-space-9);
  padding-bottom: var(--jf-space-8);
  overflow: hidden;
}
.byd-ribbon-track { display: flex; gap: 1rem; width: max-content; padding-left: var(--jf-gutter); will-change: transform; }
.byd-ribbon figure { margin: 0; width: clamp(220px, 28vw, 420px); aspect-ratio: 3 / 2; border-radius: var(--jf-radius); overflow: hidden; flex: 0 0 auto; background: #2a231f; }
.byd-ribbon figure:nth-child(even) { aspect-ratio: 4 / 5; width: clamp(160px, 18vw, 280px); }
.byd-ribbon img { width: 100%; height: 100%; object-fit: cover; }
.byd-ribbon-caption { width: min(100% - 2 * var(--jf-gutter), var(--jf-max)); margin: 1rem auto 0; font-size: var(--jf-caption); color: var(--jf-on-photo); }
@media (max-width: 719px) {
  .byd-ribbon-track { overflow-x: auto; width: auto; scroll-snap-type: x mandatory; padding-right: var(--jf-gutter); scrollbar-width: none; }
  .byd-ribbon-track::-webkit-scrollbar { display: none; }
  .byd-ribbon figure { scroll-snap-align: start; width: 70vw; }
  .byd-ribbon figure:nth-child(even) { width: 46vw; }
  .byd-inset { right: 0.5rem; bottom: -1.5rem; }
}

/* ——— Book-direct bar (Baan Yin Dee profile) ——— */
.direct-bar {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.5rem 0.5rem 1.25rem;
  border-radius: var(--jf-radius-pill);
  background: rgba(20, 16, 14, 0.94);
  color: var(--jf-paper);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 252, 247, 0.12);
  transform: translate3d(-50%, 160%, 0);
  opacity: 0;
  transition: transform 700ms var(--jf-ease-out), opacity 400ms ease;
  max-width: calc(100vw - 2rem);
}
.direct-bar.is-shown { transform: translate3d(-50%, 0, 0); opacity: 1; }
.direct-bar-text { font-size: 0.85rem; line-height: 1.3; }
.direct-bar-text strong { display: block; font-family: var(--jf-serif); font-weight: 500; font-size: 1.05rem; }
.direct-bar-text span { color: var(--jf-on-photo-eyebrow); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.direct-bar .btn { white-space: nowrap; box-shadow: none; }
@media (max-width: 420px) {
  .direct-bar { left: 0.75rem; right: 0.75rem; transform: translate3d(0, 160%, 0); justify-content: space-between; }
  .direct-bar.is-shown { transform: none; }
}
/* the cookie card and the bar share the corner; the cookie card wins */
.cookie-consent:not([hidden]) ~ .direct-bar { display: none; }

/* BYD profile CTA band with the RICE terrace behind it */
.cta-band-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--jf-ink);
}
.cta-band-photo > picture { position: absolute; inset: -10% 0; z-index: -2; display: block; }
.cta-band-photo > picture img { width: 100%; height: 100%; object-fit: cover; }
.cta-band-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--jf-scrim); }
.cta-band-photo h2 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 400; }

/* Hotel profile hero figure + gallery */
.hotel-hero { overflow: hidden; }
.hotel-gallery figure { overflow: hidden; border-radius: var(--jf-radius); }
.hotel-gallery img { transition: transform 1400ms var(--jf-ease-out); }
.hotel-gallery figure:hover img { transform: scale(1.05); }

/* Contact form: focus line draws under the field */
.contact-form .form-group { position: relative; }
.contact-form input, .contact-form textarea { transition: border-color 300ms ease, box-shadow 300ms ease; }
.contact-form input:focus, .contact-form textarea:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--jf-terracotta) 18%, transparent); }

/* ——— Mobile menu: sheet wipes down, links rise in sequence ——— */
@media (max-width: 859px) {
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: -1;
    margin: 0;
    padding: calc(var(--header-h) + var(--jf-space-4)) var(--jf-gutter) var(--jf-space-7);
    gap: 0;
    align-items: stretch;
    background: var(--jf-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translate3d(0, -100%, 0);
    transition: transform 650ms var(--jf-ease-in-out), visibility 0s linear 650ms;
  }
  .nav-open .nav-links {
    visibility: visible;
    transform: none;
    transition: transform 650ms var(--jf-ease-out), visibility 0s;
  }
  .nav-links li {
    border-bottom: 1px solid rgba(255, 252, 247, 0.12);
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    transition: opacity 300ms ease, transform 300ms ease;
  }
  .nav-open .nav-links li {
    opacity: 1;
    transform: none;
    transition: opacity 700ms var(--jf-ease-out), transform 700ms var(--jf-ease-out);
    transition-delay: calc(var(--li, 0) * 45ms + 180ms);
  }
  .nav-links li:nth-child(1) { --li: 0; } .nav-links li:nth-child(2) { --li: 1; }
  .nav-links li:nth-child(3) { --li: 2; } .nav-links li:nth-child(4) { --li: 3; }
  .nav-links li:nth-child(5) { --li: 4; } .nav-links li:nth-child(6) { --li: 5; }
  .nav-links li:nth-child(7) { --li: 6; } .nav-links li:nth-child(8) { --li: 7; }
  .nav-links a, .site-header .nav-links a, .site-header.on-hero .nav-links a, .site-header.on-hero.scrolled .nav-links a {
    display: flex; align-items: center; min-height: 52px; padding: var(--jf-space-2) 0;
    font-family: var(--jf-serif); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em;
    color: var(--jf-paper); text-shadow: none;
  }
  .nav-links a::after { display: none; }
  /* The header keeps its menu styling while the sheet slides away, so the
     backdrop-filter does not trap the fixed sheet mid-animation. */
  .site-header.nav-closing,
  .site-header.on-hero.nav-closing,
  .site-header.on-hero.scrolled.nav-closing {
    background: var(--jf-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .site-header.nav-closing .logo { color: var(--jf-paper); text-shadow: none; }
  .site-header.nav-closing .nav-toggle { background: transparent; border-color: rgba(255, 252, 247, 0.5); color: var(--jf-paper); }
}

/* ——— Page transitions (cross-document View Transitions) ——— */
@view-transition { navigation: auto; }
.site-header { view-transition-name: jf-header; }
.hero-media { view-transition-name: jf-hero; }
::view-transition-group(jf-hero) { animation-duration: 900ms; animation-timing-function: var(--jf-ease-out); }
::view-transition-old(jf-hero), ::view-transition-new(jf-hero) { height: 100%; object-fit: cover; overflow: hidden; }
::view-transition-old(root) { animation: 420ms var(--jf-ease-in-out) both jf-vt-out; }
::view-transition-new(root) { animation: 700ms var(--jf-ease-out) 120ms both jf-vt-in; }
::view-transition-group(jf-header) { animation-duration: 0s; }
@keyframes jf-vt-out { to { opacity: 0; transform: translate3d(0, -24px, 0); } }
@keyframes jf-vt-in { from { opacity: 0; transform: translate3d(0, 32px, 0); } }

/* Fallback fade where cross-document transitions are not supported */
.vt-fb body { animation: jf-page-in 600ms var(--jf-ease-out) both; }
.vt-fb.is-leaving body { opacity: 0; transition: opacity 220ms ease; }
@keyframes jf-page-in { from { opacity: 0; } }

/* ——— Lenis (desktop smooth scroll, js/vendor/lenis.min.js) ——— */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ——— Reduced motion: everything visible, nothing moves ——— */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
  .js .rv, .js .rv.is-in, .ln-i { opacity: 1 !important; transform: none !important; }
  .hero-media, [data-parallax], .coast-track, .byd-ribbon-track,
  .card-media img, .byd-main img, .coast-panel-media img, .hero-media img { transform: none !important; }
  .scroll-cue-line::after { animation: none !important; transform: none; }
  .btn, .btn-stack { transform: none !important; }
  .hero-slide:not(:first-child) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-text .sw { --o: 1 !important; }
}

/* ——— Statement: words light up as the reader scrolls ——— */
.statement { padding: clamp(5rem, 14vw, 11rem) 0; background: var(--jf-cream); }
.statement-text {
  font-family: var(--jf-serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 4.6vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  color: var(--jf-ink);
  max-width: 24ch;
  margin: 0;
}
.statement-text .sw { opacity: var(--o, 1); transition: opacity 200ms linear; }
.js .statement-text.is-words .sw { --o: 0.16; }
.js .statement-text.is-words .sw.lit { --o: 1; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.cta-band-photo .eyebrow { color: var(--jf-on-photo-eyebrow); }
.cta-band-photo p { color: var(--jf-on-photo); max-width: 44ch; }

/* Hotel profiles: the hero gets the full screen */
.page-hero.page-hero-photo:has(.cta-stack) { min-height: clamp(560px, 86vh, 900px); }
.page-hero-photo:has(.cta-stack) h1 { font-size: clamp(3rem, 8vw, 6.5rem); letter-spacing: -0.045em; }

/* Baan Yin Dee profile on phones: the property shows in a band above the
   text. The scrim is light over that band and full (--jf-scrim) from just
   above the breadcrumb down, so every line of text keeps its contrast. */
@media (max-width: 899px) {
  .hero-property { --band: calc(var(--header-h) + 30svh); }
  .hero-property > .container { padding-top: var(--band); }
  .hero-property .page-hero-bg { object-position: 50% 0%; }
  .hero-property::after {
    background: linear-gradient(180deg,
      rgba(26, 22, 20, 0.42) 0,
      rgba(26, 22, 20, 0.12) calc(var(--header-h) + 3rem),
      rgba(26, 22, 20, 0.12) calc(var(--band) - 9rem),
      var(--jf-scrim) calc(var(--band) - 1.5rem),
      var(--jf-scrim) 100%);
  }
}
/* Photo heroes whose sky is bright (Kata: an overcast sky over the
   headline's right half). On desktop the full scrim runs to 72% before it
   softens, so the long headline keeps AA. Phones already use the full scrim. */
@media (min-width: 900px) {
  .page-hero-photo.hero-bright-sky::after {
    background: linear-gradient(90deg, var(--jf-scrim) 0%, var(--jf-scrim) 72%, var(--jf-scrim-soft) 100%);
  }
}
/* Home hero on phones: the same photo-band treatment. The bay shows under a
   light scrim, and the full scrim sits behind the text block only, from
   just above its first line to the foot of the hero. */
@media (max-width: 899px) {
  .hero-bleed::before {
    background: linear-gradient(180deg,
      rgba(26, 22, 20, 0.42) 0,
      rgba(26, 22, 20, 0.12) calc(var(--header-h) + 3rem),
      rgba(26, 22, 20, 0.12) 100%);
  }
  .hero-bleed-layout::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -6rem;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(26, 22, 20, 0) 0,
      var(--jf-scrim) calc(6rem + var(--jf-space-8) - 1.5rem),
      var(--jf-scrim) 100%);
  }
}
/* Upright phones: a full-height cover crop of a landscape photo puts only
   sky in the band, so the photo fills the top of the hero at close to its
   own shape and fades into the ink under the text. */
@media (max-width: 899px) and (orientation: portrait) {
  .hero-bleed .hero-media {
    bottom: auto;
    height: calc(var(--header-h) + 52svh);
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  }
}
/* The ghost button in a dark band had paper fill under white text */
.cta-band .btn-ghost { background: transparent; }
.byd-media figcaption { top: 1rem; bottom: auto; }
@media (max-width: 899px) {
  .byd-media { margin-bottom: 4.5rem; }
}
.cta-band .btn-ghost::before { background: rgba(255, 252, 247, 0.16); }
/* Tall screens: the hero stops at 1000px. Buttons take the site face
   (button elements defaulted to Arial). */
.hero-bleed { min-height: min(100svh, 1000px); }
button.btn { font-family: inherit; }

/* Print: content not yet scrolled into view must still print */
@media print {
  .js .rv, .ln-i, .hero-media, [data-parallax], .coast-track, .byd-ribbon-track { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .js .statement-text.is-words .sw { --o: 1; }
  .direct-bar, .hero-meta { display: none !important; }
  .coast.is-pinned { height: auto !important; }
  .coast.is-pinned .coast-sticky { position: static; height: auto; }
}