/* ─── Home ─── */

.home-featured,
.home-experience,
.home-articles {
  padding-block: var(--space-20);
  border-top: 1px solid var(--color-border-subtle);
}

.home-articles-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

/* ─── Projects page ─── */

.projects-all {
  padding-bottom: var(--space-20);
}

/* ─── Experience page ─── */

.experience-full {
  padding-bottom: var(--space-20);
}

/* ─── Articles page ─── */

.articles-page-content {
  padding-bottom: var(--space-20);
}

/* ─── About page ─── */

.about-stack-section {
  margin-top: var(--space-16);
}

/* ─── 404 ─── */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

.not-found-code {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.not-found-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.not-found-desc {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-8);
}

/* ─── Responsive ─── */

@media (max-width: 640px) {
  :root {
    --container-padding: 1.25rem;
  }

  .experience-item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .project-card {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .home-articles-inner {
    flex-direction: column;
  }

  .hero {
    padding-top: var(--space-16);
  }

  .hero-inner {
    flex-direction: column-reverse;
    gap: var(--space-8);
  }

  .hero-portrait img {
    width: 80px;
    height: 80px;
  }
}