* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  min-height: 100vh;
  background: #e3efef;
  color: #1e483e;
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3 { font-weight: 600; }

.container { max-width: 64rem; margin-inline: auto; padding-inline: 1.5rem; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.75rem; }
.site-name { font-weight: 600; letter-spacing: -.025em; }
.main-nav { display: flex; gap: 1.5rem; font-size: .875rem; line-height: 1.25rem; }
main { padding-bottom: 5rem; }

.profile { padding-block: 2.5rem; border-bottom: 1px solid rgb(30 72 62 / 20%); text-align: center; }
.profile-icon { width: 144px; height: 144px; margin: 0 auto 2rem; border-radius: 50%; }
.profile h1 { font-size: 32px; letter-spacing: -.025em; }
.profile-links { margin-top: 1.25rem; }
.social-links { display: flex; justify-content: center; gap: .75rem; }
.social-links a { display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: 50%; background: #fff; transition: box-shadow .15s cubic-bezier(.4, 0, .2, 1); }
.social-links img { width: 22px; height: 22px; object-fit: contain; }
.social-links a:focus-visible { outline: 2px solid #1e483e; outline-offset: 4px; }

.works, .activity { scroll-margin-top: 2rem; }
.works { padding-block: 2.5rem; }
.activity { padding-top: 3rem; border-top: 1px solid rgb(30 72 62 / 20%); }
.section-title { margin-bottom: 1.75rem; font-size: 1.5rem; line-height: 2rem; }
.card { border: 1px solid rgb(30 72 62 / 15%); border-radius: .75rem; background: #fff; transition: background-color .15s cubic-bezier(.4, 0, .2, 1); }
.card-meta { color: #344b40; font-size: .75rem; line-height: 1rem; }
.work-card { display: block; padding: 1.25rem; }
.work-card + .work-card { margin-top: 1.25rem; }
.work-card h3 { margin-top: .75rem; font-size: 1.25rem; line-height: 1.375; }
.work-description { margin-top: .75rem; color: #344b40; font-size: .875rem; line-height: 1.5rem; }
.articles { display: grid; gap: 1rem; }
.article-card { display: flex; flex-direction: column; overflow: hidden; }
.article-image { width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; }
.article-content { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.article-content .card-meta { margin-bottom: .75rem; }
.article-content h3 { font-size: 1rem; line-height: 1.625; }

.site-footer { border-top: 1px solid rgb(30 72 62 / 20%); color: #344b40; }
.footer-content { display: flex; flex-direction: column; gap: 1.25rem; padding-block: 2rem; }
.footer-content > p { font-size: .75rem; line-height: 1rem; }

@media (hover: hover) {
  .main-nav a:hover, .article-card:hover h3 { text-decoration: underline; }
  .card:hover { background: #eaf0e9; }
  .social-links a:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); }
}

@media (min-width: 40rem) {
  .article-card { flex-direction: row; }
  .article-image { width: 14rem; flex-shrink: 0; }
  .footer-content { flex-direction: row; align-items: center; justify-content: space-between; }
}