/* ═══════════════════════════════════════════════════════════════════
   journey.css · the walk across the About page

   Two states from the same markup. Without JavaScript the drawing is a
   wide strip you scroll sideways and the facts are a plain list. With
   JavaScript the strip becomes a stage the width of the window, with a
   camera following him, and the facts stay a list with the one he is
   standing on marked.
   ═══════════════════════════════════════════════════════════════════ */

/* 100vw counts the scrollbar, so the full width stage can be a few pixels
   wider than the page. Clipping at the body absorbs that. Only the About page
   loads this file, and nothing on it is sticky or fixed, so clip is free here.
   It has to be the body: clipping on .journey would crop the stage back to the
   text column it is breaking out of. */
body { overflow-x: clip; }
.journey { margin: 0; }

/* The stage breaks out of the page's column and runs the full window. */
.journey-stage {
    position: relative;
    margin-top: 1.5rem;
    margin-inline: calc(50% - 50vw);
    width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    background: var(--bg);
    border-block: 1px solid var(--border-s);
}

.journey-svg {
    display: block;
    height: clamp(340px, 33vw, 520px);
    color: var(--accent);
}

/* ── the world ─────────────────────────────────────────────────────── */
.journey-svg .jl {
    fill: none;
    stroke: currentColor;
    stroke-width: 5.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.journey-svg .jground {
    stroke: var(--text);
    stroke-width: 3;
    opacity: 0.85;
}
.journey-svg .jearth { fill: #f0ece1; stroke: none; }
.journey-svg .jwall { fill: #e7ebf3; stroke: none; }
.journey-svg .jskyline { fill: #e2e7f1; stroke: none; }
.journey-svg .jsun { fill: #eceff7; stroke: none; }
.journey-svg .jpebble { fill: #e3e0d6; stroke: none; }
.journey-svg .jtuft { fill: none; stroke: #cfcbbd; stroke-width: 2.4; stroke-linecap: round; }
.journey-svg .jdust { fill: #cdc8b8; stroke: none; }

.journey-svg .jsheet {
    fill: var(--card);
    stroke: var(--text);
    stroke-width: 1.6;
}
.journey-svg .jsheet-mark { stroke: var(--accent); stroke-width: 2.6; }

/* the figure */
.journey-svg .jman { color: var(--accent); }
.journey-svg .jman-static { color: var(--accent); }
.journey-svg .jlimb { stroke-width: 5.5; }
.journey-svg .jhead { stroke-width: 5.5; fill: var(--bg); }
.journey-svg .jnose { stroke-width: 4; }
.journey-svg .jcarry { stroke-width: 4; }
.journey-svg .jslab { fill: var(--card); }
.journey-svg .jfar { opacity: 0.55; }

/* ── the caption that rides with him ───────────────────────────────── */
/* It lines up with the page's text column, not with the window, so it reads as
   part of the page rather than as something floating on the picture. */
.journey-capwrap {
    position: absolute;
    inset: auto 0 1.1rem;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
    pointer-events: none;
}
/* a class based display would beat the hidden attribute, so say it again */
.journey-caption[hidden], .journey-controls[hidden] { display: none; }
.journey-caption {
    display: inline-block;
    margin: 0;
    max-width: min(28rem, 100%);
    padding: 0.7rem 0.95rem;
    background: color-mix(in srgb, var(--card) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    backdrop-filter: blur(3px);
    pointer-events: none;
}
.journey-caption .jc-date {
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.journey-caption .jc-title {
    display: block;
    margin-top: 0.2rem;
    font-size: 1.02rem;
    font-weight: var(--weight-heading);
    line-height: 1.25;
    color: var(--text);
}

/* ── controls ──────────────────────────────────────────────────────── */
.journey-controls {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.15rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    color: var(--muted);
}
.journey-play {
    font: inherit;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-s);
    padding: 0.4rem 0.85rem;
    cursor: pointer;
    min-width: 4.6rem;
}
.journey-play:hover { border-color: var(--accent); color: var(--accent); }

.journey-track { position: relative; flex: 1; min-width: 0; padding-bottom: 1.1rem; }
.journey-scrub {
    display: block;
    width: 100%;
    margin: 0;
    accent-color: var(--accent);
    height: 1.1rem;
    cursor: pointer;
}
.journey-ticks { position: absolute; inset: auto 0 0 0; height: 1rem; }
.journey-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font: inherit;
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    color: var(--muted);
    background: none;
    border: 0;
    padding: 0 0.2rem;
    cursor: pointer;
    opacity: 0.75;
}
.journey-tick::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -0.42rem;
    width: 1px;
    height: 0.3rem;
    background: currentColor;
}
.journey-tick:hover, .journey-tick.is-done { color: var(--accent); opacity: 1; }
.journey-time { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── the facts, which are the whole point of the section ───────────── */
.journey-facts {
    list-style: none;
    margin: 1.7rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.3rem 2.4rem;
}
.journey-fact {
    padding-left: 0.95rem;
    border-left: 2px solid var(--border);
    transition: border-color var(--t-med) var(--ease);
}
.journey-fact.is-active { border-left-color: var(--accent); }
.journey-fact time {
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
}
.journey-fact h3 {
    margin: 0.28rem 0 0;
    font-size: var(--fs-h3);
    font-weight: var(--weight-heading);
    line-height: 1.3;
    color: var(--text);
}
.journey-fact p {
    margin: 0.34rem 0 0;
    font-size: 0.92rem;
    line-height: 1.62;
    color: var(--text-soft);
}

/* ── live mode ─────────────────────────────────────────────────────── */
.journey.is-live .journey-stage { overflow: hidden; }
.journey.is-live .journey-svg { width: 100%; }

@media (max-width: 860px) {
    .journey-facts { grid-template-columns: 1fr; gap: 1.1rem; }
}
@media (max-width: 560px) {
    .journey-svg { height: 340px; }
    .journey-capwrap { bottom: 0.8rem; padding-inline: 0.9rem; }
    .journey-caption { display: block; max-width: 100%; padding: 0.55rem 0.75rem; }
    .journey-caption .jc-title { font-size: 0.94rem; }
    .journey-controls { flex-wrap: wrap; gap: 0.6rem; }
    .journey-track { order: 3; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .journey-fact { transition: none; }
}

@media print {
    .journey-stage, .journey-controls { display: none; }
    .journey-facts { grid-template-columns: 1fr; }
}