/* Full-bleed editorial hero with device-specific artwork. */
.hero {
  height: clamp(520px, 52.5vw, 760px);
  min-height: 0;
  padding: 0;
  background: #f5f3ed;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, transparent 36%, rgba(250, 248, 242, .06) 52%, rgba(250, 248, 242, .2) 73%, transparent 92%);
  pointer-events: none;
}
.hero-copy {
  position: absolute;
  z-index: 2;
  top: 14%;
  left: 52.5%;
  width: min(390px, 38vw);
  color: var(--navy);
  transform: none;
  text-align: left;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}
.hero-copy-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: #826f43;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .24em;
}
.hero-copy-label::before {
  content: "";
  width: 38px;
  height: 1px;
  background: var(--gold);
}
.hero-copy h1 {
  margin: 0;
  color: var(--navy);
  font: 500 clamp(38px, 4.15vw, 62px)/1.34 var(--serif);
  letter-spacing: .055em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
.hero-copy h1 span { display: block; white-space: nowrap; }
.hero-copy-lead {
  display: block;
  width: 100%;
  margin-top: 16px;
  color: #17364a;
  font: 500 15px/1.85 var(--serif);
  letter-spacing: .045em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.hero-copy-name {
  display: none;
}
.hero-copy-name span { color: var(--gold); }
.hero-profile-panel {
  position: relative;
  z-index: 3;
  padding: 0;
  background: var(--paper);
}
.hero-profile-card {
  width: 100%;
  margin: -32px 0 0;
  padding: 34px clamp(28px, 6vw, 72px) 38px;
  border-block: 1px solid rgba(169, 146, 94, .5);
  background: var(--navy);
  box-shadow: 0 20px 44px rgba(0, 26, 47, .14);
  color: var(--paper);
  text-align: center;
}
.hero-profile-focus {
  margin: 0 0 9px;
  color: #ead7a8;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: .07em;
}
.hero-profile-signature {
  margin: 0;
  color: var(--gold);
  font: italic 40px/1.3 Georgia, "Times New Roman", serif;
  letter-spacing: .015em;
}
.hero-profile-caption {
  margin: 4px 0 14px;
  color: var(--gold-light);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: .18em;
}
.hero-profile-description {
  margin: 0;
  font: 400 16px/1.9 var(--serif);
  letter-spacing: .04em;
}
@media (max-width: 760px) {
  .hero {
    height: min(125vw, 660px);
    min-height: 450px;
  }
  .hero-media img { object-position: center top; }
  .hero::after {
    background: linear-gradient(90deg, transparent 35%, rgba(250, 248, 242, .04) 48%, rgba(250, 248, 242, .2) 78%, transparent 100%);
  }
  .hero-copy {
    top: 15%;
    right: 6%;
    left: auto;
    width: auto;
    transform: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  }
  .hero-copy-label {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 9px;
    letter-spacing: .18em;
  }
  .hero-copy-label::before { width: 22px; }
  .hero-copy h1 {
    width: auto;
    height: auto;
    font-size: clamp(29px, 8vw, 38px);
    line-height: 1.34;
    letter-spacing: .03em;
    writing-mode: vertical-rl;
  }
  .hero-copy h1 span { white-space: nowrap; }
  .hero-copy h1 span:first-child { letter-spacing: .30em; }
  .hero-copy h1 span:last-child { letter-spacing: .02em; }
  .hero-copy-lead {
    display: none;
  }
  .hero-copy-name { display: none; }
  .hero-profile-panel { padding: 0; }
  .hero-profile-card {
    margin-top: -20px;
    padding: 26px 20px 29px;
  }
  .hero-profile-focus { font-size: 12px; letter-spacing: .03em; }
  .hero-profile-signature { font-size: 31px; }
  .hero-profile-caption { margin-bottom: 11px; font-size: 10px; letter-spacing: .1em; }
  .hero-profile-description { font-size: 14px; line-height: 1.8; }
  .concept { padding-top: 32px; }
}
@media (min-width: 761px) {
  .hero-copy-label { display: none; }
}
@media (max-width: 370px) {
  .hero { min-height: 430px; }
  .hero-copy { top: 14%; right: 5%; }
  .hero-copy h1 { font-size: 27px; }
}