/* ============================================================
   Film frame, camera and panel stack.

   Coordinate model
   ----------------
   .stage   1920 x 914 (2.101:1) — the master frame. Fixed size,
            uniformly scaled to fit its container by JS so DOM text
            stays vector-crisp at any preview width.
   .camera  translate() scale(), origin 0 0. Framing is expressed as
            (scale, focusX, focusY) in app space; the focus point
            always lands at stage centre (960, 457).
   .app     2480 x 1180 — the Epitom application window.
   .panel   A screen in the depth stack. Panels arrive toward the
            viewer and settle at the focal plane; everything already
            in the stack recedes one step.
   ============================================================ */

.stage-fit {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 914;   /* intrinsic, so it never collapses to zero */
  overflow: hidden;
  background: var(--hpd-paper);
}

.stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 914px;
  transform-origin: 0 0;
  overflow: hidden;
  background: var(--hpd-paper);
}

.camera {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  /* Deliberately no will-change / translateZ: letting the browser
     re-rasterise on scale is what keeps text crisp when pushed in. */
}

.app {
  position: relative;
  width: 2480px;
  height: 1180px;
  /* Keep exposed app space continuous with the paper stage. Hidden chrome
     and transparent panels must not reveal a separate white band. */
  background: var(--hpd-paper);
  border-radius: var(--hpd-radius-window);
  box-shadow: var(--hpd-shadow-window);
  overflow: hidden;
  display: flex;
  font-size: 15px;
  line-height: 1.4;
  color: var(--hpd-ink);
}

.viewport {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--hpd-paper);
}

.doc {
  position: absolute;
  top: 0;
  left: 0;
  width: 2201px;   /* 2480 − 279 sidebar */
  height: 100%;
  background: var(--hpd-paper);
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 2201px;
  padding: 0 26px;
  transform-origin: 50% 30%;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

/* A panel's own scroll position. The camera pushes; the PRODUCT scrolls —
   which is how the real application behaves, and what lets the camera
   frame content that sits far down the document. */
.panel-scroll { position: absolute; top: 0; left: 0; right: 0; }

/* Opportunities is inset relative to the panels behind it. Full-bleed
   panels occlude each other perfectly — "visible behind" only works
   when the front panel is narrower than the one it covers. */
#pOpps { padding: 0 90px; }
#pOpps .page-head { padding-left: 0; }

#pAction,
#pArtifact { padding: 0; }

#scrim {
  position: absolute;
  inset: 0;
  background: rgba(27, 26, 25, 0.30);
  opacity: 0;
}

/* ---- final lockup: stage space, outside the camera ---- */

.lockup {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  pointer-events: none;
}

.lockup-mark {
  font-size: 76px;
  font-family: "Nunito Sans", var(--hpd-font), sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  color: var(--hpd-ink);
}

.lockup-mark span { color: var(--hpd-accent); }

.lockup-line {
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--hpd-ink-soft);
}

/* Icon sprite host — injected, never displayed. */
#icon-sprite { display: none; }