.contact {
  --p: 1;
  --sea: clamp(120px, 18vh, 190px);
  --sun-size: min(44vw, 460px);
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 100svh;
  padding: clamp(96px, 16vh, 180px) var(--gutter) calc(var(--sea) + var(--sun-size) / 2 + 48px);
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

.contact__glow {
  position: absolute;
  inset: 0 0 var(--sea);
  z-index: -2;
  background: radial-gradient(60% 70% at 50% 100%, rgb(255 120 70 / 0.34), transparent 72%);
  opacity: var(--p);
}

.contact__sun {
  position: absolute;
  left: 50%;
  bottom: var(--sea);
  z-index: -2;
  width: var(--sun-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sun-top) 8%, var(--sun-low) 50%);
  translate: -50% 50%;
  transform: translateY(calc((1 - var(--p)) * 52%));
}

.contact__sea {
  position: absolute;
  inset: auto 0 0;
  height: var(--sea);
  z-index: -1;
  background: linear-gradient(180deg, #123a5a, var(--abyss));
}

.contact__sea .glint {
  top: 12px;
  left: 50%;
  transform: scaleX(var(--p));
  opacity: var(--p);
}

.contact h2 {
  font-size: var(--step-3);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.contact p {
  max-width: 30ch;
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: var(--step-1);
  line-height: 1.4;
}

.contact__details {
  margin-top: 28px;
  padding: 10px 0;
  color: var(--ink-soft);
  font-size: var(--step-0);
  font-style: normal;
}

@media (max-width: 720px) {
  .contact {
    --sun-size: 62vw;
  }
}

.site-footer {
  padding-block: 28px;
  background: var(--abyss);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.site-footer .brand-mark {
  width: 28px;
  height: 28px;
}

.site-footer .legal {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-footer nav {
  display: flex;
  gap: 24px;
}

.site-footer nav a {
  padding: 10px 0;
  text-decoration: none;
}

.site-footer nav a:hover {
  color: var(--ink);
}