/* Shared reading layout for the recommendation series and its index.
   Loaded after the legacy page styles so new articles can reuse this layout. */
body { padding-top: 64px; }
.navbar { padding: 0; }
.nav-container { min-height: 64px; }
.page-hero {
    height: auto;
    min-height: 0;
    padding: 32px 24px;
}
.page-hero .hero-content { width: 100%; max-width: 960px; }
.page-hero .hero-content h1 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.4;
    margin: 0 0 8px;
    animation: none;
}
.page-hero .hero-content .subtitle {
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 auto;
    animation: none;
}
.page-hero .hero-content .series {
    margin: 12px 0 0;
    line-height: 1.6;
    opacity: 1;
    animation: none;
}
.article-nav {
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 32px;
    gap: 12px 24px;
    border-radius: 0;
    box-shadow: none;
    font-size: 0.9rem;
}
.article-nav a { min-width: 0; overflow-wrap: anywhere; }
.blog-post { padding: 24px 0 48px; min-height: 0; }
.blog-content, .article-list {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 40px;
    box-shadow: 0 2px 12px rgba(44, 62, 80, 0.06);
    overflow-wrap: anywhere;
}
.blog-content { font-size: 1.0625rem; line-height: 1.85; }
.blog-content h2 {
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: center;
    margin: 2rem 0 1rem;
    scroll-margin-top: 80px;
}
.blog-content h3 { font-size: 1.2rem; line-height: 1.5; }
.blog-content h4 { font-size: 1.0625rem; line-height: 1.5; }
.blog-content > :first-child { margin-top: 0; }
.blog-content p { margin-bottom: 1.1rem; }
.blog-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}
.blog-content th, .blog-content td { min-width: 100px; }
.article-nav-bottom, .blog-content > div[style*="justify-content: space-between"] {
    gap: 16px;
    flex-wrap: wrap;
}
.article-list .intro { padding: 0 0 16px; margin-bottom: 16px; }
.article-list .intro p:last-child { margin-bottom: 0; }
.part-header h2 { text-align: left; line-height: 1.5; }
@media (max-width: 768px) {
    body { padding-top: 56px; }
    .nav-container { min-height: 56px; padding: 0 16px; }
    .nav-logo a { font-size: 1.25rem; }
    .nav-menu { top: 56px; }
    .hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
    .page-hero { padding: 24px 16px; text-align: left; }
    .page-hero .hero-content h1 { font-size: 1.5rem; }
    .page-hero .hero-content .subtitle { max-width: none; }
    .page-hero .hero-content .series { font-size: 0.8rem; }
    .article-nav {
        margin: 0;
        padding: 8px 16px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px 16px;
        text-align: left;
    }
    .article-nav a { padding: 6px 0; }
    .blog-post { padding: 0 0 24px; background: white; }
    .blog-post > .container { padding: 0; }
    .blog-content, .article-list {
        margin: 0;
        padding: 24px 16px;
        border-radius: 0;
        box-shadow: none;
    }
    .blog-content { font-size: 1rem; line-height: 1.8; }
    .blog-content h2 { font-size: 1.3rem; margin-top: 1.75rem; }
    .blog-content h3 { font-size: 1.125rem; }
    .blog-content blockquote { padding: 12px 16px; }
    .blog-content figure { margin: 1.5rem 0; }
    .article-item:hover { margin: 0; padding-left: 0; padding-right: 0; }
}

/* Rendered formulas can be wider than a phone; scroll the formula locally. */
.blog-content mjx-container {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
}
.blog-content mjx-container:not([display="true"]) {
    display: inline-block;
    vertical-align: middle;
}