/* A8.3R4A — unified global shell + portfolio context rail.
   Intentionally isolated from graph demo, presentation, reader, and evidence-packet chrome. */

.portfolio-context-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.72rem 0 0.78rem;
  border-bottom: 1px solid var(--line);
}

.portfolio-context-label {
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.portfolio-context-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.6rem 1rem;
}

.portfolio-context-links a {
  color: var(--muted);
  font-size: 0.82rem;
  text-decoration: none;
}

.portfolio-context-links a:hover,
.portfolio-context-links a:focus-visible {
  color: var(--text);
}

@media (max-width: 760px) {
  .portfolio-context-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .portfolio-context-links {
    justify-content: flex-start;
    gap: 0.55rem 0.9rem;
  }
}

/* A8.3R4A2 — About context rail alignment.
   About intentionally uses a full-width shell with its primary nav constrained
   to the cinematic hero geometry. Match the portfolio context rail to that
   exact nav width instead of allowing it to span the full browser glass. */
body.about-page-v3 .portfolio-context-nav {
  width: min(92vw, 3360px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 860px) {
  body.about-page-v3 .portfolio-context-nav {
    width: min(calc(100vw - 2rem), 760px);
  }
}