.site {
  width: min(100% - (var(--page-pad) * 2), var(--site-max));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
}

.section--tight {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

main > .section:last-child {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Page ending */

.page-top {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.page-top a {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--c-main-2);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.page-top a span {
  transition: transform var(--dur) var(--ease);
}

.page-top a:hover span,
.page-top a:focus-visible span {
  transform: translateY(-0.22rem);
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack--2 { gap: var(--sp-2); }
.stack--4 { gap: var(--sp-4); }
.stack--6 { gap: var(--sp-6); }
.stack--8 { gap: var(--sp-8); }
.stack--12 { gap: var(--sp-12); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--sp-6);
}

.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(20rem, .95fr);
  gap: clamp(2.5rem, 7vw, 7rem);
  align-items: center;
}

.surface {
  position: relative;
  overflow: hidden;
  background: var(--g-surface), var(--c-surface);
  border: var(--bd);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  backdrop-filter: blur(18px);
}

.surface::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background: radial-gradient(circle at top right, rgba(0,166,214,.12), transparent 35%);
}

.surface__body {
  position: relative;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.rule {
  width: 100%;
  height: 1px;
  background: var(--c-line);
}

@media (max-width: 56rem) {
  .split,
  .grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 42rem) {
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .section {
    padding-block: clamp(4rem, 18vw, 6rem);
  }
}

/* Section scroll motion */

@supports (animation-timeline: view()) {
  main > section:not(:first-of-type):not(.skills) > .site {
    animation-name: section-scroll-in;
    animation-duration: 1ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-timeline: view();
    animation-range: entry 28% cover 48%;
  }
}

@supports not (animation-timeline: view()) {
  .js [data-section-layer] {
    opacity: 0;
    filter: blur(0.22rem);
    translate: 0 3.5rem;
    scale: 0.985;
  }

  .js [data-section-layer].is-section-visible {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
    transition:
      opacity 760ms var(--ease) var(--section-delay, 0ms),
      filter 820ms var(--ease) var(--section-delay, 0ms),
      translate 880ms var(--ease) var(--section-delay, 0ms),
      scale 880ms var(--ease) var(--section-delay, 0ms);
  }
}

@keyframes section-scroll-in {
  0% {
    opacity: 0.12;
    filter: blur(0.28rem);
    translate: 0 4.5rem;
    scale: 0.982;
  }

  58%,
  100% {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}