/* Keep the portrait in place while the next section rises over it. */
header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--cream);
}

.hero {
  position: sticky;
  top: 88px;
  z-index: 0;
}

.work {
  z-index: 2;
  scroll-margin-top: 88px;
  box-shadow: 0 -16px 32px rgb(23 26 22 / 12%);
}

.coffee {
  z-index: 3;
}

.portrait-panel-hold { display: none; }

@media (min-width: 641px) {
  header {
    position: relative;
    top: auto;
  }

  .hero {
    top: 0;
    height: 100svh;
  }

  /* Preserve the approved initial type placement as the header scrolls away. */
  .hero .roles { bottom: 238px; }
  .hero .scroll-cue { bottom: 114px; }
  .work {
    position: sticky;
    top: 0;
    scroll-margin-top: 0;
  }
}

@media (max-width: 640px) {
  html, body { overflow-x: clip; }
  html, body { scrollbar-width: none; -ms-overflow-style: none; }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
  .hero { top: 72px; }
  .portrait-panel-hold { display: block; height: 18svh; pointer-events: none; }
  .work {
    position: sticky;
    /* Pin the last screenful of the long board until coffee covers it. */
    top: var(--work-freeze-top, -1000px);
    scroll-margin-top: 72px;
  }
  .coffee { position: relative; }
}