.ds-document--auth {
  --ds-auth-hero-min-block-size: 42vh;
  /* Extra hero depth below the title block: image continues, then fades into the page. */
  --ds-auth-hero-bleed: clamp(7rem, 14vh, 11rem);
  --ds-auth-panel-max-width: 31rem;
  --ds-auth-flow-max-width: 64rem;
}

.ds-document--auth .ds-editorial-hero {
  min-block-size: calc(var(--ds-auth-hero-min-block-size) + var(--ds-auth-hero-bleed));
  margin-block-end: calc(-1 * var(--ds-auth-hero-bleed));
  padding-block-end: var(--ds-auth-hero-bleed);
}

.ds-document--auth .ds-editorial-hero__scrim {
  background:
    linear-gradient(
      180deg,
      rgb(from var(--ds-palette-noir) r g b / 38%) 0%,
      rgb(from var(--ds-palette-noir) r g b / 16%) 32%,
      transparent 58%
    ),
    linear-gradient(
      0deg,
      var(--ds-color-page) 0%,
      color-mix(in srgb, var(--ds-color-page) 88%, transparent) 22%,
      transparent 68%
    );
}

.ds-document--auth .ds-editorial-hero__content {
  min-block-size: var(--ds-auth-hero-min-block-size);
  justify-content: center;
  padding-block-end: calc(var(--ds-space-page) + var(--ds-space-heading-after));
}

.ds-document--auth .ds-editorial-hero__content > * + * {
  margin-block-start: var(--ds-space-1);
}

.ds-document--auth .ds-editorial-frame__body {
  padding-block-start: 0;
}

.ds-auth-flow {
  position: relative;
  z-index: 1;
  inline-size: min(100%, var(--ds-auth-flow-max-width));
  margin-inline: auto;
  padding-inline: var(--ds-space-page);
  padding-block-end: calc(var(--ds-space-page) * 2);
}

.ds-auth-panel {
  display: grid;
  gap: var(--ds-layout-content-gap);
  inline-size: min(100%, var(--ds-auth-panel-max-width));
  margin-inline: auto;
  padding: calc(var(--ds-space-page) * 1.35);
  box-shadow: var(--ds-shadow-surface-subtle);
}

.ds-auth-panel--signed-in {
  text-align: center;
}

.ds-auth-panel__heading {
  display: grid;
  gap: var(--ds-space-0);
  text-align: center;
}

.ds-auth-panel__heading > * {
  margin: 0;
}

.ds-auth-panel__notice {
  margin: 0;
  text-align: center;
  color: var(--ds-color-supporting-ink);
}

.ds-auth-panel__form {
  display: grid;
  gap: var(--ds-layout-content-gap);
}

.ds-auth-panel__links {
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 40rem) {
  .ds-document--auth {
    --ds-auth-hero-bleed: clamp(5.5rem, 12vh, 8rem);
  }

  .ds-auth-panel {
    padding: var(--ds-space-page);
  }
}