/* =========================================================================
   L'Atelier de MIA — The House (Phase 3)

   Narrow additions on top of css/page.css for the one-page narrative of
   the house: portrait figure, three quiet promises, and a three-up
   making grid. Tokens only — no raw hex.
   ========================================================================= */

/* -------------------------- FIGURES -------------------------------- */

.house-figure {
    margin: var(--space-6) 0;
}

.house-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.house-figure--portrait {
    max-width: 520px;
    margin-left: 0;
}

.house-figure__caption {
    margin: var(--space-3) 0 0;
    max-width: 56ch;

    font-family: var(--type-caption-font);
    font-size: var(--type-caption-size);
    color: var(--muted);
    line-height: 1.5;
}

/* -------------------------- THREE PROMISES ------------------------- */

.house-promises {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    margin: 0;
}

@media (min-width: 800px) {
    .house-promises {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

.house-promise {
    margin: 0;
}

.house-promise__title {
    margin: 0 0 var(--space-2);

    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    font-style: italic;
    letter-spacing: var(--type-subheadline-tracking);
    color: var(--fg);
}

.house-promise__body {
    margin: 0;

    font-family: var(--type-body-editorial-font);
    font-size: var(--type-body-editorial-size);
    font-weight: var(--type-body-editorial-weight);
    line-height: 1.55;
    color: var(--fg);
}

/* -------------------------- MAKING GRID ---------------------------- */

.house-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin: 0 0 var(--space-6);
}

@media (min-width: 800px) {
    .house-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.house-grid .house-figure {
    margin: 0;
}

.house-grid .house-figure__caption {
    font-size: var(--type-caption-size);
}

/* -------------------------- EXTRA BODY MARGIN ---------------------- */

.house-body--aftergrid {
    margin-top: var(--space-6);
}