/* =========================================================
   about.css
   Page-specific layout for about.html only: a two-column
   split (portrait left, copy right) beneath the shared
   project-hero title. Everything else about.html uses comes
   from project.css.
   ========================================================= */

.about-columns {
  display: grid;
  grid-template-columns: minmax(0, 40%) 1fr;
  gap: var(--space-lg) var(--space-2xl);
  align-items: start;
}

.about-columns .media-slot {
  margin: 0;
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.about-copy .project-copy,
.about-copy .project-list {
  max-width: 60ch;
}

.about-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* Solid filled button, distinct from the outlined pixel-chip
   used elsewhere on project pages — matches the reference
   layout's plain rectangular Resume button. */
.about-resume-btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-bg);
  background: var(--project-accent);
  padding: 0.85em 2.2em;
  border-radius: 2px;
  transition: background var(--duration-fast) var(--ease-out);
}

.about-resume-btn:hover,
.about-resume-btn:focus-visible {
  background: color-mix(in srgb, var(--project-accent) 85%, var(--color-paper) 15%);
}

.about-email {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.about-email:hover,
.about-email:focus-visible {
  color: var(--color-paper);
}

@media (max-width: 45em) {
  .about-columns {
    grid-template-columns: 1fr;
  }
}