/* ==========================================================================
   GLOBAL RESPONSIVE CONTENT LAYOUT + TYPOGRAPHY STANDARD
   Site-wide: content width, typography scaling, spacing, readability.
   Use clamp() / rem / minmax(); no zoom, no transform:scale, no JS font resize.
   ========================================================================== */

:root {
    /* ----- Containers ----- */
    --container-max:    min(1440px, 92vw);
    --content-max:      min(1280px, 88vw);
    --content-narrow:  min(720px, 90vw);
    --readable-width:  min(65ch, 100%);

    /* ----- Section spacing ----- */
    --section-pad-x:   clamp(20px, 4vw, 48px);
    --section-pad-y:   clamp(32px, 5vw, 64px);
    --block-gap:       clamp(16px, 2.5vw, 28px);
    --grid-gap:        clamp(20px, 3vw, 40px);
    --grid-gap-lg:     clamp(28px, 4vw, 56px);

    /* ----- Typography (rem-based, fluid with clamp) ----- */
    --h1-size:    clamp(1.75rem, 2.5vw + 1rem, 2.75rem);
    --h2-size:    clamp(1.35rem, 2vw + 0.75rem, 2rem);
    --h3-size:    clamp(1.1rem, 1.2vw + 0.6rem, 1.5rem);
    --body-size:  clamp(0.9375rem, 0.5vw + 0.85rem, 1.0625rem);
    --meta-size:  clamp(0.8125rem, 0.4vw + 0.75rem, 0.9375rem);
    --small-size: clamp(0.75rem, 0.35vw + 0.65rem, 0.875rem);

    /* ----- Line height & readability ----- */
    --line-body:   1.65;
    --line-heading: 1.2;
    --line-tight:  1.4;

    /* ----- Two-column balance (fraction or minmax) ----- */
    --col-content: minmax(0, 1.15fr);
    --col-aside:   minmax(280px, 380px);
    --col-media:   minmax(42%, 48%);
    --col-info:    minmax(48%, 58%);
}

/* Reusable content container: centered, max-width, horizontal padding */
.content-container {
    width: 100%;
    max-width: var(--content-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--section-pad-x);
    padding-right: var(--section-pad-x);
}

.content-container--narrow {
    max-width: var(--content-narrow);
}

.content-container--full {
    max-width: var(--container-max);
}

/* Section vertical rhythm */
.section-pad {
    padding-top: var(--section-pad-y);
    padding-bottom: var(--section-pad-y);
}

/* Readable text block (line length cap) */
.readable {
    max-width: var(--readable-width);
}

/* Apply global body text size where desired (pages can override) */
.body-text {
    font-size: var(--body-size);
    line-height: var(--line-body);
}

/* Headings that use global scale (pages can override) */
.global-h1 { font-size: var(--h1-size); line-height: var(--line-heading); }
.global-h2 { font-size: var(--h2-size); line-height: var(--line-heading); }
.global-h3 { font-size: var(--h3-size); line-height: var(--line-tight); }