/* ─── Timeline ─────────────────────────────────────────────────────────
   Vertical spine of dated milestones. Structure:
     <ol class="hzo-timeline">
       <li class="hzo-timeline__item">
         <span class="hzo-timeline__marker" aria-hidden="true"></span>
         <p class="hzo-timeline__date">2019</p>
         <h3 class="hzo-timeline__title">…</h3>
         <p class="hzo-timeline__body">…</p>
       </li>
     </ol>
   Default: single column, spine on the left at every width. Optional
   .hzo-timeline--alternate switches to a centered spine with items
   alternating sides from 1024px (still single-column below).
   Tokens: --timeline-spine-color (--border), --timeline-marker-size (14px),
   --timeline-marker-color (--brand), --timeline-marker-ring (--bg-page),
   --timeline-gap (--space-xl), --timeline-indent (--space-lg-2).
   Static component — motion comes only from composing .hzo-reveal. */
.hzo-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--timeline-gap, var(--space-xl));
    margin: 0;
    padding: 0;
    list-style: none;
}
.hzo-timeline::before {
    content: "";
    position: absolute;
    top: var(--space-xs);
    bottom: var(--space-xs);
    left: calc(var(--timeline-marker-size, 14px) / 2);
    border-left: var(--border-2) solid var(--timeline-spine-color, var(--border));
}
.hzo-timeline__item {
    position: relative;
    padding-left: calc(var(--timeline-marker-size, 14px) + var(--timeline-indent, var(--space-lg-2)));
}
.hzo-timeline__marker {
    position: absolute;
    top: var(--space-xs);
    left: 0;
    width: var(--timeline-marker-size, 14px);
    height: var(--timeline-marker-size, 14px);
    border-radius: var(--radius-full);
    background: var(--timeline-marker-color, var(--brand));
    /* ring lifts the dot off the spine on any section background */
    box-shadow: 0 0 0 3px var(--timeline-marker-ring, var(--bg-page));
    z-index: 1;
}
.hzo-timeline__date {
    font-family: var(--font-body);
    font-size: var(--fs-75);
    font-weight: var(--fw-600);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--accent-text);
    margin: 0 0 var(--space-xs);
}
.hzo-timeline__title {
    font-family: var(--font-heading);
    font-size: calc(var(--fs-h3) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1));
    font-weight: var(--font-weight-heading, var(--h3-weight, 600));
    line-height: 1.2;
    color: var(--text-heading);
    margin: 0 0 var(--space-sm);
}
.hzo-timeline__body { color: var(--text-body); margin: 0; max-width: var(--prose-max-width); }
@media (min-width: 1024px) {
    .hzo-timeline--alternate::before {
        left: 50%;
        transform: translateX(-50%);
    }
    .hzo-timeline--alternate .hzo-timeline__item {
        width: calc(50% - var(--timeline-indent, var(--space-lg-2)));
        padding-left: 0;
    }
    .hzo-timeline--alternate .hzo-timeline__item:nth-child(odd) {
        align-self: flex-start;
        text-align: right;
    }
    .hzo-timeline--alternate .hzo-timeline__item:nth-child(odd) .hzo-timeline__body { margin-left: auto; }
    .hzo-timeline--alternate .hzo-timeline__item:nth-child(even) { align-self: flex-end; }
    .hzo-timeline--alternate .hzo-timeline__item:nth-child(odd) .hzo-timeline__marker {
        left: auto;
        right: calc(-1 * var(--timeline-indent, var(--space-lg-2)));
        transform: translateX(50%);
    }
    .hzo-timeline--alternate .hzo-timeline__item:nth-child(even) .hzo-timeline__marker {
        left: calc(-1 * var(--timeline-indent, var(--space-lg-2)));
        transform: translateX(-50%);
    }
}