/* Casa Santo — Location: the arrival journey.
   A sticky jungle map, sun-washed in limestone, sand and sage like a hand-tinted
   travel map, with chapters that scroll over it. */

.location-page {
  --map-land: #e1d5bf; --glass: #f2ede3f0; --hair: #7d62402e; --map-ink: #2a2d25;
  --pill: #231d15eb; --brass-light: #e2c79c; --clay: #94442a; --chapter-w: min(420px, 100%);
}

/* ---------- intro ---------- */
.loc-intro { min-height: 0; padding-bottom: clamp(64px, 8vw, 120px); }
.loc-title { font-size: clamp(1.7rem, 3.4vw, 3.6rem); }
.loc-cue {
  display: flex; align-items: center; gap: 14px; margin: 2.2rem 0 0;
  font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: #4a4d45;
}
.loc-cue-line { position: relative; display: block; width: 1px; height: 42px; background: #12150f26; overflow: hidden; }
.loc-cue-line::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%;
  background: var(--brass-deep); animation: loc-drip 2.4s var(--ease) infinite;
}
@keyframes loc-drip { to { top: 100%; } }

/* ---------- the journey ---------- */
.journey { position: relative; background: var(--map-land); color: var(--ink); --focus: var(--ink); }

.journey-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--map-land);
}
.journey-static, .journey-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.journey-static { display: block; }
.journey-map { opacity: 0; transition: opacity 1.4s var(--ease); background: var(--map-land); }
.journey.live .journey-map { opacity: 1; }
.journey.live .journey-static { visibility: hidden; transition: visibility 0s 1.4s; }

/* Atmosphere over the map: a soft limestone haze at the top (so the page above
   flows into the map), warm sunlight, gently deepened sand at the edges, a fine
   paper grain, and a sunrise glow for the last chapter. */
.journey-vignette, .journey-grain, .journey-dawn { position: absolute; inset: 0; pointer-events: none; }
.journey-vignette {
  background:
    linear-gradient(#f2ede3d9 0, #f2ede300 24%),
    radial-gradient(70% 60% at 72% 18%, #fff4e01f, transparent 70%),
    radial-gradient(130% 100% at 55% 50%, transparent 58%, #a88d6642 100%);
}
.journey-grain {
  opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .49  0 0 0 0 .38  0 0 0 0 .25  0 0 0 .32 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Sunrise: a peach and gold sky band over the sea, a soft sun on the horizon
   and a faint golden path on the water. */
.journey-dawn {
  opacity: 0;
  background:
    radial-gradient(circle at 66% 22%, #fffaf0 0, #fff1d6 .9%, #fbd9a6 1.5%, #f6c088b3 3%, #f2b27c4d 8%, #f0b07a1a 15%, transparent 28%),
    radial-gradient(3% 26% at 66% 44%, #fde3b866, transparent 100%),
    radial-gradient(80% 40% at 66% 8%, #f5c08e4d, transparent 72%),
    linear-gradient(#f3c497a6 0%, #f5cfa666 9%, #f7dcbd1f 24%, transparent 38%);
  background-repeat: no-repeat;
  transform: translateY(24px);
  transition: opacity 2.6s var(--ease), transform 6s var(--ease);
}
.journey.dawn .journey-dawn { transform: none; }
.journey.dawn .journey-dawn { opacity: 1; }

/* MapLibre: keep the attribution visible but quiet, as a small cream frosted pill. */
.journey .maplibregl-ctrl-attrib {
  background: #f2ede3cc !important; color: #55584f; border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px var(--hair);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--sans); font-size: 10px; letter-spacing: .02em;
}
.journey .maplibregl-ctrl-attrib a { color: #3d4037; }
.journey .maplibregl-ctrl-attrib-button { filter: sepia(.6); opacity: .75; }
.journey .maplibregl-ctrl-bottom-right { z-index: 3; }

/* Chapter rail (desktop) */
.journey-rail {
  position: absolute; left: var(--inset); bottom: 34px; z-index: 2;
  list-style: none; margin: 0; padding: 0; display: flex; gap: 22px;
  font-size: .66rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase; color: #3f4239;
}
.journey-rail li { display: flex; align-items: center; gap: 10px; transition: color .6s var(--ease); }
.journey-rail li::before { content: ''; width: 5px; height: 5px; border-radius: 99px; background: currentColor; opacity: .7; transition: width .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease); }
.journey-rail li::after { display: none; }
.journey-rail li span { font-family: var(--display); letter-spacing: .14em; }
.journey-rail li.on { color: #6e5335; font-weight: 500; }
.journey-rail li.on::before { background: var(--brass-deep); }
.journey-rail li { text-shadow: 0 0 3px #f2ede3, 0 0 10px #f2ede3e6, 0 0 18px #f2ede3b3; }
.journey-rail li.on::before { width: 22px; height: 3px; opacity: 1; box-shadow: 0 0 0 2px #f2ede3b3; }

/* Chapters scroll over the stage */
.journey-steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.chapter {
  min-height: 110vh; min-height: 110svh; display: flex; align-items: center;
  padding: 120px var(--inset) 60px;
}
.chapter:first-child { min-height: 100svh; }
.chapter-last { min-height: 100svh; }
.chapter-card {
  pointer-events: auto; width: var(--chapter-w);
  padding: clamp(26px, 2.6vw, 36px);
  background: var(--glass); color: var(--ink); border: 0; border-radius: 20px;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #fffaf0b3, inset 0 0 0 1px var(--hair), 0 26px 60px -22px #5a442a59, 0 10px 26px -14px #5a442a40;
  opacity: .35; transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.chapter.on .chapter-card, .journey:not(.js) .chapter-card { opacity: 1; transform: none; }
.chapter-num {
  margin: 0 0 1.1rem; font-size: .7rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: #6e5335;
}
.chapter-num i { color: var(--brass-dim); }
.chapter-card h2 {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem); line-height: 1.25; color: var(--ink);
}
.chapter-card h2 em { color: var(--brass-deep); }
.chapter-card p:not(.chapter-num) { margin: 1rem 0 0; color: var(--map-ink); font-size: 1.02rem; line-height: 1.65; }
.chapter-card .chapter-note { font-size: .84rem !important; color: #575a51 !important; line-height: 1.5 !important; padding-top: 1rem; border-top: 1px solid var(--hair); }
.chapter-card .button { margin-top: 1.8rem; }
/* "Plan your stay": brass-deep with cream text on the light card. */
.journey .chapter-card .button-solid { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--limestone); font-weight: 500; }
.journey .chapter-card .button-solid:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--limestone); outline: 2px solid var(--brass-deep); outline-offset: 3px; }
@media (hover: hover) { .journey .chapter-card .button-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--limestone); } }

/* Journey times */
.times { list-style: none; margin: 1.3rem 0 0; padding: 0; }
.times li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: .55rem 0; border-bottom: 1px solid var(--hair); font-size: .95rem; color: var(--map-ink);
}
.times li:last-child { border-bottom: 0; }
.times small { font-size: .78rem; color: #575a51; }
.times b { flex: none; font-weight: 500; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: #74593a; }

/* ---------- map markers (HTML, so they use the brand fonts) ---------- */
.mk { pointer-events: none; font-family: var(--sans); }
/* MapLibre manages the marker's own opacity, so the fade lives on the inner element. */
.mk-in { position: relative; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(6px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.mk.on .mk-in { opacity: 1; transform: none; transition-delay: .9s; }
.mk-dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 45% 40%, #c8a97e, var(--brass-deep) 75%);
  box-shadow: 0 0 0 2px #f2ede3e6, 0 0 0 3px #7d624033, 0 0 10px 2px #f2ede3b3;
}
.mk-air .mk-dot { width: 7px; height: 7px; background: var(--ink-soft); box-shadow: 0 0 0 2px #f2ede3e6, 0 0 10px 2px #f2ede3b3; }
/* Map labels: dark ink with a soft limestone halo, like ink settling into paper. */
.mk-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; text-shadow: 0 0 2px #f2ede3, 0 0 6px #f2ede3f2, 0 0 14px #f2ede3cc; }
.mk-name { font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.mk-time { font-size: .8rem; font-style: italic; font-weight: 400; letter-spacing: .01em; color: #6e5335; }
.mk-left .mk-in { flex-direction: row-reverse; }
.mk-below .mk-in { flex-direction: column; gap: 8px; }
.mk-below .mk-text { align-items: center; }
.mk-left .mk-text { align-items: flex-end; }
/* The villa: a glowing brass beacon on its exact point, with its label beside it */
.mk-area { z-index: 2; }
.mk-area .mk-in { gap: 12px; }
.mk-beacon { position: relative; flex: none; width: 24px; height: 24px; }
.mk-beacon b {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #fff8ea 0 22%, #f3cf98 52%, #d99a5e 100%);
  box-shadow: 0 0 0 2px #231d15, 0 0 0 3.5px #f2ede3, 0 0 14px 5px #e8a25fa6, 0 0 32px 10px #e8a25f47;
}
.mk-beacon i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  border: 1.5px solid #b07a45cc; opacity: 0;
  animation: beacon-ring 4.8s cubic-bezier(.2, .6, .35, 1) infinite;
}
.mk-beacon i + i { display: none; }
@keyframes beacon-ring {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(3.8); opacity: 0; }
}
.mk-area .mk-text {
  gap: 3px; padding: 7px 15px 8px; text-shadow: none;
  background: var(--pill); border: 0; border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px #e2c79c33, 0 0 18px #e8a25f33, 0 10px 22px -10px #3a2c1a8c;
}
.mk-area .mk-name { font-family: var(--display); font-size: .9rem; letter-spacing: .18em; color: var(--limestone); }
.mk-area .mk-time { color: var(--brass-light); font-size: .64rem; font-style: normal; letter-spacing: .12em; text-transform: uppercase; }
.mk-area.mk-stack .mk-in { flex-direction: column; gap: 6px; }
.mk-area.mk-stack .mk-text { align-items: center; text-align: center; }
.mk-town .mk-name { font-family: var(--display); font-weight: 400; font-size: 1.05rem; letter-spacing: .24em; }

/* ---------- static fallback ---------- */
.journey.static .journey-static { visibility: visible; }

/* ---------- phones and tablets ---------- */
@media (max-width: 960px) {
  .journey-rail { display: none; }
  /* Phones: each card rises from the bottom and rests there while its chapter
     plays, leaving the top of the screen to the map. */
  .chapter { align-items: flex-end; padding: 0 16px; min-height: 150svh; }
  .chapter:first-child { min-height: 130svh; }
  .chapter-last { min-height: 100svh; }
  .chapter-card {
    position: sticky; bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
    width: 100%; max-width: 520px; margin: 0 auto 16px; padding: 20px 22px 22px;
  }
  .chapter-card h2 { font-size: 1.2rem; }
  .chapter-card p:not(.chapter-num) { font-size: .98rem; margin-top: .75rem; }
  .chapter-num { margin-bottom: .8rem; }
  .times { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; margin-top: .9rem; }
  .times li { flex-direction: column; align-items: flex-start; gap: 0; padding: .4rem 0; font-size: .86rem; line-height: 1.35; }
  .times li:nth-last-child(2) { border-bottom: 0; }
  .times b { font-size: .66rem; }
  .times small { display: none; }
  .chapter-card .chapter-note { padding-top: .7rem; }
  .mk-name { font-size: .64rem; letter-spacing: .11em; }
  .mk-time { font-size: .74rem; }
  .mk-area .mk-name { font-size: .78rem; }
  .mk-town .mk-name { font-size: .9rem; }
  .journey-static.narrow { top: 84px; height: calc(100% - 84px); }
  .journey-static.narrow .ls-labels text { font-size: 24px; letter-spacing: 3px; }
  .journey-static.narrow .ls-air, .journey-static.narrow .ls-sea { display: none; }
  .journey-static.narrow .ls-home { transform: translateY(-24px); }
  .journey .maplibregl-ctrl-top-right { top: 84px; }
}
@media (max-width: 560px) {
  .loc-cue { margin-top: 1.6rem; }
  .chapter-card .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .loc-cue-line::after { animation: none; top: 30%; }
  .chapter-card, .mk, .mk-in, .journey-map, .journey-dawn, .journey.dawn .journey-dawn, .journey-rail li, .journey-rail li::after { transition: none !important; }
  .chapter-card, .journey-dawn { transform: none !important; }
}

/* "Keep scrolling" cue: a frosted pill with a soft brass edge and glow,
   centred at the foot of the screen, above the chapter rail */
.journey-cue {
  position: absolute; left: 50%; bottom: 86px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  transform: translateX(-50%); cursor: pointer; pointer-events: auto;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.journey-cue.done { opacity: 0; transform: translate(-50%, 12px); pointer-events: none; }
.sc-pill {
  display: flex; align-items: center; gap: .9em; white-space: nowrap;
  padding: 14px 24px 14px 26px; border: 1px solid #c8a97e8c; border-radius: 999px;
  background: var(--pill); color: var(--limestone);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  box-shadow: 0 0 0 4px #f2ede38c, 0 0 24px #e8a25f2e, 0 14px 30px -12px #3a2c1a99;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.sc-label { color: var(--brass-light); }
.sc-next { font-weight: 400; letter-spacing: .1em; padding-left: .9em; border-left: 1px solid #f2ede340; color: var(--limestone); }
.journey-cue:focus-visible .sc-pill { background: var(--brass-deep); border-color: var(--brass-light); }
@media (hover: hover) { .journey-cue:hover .sc-pill { background: var(--brass-deep); border-color: var(--brass-light); } }
.journey-cue:focus-visible { outline: none; }
.journey-cue:focus-visible .sc-pill { outline: 2px solid var(--ink); outline-offset: 3px; }
.journey-cue i {
  position: relative; display: block; width: 1.5px; height: 24px; border-radius: 2px; background: var(--brass-deep);
  filter: drop-shadow(0 0 4px #f2ede3); animation: cue-bob 1.8s ease-in-out infinite;
}
.journey-cue i::after {
  content: ''; position: absolute; left: -5px; bottom: 0; width: 10px; height: 10px;
  border-right: 1.5px solid var(--brass-deep); border-bottom: 1.5px solid var(--brass-deep); border-radius: 0 0 2px 0; transform: rotate(45deg);
}
@keyframes cue-bob { 0%, 100% { transform: translateY(-3px); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }
@keyframes sc-arrow { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (max-width: 960px) {
  .journey-cue { bottom: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); flex-direction: row; gap: 0; }
  .journey-cue i { display: none; }
  .sc-pill { padding: 12px 16px 12px 18px; font-size: .68rem; letter-spacing: .14em; gap: .7em; }
  .sc-next { letter-spacing: .08em; padding-left: .7em; }
  .sc-pill::after {
    content: '\2193'; display: inline-block; font-size: 1.05rem; line-height: 1; letter-spacing: 0;
    animation: sc-arrow 1.6s ease-in-out infinite;
  }
  .chapter-card { bottom: 76px; bottom: calc(76px + env(safe-area-inset-bottom)); margin-bottom: 76px; }
  .chapter-last .chapter-card { bottom: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .journey-cue i, .sc-pill, .sc-pill::after { animation: none; } }

/* Secondary landmarks (no journey times): quieter, so the villa stays the focus */
.mk-minor .mk-dot { width: 5px; height: 5px; background: #55584f; box-shadow: 0 0 0 2px #f2ede3d9, 0 0 8px #f2ede3b3; }
.mk-minor .mk-name { font-size: .78rem; font-weight: 400; font-style: italic; letter-spacing: .02em; text-transform: none; color: #3a3d34; }
/* The villa's beacon breathes slowly; with reduced motion it rests as a steady ring */
.mk-area .mk-name { text-shadow: none; }
.mk-beacon b { animation: beacon-breathe 3.6s ease-in-out infinite; }
@keyframes beacon-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .mk-beacon b, .mk-beacon i { animation: none; }
  .mk-beacon i { opacity: .4; transform: scale(2.2); }
}
@media (max-width: 960px) { .mk-long { display: none; } }

/* Chapter 4: both airports lie off the local map, so they are shown as pointers at its edges */
.journey-far {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease);
}
.journey-far.on { opacity: 1; }
.journey-far p {
  position: absolute; margin: 0; display: flex; align-items: center; gap: 12px;
  font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; text-shadow: 0 0 2px #f2ede3, 0 0 6px #f2ede3f2, 0 0 14px #f2ede3cc;
}
.journey-far .far-cun { top: 104px; right: var(--inset); }
.journey-far .far-tqo { top: 50%; left: calc(var(--inset) + var(--chapter-w) + 36px); }
.journey-far b { display: block; font-weight: 500; color: var(--ink); }
.journey-far span { color: #6e5335; font-weight: 500; letter-spacing: .1em; }
.journey-far i {
  position: relative; width: 30px; height: 30px; border: 1px solid #7d624073; border-radius: 50%; flex: none;
  background: #f2ede3d9; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 6px 16px -8px #3a2c1a66;
}
.journey-far i::before {
  content: ''; position: absolute; left: 50%; top: 8px; width: 1.25px; height: 14px; margin-left: -.6px; border-radius: 1px; background: var(--brass-deep);
}
.journey-far i::after {
  content: ''; position: absolute; left: 50%; top: 8px; width: 7px; height: 7px; margin-left: -4px;
  border-left: 1.25px solid var(--brass-deep); border-top: 1.25px solid var(--brass-deep); border-radius: 1px 0 0 0; transform: rotate(45deg);
}
.journey-far .far-tqo i { transform: rotate(-90deg); }
@media (max-width: 960px) {
  .journey-far p { font-size: .6rem; gap: 9px; letter-spacing: .1em; }
  .journey-far .far-cun { top: 92px; right: auto; left: 16px; }
  .journey-far .far-tqo { top: 136px; left: 16px; }
  .journey-far i { width: 24px; height: 24px; }
  .journey-far i::before { top: 6px; height: 11px; }
  .journey-far i::after { top: 6px; }
}

/* Chapter 3: neighbourhood names inside their washes, set in italic like the
   district names on a hand-painted travel map. */
.mk-zone .mk-name {
  font-family: var(--sans); font-size: 1.02rem; font-weight: 400; font-style: italic;
  letter-spacing: .03em; text-transform: none; color: #2f3229;
}
.mk-zone-home .mk-name { color: var(--clay); font-weight: 500; }
@media (max-width: 960px) { .mk-zone .mk-name { font-size: .86rem; letter-spacing: .02em; } }

/* The map journey keeps its own framing: location.js fits the map to this
   inset, so it stays on the original measure while the header, intro and
   footer use the site-wide small gutter. */
.journey { --inset: max(clamp(22px, 6vw, 110px), calc((100% - 1400px) / 2)); }

/* ---------- finale: into the villa, out into the sunlight ----------
   One more scroll after Sunrise: the camera glides down onto Casa Santo while warm
   light floods in from the edges of the screen toward the villa's beacon, so its
   label stays readable until the very end. The light settles into a soft limestone
   white, a photograph of the villa surfaces out of it, and the invitation to book
   takes over. Scrolling back reverses it. */
.location-page { --sun: #f7f3ec; }
@property --iris { syntax: '<length>'; inherits: false; initial-value: 1400px; }
.journey-iris, .journey-wash, .journey-photo { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* The bloom: clear around the villa, then a thin band of warm gold (the edge of the
   sunlight), then bright limestone white toward the edges. */
.journey-iris {
  --iris: 1400px; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%),
    #f7f3ec00 0, #f7f3ec00 var(--iris), #fbe6c440 calc(var(--iris) + 70px),
    #fbe9cfa6 calc(var(--iris) + 200px), #f8efe0eb calc(var(--iris) + 420px), var(--sun) calc(var(--iris) + 680px));
  transition: --iris 1.6s var(--ease), opacity .9s var(--ease);
}
.journey.finale .journey-iris {
  --iris: 70px; opacity: 1;
  transition: --iris 3s cubic-bezier(.3, .1, .3, 1), opacity .8s var(--ease);
}
/* Then everything settles into the white, a touch warmer where the villa was. */
.journey-wash {
  opacity: 0;
  background: radial-gradient(110% 85% at var(--fx, 50%) var(--fy, 50%), #fcf1df, var(--sun) 62%);
  transition: opacity .8s var(--ease);
}
.journey.finale .journey-wash { opacity: 1; transition: opacity 1.3s var(--ease) 1.8s; }
/* The villa appears out of the light: it starts over-exposed and settles. */
.journey-photo { opacity: 0; overflow: hidden; background: var(--sun); transition: opacity .7s var(--ease); }
.journey-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%;
  transform: scale(1.07); filter: brightness(1.45) saturate(.6) contrast(.8);
  transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}
/* A light cream wash on the words' side keeps them crisp; the foot stays soft. */
.journey-photo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #f7f3ecf5 0, #f7f3ece6 calc(var(--inset) + 300px), #f7f3ec8c calc(var(--inset) + 600px), #f7f3ec1a calc(var(--inset) + 860px), #f7f3ec00 100%),
    linear-gradient(#f7f3ec40 0, #f7f3ec00 20%, #f7f3ec00 76%, #f7f3ec80 100%);
}
.journey.finale .journey-photo { opacity: 1; transition: opacity 2s var(--ease) 2.3s; }
.journey.finale .journey-photo img { transform: none; filter: none; transition: transform 9s var(--ease) 2.3s, filter 3.2s var(--ease) 2.3s; }

/* The rail steps aside for the finale. */
.journey-rail { transition: opacity .6s var(--ease); }
.journey.finale .journey-rail { opacity: 0; }

.chapter-finale { min-height: 100vh; min-height: 100svh; color: var(--ink); --focus: var(--ink); }
.finale-panel {
  pointer-events: none; width: min(560px, 100%);
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.chapter-finale.on .finale-panel {
  pointer-events: auto; opacity: 1; transform: none;
  transition: opacity 1.4s var(--ease) 2.6s, transform 1.4s var(--ease) 2.6s;
}
/* Reached with the keyboard, the invitation shows at once. */
.finale-panel:focus-within { opacity: 1; transform: none; transition: none; }
.finale-panel .eyebrow { color: #6e5335; }
.finale-panel .eyebrow i { color: var(--brass-deep); }
.finale-panel h2 { font-size: clamp(1.9rem, 3.3vw, 3.4rem); color: var(--ink); }
.finale-panel h2 em { color: var(--brass-deep); }
.finale-panel p:not(.eyebrow) { max-width: 44ch; margin: 1.5rem 0 0; color: var(--map-ink); font-size: 1.05rem; line-height: 1.65; }
.finale-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 2.4rem; }
/* "Book your stay": brass-deep with cream text, like "Plan your stay" on the chapter cards. */
.finale-panel .button-solid {
  min-height: 54px; padding: 17px 40px; font-weight: 500; font-size: .76rem;
  background: var(--brass-deep); border-color: var(--brass-deep); color: var(--limestone);
  box-shadow: 0 18px 40px -18px #5a442a8c;
}
.finale-panel .button-solid:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--limestone); outline: 2px solid var(--brass-deep); outline-offset: 3px; }
@media (hover: hover) { .finale-panel .button-solid:hover { background: var(--ink); border-color: var(--ink); color: var(--limestone); } }
.finale-link {
  display: inline-flex; align-items: center; gap: .7em; min-height: 44px;
  font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; border-bottom: 1px solid #7d624073;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.finale-link span { color: var(--brass-deep); transition: transform .3s var(--ease); }
.finale-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) { .finale-link:hover { color: #6e5335; border-color: var(--brass-deep); } .finale-link:hover span { transform: translateX(4px); } }
/* Without the script there is no map journey; the finale simply sits on the light. */
.journey:not(.js) .chapter-finale { background: var(--sun); }
.journey:not(.js) .finale-panel { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 960px) {
  /* Phones: the words rest at the foot of the screen, the photograph above them,
     with the button full width and easy to reach. */
  .chapter-finale { padding: 0 16px calc(28px + env(safe-area-inset-bottom)); }
  .finale-panel { width: 100%; max-width: 520px; margin: 0 auto; }
  .finale-panel h2 { font-size: 1.85rem; }
  .finale-panel p:not(.eyebrow) { font-size: 1rem; margin-top: 1.1rem; }
  .finale-actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 1.7rem; }
  .finale-panel .button-solid { width: 100%; }
  .finale-link { justify-content: center; border-bottom: 0; }
  .journey-photo img { object-position: 42% 50%; }
  .journey-iris { --iris: 520px; }
  .journey-photo::after {
    background: linear-gradient(#f7f3ec66 0, #f7f3ec00 16%, #f7f3ec1f 30%, #f7f3ecc7 46%, #f7f3ecf2 58%, var(--sun) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .journey-iris, .journey-wash, .journey-photo, .journey-photo img, .finale-panel, .journey-rail,
  .journey.finale .journey-iris, .journey.finale .journey-wash, .journey.finale .journey-photo,
  .journey.finale .journey-photo img, .chapter-finale.on .finale-panel { transition: none !important; }
  .journey-photo img { transform: none; filter: none; }
  .finale-panel { transform: none; }
}

/* "Keep scrolling" in the Ask Nené style (owner's ask, Nov 2026): black with a
   gold trim and gold lettering, a gold spark that travels round the edge for the
   whole scroll story, and a soft gold glow now and then. Uses the --spark angle
   defined in styles.css. */
.sc-pill { position: relative; background: #0b0d09e6; border: 1px solid #c8a97ea6; color: #ecd3a6; box-shadow: 0 10px 30px #00000040; animation: scflash 7s ease-in-out infinite; }
.sc-pill::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--spark), transparent 0 55%, #c8a97e 70%, #fffbe8 80%, #e3c898 88%, transparent 100%);
  filter: drop-shadow(0 0 3px #f3dcae);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: askspark 3.5s linear infinite;
}
.sc-label { color: #ecd3a6; }
.sc-next { color: #f2ede3; border-left-color: #c8a97e59; }
@keyframes scflash {
  0%, 100% { box-shadow: 0 10px 30px #00000040; }
  84% { box-shadow: 0 10px 30px #00000040, 0 0 0 0 #e3c89800; }
  88% { box-shadow: 0 10px 30px #00000040, 0 0 24px 5px #e3c898b3; }
  94% { box-shadow: 0 10px 30px #00000040, 0 0 0 0 #e3c89800; }
}
.journey-cue:focus-visible .sc-pill { background: var(--brass-deep); color: #fff; }
@media (hover: hover) { .journey-cue:hover .sc-pill { background: #1a1c16; border-color: #e3c898; } }
@media (prefers-reduced-motion: reduce) { .sc-pill, .sc-pill::before { animation: none; } .sc-pill::before { background: none; } }

/* The story now ends by returning to the home page: the closing panel stays
   hidden while the light washes in, then the page fades out to the home page.
   Without the script the closing panel still shows as before. */
.journey.js .finale-panel { visibility: hidden; }
html.leaving { background: #11130f; }
html.leaving::after { content: ''; position: fixed; inset: 0; z-index: 9999; background: #11130f; opacity: 0; pointer-events: none; animation: veil-in .9s ease-in-out forwards; }
@keyframes veil-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html.leaving::after { animation: none; opacity: 1; } }
/* (scroll hold handled in script) */