/* v204: Section01 portrait phone/tablet share one proportional logo group. */
@media (max-width: 1024px) and (orientation: portrait) {
  /* The word wrapper, Design and Portfolio share .opening-logo-group. Positions
     use that one box; desktop's mixed fixed-pixel positions do not leak in. */
  .opening-logo-stack .opening-word-float {
    top: 8px;
  }
  .opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"] {
    top: calc(24% + 1px);
    width: 69%;
    height: auto;
    aspect-ratio: 1773 / 447;
  }
  .opening-logo-stack .opening-logo-layer[data-logo-part="design"] {
    top: calc(24% + 10px);
    width: 67%;
    height: auto;
    scale: .9;
  }
  .opening-logo-stack .opening-portfolio-word {
    left: -4.5%;
    top: calc(84% + 5px);
    width: 109%;
    height: auto;
  }
}

/* Let the group grow slightly on portrait tablets without changing phones. */
@media (min-width: 701px) and (max-width: 1024px) and (orientation: portrait) {
  .opening-logo-stack .opening-logo {
    width: clamp(235px, 31vw, 255px);
    max-height: none;
  }
  /* A few extra pixels protect the floating word at the widest tablet edge. */
  .opening-logo-stack .opening-logo-layer[data-logo-part="design"] {
    top: calc(24% + 14px);
  }
  .opening-logo-stack .opening-portfolio-word {
    top: calc(84% + 9px);
  }
  html[data-state="idle"] .cta-slot {
    top: calc(71svh + 32px - var(--v183-enter-lift));
  }
}