/* ==========================================================================
   Destination layer — what the camera arrives at.

   It is light, not dark. The reference for the Worlds scene is an airy,
   high-key composition, and the journey is designed to read as *emerging*:
   the veil peaks while you are between places and lifts as you arrive. A
   permanent fade-to-black would fight that.

   Phase 3/4a deliverable: the arrival is real — it orients you, it tells you
   how to go back — but the content is deliberately unbuilt. Nothing here
   invents project information.
   ========================================================================== */

.stage {
  position: fixed; inset: 0; z-index: 8;
  display: grid;
  /* `safe` falls back to start when the content is taller than the stage, so a
     tall figure can never push the controls off the top where they are
     unreachable. */
  place-items: safe center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--header-h) var(--gutter) var(--gutter);
  scroll-behavior: smooth;
  background:
    radial-gradient(112% 86% at 50% 8%, #F1EEEC 0%, rgba(241,238,236,0) 62%),
    linear-gradient(168deg, #E9E6E3 0%, #DAD6D3 58%, #CBC8C8 100%);
  color: var(--ink);
  opacity: var(--stage-in, 0);
  transform: scale(var(--stage-s, 1.22));
  transform-origin: 50% 44%;
  visibility: hidden;
  will-change: transform, opacity;
}
.stage[data-mounted="true"] { visibility: visible; }

/* The .stage__* family that lived here belonged to the placeholder screens the
   real About, Contact, Archive and 404 views replaced. Nothing emits those
   classes any more, so the rules are gone with them.

   This rule is NOT dead and was removed with them by mistake: documents — case
   studies, About, Archive, Contact, 404 — bring their own padding and want the
   full column. Without it the stage's own centring padding insets every one of
   them, and the contact photograph stops reaching the edges. */
.stage:has(.cs),
.stage:has(.page) {
  place-items: start stretch;
  padding: 0;
  background: #EFEDEA;
}

.stage > .worlds__crumb {
  position: absolute; left: var(--gutter); top: var(--header-h);
}

/* Under the desktop width the Worlds and world screens run edge to edge (their
   sky reaches every side and the bottom of the page); they bring their own
   padding, so the stage adds none. */
@media (max-width: 1179px) {
  .stage:has(> .worlds), .stage:has(> .world) { padding: 0; place-items: start stretch; }
}

@media (max-width: 46rem) {
  .stage { place-items: safe start center; }
  .stage > .worlds__crumb { position: static; margin-bottom: 1.25rem; }
}

/* Phones and tablets, once a page has arrived (stage.js sets the flag, and
   never on the desktop): the page scrolls the document itself instead of a
   fixed layer, so the browser's toolbars can tuck away while you read and
   the scroll is the browser's own. The portrait underneath steps out of the
   page until you go back to it. The layer is the same; only who scrolls it
   changes, and nothing is left promoted or transformed while you read. */
html[data-flow] body { overflow-x: hidden; overflow-y: auto; }
html[data-flow] :is(#main, .backdrop, .veil) { display: none; }
html[data-flow] .stage {
  position: relative; inset: auto;
  min-height: 100svh;
  overflow: visible; overflow-x: clip;
  opacity: 1; transform: none; will-change: auto;
}