/* retiro.ph — the landing hold.
 *
 * Only /index.html loads this file. The owner's direction: retiro.ph shows the
 * existing hero photograph and nothing else for two seconds after that
 * photograph has loaded and decoded while the tab is visible, and then hands the
 * reader to Services with location.replace, so Back from Services does not bounce
 * forward again.
 *
 * Nothing here invents a picture or a word. The photograph is the one the page
 * already carried, at the size it already had; the hold only takes the menu, the
 * text, the forms and the other scenes off the screen for those two seconds.
 *
 * The state is one class on <html>. It is added by /assets/landing.js as its
 * first act; that file is loaded in the head without defer, so the very first
 * paint is already the photograph, with no flash of the page. It is taken off
 * again by the same file whenever the reader should have the whole page:
 * JavaScript off, a return through the Back or Forward button, a deep link into
 * this page, Escape, or a photograph that never arrives. An ordinary reload and
 * a reader who asked for reduced motion keep the hold for the same two seconds
 * and are then handed over.
 */

html.is-landing {
  overflow: hidden;
}

/* During the hold, only the hero photograph is on the screen. */
html.is-landing .skip-link,
html.is-landing .bar,
html.is-landing .scene:not(.scene--landing),
html.is-landing .scene--foot {
  display: none;
}

/* The hero keeps its photograph; its eyebrow, heading, lead, buttons and panel
   come back with the rest of the page. */
html.is-landing .scene--landing .scene-body {
  display: none;
}

html.is-landing .scene--landing,
html.is-landing .scene--landing .scene-art {
  height: 100vh;
  height: 100dvh;
}

/* The way on, for a reader whose browser has no JavaScript. With scripting on
   this block is not rendered at all, so it cannot appear during the hold. */
.landing-fallback {
  padding-block: var(--space-4);
}

.landing-fallback p {
  margin: 0;
  max-width: var(--measure);
}

/* ------------------------------------------------- the page's own spacing */

/* These were style attributes in the page markup. The site's Content-Security
   Policy is style-src 'self' https://fonts.googleapis.com, so an inline style
   attribute is refused by the browser and that spacing never applied on the live
   page. The same declarations now live here, in a stylesheet the policy allows;
   nothing about the spacing itself was changed. */
.landing-top-4 {
  margin-top: var(--space-4);
}

.landing-top-5 {
  margin-top: var(--space-5);
}

.landing-top-6 {
  margin-top: var(--space-6);
}

.landing-stack-4 {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.landing-stack-5 {
  display: grid;
  gap: var(--space-5);
}

.landing-stack-6 {
  display: grid;
  gap: var(--space-6);
}