/* Bundled styles for inner pages (referenced as /css/site.css) */
@import url("animations.css");

/* Header logo: global img reset in base.css wins on specificity — keep wordmark compact */
.site-header img.brand__logo--wordmark {
    height: 40px !important;
    width: auto !important;
    max-width: min(168px, 46vw) !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.mobile-panel__brand-logo {
    height: 26px !important;
    width: auto !important;
    max-width: min(158px, 52vw) !important;
    object-fit: contain !important;
}

/* --- CLS: reserve header/banner/promo space before partials inject --- */
#partial-header {
    display: block;
    min-height: 5.5rem;
}

@media (min-width: 768px) {
    #partial-header {
        min-height: 4.75rem;
    }
}

#main-content > #partial-hero-banner:empty {
    display: block;
    min-height: clamp(120px, 18vw, 180px);
    margin: 0;
    padding: 0.75rem 0 0;
    border-bottom: 1px solid var(--border, rgb(255 255 255 / 0.08));
    background: linear-gradient(180deg, var(--bg-elev, #141010) 0%, var(--bg, #0a0806) 100%);
}

#partial-promo-top:empty {
    display: block;
    min-height: 0;
}

body:not(.has-react-hero) #partial-promo-top:empty {
    min-height: 5.5rem;
}

.hero-banner__frame {
    aspect-ratio: 21 / 5;
    min-height: clamp(100px, 18vw, 168px);
}

.content-meta,
.page-byline {
    margin-block: 0;
    margin-inline: auto;
    padding: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--text-muted, #ebe4db);
}

/* Byline uses .shell width; never zero horizontal margin (was flush to viewport edge) */
p.shell.content-meta.page-byline {
    width: min(100% - var(--space-lg) * 2, var(--container-max-width));
}

.content-meta a,
.page-byline a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

/* Crawlable blog index (static + JS grid) */
.blog-index-static {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border, rgb(255 255 255 / 0.08));
}

.blog-index-static__heading {
    font-size: 1.125rem;
    margin: 0 0 1rem;
}

.blog-index-static__list {
    columns: 1;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .blog-index-static__list {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .blog-index-static__list {
        columns: 3;
    }
}

.blog-index-static__list li {
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.blog-index-static__list a {
    font-size: 0.9375rem;
    line-height: 1.45;
}