/* 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)); }
/* desktop: the site header scrolls away but pushes the first screen down by its height (--dr-flow),
   so lift the hero text and buttons by that much to keep them on screen */
@media (min-width: 641px) {
  .dash-retro .hero__lockup { bottom: calc(clamp(44px, 7vh, 80px) + var(--dr-flow, 0px)); }
  .dash-retro .hero__cue { bottom: calc(14px + var(--dr-flow, 0px)); }
  /* the device shrinks and rises by the same offset, so its 400 readout stays clear of the DASH II wordmark */
  .dash-retro .hero__shot { width: min(calc(68vh - var(--dr-flow, 0px) * 1.5), 118vw); margin-top: calc(var(--dr-flow, 0px) * -0.75); }
}
/* short laptop windows (760px tall or less): no room for the tagline, so drop it and let DASH II sit clear of the 400 readout */
@media (min-width: 641px) and (max-height: 760px) {
  .dash-retro .hero__sub { display: none; }
}
/* very short laptop windows (560-640px tall): the device rises a little more and shrinks a little,
   so the readout still clears DASH II and its cap stays below our section nav (landscape phones are left alone) */
@media (min-width: 641px) and (min-height: 560px) and (max-height: 640px) {
  .dash-retro .hero__shot { width: min(calc(68vh - var(--dr-flow, 0px) * 1.65), 118vw); margin-top: calc(var(--dr-flow, 0px) * -1); }
}

/* 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; }
}
/* phones: the color switch and Buy sit in a bar at the bottom of the screen, under the thumb,
   instead of stacking under gpen.com's header (which now stays on screen) */
@media (max-width: 640px) {
  .dash-retro .nav {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    margin-bottom: 0;
    padding-top: 0; padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(0, 0, 0, 0.92);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
  /* room under the site footer so the bar never covers its last links */
  body.dash-retro-page { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@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); }
}

/* the store's own price note under the final Add to Cart (for example "incl. VAT, plus shipping" on the EU site) */
.dash-retro .cta__note {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}