/* ==========================================================================
   Shaped JT — the scroll film (home page, assets/js/film.js).
   One continuous 4K take (a sunlit courtyard door opens, the camera walks through to the sea) scrubbed by the scroll;
   four chapters of ordinary HTML read over it. Layout contract from the scroll-scrub reference, set in the brand:
   a cream veil, espresso ink, clay accent, Cormorant headlines, the logo drawn in deep brown.
   ========================================================================== */
.film { --film-bg: #F3EADC; --film-ink: #2B1C13; --film-muted: #5B4637; --film-accent: #A36538; --film-p: 0;
  position: relative; isolation: isolate; overflow-x: clip; background: var(--film-bg); color: var(--film-ink); }

/* the stage: sticky, full screen, the clip under the words */
.film__stage { position: sticky; top: 0; z-index: 0; height: 100vh; height: 100dvh; min-height: 560px; overflow: hidden; background: var(--film-bg); }
.film__media, .film__layer, .film__picture, .film__poster, .film__video, .film__still { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; }
.film__poster, .film__video, .film__still { display: block; max-width: none; object-fit: cover; object-position: 50% 50%; }
.film__poster { z-index: 0; }
.film__video { z-index: 1; opacity: 0; }
.film__video.is-painted { opacity: 1; }
.film__still { z-index: 2; opacity: 0; transition: opacity .8s var(--ease); }
.film__still.is-on { opacity: 1; }
.film__veil { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(180deg, rgba(243, 234, 220, .55) 0%, rgba(243, 234, 220, 0) 19%, rgba(243, 234, 220, 0) 80%, rgba(243, 234, 220, .3) 100%); }
.film__progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(43, 28, 19, .12); pointer-events: none; }
.film__progress span { display: block; height: 100%; background: var(--film-accent); transform: scaleX(var(--film-p)); transform-origin: left center; }

/* chapter route: quiet ticks on the right edge, the label shows for the chapter you are in */
.film__route { position: absolute; z-index: 6; right: clamp(12px, 2vw, 30px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; margin: 0; padding: 0; list-style: none; }
.film__go { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 6px 0 6px 14px; font: 600 .6rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(43, 28, 19, .52); cursor: pointer; }
.film__go span { opacity: 0; transform: translateX(6px); transition: opacity .4s var(--ease), transform .5s var(--ease-out); text-shadow: 0 0 12px rgba(243, 234, 220, .9); }
.film__go::after { content: ""; width: 18px; height: 1px; background: currentColor; transition: width .5s var(--ease-out), background .4s; }
.film__go:hover span, .film__go:focus-visible span { opacity: 1; transform: none; }
.film__go[aria-current="step"] { color: var(--film-ink); }
.film__go[aria-current="step"]::after { width: 40px; background: var(--film-accent); }
.film__go:focus-visible { outline: 2px solid var(--film-accent); outline-offset: 4px; border-radius: 4px; }

/* scroll cue, gone as soon as the film starts moving */
.film__cue { position: absolute; z-index: 5; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0;
  font: 600 .58rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--film-muted); opacity: clamp(0, calc(1 - var(--film-p) * 30), 1); pointer-events: none; }
.film__cue span { width: 1px; height: 38px; background: linear-gradient(var(--film-ink), transparent); transform-origin: top; animation: cue 2.6s var(--ease-in-out) infinite; }

/* the story: chapters scroll over the pinned stage */
.film__story { position: relative; z-index: 4; margin-top: -100vh; margin-top: -100dvh; pointer-events: none; }
.film__chapter { position: relative; min-height: calc(var(--w, 1.2) * 100vh); min-height: calc(var(--w, 1.2) * 100dvh); }
.film__pin { position: sticky; top: 0; display: flex; align-items: center; min-height: 100vh; min-height: 100dvh;
  padding: clamp(104px, 13vh, 150px) 88px clamp(56px, 8vh, 100px) clamp(24px, 4.6vw, 80px); }
.film__chapter[data-align="right"] .film__pin { justify-content: flex-end; }
.film__copy { position: relative; width: clamp(20rem, calc(38.3vw - 118px), 34rem); pointer-events: auto; }
.film__copy::before { content: ""; position: absolute; z-index: -1; inset: -5rem -6.5rem; pointer-events: none;
  background: radial-gradient(closest-side, rgba(243, 234, 220, .93) 0%, rgba(243, 234, 220, .84) 38%, rgba(243, 234, 220, .6) 58%, rgba(243, 234, 220, .26) 78%, rgba(243, 234, 220, .07) 92%, rgba(243, 234, 220, 0) 100%); }
.film__copy > * + * { margin-top: 20px; }
.film .eyebrow { color: var(--clay-deep); }
.film .display { font-size: clamp(2.6rem, 3.9vw, 4.9rem); line-height: .98; color: var(--film-ink); }
.film .h2 { font-size: clamp(2.2rem, 3.4vw, 4rem); line-height: 1; color: var(--film-ink); }
.film .display em, .film .h2 em { color: var(--film-accent); }
.film__lede { max-width: 32em; font-size: clamp(1rem, .35vw + .93rem, 1.12rem); line-height: 1.7; color: var(--film-muted); }
.film__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.film__tags li { padding: 8px 14px; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .06em; line-height: 1.3; color: var(--film-ink);
  background: rgba(255, 252, 246, .62); box-shadow: inset 0 0 0 1px rgba(81, 51, 29, .22); }
.film .btn-row { margin-top: 26px; }
.film__copy .link-arrow { color: var(--film-ink); }

.has-announce .film [data-hero] { margin-top: 0; }
.has-announce .film__logo { top: calc(var(--announce-h, 0px) + clamp(92px, 11vh, 132px)); }
.has-announce .film__chapter--open .film__pin { padding-top: calc(clamp(104px, 13vh, 150px) + var(--announce-h, 0px)); }
.film__chapter--open .film__pin { align-items: flex-end; }

/* the logo, drawn in deep brown: a sign painted on the plaster left of the door on wide screens, above the words elsewhere */
.film__logo { position: absolute; left: clamp(36px, 6.4vw, 124px); top: clamp(92px, 11vh, 132px); height: clamp(140px, 22vh, 250px); aspect-ratio: 462 / 669; color: #51331D; pointer-events: none; filter: drop-shadow(0 0 10px rgba(251, 247, 241, .55)); }
.film__logo svg { display: block; width: 100%; height: 100%; overflow: visible; }
.film__logo .figure-draw .emblem-line { fill: currentColor; stroke: currentColor; stroke-width: 1.1px; stroke-linejoin: round; }
.film__logo .figure-draw .emblem-lotus { fill: #A36538; stroke: #A36538; stroke-width: 1.1px; stroke-linejoin: round; }

/* the header sits clear over the film, in dark ink */
.over-film .site-header { color: var(--ink) !important; background: linear-gradient(180deg, rgba(243, 234, 220, .78), rgba(243, 234, 220, .34) 70%, rgba(243, 234, 220, 0)) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.over-film .site-header::after { opacity: 0 !important; }
.over-film .site-header .brand__word, .over-film .site-header .nav__link { text-shadow: 0 0 16px rgba(243, 234, 220, .85); }
.over-film .burger { background: rgba(251, 247, 241, .72); box-shadow: inset 0 0 0 1px rgba(81, 51, 29, .3); }

@media (min-width: 861px) and (max-width: 1179px), (min-width: 861px) and (max-aspect-ratio: 5/4) {
  .film__pin, .film__chapter[data-align="right"] .film__pin { flex-direction: column; align-items: center; justify-content: flex-end; padding: 120px 72px clamp(44px, 6vh, 72px); }
  .film__copy { width: min(40rem, 100%); text-align: center; }
  .film__copy .eyebrow::after { content: ""; display: inline-block; vertical-align: .34em; width: 34px; height: 1px; margin-left: .95em; background: currentColor; opacity: .7; }
  .film__copy .btn-row, .film__tags { justify-content: center; }
  .film__copy .film__lede { margin-inline: auto; }
  .film__copy::before { inset: -8rem -100vw -7rem; background: linear-gradient(to bottom, rgba(243, 234, 220, 0) 0%, rgba(243, 234, 220, .84) 30%, rgba(243, 234, 220, .93) 58%, rgba(243, 234, 220, .88) 76%, rgba(243, 234, 220, 0) 100%); }
  .film__logo { left: auto; right: clamp(40px, 10vw, 120px); top: clamp(150px, 22vh, 200px); height: clamp(120px, 20vh, 190px); }
  .has-announce .film__logo { top: calc(var(--announce-h, 0px) + clamp(150px, 22vh, 200px)); }
  .film__cue { display: none; }
}
@media (max-width: 860px) {
  .film__route, .film__cue { display: none; }
  .film__pin, .film__chapter[data-align="right"] .film__pin, .film__chapter--open .film__pin { flex-direction: column; align-items: flex-start; justify-content: flex-end;
    padding: 96px max(20px, env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
  .film__copy { width: 100%; }
  .film__copy::before { inset: -5rem -2rem -7rem; background: linear-gradient(to bottom, rgba(243, 234, 220, 0) 0%, rgba(243, 234, 220, .86) 26%, rgba(243, 234, 220, .96) 62%, rgba(243, 234, 220, .9) 80%, rgba(243, 234, 220, 0) 100%); }
  .film__copy > * + * { margin-top: 14px; }
  .film__logo, .has-announce .film__logo { position: static; height: clamp(84px, 13vh, 124px); margin-bottom: 12px; }
  .film .display { font-size: clamp(2.25rem, 9.6vw, 3.3rem); }
  .film .h2 { font-size: clamp(2rem, 8.6vw, 2.9rem); }
  .film__chapter--open .film__lede { display: none; }
  .film .btn-row { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .film__chapter { min-height: 100vh !important; min-height: 100dvh !important; }
  .film__still { transition: none; }
  .film__cue span { animation: none; }
}

/* the back-to-top button stays out of the film (it would sit on the words) */
.over-film .to-top { opacity: 0 !important; pointer-events: none !important; }

/* ==========================================================================
   INNER PAGES — every hero opens on its own short film from the same villa by the sea (film.js, second player).
   Dark ink on a cream veil, the page's real photograph in a cream-framed arch.
   ========================================================================== */
.page-hero.film-hero { isolation: isolate; min-height: min(92svh, 940px); display: grid; align-items: end; padding: 170px 0 clamp(64px, 9vw, 116px); background: #F3EADC; }
.film-hero__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.film-hero__picture, .film-hero__poster, .film-hero__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; }
.film-hero__video { z-index: 1; opacity: 0; }
.film-hero__video.is-painted { opacity: 1; }
.film-hero__veil { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(243, 234, 220, .93) 0%, rgba(243, 234, 220, .87) 34%, rgba(243, 234, 220, .6) 50%, rgba(243, 234, 220, .2) 62%, rgba(243, 234, 220, 0) 74%), linear-gradient(180deg, rgba(243, 234, 220, .6) 0%, rgba(243, 234, 220, 0) 22%); }
.page-hero--center.film-hero .film-hero__veil { background: radial-gradient(62% 56% at 50% 62%, rgba(243, 234, 220, .92) 0%, rgba(243, 234, 220, .66) 55%, rgba(243, 234, 220, 0) 92%), linear-gradient(180deg, rgba(243, 234, 220, .55), rgba(243, 234, 220, 0) 26%); }
.film-hero .glow-orb, .film-hero .dapple, .film-hero .motes { display: none; }
.film-hero .page-hero__media { box-shadow: 0 0 0 10px rgba(251, 247, 241, .9), 0 0 0 11px rgba(81, 51, 29, .12), 0 50px 90px -46px rgba(43, 28, 19, .55); }
.film-hero .display em { color: var(--clay); }
.film-hero .lede { color: #4E3B2E; }
@media (max-width: 860px) {
  .page-hero.film-hero { padding-top: 130px; }
  .film-hero__veil, .page-hero--center.film-hero .film-hero__veil { background: linear-gradient(180deg, rgba(243, 234, 220, .95) 0%, rgba(243, 234, 220, .86) 48%, rgba(243, 234, 220, .4) 74%, rgba(243, 234, 220, 0) 100%); }
  .page-hero--center.film-hero .film-hero__veil { background: linear-gradient(180deg, rgba(243, 234, 220, .8) 0%, rgba(243, 234, 220, .9) 40%, rgba(243, 234, 220, .93) 100%); }
}