.section-topline { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:54px; }
.section-topline h2 { margin: 0; font-size: clamp(2.5rem, 6vw, 6rem); line-height: .88; font-weight: 700; }


/* CTA visibility: controls should read as controls before hover. */
.button,
.text-link {
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
}
.button-primary {
  box-shadow: 0 8px 26px rgba(0,0,0,.16);
}

/* Phase 8: explicit project CTA controls */
.project-card-cta{align-self:flex-start;margin-top:30px;position:relative;z-index:2;pointer-events:none}
.hero-identity{margin-bottom:28px}
.hero-portrait{width:86px;height:86px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface);display:grid;place-items:center;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.hero-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.hero-portrait-fallback{color:var(--text);font:700 1.1rem/1 "JetBrains Mono",monospace;letter-spacing:.04em}
.hero-portrait:not(.is-empty) .hero-portrait-fallback{display:none}
@media(max-width:700px){.hero-portrait{width:70px;height:70px;border-radius:12px}.hero-identity{margin-bottom:22px}}

/* Phase 9: personal profile portrait */
.hero-portrait {
  width: clamp(96px, 9vw, 132px);
  height: clamp(96px, 9vw, 132px);
  border-radius: 18px;
  border-color: var(--border-strong);
  box-shadow: 0 14px 38px rgba(0,0,0,.20);
}
.hero-portrait img {
  object-position: 50% 34%;
}
@media(max-width:700px) {
  .hero-portrait {
    width: 82px;
    height: 82px;
    border-radius: 15px;
  }
}

/* Phase 10: visible homepage identity portrait */
.hero-identity {
  display:flex;
  align-items:center;
  gap:22px;
  margin-bottom:34px;
}
.hero-identity .eyebrow { margin:0; }
.hero-portrait {
  flex:0 0 auto;
  width:104px;
  height:104px;
  border:1px solid var(--border-strong);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 16px 42px rgba(0,0,0,.22);
  position:relative;
}
.hero-portrait:after {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(var(--accent-rgb),.18);
  border-radius:inherit;
  pointer-events:none;
}
.hero-portrait img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 34%;
  display:block;
}
@media(max-width:700px) {
  .hero-identity { gap:16px; margin-bottom:26px; }
  .hero-portrait { width:78px; height:78px; border-radius:14px; }
}