/* A distinct companion series; the original twelve-book catalog is unchanged. */
.heroes-section { background: #eee7da; border-block: 1px solid #dfd5c4; }
.heroes-section .section-title { margin-bottom: 38px; }
.heroes-section .section-title span { color: #8a5d35; }
.heroes-intro { margin: 20px auto 0; color: #655643; font-size: 18px; line-height: 1.7; }
.heroes-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 26px; }
.heroes-feature { display: grid; grid-template-columns: minmax(130px,.68fr) minmax(0,1fr); gap: 26px; align-items: start; padding: 28px; background: #fffaf2; border: 1px solid #dcd1bf; border-radius: 10px; box-shadow: 0 10px 30px #382a1810; }
.heroes-cover { display: block; }
.heroes-feature img { width: 100%; height: auto; object-fit: contain; border-radius: 3px; box-shadow: 0 12px 22px #382a1833; }
.heroes-feature h3 { margin: 12px 0 17px; font-size: clamp(25px,2.4vw,31px); line-height: 1.12; letter-spacing: -.025em; color: #394b35; }
.heroes-feature h3 em { display: inline-block; margin-top: 5px; font-weight: normal; }
.heroes-feature p { color: #665643; font-size: 15px; line-height: 1.7; margin: 0 0 18px; }
.heroes-feature .hero-series-label { color: #84542f; font-size: 10px; line-height: 1.6; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; margin: 0; }
.heroes-feature .heroes-reading-note { padding-top: 14px; border-top: 1px solid #e4d9c8; font-size: 13px; }
.heroes-link { display: inline-flex; justify-content: space-between; align-items: center; gap: 12px; color: #394b35; font-size: 13px; font-weight: 800; text-decoration: none; padding: 10px 0 7px; border-bottom: 1px solid #a89f87; }
.heroes-link:hover { color: #875831; }
.heroes-series-note { text-align: center; font-size: 14px; line-height: 1.8; color: #655643; margin: 30px 0 0; }
.heroes-series-note a { color: #394b35; text-underline-offset: 4px; }
.heroes-section a:focus-visible { outline: 3px solid #9b673c; outline-offset: 5px; }
@media (max-width: 1100px) and (min-width: 761px) { .heroes-feature { grid-template-columns: 1fr; } .heroes-cover { width: 180px; margin: 0 auto; } .heroes-copy { text-align: center; } }
@media (max-width: 760px) { .heroes-grid { grid-template-columns: 1fr; } .heroes-feature { grid-template-columns: minmax(110px,.65fr) minmax(0,1fr); padding: 24px; gap: 24px; } .heroes-feature h3 { font-size: 29px; } }
@media (max-width: 480px) { .heroes-feature { grid-template-columns: 1fr; padding: 28px 24px; } .heroes-cover { width: 185px; margin: 0 auto; } .heroes-copy { text-align: center; } .heroes-feature h3 { font-size: 30px; } }