/* ================================================================
   PORTFOLIO-PROGRAM.CSS — Portfolio homepage, program design system
   Page-specific components built on top of ../../Themes/program-tokens.css
   + program-components.css + editorial-patterns.css. Those files stay
   generic (program pages only); anything Portfolio-only lives here.
================================================================ */

/* ── Nav ──────────────────────────────────────────────────────── */
.nav-logo img { height: 30px; width: auto; }
.nav-actions { grid-column: 3; justify-self: end; }

/* ── Kicker on dark sections (applied directly, not nested) ─────── */
.kicker.on-dark, .kicker.on-dark .bracket { color: var(--coral); }

/* ── Hero portrait — photo + soft decorative shapes ──────────── */
.hero-portrait-wrap { position: relative; max-width: 400px; margin-left: auto; }
.hero-portrait-wrap .decor { position: absolute; z-index: 0; }
.hero-portrait-wrap .decor.lime {
  width: 72%; height: 72%; top: -12%; right: -14%;
  background: var(--lime);
  border-radius: 62% 38% 55% 45% / 48% 45% 55% 52%;
}
.hero-portrait-wrap .decor.coral {
  width: 96px; height: 96px; bottom: -22px; left: -22px;
  background: var(--coral); border-radius: 20px; transform: rotate(12deg);
}
.hero-portrait {
  position: relative; z-index: 1;
  aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 30px 60px rgba(22, 20, 15, .18);
}
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .hero-portrait-wrap { max-width: 320px; margin: 0 auto; }
}

/* ── Section heading (reused above work grid) ────────────────── */
.section-head { margin-bottom: 2.6rem; }
.section-head h2 {
  font-family: var(--serif); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.05; margin-top: .6rem;
}

/* ── Case study cards ─────────────────────────────────────────── */
/* .case-grid / .case-card family now lives in the shared
   ../../Themes/editorial-patterns.css (themed via --case-card-* in
   ../../Themes/program-tokens.css) so other pages can reuse it. */
.work-section { padding: clamp(4rem, 9vw, 7rem) 0; }
.work-more { text-align: center; margin-top: 2.6rem; }

/* ── Footer + contact modal ──────────────────────────────────────
   .footer-inner / .footer-links / .modal-overlay / .modal / .contact-*
   now live in the shared ../../Themes/program-components.css so other
   program-system pages (e.g. training/programs/*.html) can reuse them. */