/* Home desktop composition. TJ's 1651px screenshot is the wide-screen anchor.
 * Keep phone/tablet composition; all wider type and geometry share one scale.
 */
@media (width >= 1024px) {
  body:has(.page-home) .layout-header .inner,
  body:has(.page-home) .layout-header .book .b-arrow.link-active {
    /* Both clipping ancestors must allow the existing sideways hover. */
    overflow: visible;
  }
  .page-home .paak-services-summary {
    grid-column: 3 / -1;
    margin-bottom: clamp(64px, 6.4rem, 80px);
  }
  body:has(.page-home) {
    --paak-home-type-progress: calc((100vw - 1512px) / 1048px);
    --paak-type-section: clamp(
      33px,
      calc(40px + 16px * var(--paak-home-type-progress)),
      56px
    );
    --paak-type-feature: var(--paak-type-section);
    --paak-type-heading: clamp(
      22px,
      calc(26px + 8px * var(--paak-home-type-progress)),
      34px
    );
    --paak-type-caption: clamp(
      22px,
      calc(23.5px + 6.5px * var(--paak-home-type-progress)),
      30px
    );
    --paak-hero-utility: clamp(
      15px,
      calc(16px + 2px * var(--paak-home-type-progress)),
      18px
    );
    --paak-hero-copy: clamp(
      18px,
      calc(20px + 6px * var(--paak-home-type-progress)),
      26px
    );
  }
  .page-home .paak-intro-footer {
    font-size: var(--paak-type-body);
  }
  .page-home .paak-intro-writeup {
    /* Preserve the reading measure as supporting copy gets larger. */
    max-width: 18.25em;
  }
  .page-home .paak-services-item h3 .paak-service-number {
    font-size: clamp(
      48px,
      calc(48px + 16px * var(--paak-home-type-progress)),
      64px
    );
  }
  .page-home :is(.paak-contact-close, .paak-contact-footer) {
    --paak-type-statement: clamp(
      60px,
      calc(77.6992px + 24.3008px * var(--paak-home-type-progress)),
      102px
    );
  }
  .page-home .hero.paak-kiwi-hero {
    /* Very short/wide views can scroll the scene instead of losing the bird.
     * The minimum allows a kiwi at 32% of the full-width wordmark. */
    --paak-hero-height: max(
      calc(100svh - 4rem),
      calc(0.3789933 * (100vw - 8rem) + 8.4rem + 1.5 * var(--paak-hero-utility))
    );
    min-height: var(--paak-hero-height);
  }
  .page-home .paak-kiwi-hero .paak-hero-lockup {
    width: 100%;
    align-self: center;
    container-type: inline-size;
  }
  .page-home .paak-kiwi-hero .paak-kiwi {
    /* Keep the wordmark on the shared gutters; fit only the bird to height.
     * Coefficients follow the vector ratio and transparent poster bounds. */
    width: clamp(
      32%,
      calc(
        (
            var(--paak-hero-height) - 8.4rem - 1.5 * var(--paak-hero-utility) -
              23.6336cqw
          ) /
          0.445805
      ),
      64%
    );
  }
}

@media (width >= 1651px) {
  :root:has(.page-home) {
    /* Remove the 2560px geometry ceiling only for this Home document. */
    --scale: calc(100vw / 1512px);
  }
  body:has(.page-home) {
    --paak-home-composition-scale: calc(100vw / 1651px);
    --paak-type-statement: calc(64px * 100vw / 1512px);
    --paak-type-section: calc(
      42.1221374px * var(--paak-home-composition-scale)
    );
    --paak-type-feature: var(--paak-type-section);
    --paak-type-heading: calc(
      27.0610687px * var(--paak-home-composition-scale)
    );
    --paak-type-caption: calc(
      24.36211832px * var(--paak-home-composition-scale)
    );
    --paak-hero-utility: calc(
      16.26526718px * var(--paak-home-composition-scale)
    );
    --paak-hero-copy: calc(20.79580153px * var(--paak-home-composition-scale));
  }
  .page-home .paak-intro-footer {
    padding-top: calc(23px * var(--paak-home-composition-scale));
  }
  .page-home .paak-intro-writeup p {
    margin-bottom: calc(24px * var(--paak-home-composition-scale));
  }
  .page-home .home-tagline .content p a[href] {
    text-decoration-thickness: calc(2.5px * var(--paak-home-composition-scale));
  }
  .page-home .paak-underline-fragment {
    height: calc(2.5px * var(--paak-home-composition-scale));
  }
  .page-home .paak-intro-about :is(.paak-roll-copy),
  .page-home .paak-intro-about > span {
    text-decoration-thickness: calc(1px * var(--paak-home-composition-scale));
  }
  .page-home .paak-services-item h3 .paak-service-number {
    font-size: calc(50.1221374px * var(--paak-home-composition-scale));
    margin-bottom: calc(12px * var(--paak-home-composition-scale));
  }
  .page-home .paak-services-summary {
    margin-bottom: 8rem;
  }
  .page-home .paak-need .paak-secondary-message {
    text-indent: 15.278vw;
  }
  .page-home :is(#services-title, #process-title) {
    top: max(96px, calc(var(--header-height) + 2rem));
  }
  .page-home :is(.paak-contact-close, .paak-contact-footer) {
    --paak-type-statement: calc(
      80.92287557px * var(--paak-home-composition-scale)
    );
    --paak-lower-section-space: calc(
      131.0894px * var(--paak-home-composition-scale)
    );
  }
}

/* Wide desktop: let the bird overlap the wordmark deliberately, with clear
 * space above its head. The mark and all typography retain their shared scale. */
@media (width >= 1651px) {
  .page-home .paak-kiwi-hero .paak-kiwi {
    --paak-kiwi-wide: clamp(0, calc((100vw - 1651px) / 891px), 1);
    --paak-kiwi-base-fit: clamp(
      32%,
      calc(
        (
            var(--paak-hero-height) - 8.4rem - 1.5 * var(--paak-hero-utility) -
              23.6336cqw
          ) /
          0.445805
      ),
      64%
    );
    --paak-kiwi-wide-fit: clamp(
      32%,
      calc(
        (
            var(--paak-hero-height) - 8.4rem - 1.5 * var(--paak-hero-utility) -
              27cqw
          ) /
          0.39
      ),
      56%
    );
    width: calc(
      var(--paak-kiwi-base-fit) * (1 - var(--paak-kiwi-wide)) +
        var(--paak-kiwi-wide-fit) * var(--paak-kiwi-wide)
    );
    left: 50%;
    top: calc(14% + 4% * var(--paak-kiwi-wide));
    transform: translate(-50%, calc(-68% + 3% * var(--paak-kiwi-wide)));
  }
}
