:root {
  --color-base: #111111;
  --color-body: #fff;
  --color-beige1: #ffeddf;
  --color-beige2: #FDF8E7;
  --color-brown1: #956134;
  --color-red1: #FF645F;
  --color-orange1: #F7792A;
  --color-gray1: #e7ded9;
  --color-gray2: #F0F5F7;
  --color-green1: #005F2F;
  --color-green2: #0C8F54;
  --color-green3: #B7D450;
  --color-green4: #0C8F2B;
  --color-blue1: #1C66A3;
  --color-white_op: rgb(from #fff r g b / 0.7);
}

/* ------------------------------------
// greeting
------------------------------------ */
#message {
  padding: clamp(3rem, 5.6vw, 8rem) 2rem;
}
#message p {
  text-align: center;
  font-size: clamp(1.6rem, 1.3vw, 1.8rem);
}
#message p.lead {
  font-size: clamp(2rem, 2.2vw, 3.2rem);
  color: var(--color-green1);
}
#message p + p {
  margin-top: 2rem;
}
@media screen and (max-width: 768px) {
  #message p {
    text-align: left;
  }
}

#profile {
  background: var(--color-beige2);
  display: grid;
  grid-template-columns: minmax(20px, 1fr) minmax(0, 740px) minmax(0, 400px) minmax(20px, 1fr);
  gap: 0 clamp(2rem, 2.8vw, 4rem);
}
#profile .data {
  grid-column: 2;
}
#profile .data h3 {
  color: var(--color-green1);
  font-size: clamp(2rem, 1.9vw, 2.8rem);
  margin-bottom: 2rem;
}
#profile .data dl {
  display: grid;
  margin-top: 3rem;
  grid-template-columns: max-content 1fr;
  gap: 1rem 3rem;
}
#profile .photo {
  grid-column: 3;
  text-align: center;
}
#profile .photo p {
  margin-top: 1rem;
}
@media screen and (max-width: 768px) {
  #profile {
    display: grid;
    grid-template-columns: 1fr;
    padding: 2rem;
    gap: 2rem;
  }
  #profile .data {
    grid-column: 1;
  }
  #profile .data dl {
    gap: 1rem;
  }
  #profile .photo {
    grid-column: 1;
  }
  #profile .photo img {
    max-width: 220px;
  }
}