/* Approved portrait, kept beside the title even in phone-sized chapters. */
.hero .hero-visual{min-width:0}
.banner-portrait{margin:0;overflow:hidden;border:2px solid var(--border);border-radius:28px 28px 72px 28px;box-shadow:5px 5px 0 var(--accent);max-width:420px;margin-inline:auto}
.banner-portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hero-invitation{margin-top:1rem}
.hero-invitation>summary{min-height:44px;cursor:pointer;padding:.6rem .2rem;font-weight:700;font-size:.9rem}
.hero-invitation .hero-note{margin-top:1rem;transform:none}
@media(max-width:760px){
 .mobile-topics .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:.8rem;row-gap:.6rem;align-items:center}
 .mobile-topics .hero-copy,.mobile-topics .hero-visual{display:contents}
 .mobile-topics .hero-copy>*{grid-column:1/-1;margin-block:.4rem}
 .mobile-topics .hero-copy>.eyebrow{grid-row:1}
 .mobile-topics .hero h1{grid-column:1;grid-row:2;font-size:clamp(2.5rem,12vw,4.5rem);margin:0}
 .mobile-topics .banner-portrait{grid-column:2;grid-row:2;width:100%;border-radius:18px 18px 38px 18px;box-shadow:3px 3px 0 var(--accent)}
 .mobile-topics .hero-invitation{grid-column:1/-1;margin:0}
 .mobile-topics .hero-invitation>summary{font-size:.85rem}
}
@media print{.banner-portrait{box-shadow:none;max-width:250px}}