.EndCard__section {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-content: center;
  gap: clamp(2rem, 6vh, 4rem);
  padding: clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  isolation: isolate;

  opacity: 0.5;
  filter: saturate(0.25);
  transition:
    opacity var(--dur) var(--ease),
    filter var(--dur) var(--ease);
}

.EndCard__section.EndCard__resolved {
  opacity: 1;
  filter: saturate(1);
}

@media (min-width: 1024px) and (hover: hover) {
  .EndCard__section {
    filter: saturate(0.25) blur(4px);
  }

  .EndCard__section.EndCard__resolved {
    filter: saturate(1) blur(0px);
  }
}

.EndCard__line {
  white-space: pre-line;
  color: var(--fg);

  /**
   * "unforgettable." is 14 characters, which is wider than a 320px viewport can
   * hold at display scale however low the clamp floor goes. Hyphenating keeps
   * the real copy intact instead of clipping it; the alternative is shortening
   * the line, which is an editorial call rather than a layout one.
   */
  hyphens: auto;
  /**
   * `anywhere`, not `break-word`. Only `anywhere` reduces the element's
   * min-content width, and without that the auto-sized grid column grows to
   * fit the unbroken word and overflows the section padding instead.
   */
  overflow-wrap: anywhere;
  /* Grid items default to min-width:auto, which also blocks shrinking. */
  min-width: 0;
}

.EndCard__email {
  justify-self: start;
  color: var(--fg);
  border-bottom: 1px solid var(--grey-2);
  padding-bottom: 2px;
  transition:
    color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.EndCard__email:hover,
.EndCard__email:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
}

.EndCard__fin {
  position: absolute;
  right: clamp(2rem, 6vw, 7rem);
  bottom: clamp(2rem, 6vw, 7rem);
}

@media (prefers-reduced-motion: reduce) {
  .EndCard__section,
  .EndCard__section.EndCard__resolved {
    filter: none;
  }

  .EndCard__section {
    transition: opacity var(--dur) var(--ease);
  }

}