/* Homepage vertical rhythm: compact enough for wide laptop screens while
   preserving the editorial hierarchy on desktop and mobile. */
body.personal-site section {
  padding-top: clamp(72px, 6vw, 104px);
  padding-bottom: clamp(78px, 7vw, 120px);
}

.personal-site .num {
  top: clamp(28px, 2.2vw, 42px);
}

.personal-site .about .intro {
  padding-bottom: clamp(48px, 5vw, 78px);
}

.personal-site .aboutGrid {
  padding-top: clamp(48px, 5vw, 76px);
}

.personal-site .manifest {
  margin-top: clamp(58px, 7vw, 100px);
  padding-top: clamp(36px, 4vw, 60px);
}

.personal-site .split,
.personal-site .workHead {
  margin-bottom: clamp(50px, 5vw, 80px);
}

.personal-site .ecoGrid {
  margin-top: clamp(50px, 5vw, 80px);
}

@media (min-width: 901px) {
  body.personal-site .cases {
    padding-top: 72px;
    padding-bottom: 88px;
  }

  .personal-site .cases .split {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.45fr);
    gap: clamp(40px, 6vw, 100px);
    margin-bottom: 56px;
  }

  .personal-site .cases .split h2 {
    max-width: 950px;
    font-size: clamp(50px, 4.6vw, 74px);
    line-height: 0.96;
  }

  .personal-site .cases .split > p {
    max-width: 470px;
    justify-self: end;
    margin-bottom: 4px;
  }

  .personal-site .method li {
    min-height: 128px;
  }

  .personal-site .methodNo {
    padding-top: 20px;
  }

  .personal-site .method li > div {
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

@media (min-width: 901px) and (max-height: 720px) {
  body.personal-site section {
    padding-top: 62px;
    padding-bottom: 74px;
  }

  .personal-site .num {
    top: 24px;
  }
}

@media (max-width: 900px) {
  body.personal-site section {
    padding-top: 72px;
    padding-bottom: 76px;
  }
}

@media (max-width: 640px) {
  body.personal-site section {
    padding-top: 60px;
    padding-bottom: 64px;
  }

  .personal-site .about .intro {
    padding-bottom: 40px;
  }

  .personal-site .aboutGrid {
    padding-top: 40px;
  }
}