/* ---------------------------------------------------------------- breaks -- */

/* Wide enough for a timeline entry to read across the page instead of
   stacking in the left third and leaving the right half hollow. */
@media (min-width: 900px) {
    /* Everything below the hero starts at the rail's content edge. Without
       this the page has two left edges and the spine breaks twice.
       Padding, not margin: .hero-grid is the container and a left margin
       pushes its box past the viewport instead of narrowing it. */
    .hero-grid {
        padding-left: calc(var(--gutter) + var(--rail) + 1.5rem);
    }

    .investors-section .hero-buttons {
        padding-left: calc(var(--rail) + 1.5rem);
    }

    .timeline-content {
        display: grid;
        /* The track IS the measure, so the paragraph inside it is constrained
           once rather than twice — a 1fr track opened wider than the measure
           and left its own right side bare under every entry. */
        grid-template-columns: minmax(0, 19rem) minmax(0, var(--measure));
        /* Status on row 1 and the title on row 2, both in the left column;
           the paragraph auto-places beside the title. Row 2 takes the slack
           so the title stays on its status rather than drifting down. */
        grid-template-rows: auto 1fr;
        gap: 0 clamp(2rem, 4vw, 3.5rem);
        align-items: start;
    }

    .timeline-status,
    .timeline-content h3 {
        grid-column: 1;
    }

    .timeline-content h3 {
        margin-bottom: 0;
    }

    /* The investors' body ran in two CSS columns here, with the portal
       landing in the second and 420px of empty moss under it. It is a
       side-head chapter now (side-head.css): one measure beside a sticky
       title, and the portal stands on its own below, a window at the end
       of the path rather than a picture stuck in a column. */
}