/* Compact pages give the waterfront its own room below the reading area. */
.scene-quayside-clearance { display: none; pointer-events: none; }

/* Long rotating phrases must not widen a phone's entire scene during a fade. */
@media (max-width: 760px) {
  .hero .rotator-word {
    transform: scale(var(--scene-word-fit, 1));
    transform-origin: left top;
  }
}

html[data-scene-layout="content"]:not([data-scene-view="immersive"]),
html[data-scene-layout="content"]:not([data-scene-view="immersive"]) body {
  height: auto;
  min-height: 100vh;
}
html[data-scene-layout="content"] .page { display: block; height: auto; min-height: 100vh; }
html[data-scene-layout="content"] .scene-quayside-clearance {
  display: block;
  height: var(--scene-quayside-clearance, 0px);
}
html[data-scene-layout="content"]:not([data-scene-view="immersive"]) .tyne-ambient-scene,
html[data-scene-layout="content"]:not([data-scene-view="immersive"])[data-scene-mode] body::before {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: var(--scene-document-height, 100dvh);
}
html[data-scene-layout="content"]:not([data-scene-view="immersive"])[data-scene-mode] body::before {
  background-size: 100% auto;
  background-position: center bottom;
}
/* Compact reading layout is page-anchored, but enjoying the scene is always a
   complete, unzoomed viewport. Returning restores the document and its scroll. */
html[data-scene-view="immersive"] .tyne-ambient-scene,
html[data-scene-view="immersive"][data-scene-mode] body::before {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
}