/* About links */
.social-links {
  font-family: var(--developer-font);
  font-size: var(--developer-font-size);
  font-weight: 500;
  color: var(--muted);
}

.social-links :is(a, button) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
}

.social-copy-link {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.social-copy-link:focus-visible {
  outline: none;
}

.social-link-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  fill: currentColor;
}

/* Homepage section layout */
section {
  padding: 2rem 0;
}

section + section,
footer {
  border-top: 1px solid var(--border);
}

/* About title and intro */
#about h1 {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.terminal-title {
  display: inline-block;
  position: relative;
  font-family: var(--developer-font);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  font-variant-ligatures: none;
}

.terminal-title-ghost {
  visibility: hidden;
  white-space: nowrap;
}

.terminal-title-live {
  position: absolute;
  inset: 0 auto auto 0;
  display: inline-flex;
  align-items: flex-end;
  white-space: nowrap;
}

.terminal-title-text {
  display: inline-block;
  min-width: 0.1ch;
}

.terminal-caret {
  display: inline-block;
  width: 0.58em;
  height: 1.05em;
  margin-left: 0.08em;
  background: currentColor;
  animation: terminal-caret-blink 0.9s ease-in-out infinite;
}

.intro-text {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 42rem;
  margin-bottom: 1rem;
}

/* Section headers */
.view-all-link {
  font-family: var(--developer-font);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0;
}

.section-header h2,
#projects > h2 {
  margin-bottom: 0;
}

/* Blog and project lists */
#blog-posts,
#project-list {
  display: flex;
  flex-direction: column;
  margin-top: 2rem;
}

#blog-posts > article,
.project-item {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  border-bottom: 1px solid var(--surface);
}

.project-item {
  padding: 1.25rem 0;
}

#blog-posts > article:last-child,
.project-item:last-child {
  border-bottom: none;
}

#blog-posts > article:first-child,
.project-item:first-child {
  padding-top: 0;
}

@media (min-width: 640px) {
  #blog-posts > article {
    flex-direction: row;
    align-items: baseline;
  }
}

/* Blog post metadata and content */
.post-date {
  font-family: var(--developer-font);
  font-size: var(--developer-font-size);
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.25rem;
  margin-right: 1rem;
}

@media (min-width: 640px) {
  .post-date {
    flex: 0 0 10ch;
    white-space: nowrap;
    margin-bottom: 0;
  }
}

.post-content h3 a,
.project-name a {
  display: inline-block;
}

/* Muted homepage text and interactive states */
:is(.post-excerpt, .project-description, .project-tech, .view-all-link) {
  color: var(--muted);
}

:is(.view-all-link, .nav-links a, .social-links :is(a, button)):is(
    :hover,
    :focus-visible
  ) {
  color: var(--link-hover-text);
  background-color: var(--link-hover-bg);
}

/* Copy-to-clipboard feedback */
.copy-feedback {
  position: absolute;
  top: -1.6rem;
  left: 50%;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: var(--link-hover-bg);
  color: var(--link-hover-text);
  font-size: 0.75rem;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.4rem) scale(0.92);
}

.social-copy-link.is-copied .copy-feedback {
  animation: copy-pop 1s ease;
}

/* Homepage animations */
@keyframes copy-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.4rem) scale(0.92);
  }

  20% {
    opacity: 1;
    transform: translate(-50%, -0.2rem) scale(1);
  }

  75% {
    opacity: 1;
    transform: translate(-50%, -0.3rem) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -0.55rem) scale(0.98);
  }
}

@keyframes terminal-caret-blink {
  0%,
  45% {
    opacity: 1;
  }

  55%,
  100% {
    opacity: 0;
  }
}

/* Project and post detail copy */
.post-excerpt {
  margin-top: 0.25rem;
  font-size: 0.875rem;
}

.project-description {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

.project-tech {
  margin-top: 0.75rem;
  font-family: var(--developer-font);
  font-size: var(--developer-font-size);
  font-weight: 500;
}