.hero { margin-top: clamp(56px, 13vh, 150px); }
.hero h1 { grid-column: 1 / 11; }
.about {
  grid-column: 8 / 12;
  margin-top: clamp(32px, 6vh, 64px);
  font-size: 17px;
  line-height: 1.55;
  color: #bdbcb8;
  max-width: 46ch;
}

/* Projects */
.work {
  --dim: .3;
  --blur: 3px;
  list-style: none;
  padding: 0;
  margin-top: clamp(72px, 14vh, 160px);
}
.work li { border-top: 1px solid var(--line); }
.work li:last-child { border-bottom: 1px solid var(--line); }

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 24px;
  align-items: center;
  padding: 34px var(--m);
  transition: opacity .5s var(--ease), filter .5s var(--ease);
}
.row h2 {
  grid-column: 1 / 7;
  font-weight: 300;
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.row p {
  grid-column: 7 / 11;
  font-size: 15px;
  color: var(--mut);
  max-width: 46ch;
  transition: color .4s;
}
/* The digit 1 has extra space on its left: pull its line back so every line starts on one edge. */
.row p .hang { display: inline-block; margin-left: -.09em; }

.work:has(.row:hover) .row:not(:hover),
.work:has(.row:focus-visible) .row:not(:focus-visible) {
  opacity: var(--dim);
  filter: blur(var(--blur));
}
.row:is(:hover, :focus-visible) p { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .row { transition: none; }
}

/* Entrance */
@media (prefers-reduced-motion: no-preference) {
  .in { opacity: 0; transform: translateY(14px); animation: in 1.1s var(--ease) forwards; }
  .in:nth-child(2) { animation-delay: .12s; }
  .in:nth-child(3) { animation-delay: .24s; }
  @keyframes in { to { opacity: 1; transform: none; } }
}

@media (max-width: 820px) {
  .hero h1, .about { grid-column: 1 / 13; }
  .about { margin-top: 24px; }
  .row { row-gap: 10px; padding-block: 28px; }
  .row h2, .row p { grid-column: 1 / 13; }
}