/* Resource pages — cache-safe structural corrections and final asset integration. */
.jm-rd__hero { padding-top: 80px !important; }

.jm-rd__hero-mockup {
  display: block !important;
  width: 340px !important;
  height: 440px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}
.jm-rd__related-mockup {
  display: block !important;
  width: 540px !important;
  height: 440px !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

.jm-rd__portrait-frame {
  position: relative;
  width: 140px !important;
  height: 140px !important;
  min-width: 140px !important;
  min-height: 140px !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden;
  border: 2px solid var(--color-muted-gold);
  border-radius: 50% !important;
}
.jm-rd__portrait-frame .jm-rd__portrait {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  object-position: center 24% !important;
}
.jm-rd__author h2 { color: #fff !important; }
.jm-rd__author-grid > div > p:last-child { color: var(--color-warm-ivory) !important; }

@media (max-width: 780px) {
  .jm-rd__hero { padding-top: 64px !important; }
  .jm-rd__hero-mockup { width: 320px !important; height: 420px !important; }
}
@media (max-width: 560px) {
  .jm-rd__hero { padding-top: 52px !important; }
  .jm-rd__portrait-frame {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
  }
  .jm-rd__related-mockup {
    width: 100% !important;
    height: auto !important;
  }
  .jm-rd__composition {
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    transform: none !important;
  }
}