/* Semantic page composition. Component appearance remains owned by theme.css and components.css. */
.layout-reading {
    --layout-content-width: 820px;
    --layout-hero-width: 820px;
    --layout-section-space: 4rem;
    --layout-card-space: 1.5rem;
}

.layout-information {
    --layout-content-width: 1400px;
    --layout-hero-width: 900px;
    --layout-section-space: 4rem;
    --layout-card-space: 1.5rem;
}

.layout-workspace {
    --layout-content-width: 1760px;
    --layout-hero-width: 1080px;
    --layout-section-space: 2rem;
    --layout-card-space: 1.5rem;
}

:is(.layout-reading, .layout-information, .layout-workspace) .nv-pagehero > :where(.nv-wrap, .wrap) {
    width: 100%;
    max-width: var(--layout-hero-width);
    margin-inline: auto;
    padding-inline: 24px;
}

.layout-reading :where(.content-card, .content-section, .article-wrap),
.layout-reading > .wrap,
.layout-reading main.wrap,
.layout-reading .section > .wrap {
    width: 100%;
    max-width: var(--layout-content-width);
    margin-inline: auto;
}

.layout-information :where(.about-wrap, .page-container, .contact-container),
.layout-information > .wrap,
.layout-information main.wrap,
.layout-information main > .container,
.layout-information main > .nv-wrap,
.layout-information .section > .wrap {
    width: 100%;
    max-width: var(--layout-content-width);
    margin-inline: auto;
}

.layout-workspace > .wrap,
.layout-workspace .tk-wrap,
.layout-workspace .header .inner,
.layout-workspace .trend-page,
.layout-workspace .trend-hero-inner,
.layout-workspace #results > .container {
    width: 100%;
    max-width: var(--layout-content-width);
    margin-inline: auto;
}

.layout-information :where(.section, main > section).section,
.layout-reading :where(.section, main > section).section {
    padding-block: var(--layout-section-space);
}

.layout-information .card {
    padding: var(--layout-card-space);
}

@media (max-width: 760px) {
    :where(.layout-reading, .layout-information, .layout-workspace) {
        --layout-section-space: 2.75rem;
    }
}