/* =========================================================================
   L'Atelier de MIA — Shared Phase 3 page primitives

   Used by contact, the house, account and sizing pages. Each
   Phase 3 page loads this file plus any page-specific stylesheet on top.
   Tokens only — no raw hex — Master Playbook §8.

   This file deliberately does NOT define action styles. The only action
   styles in the system remain `.primary-link` and `.quiet-link` from
   css/primitives.css.
   ========================================================================= */

/* -------------------------- SHELL ---------------------------------- */

.page {
    min-height: 100vh;
    background: var(--canvas);
    color: var(--fg);
}

.page__inner {
    max-width: 920px;
    margin: 0 auto;
    padding: calc(var(--space-7) + var(--space-5)) var(--space-5) var(--space-7);
}

.page__inner--narrow {
    max-width: 620px;
}

.page__inner--wide {
    max-width: 1120px;
}

/* -------------------------- HERO / OPENING -------------------------- */

.page__hero {
    margin: 0 0 var(--space-7);
}

.page__eyebrow {
    display: block;
    margin-bottom: var(--space-4);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

.page__title {
    margin: 0 0 var(--space-4);

    font-family: var(--type-display-font);
    font-size: var(--type-display-size);
    font-weight: var(--type-display-weight);
    letter-spacing: var(--type-display-tracking);
    line-height: 1.05;
    color: var(--fg);
}

.page__title em {
    font-style: italic;
    font-weight: 300;
}

.page__lede {
    margin: 0;
    max-width: 56ch;

    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);
}

/* -------------------------- SECTIONS / BODY ------------------------ */

.page__section {
    margin: var(--space-7) 0;
}

.page__section + .page__section {
    margin-top: var(--space-6);
}

.page__section-label {
    display: block;
    margin-bottom: var(--space-4);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

.page__subheadline {
    margin: 0 0 var(--space-4);

    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    letter-spacing: var(--type-subheadline-tracking);
    line-height: 1.25;
    color: var(--fg);
}

.page__subheadline em {
    font-style: italic;
}

.page__body {
    max-width: 56ch;

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

.page__body p {
    margin: 0;
}

.page__body p + p {
    margin-top: var(--space-4);
}

.page__body em {
    font-style: italic;
}

/* -------------------------- INFO GRID (contact / sizing / house) --- */

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

@media (min-width: 700px) {
    .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-7) var(--space-6);
    }
}

.info-block__label {
    display: block;
    margin-bottom: var(--space-2);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    color: var(--muted);
}

.info-block__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.6;
    color: var(--fg);
}

.info-block__body a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
    transition: border-bottom-color var(--dur-fast) var(--ease);
}

.info-block__body a:hover,
.info-block__body a:focus-visible {
    border-bottom-color: var(--fg);
}

.info-block__body a:focus { outline: none; }
.info-block__body a:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 4px;
}

/* -------------------------- QUIET QUOTE ---------------------------- */
/* Used sparingly — one per page max, per §8 restraint. Do not combine
   with a display-serif hero title on the same viewport. */

.page__pullquote {
    margin: var(--space-7) 0;
    padding-left: var(--space-5);
    border-left: 1px solid var(--hairline);

    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    font-style: italic;
    line-height: 1.35;
    color: var(--fg);
    max-width: 44ch;
}

.page__pullquote-attribution {
    display: block;
    margin-top: var(--space-3);

    font-family: var(--type-label-caps-font);
    font-size: var(--type-label-caps-size);
    font-weight: var(--type-label-caps-weight);
    letter-spacing: var(--type-label-caps-tracking);
    text-transform: var(--type-label-caps-case);
    font-style: normal;
    color: var(--muted);
}

/* -------------------------- CLOSING -------------------------------- */

.page__closing {
    margin-top: var(--space-7);
    padding-top: var(--space-6);
    border-top: 1px solid var(--hairline);
}

.page__closing-line {
    margin: 0 0 var(--space-4);
    max-width: 36ch;

    font-family: var(--type-subheadline-font);
    font-size: var(--type-subheadline-size);
    font-weight: var(--type-subheadline-weight);
    line-height: 1.3;
    color: var(--fg);
}

.page__closing-line em {
    font-style: italic;
}

/* -------------------------- MOBILE --------------------------------- */

@media (max-width: 700px) {
    .page__inner {
        padding: calc(var(--space-6) + var(--space-4)) var(--space-4) var(--space-6);
    }
    .page__title {
        font-size: var(--type-display-size-mobile);
        line-height: 1.1;
    }
    .page__lede {
        font-size: 17px;
    }
}