/* Desktop composition lock: preserve the editorial layout when Safari is split. */
@media (min-width: 901px) {
  /* Give the brand a clear header field instead of letting imagery slide beneath it. */
  header {
    height: 122px;
    padding: 27px 40px;
    align-items: flex-start !important;
    background: linear-gradient(180deg, #fff 0, #fff 88%, rgba(255,255,255,.96) 100%);
  }

  header > .logo {
    position: absolute !important;
    left: 40px !important;
    top: 27px !important;
    width: 145px !important;
    height: 59px !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* About: fixed column measures prevent every paragraph from rewrapping in split view. */
  .about-experience .about-layout {
    padding: 122px 0 46px 84px !important;
    align-items: flex-start !important;
  }

  .about-experience .mandy-portrait {
    left: 108px !important;
    width: 470px !important;
    height: min(72vh, 760px) !important;
    flex: 0 0 470px !important;
  }

  .about-experience .mandy-name-marquee {
    left: 520px !important;
    top: 138px !important;
    font-size: 150px !important;
    transform: none !important;
  }

  .about-experience .about-copy {
    padding: 0 130px 0 92px !important;
    gap: 110px !important;
    height: calc(100dvh - 168px) !important;
    align-self: flex-start !important;
    align-items: stretch !important;
  }

  .about-experience .about-chapter {
    width: 570px !important;
    max-width: 570px !important;
    flex: 0 0 570px !important;
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  .about-experience .about-chapter-intro {
    padding-top: 202px !important;
    justify-content: flex-start !important;
  }

  .about-experience .about-copy .page-title,
  .about-experience .about-copy .founder-full-name {
    font-size: 68px !important;
  }

  .about-experience .about-chapter-story {
    width: 650px !important;
    max-width: 650px !important;
    flex-basis: 650px !important;
    transform: none !important;
  }

  /*
   * All desktop biography copy shares this one baseline. Paragraph length no
   * longer changes its starting position as the horizontal story advances.
   */
  .about-experience .desktop-bio-body {
    position: absolute !important;
    top: var(--desktop-bio-top, 58%) !important;
    left: 0 !important;
    width: 100% !important;
  }

  .about-experience .desktop-bio-body > p:first-child {
    margin-top: 0 !important;
  }

  .about-experience .about-chapter-quote {
    justify-content: center !important;
  }

  .about-experience .about-layout > .desktop-meet-mandy {
    position: absolute !important;
    left: 34px !important;
    top: 50% !important;
    z-index: 8 !important;
    margin: 0 !important;
    color: #111 !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    writing-mode: vertical-rl !important;
    transform: translateY(-50%) rotate(180deg) !important;
    white-space: nowrap !important;
  }

  .about-experience .about-layout > .desktop-meet-mandy::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-top: 12px;
    border-radius: 50%;
    background: var(--red);
  }

  /* Portfolio: fixed panel geometry keeps titles and copy anchored in split view. */
  .portfolio-experience .editorial-track {
    width: calc(100vw - 160px) !important;
    margin-left: 160px !important;
  }

  .portfolio-experience .portfolio-page {
    padding: 122px 0 38px !important;
  }

  .portfolio-experience .portfolio-title {
    left: 28px !important;
    font-size: 112px !important;
  }

  .portfolio-experience .portfolio-grid {
    gap: 100px !important;
  }

  .portfolio-experience .portfolio-grid .card,
  .portfolio-experience .portfolio-grid .card:nth-child(2),
  .portfolio-experience .portfolio-grid .card:nth-child(3) {
    width: 1240px !important;
    flex: 0 0 1240px !important;
  }

  .portfolio-experience .portfolio-grid .card img,
  .portfolio-experience .portfolio-grid .card:nth-child(3) img {
    width: 760px !important;
    height: calc(100dvh - 182px) !important;
    flex: 0 0 760px !important;
  }

  .portfolio-experience .project-card-copy {
    width: 480px !important;
    flex: 0 0 480px !important;
    padding: 68px 54px 52px !important;
  }

  .portfolio-experience .card h3 {
    font-size: 64px !important;
    line-height: 1.04 !important;
    margin: 0 0 28px !important;
  }

  .portfolio-experience .card .desktop-project-summary {
    width: 360px !important;
    max-width: 360px !important;
  }

  .about-experience p,
  .portfolio-experience p {
    text-wrap: pretty;
  }
}

@media (min-width: 901px) and (max-height: 900px) {
  .about-experience .about-chapter-intro {
    padding-top: 155px !important;
  }
}