/* Option 18, Hero descends. Approved composition; gallery placement and motion are unchanged.
   The italic line itself reserves its space, so editable copy wraps naturally. */
@media (min-width: 1101px) and (min-height: 651px) {
  #panelM:has(.narrative) .p-hero {
    font-size: clamp(58px, 5.3vw, 84px);
    line-height: .94;
    margin-bottom: 0;
  }
  #panelM:has(.narrative) .p-hero .second {
    float: left;
    width: max-content;
    max-width: 100%;
    margin: 0 .3em .16em .34em;
    white-space: nowrap;
    line-height: 1.08;
  }
  #panelM .narrative .body {
    color: #d6cfc1;
    font-size: 13.6px;
    line-height: 1.65;
  }
  #panelM .narrative::after { content: ''; display: block; clear: both; }
  #panelM .ser-i {
    border-top: 1px solid var(--hair);
    padding-top: 14px;
  }
}
/* A clear stacked setting keeps the complete copy readable in compact cards. */
@media (min-width: 821px) and (max-width: 1100px) and (min-height: 651px) {
  #panelM:has(.narrative) .p-hero { font-size: 52px; margin-bottom: 20px; }
  #panelM .narrative .body { color: #d6cfc1; }
}
/* Short laptop windows need tighter leading while preserving the composition. */
@media (min-width: 1101px) and (min-height: 651px) and (max-height: 700px) {
  #panelM .narrative .body { font-size: 13px; line-height: 1.48; }
  #panelM .ser-i { padding-top: 10px; }
}