/* STEP 2 — Hem ONLY. Artwork is the original FINAL PNG, unaltered.
   At 1672x941 (approved mockup's dimensions), positioning follows the source.
   In small screens the right-hand scene remains at its original aspect ratio. */
.site-body--hem { background: #252420; }
.site-body--hem .site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  border-bottom-color: transparent;
}
.site-body--hem .site-nav__link--pending {
  cursor: default;
  opacity: 1; /* retain approved visual navigation balance */
}
.site-body--hem .site-nav__link--pending::after { display: none; }
.hem {
  position: relative;
  isolation: isolate;
  height: 100vh;
  height: 100svh;
  background: #252420;
  overflow: hidden;
  color: #f5eee6;
}
.hem__scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url('../img/hem-background-clean.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
.hem__content {
  position: absolute;
  z-index: 1;
  top: 27.1%;
  left: 9.32%;
  width: min(750px, 55vw);
}
.hem__rule { height: 2px; width: 45px; background-color: #c9ab8c; }
.hem__kicker {
  margin: 25px 0 37px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.68;
  letter-spacing: .26em;
  color: #d2b391;
}
.hem__quote {
  margin: 0;
  font-size: clamp(37px, 3.23vw, 55px);
  line-height: 1.10;
  font-weight: 500;
  letter-spacing: -.021em;
  color: #f5eee6;
}
.hem__quote span { display: block; white-space: nowrap; }
.hem__rule--source { margin-top: 42px; }
.hem__source {
  margin: 26px 0 0;
  color: #d6b697;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .31em;
}
@media (min-width: 1800px) {
  .hem__content { left: max(9.32%, calc((100% - 1490px)/2)); }
}
@media (max-width: 1280px) and (min-width: 881px) {
  .hem__content { left: 8%; width: 68vw; }
  .hem__quote { font-size: clamp(35px, 3.22vw, 50px); }
  .hem__kicker { font-size: 13px; }
}
@media (max-width: 880px) {
  .site-body--hem .site-header { top: 0; }
  .hem {
    min-height: 780px;
    height: 100svh;
    overflow: hidden;
  }
  .hem__scene {
    inset: auto 0 0 0;
    height: 53%;
    background-size: auto 100%;
    background-position: right bottom;
    /* The source artwork retains original ratio/lighting; fade ONLY the upper edge. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
  .hem__content {
    top: clamp(145px, 20svh, 200px);
    left: 0;
    padding: 0 24px;
    width: 100%;
  }
  .hem__rule { width: 36px; height: 1px; }
  .hem__kicker {
    font-size: clamp(10px, 2.7vw, 13px);
    margin: 18px 0 26px;
    line-height: 1.6;
    letter-spacing: .20em;
  }
  .hem__quote {
    font-size: clamp(26px, 5.85vw, 42px);
    line-height: 1.16;
    letter-spacing: -.020em;
    font-weight: 500;
    max-width: 680px;
  }
  .hem__quote span { white-space: normal; }
  .hem__rule--source { margin-top: 29px; }
  .hem__source { font-size: 12px; margin-top: 18px; }
}
@media (max-width: 430px) {
  .hem__quote { font-size: clamp(25px, 7.25vw, 30px); }
  .hem__content { padding-inline: 21px; }
}
@media (max-width: 360px) {
  .hem { min-height: 730px; }
  .hem__content { top: 130px; padding-inline: 18px; }
  .hem__quote { font-size: 24px; }
  .hem__kicker { font-size: 9px; }
}