/* ============================================================
   LIBERTARIA MAGAZINE — screen.css (The New World)
   ------------------------------------------------------------
   Canonical home of the SPEC-061 v2 screen standards:
   the typographic constants, The Gutter Law, the Hardware
   Matrix aspect ratios, and the magazine spread layout.

   THE RULE OF EXCLUSION (screen world):
   This stylesheet and every screen-facing stylesheet must not
   contain mm, cm, pt, in, pc, or @page rules. Physical units
   belong exclusively to print.css (the old-world quarantine).

   Load order: after /styles.css — this file wins conflicts.
   Selectors carry an extra class/element for specificity so
   they beat Astro scoped styles regardless of order.
   ============================================================ */

:root {
    /* --- Typographic constants (The Gutter Law source) ---
       Body copy: 1.1rem at 1.8 line-height → one line = 1.98rem.
       The gutter is 2.5 × line, NEVER a pixel value.
       At the 50rem measure this coincides with the 1:10 column
       ratio (79.2px vs 80px) — both constraints satisfied. */
    --libertaria-body: 1.1rem;
    --libertaria-lh: 1.8;
    --libertaria-line: calc(var(--libertaria-body) * var(--libertaria-lh));
    --libertaria-gutter: calc(var(--libertaria-line) * 2.5);

    /* --- Hardware Matrix (SPEC-061 v2) ---
       Column/Page 8:9 (0.88:1) · Hero/Video 14:9 · Spread 1.76:1 */
    --libertaria-column-aspect: 8 / 9;
    --libertaria-hero-aspect: 14 / 9;
    --libertaria-spread-ratio: 1.76;

    /* --- Measure ---
       The reading column. Two of these + one gutter = the spread. */
    --libertaria-measure: 50rem; /* 800px */
}

/* ------------------------------------------------------------
   THE MEASURE — single reading column (mobile / narrow desktop)
   ------------------------------------------------------------ */
article.blog-post,
article.story-post {
    max-width: calc(var(--libertaria-measure) + 2rem);
}

/* Shared body typography across ALL reading surfaces.
   Stories previously ran 1.15rem/1.9; the magazine standard is
   one physiological constant for the whole publication. */
article.blog-post .content,
article.story-post .content {
    font-size: var(--libertaria-body);
    line-height: var(--libertaria-lh);
}

/* ------------------------------------------------------------
   THE SPREAD — two 0.88 columns, gutter bound to line-height
   (wide monitors only; the landing grids keep their own layout)
   ------------------------------------------------------------ */
@media (min-width: 1280px) {
    article.blog-post,
    article.story-post {
        max-width: calc(
            var(--libertaria-measure) * 2
            + var(--libertaria-gutter)
            + 2rem
        );
    }

    article.blog-post .content,
    article.story-post .content {
        column-count: 2;
        column-gap: var(--libertaria-gutter);
        column-rule: 1px solid rgba(255, 215, 0, 0.15);
    }

    /* Keep headings attached to the text they introduce */
    article.blog-post .content :is(h2, h3, h4),
    article.story-post .content :is(h2, h3, h4) {
        break-after: avoid;
        break-inside: avoid;
    }

    article.blog-post .content p,
    article.story-post .content p {
        orphans: 3;
        widows: 3;
    }
}

/* One column is guaranteed below the spread breakpoint */
@media (max-width: 1279px) {
    article.blog-post .content,
    article.story-post .content {
        column-count: 1;
    }
}

/* ------------------------------------------------------------
   THE HERO — Hardware Matrix 14:9
   Legacy 16:9 assets are cropped by object-fit: cover.
   New renders target 1792x1152 (see grok-image / qwen-image-hero).
   ------------------------------------------------------------ */
img.hero-image {
    aspect-ratio: var(--libertaria-hero-aspect);
    object-fit: cover;
}