.about{
  min-height:100svh;
  padding:0 var(--page-x);
  background:var(--paper);
  display:flex;
  align-items:stretch;
  overflow-x:clip;
}
.about__grid{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-md);
  align-items:stretch;
}
.about__visual{
  margin:0;
  align-self:stretch;
  margin-left:calc(-1 * (var(--page-x) + max(0px, (100vw - 2 * var(--page-x) - var(--container)) / 2)));
  background:var(--rule);
  display:flex;
  align-items:flex-end;
  padding:var(--space-lg);
  font-size:var(--label-size);
  line-height:var(--label-lh);
  font-weight:var(--w-medium);
  letter-spacing:var(--label-ls);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.about__body{
  align-self:center;
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}
.about__lede{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-xs);
}
.about__name{
  font-family:var(--serif);
  font-size:var(--display-size);
  line-height:var(--display-lh);
  font-weight:var(--w-regular);
  letter-spacing:var(--display-ls);
  color:var(--ink);
}
.about__what{
  font-family:var(--serif);
  font-size:var(--title-size);
  line-height:var(--title-lh);
  font-weight:var(--w-regular);
  letter-spacing:var(--title-ls);
  color:var(--ink);
  text-wrap:balance;
}
.about__body p{
  margin:0;
  font-size:var(--body-size);
  line-height:var(--body-lh);
  color:var(--ink);
  text-wrap:pretty;
}
.about__contact{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-sm);
  font-size:var(--body-size);
  line-height:var(--body-lh);
}
.about__contact a{
  text-decoration:underline;
  text-decoration-thickness:var(--hair);
  text-underline-offset:0.25em;
}

.about__contact a:hover{
  text-decoration-thickness:2px;
}
.about__visual:has(img){
  padding:0;
}

.about__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
@media (max-width: 64.375em){
  .about{
    min-height:0;
    padding:var(--space-2xl) var(--page-x);
    display:block;
  }

  .about__grid{
    grid-template-columns:minmax(0, 1fr);
    gap:var(--space-lg);
  }
  .about__visual{
    aspect-ratio:670 / 585;
    margin-left:0;
  }
  .about__name{
    font-size:var(--title-size);
    line-height:var(--title-lh);
    letter-spacing:var(--title-ls);
  }

  .about__what{
    font-size:var(--body-size);
    line-height:var(--body-lh);
    letter-spacing:normal;
  }
}