/* Portrait opening: the green field and the photograph form one architectural volume. */
.personal-hero {
  width: min(calc(100% - 3rem), 1512px);
  margin: .5rem auto 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  background: var(--cc-forest);
  color: var(--cc-stone);
}
.personal-hero .hero-copy {
  padding: clamp(2.5rem, 5vw, 5.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.personal-hero .eyebrow { color: #ced3cb; letter-spacing: .16em; }
.personal-hero h1 {
  max-width: 9ch;
  margin: 2rem 0 2rem;
  font-size: clamp(4.5rem, 7.8vw, 7.75rem);
  line-height: .98;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.personal-hero .hero-intro {
  max-width: 34ch;
  margin: 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: #ced3cb;
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 2.75rem; }
.personal-hero .hero-primary {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 1rem; max-width: 100%; min-height: 52px; padding: .9rem 1.25rem;
  background: var(--cc-stone); color: var(--cc-forest);
  font-size: .8rem; line-height: 1.4; white-space: nowrap; letter-spacing: .06em; text-decoration: none;
  transition: background-color .2s ease;
}
.personal-hero .hero-primary:hover { background: var(--cc-white); }
.personal-hero .text-link { color: var(--cc-stone); line-height: 1.5; }
.personal-hero .text-link:hover { color: white; }
.personal-hero a:focus-visible { outline-color: var(--cc-stone); outline-offset: 5px; }
.personal-hero .hero-portrait { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.personal-hero .hero-portrait img {
  width: 100%; height: 100%; min-height: 0; flex: 1 1 auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%;
}
.personal-hero .hero-portrait figcaption {
  margin: 0; padding: 1rem 1.5rem; color: #ced3cb;
  font-size: .75rem; line-height: 1.5;
}
.personal-hero + .intro-band { border-top: 0; margin-top: 0; }
@media (min-width: 701px) and (max-width: 1024px) {
  .personal-hero { width: calc(100% - 2rem); grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); }
  .personal-hero .hero-copy { padding: 2.5rem 2rem; }
  .personal-hero h1 { font-size: clamp(3.75rem, 7.7vw, 5.5rem); }
  .hero-actions { margin-top: 2rem; }
}
@media (max-width: 700px) {
  .personal-hero { width: calc(100% - 1.5rem); margin-top: .25rem; grid-template-columns: minmax(0, 1fr); }
  .personal-hero .hero-copy { order: 0; padding: 2.5rem 1.75rem 2.75rem; }
  .personal-hero h1 { margin: 1.25rem 0 1.5rem; font-size: clamp(3.4rem, 14.8vw, 5.5rem); }
  .personal-hero .hero-intro { font-size: 1.05rem; }
  .hero-actions { margin-top: 1.75rem; gap: .75rem 1.5rem; }
  .personal-hero .hero-portrait { order: 1; }
  .personal-hero .hero-portrait img { height: auto; flex: none; aspect-ratio: 4 / 4.5; object-position: center 18%; }
  .personal-hero .hero-portrait figcaption { padding: 1rem 1.75rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .personal-hero .hero-primary { transition: none; } }
.personal-hero:lang(ja) h1,
.personal-hero:lang(zh) h1,
.personal-hero:lang(ko) h1 { line-height: 1.18; letter-spacing: 0; }

@media (max-width: 360px) {
  .personal-hero .hero-primary { padding-inline: .75rem; gap: .65rem; letter-spacing: .02em; }
}