.home-flow {
    overflow: clip;
}

.hero-copy {
    min-width: 0;
}

.hero-copy h1 {
    text-wrap: balance;
    overflow-wrap: anywhere;
}

.hero-thesis {
    max-width: 48ch;
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 760;
    line-height: 1.35;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1.2rem;
    margin-top: 1.5rem;
}

.hero-feature {
    display: grid;
    gap: .35rem;
    max-width: 48rem;
    margin-top: 1.5rem;
    padding-block: .9rem;
    border-block: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    color: var(--text);
    text-decoration: none;
}

.hero-feature strong {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.1vw, 1.8rem);
    line-height: 1.15;
    text-wrap: balance;
}

.hero-feature span {
    max-width: 65ch;
    color: color-mix(in srgb, var(--text) 74%, var(--background));
    line-height: 1.5;
}

.text-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--text);
    font-weight: 720;
    text-decoration-thickness: .08em;
    text-underline-offset: .25em;
}

nav a[aria-current="page"] {
    color: var(--accent);
    font-weight: 780;
    text-decoration: underline;
    text-decoration-thickness: .12em;
    text-underline-offset: .35em;
}

.header-inner nav a {
    padding-inline: .35rem;
}

.artifact-title {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

body.layout-repair-ledger .artifact-stage {
    min-width: 18rem;
}

body.layout-repair-ledger .artifact-title {
    font-size: clamp(1.45rem, 2.25vw, 2rem);
    overflow-wrap: normal;
    hyphens: auto;
}

.feed-status {
    min-height: 1.5rem;
    margin: 1rem 0 0;
    color: color-mix(in srgb, var(--text) 72%, var(--background));
}

.feed-status:empty {
    min-height: 0;
    margin: 0;
}

.empty-next {
    margin-top: .5rem;
}

/* Field notes: reading arrives before the index; directions behave like ledger rows. */
.composition-field-notes .feed-section {
    background: transparent;
}

.composition-field-notes .feed-section .section-heading,
.composition-field-notes .feed-section .empty-state,
.composition-field-notes .feed-section .article-grid {
    max-width: 58rem;
}

.composition-field-notes .article-grid {
    grid-template-columns: 1.35fr .65fr;
}

.composition-field-notes .article-card:first-child {
    grid-row: span 2;
    min-height: 15rem;
}

.composition-field-notes .directions-section {
    background: color-mix(in srgb, var(--accent) 5%, var(--background));
}

.composition-field-notes .directions-section .pillar-grid {
    grid-template-columns: 1fr;
    gap: 0;
    border-block: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
}

.composition-field-notes .directions-section .pillar-card {
    display: grid;
    grid-template-columns: minmax(11rem, .45fr) minmax(0, 1fr);
    gap: 1.5rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
    border-radius: 0;
    box-shadow: none;
}

.composition-field-notes .directions-section .pillar-card:last-child {
    border-bottom: 0;
}

/* Spatial atlas: category regions form an asymmetric map and a horizontal mobile rail. */
.composition-spatial-atlas .directions-section .pillar-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: .65rem;
}

.composition-spatial-atlas .directions-section .pillar-card {
    min-height: 10rem;
    border-radius: var(--artifact-radius, .35rem);
    box-shadow: none;
}

.composition-spatial-atlas .directions-section .pillar-card:nth-child(1) { grid-column: span 5; }
.composition-spatial-atlas .directions-section .pillar-card:nth-child(2) { grid-column: span 7; }
.composition-spatial-atlas .directions-section .pillar-card:nth-child(3) { grid-column: span 7; }
.composition-spatial-atlas .directions-section .pillar-card:nth-child(4) { grid-column: span 5; }

.composition-spatial-atlas .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.composition-spatial-atlas .widget-card {
    box-shadow: none;
}

/* Workshop board: the practical tool is the first section after the opening. */
.composition-workshop-board .widget-section {
    background: color-mix(in srgb, var(--accent) 8%, var(--background));
}

.composition-workshop-board .widget-card {
    border-radius: .3rem;
    box-shadow: none;
}

.composition-workshop-board .directions-section .pillar-grid {
    gap: .4rem;
}

.composition-workshop-board .directions-section .pillar-card {
    min-height: 11rem;
    border-radius: .25rem;
    box-shadow: none;
}

.composition-workshop-board .article-grid {
    grid-template-columns: 1.2fr .8fr;
}

/* Routine book: categories read as a compact contents spread before the tool. */
.composition-routine-book .directions-section .pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.composition-routine-book .directions-section .pillar-card {
    min-height: 9rem;
    box-shadow: none;
}

.composition-routine-book .widget-card {
    border-radius: 1.4rem .45rem 1.4rem .45rem;
}

.composition-routine-book .article-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Folio dossier: one reading dossier leads; the taxonomy closes the page as tabs. */
.composition-folio-dossier .feed-section {
    background: transparent;
}

.composition-folio-dossier .article-grid {
    grid-template-columns: 1fr;
    max-width: 56rem;
}

.composition-folio-dossier .article-card {
    display: grid;
    grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr);
    gap: 1.5rem;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: none;
}

.composition-folio-dossier .directions-section {
    background: color-mix(in srgb, var(--accent-alt) 6%, var(--background));
}

.composition-folio-dossier .directions-section .pillar-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
}

.composition-folio-dossier .directions-section .pillar-card {
    border-radius: .2rem 1rem 1rem .2rem;
    box-shadow: none;
}

/* Data sequence: the tool leads, reading follows, taxonomy becomes a closing matrix. */
.composition-data-sequence .widget-section {
    padding-top: 2rem;
}

.composition-data-sequence .widget-card {
    border-radius: 0;
    box-shadow: none;
}

.composition-data-sequence .article-grid {
    grid-template-columns: 1fr;
}

.composition-data-sequence .article-card {
    display: grid;
    grid-template-columns: minmax(16rem, .8fr) minmax(0, 1.2fr);
    gap: 1.5rem;
    border-radius: 0;
    box-shadow: none;
}

.composition-data-sequence .directions-section .pillar-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    border: 1px solid color-mix(in srgb, var(--text) 24%, transparent);
}

.composition-data-sequence .directions-section .pillar-card {
    border-width: 0 1px 0 0;
    border-radius: 0;
    box-shadow: none;
}

.composition-data-sequence .directions-section .pillar-card:last-child {
    border-right: 0;
}

@media (max-width: 820px) {
    .header-inner nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: .25rem .5rem;
        overflow: visible;
        padding-bottom: 0;
    }

    .header-inner nav a {
        min-width: 0;
        padding-inline: .35rem;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
        white-space: normal;
    }

    .hero {
        padding-top: 3rem;
    }

    .hero .lead {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .hero-feature {
        margin-top: 1rem;
        padding-block: .7rem;
    }

    .hero-feature span {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    body .home-flow .hero-copy h1 {
        font-size: clamp(2.35rem, 10vw, 3.5rem);
        line-height: 1;
        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .artifact-title {
        font-size: clamp(1.65rem, 10vw, 3rem);
    }

    body.layout-repair-ledger .artifact-stage {
        min-width: 0;
    }

    .composition-field-notes .article-grid,
    .composition-workshop-board .article-grid,
    .composition-routine-book .article-grid,
    .composition-folio-dossier .article-card,
    .composition-data-sequence .article-card {
        grid-template-columns: 1fr;
    }

    .composition-field-notes .article-card:first-child {
        grid-row: auto;
    }

    .composition-field-notes .directions-section .pillar-card {
        grid-template-columns: 1fr;
        gap: .25rem;
    }

    .composition-spatial-atlas .directions-section .pillar-grid,
    .composition-folio-dossier .directions-section .pillar-grid {
        display: grid;
        grid-auto-columns: minmax(16rem, 78vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        overflow-x: auto;
        padding-bottom: .75rem;
        scroll-snap-type: x mandatory;
    }

    .composition-spatial-atlas .directions-section .pillar-card,
    .composition-folio-dossier .directions-section .pillar-card {
        grid-column: auto;
        scroll-snap-align: start;
    }

    .composition-workshop-board .directions-section .pillar-grid,
    .composition-routine-book .directions-section .pillar-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .composition-data-sequence .directions-section .pillar-grid {
        grid-template-columns: 1fr;
    }

    .composition-data-sequence .directions-section .pillar-card {
        border-width: 0 0 1px;
    }

    .composition-data-sequence .directions-section .pillar-card:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 360px) {
    .hero {
        padding-top: 2.25rem;
    }

    .hero .lead {
        -webkit-line-clamp: 2;
    }

    .header-inner nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body .home-flow .hero-copy h1 {
        font-size: clamp(2.15rem, 11vw, 2.75rem);
    }

    .composition-workshop-board .directions-section .pillar-grid,
    .composition-routine-book .directions-section .pillar-grid {
        grid-template-columns: 1fr;
    }
}