.page-home { display: block; place-items: normal; height: auto; overflow-x: clip; }
.site-flow { position: relative; width: 100%; }
html:has(.page-home dialog[open]),
html.intro-pending,
html:has(.flow-enhanced:not(.intro-complete)) { overflow: hidden; }
.landing { display: none; }
.intro-pending .landing,
.flow-enhanced .landing {
  position: fixed;
  inset: 0;
  z-index: 2;
  height: 100dvh;
  display: grid;
  place-items: center;
}
.landing .sign { margin: 0; }
.intro-pending .portfolio-section { visibility: hidden; }
.portfolio-section > .index { margin-inline: auto; }

.portfolio-brand { padding: 25px 34px 0; }
.portfolio-home { display: block; width: 92px; text-decoration: none; }
.portfolio-home img { display: block; width: 92px; height: 44px; object-fit: contain; }
.studio-tagline {
  margin: 14px 0 0;
  max-width: 250px;
  color: var(--portfolio-copy-color);
  font: 400 var(--portfolio-copy-size)/var(--portfolio-copy-leading) "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.studio-contact { color: #f2f2f2; white-space: nowrap; text-decoration: none; }
.studio-contact:hover { text-decoration: underline; text-underline-offset: 4px; }
.flow-enhanced .studio-tagline { opacity: 0; transition: opacity 350ms ease; }
.intro-complete .studio-tagline { opacity: 1; }

@media (min-width: 0px) {
  .flow-enhanced.has-archive { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  .flow-enhanced.has-archive .site-flow { height: 100dvh; }
  .flow-enhanced.has-archive .portfolio-section { position: fixed; inset: 0; height: 100dvh; }
  .has-archive .portfolio-brand { display: none; }
  .flow-enhanced .archive-stage { touch-action: pan-y; }
  .flow-enhanced.archive-ready .archive-stage { touch-action: none; }
}

@media (max-width: 1023px) {
  .flow-enhanced.archive-ready .archive-stage { touch-action: pinch-zoom; }
  .portfolio-brand {
    position: sticky;
    z-index: 80;
    top: 0;
    padding: max(20px, env(safe-area-inset-top)) 20px 16px;
    background: #000;
  }
  .studio-tagline { max-width: 235px; }
  .portfolio-section > .index { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-enhanced .studio-tagline { transition: none; }
}