/* ==========================================================================
   alt.css — "Alt 1" layout overrides, layered on preview.css.
   Mirrored columns: text left, figures right. Minor entries carry a short
   roman description beside the italic title. Two page flavors:
     body.alt            — dates inline in the meta line, venue on its own line
     body.alt.alt-gutter — dates in the left gutter, bottom-aligned to the
                           meta line; venue inline
   ========================================================================== */

/* text | figures */
body.alt .preview a.entry {
    grid-template-columns: 1fr 305px;
}

/* figures sit in the right column, flush right */
body.alt .col-fig .figures {
    align-items: flex-end;
}

/* an entry's authored square variant (see the narrow-viewport block at the
   bottom) stays hidden everywhere except inside a .fig-square-float */
.figures .fig-square { display: none; }

/* side-by-side square pair (character-counts) */
body.alt .figures-pair {
    flex-direction: row;
    justify-content: flex-end;
    gap: 13px;
}
body.alt .figures-pair img {
    width: calc((100% - 13px) / 2);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 0;
}

/* no meta pinning in this layout — plain stack, per the mockup */

/* minor entries: compact stack spanning the full frame width — the text
   runs the whole measure instead of wrapping at the text column */
body.alt .entry.minor .col-text { grid-column: 1 / -1; }
body.alt .minor-title { display: block; }
body.alt .minor-desc {
    font-family: var(--font-body);
    font-size: var(--size-abstract);
    line-height: 1.1;
    color: var(--color-text);
    margin: var(--minor-gap) 0 0;
}
body.alt .entry.minor .meta { margin-top: var(--minor-gap); }

/* inline date (body.alt without gutter) */
body.alt .meta .date {
    color: var(--color-text-faint);
    font-weight: 400;
}

/* venue on its own line (Alt 1 flavor) */
body.alt .venue-line {
    font-family: var(--font-mono);
    font-size: var(--size-meta);
    line-height: 1.5;
    margin: 8px 0 0;
}

/* gutter flavor: meta sits a fixed 12px below the description, and the date
   anchors to the meta line itself (same mechanism as alt2-gutter), so the
   two stay aligned no matter which column is taller */
body.alt.alt-gutter .abstract { margin-bottom: 12px; }

/* ---- alt2 flavor: meta line directly below the title on every entry ---- */
body.alt.alt2 .abstract { margin: 16px 0 0; }
body.alt.alt2 .minor-desc { margin: var(--minor-gap) 0 0; }

/* gutter flavors (alt1 + alt2): the date span lives inside the meta row and
   anchors to it, so it tracks the meta line exactly wherever it falls */
body.alt-gutter .meta,
body.alt2-gutter .meta { position: relative; }
/* .entry.major/.entry.minor qualifiers needed to outweigh the base
   .entry.major .entry-date { top: 16px } rules */
body.alt-gutter .entry.major .entry-date,
body.alt-gutter .entry.minor .entry-date,
body.alt2-gutter .entry.major .entry-date,
body.alt2-gutter .entry.minor .entry-date {
    top: 0;
    bottom: auto;
    right: calc(100% + 24px); /* meta's left edge sits on the frame edge */
}

/* alt1 gutter (title) flavor: the date is a zero-width in-flow inline block
   at the title's start — real inline layout, so its baseline IS the title's
   first-line baseline at any font size. The inner span carries the visible
   text and is transformed fully leftward into the gutter (right edge 24px
   clear of the frame); transforms don't affect layout or baselines. */
body.alt1-gutter-title .abstract { margin-bottom: 12px; } /* match alt1-gutter rhythm */
body.alt1-gutter-title .entry.major .entry-date,
body.alt1-gutter-title .entry.minor .entry-date {
    position: static;      /* override the base rule's absolute positioning */
    display: inline-block;
    width: 0;
    white-space: nowrap;
    font-weight: 400;      /* don't absorb the h2's display weight */
    font-style: normal;    /* don't absorb the minor title's italic */
}
body.alt1-gutter-title .entry-date > span {
    display: inline-block;
    transform: translateX(calc(-100% - 24px));
}


/* --------------------------------------------------------------------------
   Below 1140px there is no gutter, so the gutter-title dates — in-flow
   zero-width inline blocks whose inner span is transformed leftward into the
   gutter — must come back into the flow: the transform lands them off the
   page edge on narrow screens. They become a line above their title,
   mirroring preview.css's treatment of the static markup's dates.
   -------------------------------------------------------------------------- */
@media (max-width: 1140px) {
    body.alt1-gutter-title .entry.major .entry-date,
    body.alt1-gutter-title .entry.minor .entry-date {
        width: auto;
        display: block;
    }
    body.alt1-gutter-title .entry-date > span { transform: none; }
}

/* --------------------------------------------------------------------------
   Phones: the alt family's text|figure grid (1fr 305px) outranked the generic
   single-column collapse, leaving a 305px figure column on a ~375px screen —
   crushed text, clipped figure. Default here is the stacked treatment: text
   first, figure as a full-width band below (landscape assets flatter this).
   Square wrap is the shipped default (Loren, 2026-09-01): index-figs.js
   floats the figure inside the text flow as a 96px square center-crop; the
   stacked band remains as the JS-off fallback.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
    body.alt .preview a.entry { grid-template-columns: 1fr; }
    body.alt .entry .col-fig { grid-column: 1 / -1; }
    body.alt .col-fig .figures { align-items: stretch; }
    .figures img, .figures video { width: 100%; }

    /* the shipped square wrap: index-figs.js moves .figures into the text
       container (wrap requires the image in the text's own block flow — grid
       could never reflow text underneath); these rules style the float. The
       body.alt variants outrank the desktop figure sizing rules. */
    .figures.fig-square-float {
        float: right;
        width: 96px;
        margin: 0 0 10px 14px;
        align-items: stretch;
    }
    .fig-square-float img, .fig-square-float video,
    body.alt .col-text .fig-square-float img,
    body.alt .col-text .fig-square-float video,
    body.alt .fig-square-float.figures-pair img {
        width: 96px;
        aspect-ratio: 1 / 1;
    }
    /* auto-crop anchor: middle unless the entry authors data-crop on its
       .figures ("left" | "right") — object-position steers what survives
       the square center-crop */
    .fig-square-float[data-crop="left"] img, .fig-square-float[data-crop="left"] video { object-position: left center; }
    .fig-square-float[data-crop="right"] img, .fig-square-float[data-crop="right"] video { object-position: right center; }
    /* an authored square asset (img.fig-square) replaces the auto-crop */
    .fig-square-float .fig-square { display: block; }
    .fig-square-float:has(.fig-square) :is(img, video):not(.fig-square) { display: none; }
}