/* Local Ha'azinu cover prototype, based on the approved Dia 31 full-width hero. */
.hero.hero-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none;
  min-height: clamp(650px, 84vh, 880px);
  margin: 0;
  padding: clamp(34px, 5vh, 58px) clamp(22px, 5vw, 76px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}
.hero.hero-art::before { display: none; }
.hero-art-img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
}
.hero.hero-art::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(250,246,235,.94) 0%,
    rgba(250,246,235,.76) 14%,
    rgba(250,246,235,.14) 34%,
    rgba(250,246,235,0) 43%,
    rgba(250,246,235,0) 64%,
    rgba(250,246,235,.62) 78%,
    rgba(250,246,235,.94) 100%
  );
}
.hero-art-top,
.hero-art-bottom {
  position: relative;
  width: min(880px, 100%);
}
.hero-art-top { display: grid; justify-items: center; }
.hero-art-bottom { margin-top: auto; }
.hero-art-bottom-parchment {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 5vw, 76px) clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(184, 134, 11, 0.30);
  background: linear-gradient(180deg, #fffdf6, #faf4e5);
  box-shadow: 0 -8px 26px rgba(70, 48, 28, 0.08);
}
.hero.hero-art-stacked {
  min-height: clamp(860px, 96vh, 1040px);
  padding: clamp(34px, 5vh, 58px) clamp(22px, 5vw, 76px) 0;
  background: #faf4e5;
}
.hero.hero-art-stacked .hero-art-img { height: calc(100% - 250px); }
.hero.hero-art-stacked::after {
  height: calc(100% - 250px);
  bottom: auto;
  background: linear-gradient(180deg, rgba(250,246,235,.94) 0%, rgba(250,246,235,.70) 15%, rgba(250,246,235,.08) 36%, rgba(250,246,235,0) 100%);
}
.hero.hero-art-stacked .hero-art-bottom {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
}
.hero.hero-art-veil::after {
  background: linear-gradient(
    180deg,
    rgba(250,246,235,.94) 0%,
    rgba(250,246,235,.70) 15%,
    rgba(250,246,235,.06) 36%,
    rgba(250,246,235,0) 57%,
    rgba(247,236,218,.42) 70%,
    rgba(247,236,218,.88) 88%,
    rgba(247,236,218,.98) 100%
  );
}
.hero.hero-art-veil .hero-art-bottom {
  width: min(1120px, 96%);
  padding-bottom: clamp(2px, 1vw, 10px);
  transform: translateY(clamp(10px, 1.2vw, 18px));
}
.hero.hero-art-veil .hero-title,
.hero.hero-art-veil h1 {
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,.96), 0 2px 18px rgba(250,246,235,.96);
}
.hero-art-veil-hub .hero-art-bottom { transform: translateY(8px); }
.hero-art-veil-listen .hero-art-bottom { transform: translateY(6px); }
.hero-art-veil-gate .hero-art-bottom { transform: translateY(10px); }
.hero-art-veil-hub .hero-eyebrow .eyebrow-line,
.hero-art-veil-hub .hero-eyebrow .eyebrow-separator { display: inline; }
.hero-art-veil-hub .hero-eyebrow .eyebrow-line + .eyebrow-line::before { content: " · "; }
.subtitle-mobile { display: none; }
.hero.hero-art .hero-hebrew {
  font-size: clamp(48px, 7vw, 82px);
  margin: 0 0 4px;
  color: #9b7000;
  text-shadow: 0 1px 20px rgba(250,246,235,.98);
}
.hero.hero-art .hero-eyebrow,
.hero.hero-art .eyebrow {
  margin-bottom: 0;
  text-shadow: 0 1px 16px rgba(250,246,235,.98);
}
.hero.hero-art .hero-title,
.hero.hero-art h1 {
  margin: 0 0 14px;
  font-size: clamp(46px, 7vw, 84px);
  line-height: 1.02;
  color: #3b261b;
  text-shadow: 0 1px 0 rgba(255,255,255,.9), 0 2px 26px rgba(250,246,235,.98);
}
.hero.hero-art .hero-subtitle,
.hero.hero-art .lead,
.hero.hero-art .hero-meta,
.hero.hero-art .window {
  text-shadow: 0 1px 18px rgba(250,246,235,.99);
}
.hero.hero-art .hero-subtitle,
.hero.hero-art .lead { color: #6f5a49; }
.hero.hero-art .window {
  background: rgba(250,246,235,.72);
  backdrop-filter: blur(3px);
}
@media (max-width: 700px) {
  .hero.hero-art {
    min-height: clamp(640px, 86vh, 790px);
    padding: 30px 20px 36px;
  }
  .hero-art-img { object-position: center 48%; }
  .hero.hero-art .hero-title,
  .hero.hero-art h1 { font-size: clamp(40px, 12vw, 58px); }
  .hero-art-bottom-parchment {
    width: 100%;
    padding: 20px 18px 22px;
  }
  .hero.hero-art-stacked {
    min-height: 920px;
    padding: 30px 20px 0;
  }
  .hero.hero-art-stacked .hero-art-img,
  .hero.hero-art-stacked::after { height: calc(100% - 310px); }
  .hero.hero-art-stacked .hero-art-bottom { width: 100%; }
  .hero.hero-art-stacked .hero-title,
  .hero.hero-art-stacked h1 { font-size: clamp(43px, 13vw, 54px); }
  .hero-eyebrow .eyebrow-line { display: block; }
  .hero-eyebrow .eyebrow-separator { display: none; }
  .hero.hero-art .eyebrow .eyebrow-line { display: block; }
  .hero.hero-art .eyebrow .eyebrow-separator { display: none; }
  .hero-art-veil-hub .hero-eyebrow .eyebrow-line { display: block; }
  .hero-art-veil-hub .hero-eyebrow .eyebrow-separator { display: none; }
  .hero-art-veil-hub .hero-eyebrow .eyebrow-line + .eyebrow-line::before { content: ""; }
  .hero.hero-art-veil .hero-art-bottom {
    width: 100%;
    transform: translateY(10px);
  }
  .hero.hero-art-veil::after {
    background: linear-gradient(
      180deg,
      rgba(250,246,235,.94) 0%,
      rgba(250,246,235,.66) 15%,
      rgba(250,246,235,.04) 34%,
      rgba(250,246,235,0) 52%,
      rgba(247,236,218,.30) 62%,
      rgba(247,236,218,.88) 79%,
      rgba(247,236,218,.99) 100%
    );
  }
  .hero.hero-art-veil .hero-title,
  .hero.hero-art-veil h1 {
    max-width: 360px;
    margin-inline: auto;
    margin-bottom: 14px;
    font-size: clamp(42px, 11.5vw, 50px);
    line-height: 1.02;
  }
  .hero.hero-art-veil .hero-subtitle {
    max-width: 350px;
    margin: 0 auto 16px;
    color: #594536;
    font-size: clamp(18px, 5vw, 21px);
    line-height: 1.48;
    text-shadow: 0 1px 0 rgba(255,255,255,.96), 0 1px 14px rgba(255,251,240,.98);
  }
  .hero.hero-art-veil .hero-subtitle br { display: block; }
  .hero.hero-art-veil .subtitle-desktop { display: none; }
  .hero.hero-art-veil .subtitle-mobile,
  .hero.hero-art-veil .subtitle-mobile > span { display: block; }
  .hero-art-veil-listen .lead,
  .hero-art-veil-gate .hero-subtitle { max-width: 370px; margin-inline: auto; }
  .hero-art-veil-listen .subtitle-mobile > span,
  .hero-art-veil-gate .subtitle-mobile > span { line-height: 1.45; }
  .hero.hero-art-veil .hero-meta {
    max-width: 340px;
    margin-inline: auto;
    font-size: 14px;
    line-height: 1.65;
    letter-spacing: .03em;
  }
  .hero.hero-art .hero-subtitle br,
  .hero.hero-art .lead br { display: none; }
}