/* ============================================================
   Header — name, roles, navigation
   Shared across every page (markup injected by site-chrome.js).
   ============================================================ */

.portfolio__header {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  gap: var(--gutter);
  align-items: start;
}

/* Name */
.portfolio__name {
  grid-column: 1 / 3;
}

.portfolio__name:hover {
  font-style: italic;
}

/* Roles */
.portfolio__roles {
  grid-column: 5 / 10;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.portfolio__role {
  font-size: var(--font-size);
}

/* Navigation */
.portfolio__nav {
  grid-column: 12 / 13;
  text-align: right;
}

.portfolio__nav-link {
  font-size: var(--font-size);
  transition: font-style var(--transition-speed) ease;
}

.portfolio__nav-link:hover {
  font-style: italic;
}

/* Active nav link — italic when on the index page */
.portfolio__nav-link--active {
  font-style: italic;
}

@media (max-width: 768px) {
  /* Header: name left, nav right */
  .portfolio__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
    grid-column: unset;
    grid-template-columns: none;
    gap: 0;
    margin-bottom: 0;
  }

  .portfolio__name {
    grid-column: unset;
  }

  .portfolio__roles {
    display: none;
  }

  .portfolio__nav {
    grid-column: unset;
    text-align: right;
  }
}