/* v1.21 — content first, readable, no self-referential implementation showcase */

.portfolio-home-v21 {
  --v21-muted-readable: color-mix(in srgb, var(--v18-text) 68%, var(--v18-muted));
}

/* Header */
.portfolio-home-v21 .v20-header .v18-nav a { font-size: 13px; }

/* Hero: useful current information instead of a technology demo panel */
.portfolio-home-v21 .v20-hero {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  grid-template-rows: minmax(520px, calc(100svh - 70px));
  gap: 0 clamp(42px, 7vw, 96px);
  overflow: hidden;
}
.portfolio-home-v21 .v20-hero::before {
  left: 0;
  right: 0;
  background:
    linear-gradient(90deg, transparent 0 66%, color-mix(in srgb, var(--v18-line) 45%, transparent) 66%, transparent 66.08%),
    linear-gradient(180deg, transparent 0 78%, color-mix(in srgb, var(--v18-accent) 7%, transparent) 78%, transparent 100%);
  opacity: .55;
}
.portfolio-home-v21 .v20-hero__copy { max-width: 790px; }
.portfolio-home-v21 .v20-eyebrow { font-size: 11px; }
.portfolio-home-v21 .v20-intro { color: var(--v21-muted-readable); font-size: 15px; line-height: 1.9; }

.v21-hero-brief {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--v18-line);
  align-self: center;
}
.v21-brief-row {
  min-height: 116px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--v18-line);
  color: var(--v18-text);
}
.v21-brief-row:hover { background: color-mix(in srgb, var(--v18-accent) 4%, transparent); }
.v21-brief-label {
  grid-row: 1 / 3;
  align-self: center;
  color: var(--v18-accent);
  font: 720 11px/1.4 var(--font-mono);
  letter-spacing: .06em;
}
.v21-brief-row strong {
  align-self: end;
  font-size: clamp(16px, 1.55vw, 20px);
  line-height: 1.35;
  letter-spacing: -.018em;
}
.v21-brief-row small {
  align-self: start;
  margin-top: 7px;
  color: var(--v21-muted-readable);
  font-size: 12px;
  line-height: 1.5;
}
.v21-brief-row > b {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--v18-accent);
  font-size: 18px;
  font-weight: 500;
}

/* Readability */
.portfolio-home-v21 .v20-section-head > div:first-child { font-size: 10.5px; }
.portfolio-home-v21 .v20-section-head div:last-child > p {
  color: var(--v21-muted-readable);
  font-size: 16px;
  line-height: 1.75;
}
.portfolio-home-v21 .v20-capability-row { min-height: 82px; }
.portfolio-home-v21 .v20-capability-row > span:first-child { font-size: 10.5px; }
.portfolio-home-v21 .v20-capability-row strong { font-size: 17px; }
.portfolio-home-v21 .v20-capability-row small {
  margin-top: 6px;
  color: var(--v21-muted-readable);
  font-size: 13px;
  line-height: 1.5;
}
.portfolio-home-v21 .v20-capability-detail .v20-detail-kicker { font-size: 10.5px; }
.portfolio-home-v21 .v20-capability-detail p {
  color: var(--v21-muted-readable);
  font-size: 15px;
  line-height: 1.85;
}
.portfolio-home-v21 .v20-detail-tags span { font-size: 10.5px; }
.portfolio-home-v21 .v20-activity-row > span:first-child { font-size: 10.5px; }
.portfolio-home-v21 .v20-activity-row small { color: var(--v21-muted-readable); font-size: 11px; }
.portfolio-home-v21 .v20-activity-row p { color: var(--v21-muted-readable); font-size: 14px; line-height: 1.75; }
.portfolio-home-v21 .v20-about-copy p { color: var(--v21-muted-readable); }
.portfolio-home-v21 .v20-about-meta dt { font-size: 10.5px; }
.portfolio-home-v21 .v20-about-meta dd { color: var(--v21-muted-readable); font-size: 14px; }
.portfolio-home-v21 .v20-social small { font-size: 10px; }
.portfolio-home-v21 .v20-social strong { font-size: 18px; }

/* Capability selection should feel stable rather than flicker on incidental hover. */
@media (hover: hover) {
  .portfolio-home-v21 .v20-capability-row:hover:not(.is-active) {
    background: color-mix(in srgb, var(--v18-accent) 3%, var(--v18-panel));
  }
}

@media (max-width: 900px) {
  .portfolio-home-v21 .v20-hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0;
  }
  .portfolio-home-v21 .v20-hero::before { display: none; }
  .portfolio-home-v21 .v20-hero__copy { padding-bottom: 44px; }
  .v21-hero-brief { margin: 0 0 52px; }
}

@media (max-width: 680px) {
  .portfolio-home-v21 .v20-intro { font-size: 14px; }
  .v21-brief-row {
    min-height: 104px;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 16px 0;
  }
  .v21-brief-label { font-size: 10px; }
  .v21-brief-row strong { font-size: 16px; }
  .v21-brief-row small { font-size: 11px; }
  .portfolio-home-v21 .v20-section-head div:last-child > p { font-size: 14px; }
  .portfolio-home-v21 .v20-capability-row small { font-size: 12px; }
  .portfolio-home-v21 .v20-capability-detail p { font-size: 14px; }
  .portfolio-home-v21 .v20-activity-row p { font-size: 13px; }
  .portfolio-home-v21 .v20-about-meta dd { font-size: 13px; }
}