/*
 * Shared typography for the Neural Echo site.
 * The data platform remains the reference implementation; these rules bring
 * the other pages onto the same hierarchy without changing their layouts.
 */

.neural-stage-page {
    --site-type-display: 'Michroma', sans-serif;
    --site-type-body: 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --site-type-heading: #f7fafa;
    --site-type-body-color: #9aabad;
    --site-type-secondary: rgba(255, 255, 255, 0.58);
    --site-type-section-size: 2.25rem;
    --site-type-module-size: 1.125rem;
    --site-type-body-size: 1rem;
    --site-type-card-size: 0.9375rem;
    font-family: var(--site-type-body);
    font-kerning: normal;
}

.neural-stage-page:not(.data-page) :is(h1, h2, h3, h4, p) {
    letter-spacing: 0;
}

/* Inner-page display titles */
.neural-stage-page:not(.index-page):not(.data-page) .hero-title {
    max-width: 16ch;
    color: var(--site-type-heading);
    font-family: var(--site-type-display);
    font-size: clamp(2.5rem, 4.2vw, 3.25rem);
    font-weight: 400;
    line-height: 1.1;
    text-wrap: balance;
}

.neural-stage-page:not(.index-page):not(.data-page) .hero-subtitle {
    max-width: 30ch;
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--site-type-body-size);
    line-height: 1.7;
    text-wrap: pretty;
}

/* Section-level headings */
.neural-stage-page:not(.data-page) :is(
    .main-slogan,
    .product-overview h2,
    .product-cases h2,
    .series-features h2,
    .product-specs h2,
    .core-tech h2,
    .tech-summary h2,
    .slogan-about h2,
    .contact h2,
    .info-showcase h2,
    .news-list h2,
    #products > .container > h2,
    #technology > .container > h2,
    .team > .container > h2,
    .awards > .container > h2,
    .news > .container > h2
) {
    color: var(--site-type-heading);
    font-size: var(--site-type-section-size);
    font-weight: 600;
    line-height: 1.28;
    text-wrap: balance;
}

/* Long-form section introductions */
.neural-stage-page:not(.data-page) :is(
    .sub-slogan,
    .overview-text,
    .summary-text,
    .slogan-about p,
    .tech-center-copy p
) {
    width: min(100%, 72ch);
    color: var(--site-type-body-color);
    font-size: var(--site-type-body-size);
    line-height: 1.85;
    text-wrap: pretty;
}

.neural-stage-page:not(.data-page) :is(
    .sub-slogan,
    .overview-text,
    .summary-text,
    .slogan-about p,
    .tech-center-copy p
) {
    margin-right: auto;
    margin-left: auto;
}

/* Card and module titles */
.neural-stage-page:not(.data-page) :is(
    .product-overlay h3,
    .feature-content h3,
    .series-content h3,
    .intro-content h3,
    .core-tech-title,
    .info-title,
    .news-content h3,
    .timeline-content h3,
    .team-member h3
) {
    color: var(--site-type-heading);
    font-size: var(--site-type-module-size);
    font-weight: 600;
    line-height: 1.42;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.neural-stage-page:is(.products-page, .technology-page, .info-page) {
    --site-type-module-size: clamp(1.1875rem, 1.8vw, 1.375rem);
}

/* Card and module descriptions */
.neural-stage-page:not(.data-page) :is(
    .product-overlay p,
    .feature-content p,
    .series-content p,
    .intro-content p,
    .core-tech-text,
    .info-text,
    .news-content p,
    .timeline-content p
) {
    color: var(--site-type-body-color);
    font-size: var(--site-type-card-size);
    line-height: 1.75;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.products-page .case-item p {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--site-type-card-size);
    line-height: 1.65;
    text-wrap: balance;
}

.index-page #technology .tech-item p {
    color: var(--site-type-heading);
    font-size: var(--site-type-card-size);
    font-weight: 500;
    line-height: 1.55;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

.index-page #technology .tech-center-copy p {
    color: var(--site-type-body-color);
    font-size: var(--site-type-body-size);
    line-height: 1.85;
    text-wrap: pretty;
}

.neural-stage-page:not(.data-page) :is(
    .team-member > p,
    .news-meta,
    .timeline-date,
    .specs-label,
    .info-category-tag
) {
    color: var(--site-type-secondary);
    font-size: 0.8125rem;
    line-height: 1.55;
}

.neural-stage-page:not(.data-page) .specs-value {
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--site-type-card-size);
    line-height: 1.65;
}

/* News and product detail reading experience */
.news-detail-page .news-title {
    color: var(--site-type-heading);
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 600;
    line-height: 1.28;
    text-wrap: balance;
}

.news-detail-page .news-text {
    color: var(--site-type-body-color);
    font-size: var(--site-type-body-size);
    line-height: 1.85;
}

.news-detail-page .news-text :is(p, li) {
    color: inherit;
    line-height: inherit;
    text-wrap: pretty;
}

.news-detail-page .news-text h2 {
    color: var(--site-type-heading);
    font-size: 1.75rem;
    line-height: 1.35;
    text-wrap: balance;
}

.news-detail-page .news-text h3 {
    color: var(--site-type-heading);
    font-size: 1.375rem;
    line-height: 1.4;
    text-wrap: balance;
}

.news-detail-page .news-text h4 {
    color: var(--site-type-heading);
    font-size: 1.125rem;
    line-height: 1.45;
    text-wrap: balance;
}

.news-detail-page :is(.news-toc, .back-link) {
    font-size: 0.875rem;
    line-height: 1.6;
}

html[lang='en'] .neural-stage-page:not(.data-page) :is(
    .intro-content p,
    .core-tech-text,
    .info-text,
    .news-content p,
    .timeline-content p
) {
    hyphens: auto;
}

@media (max-width: 768px) {
    .neural-stage-page {
        --site-type-section-size: 1.875rem;
        --site-type-module-size: 1.0625rem;
    }

    .neural-stage-page:not(.index-page):not(.data-page) .hero-title {
        font-size: 2.375rem;
    }

    .news-detail-page .news-title {
        font-size: 1.75rem;
    }

    .news-detail-page .news-text h2 {
        font-size: 1.5rem;
    }

    .news-detail-page .news-text h3 {
        font-size: 1.25rem;
    }
}

@media (max-width: 520px) {
    .neural-stage-page {
        --site-type-section-size: 1.6875rem;
        --site-type-body-size: 1rem;
        --site-type-card-size: 0.9375rem;
    }

    .neural-stage-page:not(.index-page):not(.data-page) .hero-title {
        font-size: 2rem;
    }
}