/* The opening sculpture keeps its original rendering and black surface. */
.hero { grid-template-columns: 1.05fr 1fr; column-gap: 42px; padding-top: 34px; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(102px, 10.1vw, 138px); margin: 25px 0 28px; }
.hero-person { display: flex; align-items: center; gap: 28px; width: 100%; margin: 0; justify-self: start; }
.hero-person .portrait { width: 156px; flex: none; border-radius: 19px; }
.hero-person .portrait img { filter: none; }
.hero-person .portrait figcaption { padding: 7px 13px; font-size: 9px; right: -8px; bottom: -8px; white-space: nowrap; }
.hero-person .hero-description { font-size: 17px; max-width: 270px; line-height: 1.7; }
.hero-actions { margin-top: 27px; }
.hero-world { min-width: 0; align-self: center; }
.sea-study { position: relative; }
.sea-heading, .sea-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.sea-heading { padding: 0 8px; font: 10px var(--mono); color: var(--quiet); }
.sea-heading > span:first-child { color: var(--accent); font-size: 12px; }
.sea-stage { position: relative; height: 390px; margin: 0 -30px; }
.sea-stage canvas, .sea-fallback { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
#hero-sea { opacity: 0; touch-action: pan-y; cursor: grab; }
#hero-sea:active { cursor: grabbing; }
.sea-study[data-renderer='webgl'] #hero-sea { opacity: 1; }
.sea-study[data-renderer='webgl'] .sea-fallback { visibility: hidden; }
.sea-caption { min-height: 44px; margin-inline: 8px; font-size: 10px; color: var(--quiet); }
.sea-caption button { background: none; border: 0; padding: 10px 0 10px 16px; min-height: 44px; font: inherit; color: var(--muted); }
.sea-caption button:hover { color: var(--text); }
.sea-caption button[hidden] { display: none; }
.hero-foot { margin-top: 40px; }
@media (min-width: 1450px) { .sea-stage { height: 440px; } }
@media (min-width: 761px) and (max-width: 1050px) {
  .hero { grid-template-columns: 1.1fr 1fr; column-gap: 24px; }
  .hero h1 { font-size: 94px; }
  .hero-person { gap: 21px; }
  .hero-person .portrait { width: 132px; }
  .hero-person .hero-description { font-size: 14px; }
  .sea-stage { height: 330px; margin-inline: -15px; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 25px; }
  .hero h1 { font-size: clamp(86px, 22vw, 140px); margin: 22px 0 28px; }
  .hero-person { gap: 25px; }
  .hero-person .portrait { width: 132px; }
  .hero-person .hero-description { font-size: 14px; max-width: 280px; }
  .hero-actions { margin-top: 27px; }
  .hero-world { margin-top: 40px; }
  .sea-heading, .sea-caption { margin-inline: 0; padding-inline: 0; }
  .sea-stage { height: clamp(265px, 80vw, 440px); margin-inline: -15px; }
  .hero-foot { margin-top: 26px; }
}
@media (max-width: 370px) {
  .hero-person { gap: 20px; }
  .hero-person .portrait { width: 115px; }
  .hero-person .hero-description { font-size: 13px; }
}