/* Opt-in wide-screen scale. The container defines the source of truth, while
   the nested scope keeps existing consumers unchanged. */
html.su-fluid-root {
  /* 2K is the 16px baseline. Full 4K grows the root to 24px so rem-based
     composition keeps the same physical size on equally sized monitors. */
  font-size: clamp(100%, min(0.625vw, 1.25svh), 150%);
}

.su-fluid {
  --su-fluid-unit: 1rem;
}

.su-frame--bleed {
  inline-size: 100%;
}

.su-frame--contained {
  inline-size: min(100%, var(--su-frame-max, 90rem));
  margin-inline: auto;
}

.su-fluid__scope {
  font-size: var(--type-body-size);
}

/* Public-site fallback at its 1440px design baseline. Keeping it behind a
   modifier preserves the denser application defaults. */
.su-fluid__scope.su-fluid__scope--marketing {
  --su-button-font-size: var(--type-ui-size);
  --type-display-size: 4.5rem;
  --type-title-size: 3rem;
  --type-heading-size: 2rem;
  --type-lead-size: 1.5rem;
  --type-body-size: 1.125rem;
  --type-ui-size: 1rem;
  --type-caption-size: 0.875rem;
}

@supports (container-type: inline-size) {
  .su-fluid {
    container-name: support-fluid;
    container-type: inline-size;
  }

  /* Mobile composition grows into the 1440px design baseline. */
  .su-fluid__scope.su-fluid__scope--marketing {
    --type-display-size: clamp(3rem, calc(2.442857rem + 2.285714cqi), 4.5rem);
    --type-title-size: clamp(2rem, calc(1.628571rem + 1.52381cqi), 3rem);
    --type-heading-size: clamp(1.5rem, calc(1.314286rem + 0.761905cqi), 2rem);
    --type-lead-size: clamp(1.3125rem, calc(1.242857rem + 0.285714cqi), 1.5rem);
  }

  @container support-fluid (min-width: 90rem) {
    .su-fluid__scope {
      /* One width signal with a stable viewport-height guard. At a 16px root it
         is 1rem at 1440px and reaches 1.5rem near 3840x2160. */
      --su-fluid-unit: clamp(
        1rem,
        calc(0.7rem + min(0.333cqi, 0.589svh)),
        1.5rem
      );

      /* Type roles deliberately grow at different rates. */
      --font-size-hero: clamp(6.66875rem, calc(4.8335rem + min(2.037cqi, 3.603svh)), 9.75rem);
      --font-size-display: clamp(3.5rem, calc(2.87rem + min(0.699cqi, 1.237svh)), 4.55rem);
      --font-size-h1: clamp(2rem, calc(1.64rem + min(0.4cqi, 0.707svh)), 2.6rem);
      --font-size-h2: clamp(1.5rem, calc(1.23rem + min(0.3cqi, 0.53svh)), 1.95rem);
      --font-size-h3: clamp(1.25rem, calc(1.175rem + min(0.083cqi, 0.147svh)), 1.375rem);
      --font-size-body: clamp(1.0625rem, calc(0.9347rem + min(0.142cqi, 0.251svh)), 1.275rem);
      --font-size-small: clamp(0.875rem, calc(0.8225rem + min(0.058cqi, 0.103svh)), 0.9625rem);
      --font-size-xs: clamp(0.75rem, calc(0.705rem + min(0.05cqi, 0.088svh)), 0.825rem);
      --su-button-font-size: clamp(0.875rem, calc(0.77rem + min(0.117cqi, 0.207svh)), 1.05rem);

      /* Reconnect aliases inside the scope so inherited roles use its values. */
      --type-display-size: var(--font-size-display);
      --type-title-size: var(--font-size-h1);
      --type-heading-size: var(--font-size-h2);
      --type-lead-size: var(--font-size-h3);
      --type-body-size: var(--font-size-body);
      --type-ui-size: var(--font-size-small);
      --type-caption-size: var(--font-size-xs);

      /* Horizontal and vertical rhythm have independent, restrained caps. */
      --space-page-x: clamp(2.5rem, calc(1.6rem + min(0.999cqi, 1.767svh)), 4rem);
      --space-page-y: clamp(5.5rem, calc(4.6rem + min(0.999cqi, 1.767svh)), 7rem);
      --space-section: clamp(3.5rem, calc(2.9rem + min(0.666cqi, 1.178svh)), 4.5rem);
      --space-gap: clamp(1rem, calc(0.85rem + min(0.167cqi, 0.295svh)), 1.25rem);
    }

    .su-fluid__scope.su-fluid__scope--marketing {
      --type-caption-size: clamp(0.875rem, calc(0.575rem + min(0.333cqi, 0.593svh)), 1.375rem);
      --type-ui-size: clamp(1rem, calc(0.6625rem + min(0.375cqi, 0.667svh)), 1.5625rem);
      --type-body-size: clamp(1.125rem, calc(0.675rem + min(0.5cqi, 0.889svh)), 1.875rem);
      --type-lead-size: clamp(1.5rem, calc(0.9rem + min(0.667cqi, 1.185svh)), 2.5rem);
      --type-heading-size: clamp(2rem, calc(1.25rem + min(0.833cqi, 1.481svh)), 3.25rem);
      --type-title-size: clamp(3rem, calc(1.8rem + min(1.333cqi, 2.37svh)), 5rem);
      --type-display-size: clamp(4.5rem, calc(2.7rem + min(2cqi, 3.556svh)), 7.5rem);

      --space-page-x: clamp(2.5rem, calc(0.1rem + min(2.667cqi, 4.741svh)), 6.5rem);
      --space-page-y: clamp(5.5rem, calc(3.4rem + min(2.333cqi, 4.148svh)), 9rem);
      --space-section: clamp(3.5rem, calc(2rem + min(1.667cqi, 2.963svh)), 6rem);
      --space-gap: clamp(1rem, calc(0.55rem + min(0.5cqi, 0.889svh)), 1.75rem);
    }
  }
}