/* WordPress-only layer: fits the page between the gpen.com header and footer.
   --dr-top = height of the site's sticky header, set on <html> by the plugin. */
.dash-retro {
  position: relative;
  isolation: isolate;
  background: #000;
  color: #fff;
}
/* black behind the page too, so fast scrolling never flashes the site's white background */
html:has(body.dash-retro-page), body.dash-retro-page { background: #000; }
/* site header stays on top; our section nav tucks under it when it hides */
.dash-retro-page .site-header { z-index: 60; }
.dash-retro .nav {
  position: sticky;
  top: var(--dr-top, 0px);
  margin-bottom: -64px;
}
/* pinned scroll scenes start below the site header */
.dash-retro :is(.hero__sticky, .manifesto__sticky, .clear__sticky) {
  top: var(--dr-top, 0px);
  height: calc(100vh - var(--dr-top, 0px));
  height: calc(100svh - var(--dr-top, 0px));
}
.dash-retro .specs__head { top: calc(120px + var(--dr-top, 0px)); }

/* phones: the site header has the logo and menu, so our bar is just the color switch and Buy */
@media (max-width: 640px) {
  .dash-retro .nav__brand { display: none; }
  .dash-retro .nav__inner { grid-template-columns: 1fr; }
  .dash-retro .nav__right { justify-self: stretch; justify-content: space-between; }
}
/* phones: with the switch and Buy hidden while the hero's are on screen, the bar would be empty */
@media (max-width: 640px) {
  html.hero-cta-in .dash-retro .nav { opacity: 0; visibility: hidden; }
  .dash-retro .nav { transition: opacity 0.4s, visibility 0.4s; }
}
@media (max-width: 640px) {
  /* the Overview's pinned screen is only as tall as its text on phones */
  .dash-retro .manifesto__sticky { height: auto; }
  /* the hero fills the first screen under gpen.com's 70px phone header, so Shop Now is in view */
  .dash-retro .hero, .dash-retro .hero__sticky { height: calc(100svh - 70px); }
  /* signed-in editors also get WordPress's 46px admin bar on phones */
  .admin-bar .dash-retro .hero, .admin-bar .dash-retro .hero__sticky { height: calc(100svh - 116px); }
}