/* mobile-film.css: the phone homepage as the film, drawn by js/mobile-film.js.
   Loaded on the homepage only and inert until that script stamps
   html[data-mobile-film], which it does only on a phone with a playable
   source. Every rule is scoped to that attribute so the desktop film and the
   poster fallback see none of this. Colours, faces and clamps are the site's
   own (theme.css, film.css); what is set here is the stage and its layers. */

html[data-mobile-film], html[data-mobile-film] body {
  overflow: hidden; height: 100%; overscroll-behavior: none;
}
html[data-mobile-film] .film { min-height: 100vh; min-height: 100svh; }

/* ------------------------------------------------ the stage
   Fixed under the site bar (z 60), the scrim (55) and the drawer (70). */
.mfilm {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; background: #0b0a09;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.mfilm__v, .mfilm__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.mfilm__v { opacity: 0; transition: opacity .12s linear; background: #0b0a09; }
.mfilm__v.on { opacity: 1; }
.mfilm__poster { z-index: 1; transition: opacity .4s ease; }
.mfilm__poster.off { opacity: 0; pointer-events: none; }
/* The veil is also the surface the finger touches. iOS Safari handles a
   touch that lands on a <video> itself and never bubbles it to the page, so
   with the veil transparent to pointers a swipe over the picture reached no
   listener at all (measured on an iPhone, 9 September 2026). With the veil
   catching, every touch on the film lands on an ordinary element. */
.mfilm__veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: auto;
  background: linear-gradient(180deg,
    rgba(11,10,9,.72) 0%, rgba(11,10,9,.10) 22%, rgba(11,10,9,.06) 38%,
    rgba(11,10,9,.58) 62%, rgba(11,10,9,.86) 84%, rgba(11,10,9,.9) 100%);
}

/* ------------------------------------------------ the words
   Lifted to the lower third: the type sits over the lit middle of the shot,
   where the veil is doing least work, and masks more of the frame while it
   travels. Two blocks can be on screen at once, one leaving and one arriving,
   crossing so the total on screen never drops below about half. */
.mfilm__copy {
  position: absolute; z-index: 3; inset: 0;
  color: var(--bone); pointer-events: none;
}
.mfilm__lay {
  position: absolute; left: 0; right: 0; bottom: clamp(7.5rem, 27vh, 15rem);
  padding: 0 1.6rem 0 1.9rem;
  display: grid; gap: 1rem; justify-items: start;
  opacity: 0; transform: translateY(9px);
  transition: opacity .30s ease, transform .30s ease;
}
.mfilm__lay.on { opacity: 1; transform: none; transition: opacity .26s ease .04s, transform .26s ease .04s; }
/* The Arrival carries the most: title, headline, subline, four dates and the
   link. It goes to the foot of the screen, as on the live page, instead of the
   lower third the shorter blocks use. */
.mfilm__lay:is([data-first], [data-foot]) { bottom: 4.4rem; }
/* The four chapters that read as one sequence, the Crossing, the Programme,
   the Meeting Point and the Evenings, start on ONE line: the line the
   Crossing's label sits on, which is 27vh from the foot less the Crossing's
   own height (label, gap, one line: 4rem). Hung from a common bottom, as the
   others are, a chapter with more lines started higher and the labels
   wandered (Edgar, 10 September: "in line with the crossing, and the meeting
   point should then follow that, same with the evenings"). Anchored by the
   top, they share the line and grow downwards into the veil's dark band.
   On a 680px phone the Programme's label lands about 100px under the five
   chips. */
.mfilm__lay[data-line] { top: calc(100% - clamp(7.5rem, 27vh, 15rem) - 4rem); bottom: auto; }
.mfilm__label {
  margin: 0; color: #e3bf67; font: 600 .76rem/1.2 var(--sans);
  letter-spacing: .14em; text-transform: uppercase;
}

/* The page's own copy blocks, freed from the film's absolute layout. This
   is the same override the poster document uses for the same blocks. */
html[data-mobile-film] .mfilm .copy {
  position: static !important; inset: auto !important;
  width: auto !important; max-width: none !important;
  opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important;
  display: grid; gap: 1rem; justify-items: start; text-align: left; pointer-events: none;
}
html[data-mobile-film] .mfilm .copy::before { content: none; }
html[data-mobile-film] .mfilm .copy a,
html[data-mobile-film] .mfilm .copy button,
html[data-mobile-film] .mfilm .copy input,
html[data-mobile-film] .mfilm .copy label,
html[data-mobile-film] .mfilm .copy form { pointer-events: auto; }
html[data-mobile-film] .mfilm .copy__fast { pointer-events: auto; }
html[data-mobile-film] .mfilm .copy--head .dates li:first-child {
  border-left: 1px solid rgba(246,238,225,.2); padding-left: clamp(.6rem, 1.6vw, 1.2rem);
}

/* The blocks the Ecosystem film frees from the desktop film's absolute
   layout: the WHO note, which rides inline under the Map's copy, and the
   seven trails, which are placed by the script (below). Same pills the
   poster document drew, for the row the trails fall back to. */
html[data-mobile-film] .mfilm .labels,
html[data-mobile-film] .mfilm .note {
  position: static !important; inset: auto !important; width: auto !important; max-width: none !important;
  opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important;
  pointer-events: none; margin: 0;
}
html[data-mobile-film] .mfilm .labels::before,
html[data-mobile-film] .mfilm .labels .lbl::before,
html[data-mobile-film] .mfilm .note::before,
html[data-mobile-film] .mfilm .note::after { content: none; }
html[data-mobile-film] .mfilm .labels ul {
  position: static; list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .6rem;
}
html[data-mobile-film] .mfilm .labels li {
  position: static; opacity: 1 !important; transform: none !important; translate: none !important;
}
html[data-mobile-film] .mfilm .labels li::before,
html[data-mobile-film] .mfilm .labels li::after { display: none; }
html[data-mobile-film] .mfilm .labels .lbl {
  padding: .45rem .7rem; background: rgba(8,6,4,.76);
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
}
html[data-mobile-film] .mfilm .note { display: block; margin-top: .2rem; }
html[data-mobile-film] .mfilm .note p { margin: 0; }

/* ------------------------------------------------ the arch labels
   "Seven spans. One bridge." Positioned by the script in frame coordinates. */
.mfilm__spans {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .45s ease .1s;
}
.mfilm__spans.on { opacity: 1; }
.mfilm__spans b {
  position: absolute; display: block; white-space: nowrap; font-weight: 400;
  font-family: var(--sans); font-size: .48rem; letter-spacing: .1em; text-transform: uppercase;
  color: #f4ecdc; background: rgba(12,10,7,.34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border: 1px solid rgba(224,181,99,.42); border-radius: 2rem; padding: .2rem .5rem;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* Four of the seven stand on the upper row, and they include both of the
   widest, so at 375 they came to 327px inside a 329px run: the row had two
   pixels to divide between three gaps and the labels sat edge to edge. The
   type size holds; the air around it gives. Tightening the tracking and the
   side padding below 480px takes the four to about 283px, which is what
   hands the script a gap to space them by. */
@media (max-width: 480px) {
  .mfilm__spans b { letter-spacing: .05em; padding-inline: .34rem; }
}

/* ------------------------------------------------ the programme chips
   The cover over the fault in the take (see the script). The chips carry a
   denser plate than the arch labels because they are the cover; the veil
   behind them is a blurred radial with no edge, so it reads as dusk depth
   rather than a box on the sky. */
.mfilm__pinveil {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8,6,4,.58), rgba(8,6,4,.46) 44%, rgba(8,6,4,.22) 72%, transparent 100%);
  filter: blur(clamp(24px, 9vw, 52px));
  transition: opacity .5s ease;
}
.mfilm__pins {
  position: absolute; z-index: 3; pointer-events: none; opacity: 0;
  transform: translate(-50%, -50%);
  display: flex; flex-wrap: wrap; justify-content: center; gap: .36rem .5rem;
  transition: opacity .45s ease .05s;
}
.mfilm__pins.on, .mfilm__pinveil.on { opacity: 1; }
.mfilm__pins b, .mfilm__pins a {
  display: block; white-space: nowrap; font-weight: 400; font-family: var(--sans);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: #ece3d2;
  background: rgba(8,6,4,.78); border: 1px solid rgba(224,181,99,.42); border-radius: 2rem;
  padding: .26rem .62rem; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.mfilm__pins a { pointer-events: auto; text-decoration: none; }
.mfilm__pins:not(.on) a { pointer-events: none; }

/* ------------------------------------------------ the trails to the summit
   "Seven trails. One mountain." then "Where the paths meet: the Summit."
   The seven names stand on the flanks either side of the summit party, four
   on the rock and three on the snow, and each sends a hairline route up to
   one light at the top: the desktop film's drawing (film.css, stage.js)
   with the names moved from the sky onto the mountain, because a phone has
   no band to hang them in. Placed by the script in frame coordinates. On
   arrival the routes draw themselves from the name to the light, in order,
   and the light comes up last. */
.mfilm__trails {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  transition: opacity .4s ease;
  --pin: 220, 188, 113;                /* gold-hi, as parts, so light can carry alpha */
}
.mfilm__trails.on { opacity: 1; }
.mfilm__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.mfilm__route {
  stroke-width: 1.2px; stroke-linecap: round;
  filter: drop-shadow(0 0 1.5px rgba(8,6,4,.92));   /* carries its own darkness over the snow */
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset .8s cubic-bezier(.35,.5,.25,1) calc(.14s + var(--k, 0) * .07s);
}
.mfilm__trails.on .mfilm__route { stroke-dashoffset: 0; }
.mfilm__summit {
  position: absolute; translate: -50% -50%; width: 7px; height: 7px; border-radius: 50%;
  background: #fff3d4; opacity: 0; transition: opacity .5s ease .75s;
  box-shadow:
    0 0 0 1.5px rgba(8,6,4,.55),
    0 0 7px 1px rgba(var(--pin), 1),
    0 0 20px 6px rgba(var(--pin), .45);
}
.mfilm__summit::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 4.5rem; height: 4.5rem;
  translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--pin), .28), rgba(var(--pin), 0) 70%);
}
.mfilm__trails.on .mfilm__summit { opacity: 1; }
html[data-mobile-film] .mfilm__trails .labels { position: absolute !important; inset: 0 !important; }
html[data-mobile-film] .mfilm__trails .labels ul { position: absolute; inset: 0; display: block; }
html[data-mobile-film] .mfilm__trails .labels li {
  position: absolute; transform: translate(-50%, -50%) !important;
  font-size: .5rem; letter-spacing: .12em;
  opacity: 0 !important; transition: opacity .35s ease calc(var(--k, 0) * .07s);
}
html[data-mobile-film] .mfilm__trails.on .labels li { opacity: 1 !important; }
html[data-mobile-film] .mfilm__trails .labels .lbl {
  padding: .26rem .55rem; color: #f4ecdc;
  background: rgba(8,6,4,.72); border: 1px solid rgba(224,181,99,.42);
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
/* no room to climb: the chips go back above the words, and the routes rise
   from the row when the light is still on screen above it (a phone on its
   side), or go altogether when it is not */
.mfilm__trails.flat:not(.routes) .mfilm__routes,
.mfilm__trails.flat:not(.routes) .mfilm__summit { display: none; }
html[data-mobile-film] .mfilm__trails.flat .labels ul {
  inset: auto; left: 1.9rem; right: 2.6rem; top: var(--flat-top, 50%);
  display: flex; flex-wrap: wrap; gap: .45rem;
}
html[data-mobile-film] .mfilm__trails.flat .labels li { position: static; transform: none !important; }

/* ------------------------------------------------ the documents
   The last two chapters scroll. The film moves only for a swipe that starts
   at the document's top or bottom edge and pushes past it. */
.mfilm__tail {
  position: absolute; inset: 0; z-index: 3;
  overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
  opacity: 0; pointer-events: none; color: var(--bone);
  transition: opacity .26s ease; scrollbar-width: none;
  -webkit-user-select: text; user-select: text;
}
.mfilm__tail::-webkit-scrollbar { display: none; }
.mfilm__tail.on { opacity: 1; pointer-events: auto; transition: opacity .3s ease .05s; }
/* The tail scrolls inside itself, so the body's padding does nothing for it:
   the last document's footer — Privacy, the Cookies button and the two legal
   links — sat under the consent banner at every scroll position it could
   reach. Its own padding, from the height consent.js publishes. */
.mfilm__tail { padding-bottom: var(--consent-h, 0px); box-sizing: border-box; }
/* The film's own copy blocks are NOT lifted for the banner. Lifting them was
   the obvious next step and it was wrong: --flat-top, and with it the row of
   trail names on the Summit chapter, is measured from the copy block's top,
   so raising the copy by the banner's 121px put the row of names ABOVE the
   light they climb to and the routes stopped being drawn. The film's
   composition is measured off itself and must not be moved by a banner. What
   this leaves: while the banner is up and unanswered, the arrival's "The
   Summit at a glance" link is behind it. The banner goes on the first tap on
   either of its two buttons, and the link is there afterwards. */
.mfilm__ch {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: grid; align-content: end; gap: 1.2rem;
  padding: clamp(7rem, 20svh, 11rem) max(var(--gut), env(safe-area-inset-right))
    max(3.5rem, calc(2rem + env(safe-area-inset-bottom))) max(var(--gut), env(safe-area-inset-left));
}

/* The Return. The one chapter whose words start at the TOP of the frame, over
   the dusk sky, where the veil is thinnest and the picture brightest: a darker
   ground, a blurred plate under the heading group as the desktop film puts
   under every block, a touch of shadow on the glyphs, and the headline one
   weight up from the site's 300, which is too fine over a light ground. It
   starts below the site bar. */
.mfilm__ch--return {
  align-content: start;
  padding-top: max(6rem, calc(4.6rem + env(safe-area-inset-top)));
  padding-bottom: max(2.5rem, calc(1.5rem + env(safe-area-inset-bottom)));
  background: linear-gradient(180deg, rgba(7,6,5,.5) 0%, rgba(7,6,5,.46) 32%, rgba(7,6,5,.62) 50%, rgba(7,6,5,.9) 100%);
}
html[data-mobile-film] .mfilm .panel {
  display: grid; grid-template-columns: 1fr; grid-template-areas: "say" "do" "meta"; gap: 1.5rem; width: 100%;
}
html[data-mobile-film] .mfilm .panel__say { position: relative; isolation: isolate; display: grid; gap: .7rem; }
html[data-mobile-film] .mfilm .panel__say::before {
  content: ""; position: absolute; z-index: -1; inset: -1.4rem -2.2rem -1.2rem -2.2rem;
  border-radius: 2.5rem; background: rgba(8,6,4,.52); filter: blur(24px);
}
html[data-mobile-film] .mfilm .panel__say .display { font-weight: 400; color: #fbf7ef; }
.mfilm__ch--return .mfilm__label,
html[data-mobile-film] .mfilm .panel__say .display,
html[data-mobile-film] .mfilm .panel__say .copy__sub {
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.4);
}
html[data-mobile-film] .mfilm .panel__do > form.reg { display: grid; }
html[data-mobile-film] .mfilm .panel__cta { display: none; }
html[data-mobile-film] .mfilm .panel__meta { display: grid; grid-template-columns: 1fr; }
html[data-mobile-film] .mfilm .reg input { font-size: 1rem; }   /* 16px: iOS does not zoom the field */

/* The Invitation, the Ecosystem's close: three cards, the countdown, the
   sign-up and "No one summits alone", on the dark ground the Return uses,
   centred as the desktop lays them, one column as the poster document did. */
.mfilm__ch--invitation {
  align-content: start;
  padding-top: max(6rem, calc(4.6rem + env(safe-area-inset-top)));
  padding-bottom: max(2.5rem, calc(1.5rem + env(safe-area-inset-bottom)));
  background: linear-gradient(180deg, rgba(7,6,5,.5) 0%, rgba(7,6,5,.46) 32%, rgba(7,6,5,.62) 50%, rgba(7,6,5,.9) 100%);
}
html[data-mobile-film] .mfilm .copy--cards { text-align: center; justify-items: center; gap: .9rem; }
html[data-mobile-film] .mfilm .cards { grid-template-columns: 1fr; gap: .5rem; width: 100%; }
html[data-mobile-film] .mfilm .card--wide { grid-template-columns: 1fr; }
html[data-mobile-film] .mfilm .card--wide .count__dials li { padding-inline: .5rem; }
html[data-mobile-film] .mfilm .alone::before,
html[data-mobile-film] .mfilm .copy--cards .copy__acts--quiet::before { content: none; }
html[data-mobile-film] .mfilm .copy--cards .copy__acts--quiet { justify-content: center; }
.mfilm__ch--invitation .mfilm__label { text-align: left; }

/* The Invitation to Climb. The light plate rises over the dawn frame and the
   type goes to ink, as the live page's closing chapter does. The footer
   follows it inside the same document, so it stays reachable. */
.mfilm__ch--climb {
  color: #17120b;
  background: linear-gradient(180deg, rgba(232,238,241,.16), rgba(232,238,241,.92) 62%, #e8eef1 100%);
}
.mfilm__ch--climb .mfilm__label { color: #46340a; }
html[data-mobile-film] .mfilm .copy--climb .beat { opacity: 1 !important; filter: none !important; animation: none !important; }
html[data-mobile-film] .mfilm .nextstop { max-width: none; }
html[data-mobile-film] .mfilm .copy__acts--climb { flex-direction: column; align-items: flex-start; gap: .6rem; }
.mfilm__doc > .foot { margin-top: 0; }

/* ------------------------------------------------ the rail and the hint */
.mfilm__dots {
  position: absolute; z-index: 4; right: .85rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: .5rem; transition: opacity .3s;
}
.mfilm__dots i {
  width: 5px; height: 5px; border-radius: 50%; background: rgba(246,241,232,.26);
  transition: background .3s, transform .3s; display: block;
}
.mfilm__dots i.on { background: var(--gold-hi); transform: scale(1.55); }
.mfilm__dots.off { opacity: 0; pointer-events: none; }
.mfilm__hint {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 1.9rem; margin: 0; text-align: center;
  font-family: var(--sans); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(246,241,232,.5); transition: opacity .5s; pointer-events: none;
}
.mfilm__hint.off { opacity: 0; }

/* ------------------------------------------------ a phone on its side */
@media (orientation: landscape) and (max-height: 600px) {
  .mfilm__lay { bottom: 2.5rem; }
  .mfilm__lay:is([data-first], [data-foot]) { bottom: 0; }
  .mfilm__lay[data-line] { top: auto; bottom: 2.5rem; }
  .mfilm__lay { padding-right: 3rem; }
  .mfilm__ch { padding-top: 5rem; }
  .mfilm__ch--return { padding-top: max(5rem, calc(3.6rem + env(safe-area-inset-top))); }
}

/* ------------------------------- ANY screen wider than it is tall
   A phone on its side sees a band of the 3:4 frame; so does an iPad, and so
   does a laptop window. On the mountain that band must keep the TOP of the
   frame, where the summit party stands and the peaks are, rather than the
   middle, which at the Summit is only the ridge. Checked against all seven
   rest frames, 9 Sep 2026. The script reads the anchor back, so the light and
   the chips land on what is shown.

   These two were inside the phone-on-its-side query above, behind
   `max-height: 600px`, which an iPad's 820px-tall landscape never satisfies
   while the SCRIPT switched to the same flat layout on any landscape at all.
   The two halves disagreed and the chapter came apart: a left-aligned row of
   chips under an off-centre light, and seven near-straight routes across the
   picture. Found on an iPad Air, 10 September 2026. */
@media (orientation: landscape) {
  html[data-mobile-ecosystem] .mfilm__v, html[data-mobile-ecosystem] .mfilm__poster { object-position: 50% 30%; }
  /* the row of names sits under the light, so it centres */
  html[data-mobile-film] .mfilm__trails.flat .labels ul { justify-content: center; }
}

/* ------------------------------------------------ the tablet's measure
   The chapters that scroll as documents — the Return's form, the Climb, the
   Ecosystem's Invitation — are laid in ONE column, which is right on a phone
   and stays right here: this is a film with words over it, not a page. What
   is not right is letting that one column have the whole width of a tablet.
   At 1180 a text field ran to 1032px and a card to 1085, which is three times
   a comfortable measure and reads as a form that has come apart.

   So the column is capped and centred, and only above the widths a phone
   has, so nothing below 700px moves at all. Found on an iPad Air, 10
   September 2026. */
@media (min-width: 700px) {
  html[data-mobile-film] .mfilm__ch > *,
  html[data-mobile-film] .mfilm .panel,
  html[data-mobile-film] .mfilm .cards,
  html[data-mobile-film] .mfilm__doc form { max-width: 34rem; }
  /* The Return and the Invitation are centred blocks; the chapters whose
     words sit at the foot of the frame keep their left edge. */
  html[data-mobile-film] .mfilm__ch--return > *,
  html[data-mobile-film] .mfilm__ch--invitation > * { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mfilm__v, .mfilm__poster, .mfilm__lay, .mfilm__tail, .mfilm__spans, .mfilm__pins, .mfilm__pinveil,
  .mfilm__trails, .mfilm__route, .mfilm__summit, html[data-mobile-film] .mfilm__trails .labels li,
  .mfilm__dots, .mfilm__dots i, .mfilm__hint { transition: none; }
}