/* Portrait cover: editorial greeting, typographic identity, functional action. */
.hero {
  height: min(880px,100svh); min-height: 720px;
  color: var(--color-paper); overflow: hidden; isolation: isolate;
}
.hero-stage { --hero-shrink: .16; position: relative; width: min(90%,1260px); height: 100%; margin-inline: auto; transform: scale(calc(1 - var(--hero-scroll,0)*var(--hero-shrink))); transform-origin: 50% 60%; will-change: transform; }
.hero h1 { position: absolute; top: 24%; left: 0; z-index: 3; width: max-content; max-width: 78%; font-weight: 550; }
.hero-greeting { display: flex; align-items: baseline; gap: 18px; padding-left: 8%; font-family: var(--font-editorial); font-size: clamp(54px,5.5vw,80px); font-weight: 400; line-height: 1.05; letter-spacing: -.025em; color: #e4d4bb; }
.hero-intro { font-size: .34em; letter-spacing: -.01em; white-space: nowrap; }
.hero-name { display: block; margin-top: 12px; font-family: var(--font-primary); font-size: clamp(108px,calc(30vw - 216px),240px); font-weight: 550; line-height: .98; letter-spacing: -.045em; }
.hero-surname { display: block; margin-top: 18px; padding-right: 8px; text-align: right; font-family: var(--font-primary); font-size: clamp(12px,1.05vw,16px); font-weight: 450; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; color: #d0d8cc; }
.hero-period { position: relative; top: .12em; display: inline-block; width: .5em; height: .5em; margin-left: .08em; overflow: hidden; border-radius: 50%; background: #e4d4bb; color: transparent; font-size: 1em; line-height: 0; letter-spacing: 0; vertical-align: baseline; }
.hero-note { position: absolute; z-index: 3; left: 4.5%; bottom: 13%; }
.hero-note .button { min-width: 182px; }
.portrait-composition { position: absolute; top: 7%; right: 0; bottom: 8%; width: 46%; isolation: isolate; clip-path: inset(-20% -20% 0 -20%); }
.portrait-backdrop {
  position: absolute; inset: 30% 0 0 13%;
  background: radial-gradient(ellipse at 14% 7%,#f0dfbc,transparent 72%),linear-gradient(150deg,#d4c1a1,#b6b096);
  clip-path: polygon(0 0,86% 0,100% 12%,100% 100%,0 100%);
}
.hero-portrait { position: absolute; inset: 0 -7% 0 -8%; overflow: hidden; z-index: 2; }
.hero-portrait img { position: absolute; top: 0; left: 50%; width: auto; height: auto; max-width: 103%; max-height: 154%; transform: translate(-50%,-10%); }

@media (min-width: 1024px) and (max-height: 760px) {
  .hero h1 { top: 18%; }
}
@media (min-width: 1024px) and (max-width: 1180px) {
  .hero-stage { width: 88%; }
  .hero-greeting { font-size: 5.4vw; }
  .hero-note { left: 2%; }
  .portrait-composition { right: -2%; width: 48%; }
}
@media (max-width: 1023px) and (min-width: 701px) {
  .hero { min-height: 760px; height: min(900px,95svh); }
  .hero-stage { width: 88%; }
  .hero h1 { top: 30%; }
  .hero-greeting { font-size: 6.5vw; gap: 12px; }
  .hero-name { font-size: 12.2vw; }
  .hero-surname { margin-top: 14px; font-size: 12px; letter-spacing: .11em; }
  .portrait-composition { top: 16%; width: 49%; right: -1%; bottom: 10%; }
  .hero-note { left: 3%; bottom: 15%; }
}
@media (max-width: 700px) {
  .hero { min-height: 100svh; height: auto; max-height: none; }
  .hero-stage { --hero-shrink: .06; width: 88%; height: auto; padding-block: 112px 36px; display: grid; gap: 25px; }
  .hero h1 { position: relative; top: auto; max-width: 100%; }
  .hero-greeting { padding-left: 2px; gap: 13px; font-size: clamp(36px,9.5vw,52px); }
  .hero-intro { font-size: .44em; }
  .hero-name { margin-top: 9px; font-size: clamp(70px,21vw,124px); letter-spacing: -.06em; }
  .hero-surname { margin-top: 10px; font-size: 11px; letter-spacing: .12em; padding-right: 3px; }
  .portrait-composition { position: relative; inset: auto; justify-self: end; width: 94%; height: clamp(340px,96vw,480px); }
  .portrait-backdrop { inset: 27% 0 0 10%; }
  .hero-note { position: relative; inset: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
  .hero-note .button { min-width: 177px; }
}
@media (max-width: 360px) {
  .hero-stage { padding-top: 108px; gap: 22px; }
  .hero-name { font-size: 21.3vw; }
  .hero-surname { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage { transform: none; will-change: auto; }
}