/* Homepage layout and professional links. */
html:root { --site-shell-width: 58rem; }
html .experience-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem;
  gap: 2rem;
}
html .experience-heading h3 { min-width: 0; }
html .experience-date { white-space: nowrap; text-align: right; }
html .experience-heading ~ p { margin-right: 10rem; }
@media (max-width: 700px) {
  html .experience-heading { grid-template-columns: 1fr; gap: .3rem; }
  html .experience-date { text-align: left; }
  html .experience-heading ~ p { margin-right: 0; }
}
html :is(.profile-link, .site-nav-links a) {
  display: inline-flex;
  transform-origin: center;
  transition: transform 190ms cubic-bezier(.2,.7,.2,1), color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  html :is(.profile-link, .site-nav-links a):hover { transform: translateY(-3px) scale(1.12); }
}
html :is(.profile-link, .site-nav-links a):focus-visible { transform: translateY(-3px) scale(1.12); }
html .home-intro {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  min-height: 0;
  margin-bottom: 2rem;
}
html .avatar-container {
  width: 112px;
  height: 112px;
  justify-self: center;
  background: #c9cacc;
  border-radius: 50%;
}
html .avatar-container > div:first-child { visibility: hidden; }
html .avatar-container img {
  object-fit: contain !important;
  object-position: center !important;
  background: #c9cacc;
  border-radius: 50%;
  box-shadow: none;
  mask-image: linear-gradient(to right, transparent 7%, #000 19%, #000 81%, transparent 93%);
}
@media (max-width: 640px) {
  html .home-intro { grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; }
  html .avatar-container { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.profile-link, .site-nav-links a) { transition: none; }
  html :is(.profile-link, .site-nav-links a):is(:hover,:focus-visible) { transform: none; }
}

/* Compact homepage rhythm keeps the contribution graphs in the initial desktop view. */
#home .page-shell { padding-top: 1.25rem; }
#home .prose-body { font-size: 15px; line-height: 1.5; }
#home .home-intro { margin-bottom: 1.5rem; }
#home .space-y-8 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
#home h2 { margin-bottom: .75rem; }
#home .experience-heading ~ p.mt-3 { margin-top: .5rem; }
#home .mb-3.pb-6 { padding-bottom: 1rem; }