/* Two quiet human moments; all other pages keep their existing rhythm. */
.human-hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(740px, 60vw, 940px);
  padding-block: calc(var(--header) + clamp(4rem, 6vw, 6rem)) clamp(5rem, 7vw, 7rem);
  display: flex;
  align-items: center;
}
.human-hero-media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: auto;
}
.human-hero-media picture, .human-hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.human-hero-media img { object-fit: cover; object-position: 75% 45%; }
.human-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #0b0b0a 0%, rgba(11,11,10,.97) 22%, rgba(11,11,10,.88) 40%, rgba(11,11,10,.2) 55%, rgba(11,11,10,.04) 70%),
    linear-gradient(0deg, rgba(11,11,10,.65), transparent 25%);
}
.human-hero-content { position: relative; z-index: 2; }
.human-hero-copy { max-width: 730px; width: 55%; }
.human-hero h1 {
  font-size: clamp(3.1rem, 4.8vw, 5.7rem);
  line-height: 1.08;
  margin-bottom: 1.75rem;
}
.human-hero .eyebrow { max-width: 30rem; line-height: 1.6; margin-bottom: 1.75rem; }
.human-hero .intro-lead { max-width: 32rem; color: #d4cdbf; font-size: 1.04rem; }
.human-hero .intro-footnote { color: #c1b8a9; max-width: 32rem; line-height: 1.8; }
.human-hero .button { max-width: 100%; gap: 1.2rem; background: rgba(11,11,10,.4); }
.human-hero .button:hover, .human-hero .button:focus-visible { background: var(--gold); }
/* Make the photograph a distinct panel on smaller screens so text never covers faces. */
@media (max-width: 980px) {
  .human-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: calc(var(--header) + 3.5rem) 0 0;
  }
  .human-hero-content { grid-row: 1; padding-bottom: 3rem; }
  .human-hero-copy { width: 100%; max-width: 740px; }
  .human-hero h1 { font-size: clamp(2.8rem, 7.5vw, 4.9rem); }
  .human-hero .intro-lead { max-width: 38rem; }
  .human-hero-media { position: relative; grid-row: 2; aspect-ratio: 16 / 9; }
  .human-hero-media img { object-position: right center; }
  .human-hero-shade { display: none; }
}
@media (max-width: 600px) {
  .human-hero h1 { font-size: clamp(2.35rem, 10.2vw, 3.8rem); line-height: 1.13; }
  .human-hero .eyebrow { font-size: .62rem; }
  .human-hero .intro-lead { font-size: 1rem; }
  .human-hero .intro-footnote { font-size: .65rem; }
  .human-hero-media { aspect-ratio: 5 / 4; }
  .human-hero-media img { object-position: 100% center; }
  .room-intro .human-hero-media { aspect-ratio: 1; }
}