/* yeojido home — origin timeline section (design M002.P023.T017 stage 2).
   Load after design-tokens/components/responsive/site and provenance.css (hash chips .pv-hash come from there).
   Colours are tokens only; the axis gradient is the two --brand-grad colours (#9349ff -> #ff3a4e), same as the stage-1 record line.
   Mobile: one axis on the left. 1024px and up: axis in the middle, cards alternate left/right. */

.tl-sec{padding-top:var(--s12)}
/* site.css sets hyphens:auto on :lang(en), which matches every element inside an en page, so override on the descendants too (this section only) */
.tl-sec,.tl-sec *{-webkit-hyphens:manual;hyphens:manual}
.tl-lead{max-width:44em;margin:0 0 var(--s8);color:var(--ink-2);font-size:16px;line-height:1.7}

.tl{position:relative;display:grid;gap:var(--s5);margin:0;padding:0;list-style:none}
/* axis: grey track + brand line drawn on top (scaleY from JS while scrolling) */
.tl::before,.tl::after{content:"";position:absolute;left:11px;top:10px;bottom:24px;width:2px;border-radius:2px}
.tl::before{background:var(--line)}
.tl::after{background:linear-gradient(180deg,#9349ff,#ff3a4e);transform-origin:top}
html.js .tl[data-tl-ready]::after{transform:scaleY(var(--tl-p,0))}

/* item + dot */
.tl-item,.tl-now{position:relative;padding-left:40px}
.tl-item::before{content:"";position:absolute;z-index:1;left:5px;top:26px;width:14px;height:14px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 3px var(--brand-purple)}
.tl-item--key::before{left:2px;top:23px;width:20px;height:20px;background:var(--brand-grad);box-shadow:0 0 0 4px var(--surface-tint)}

.tl-card{position:relative;padding:var(--s5);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1)}
.tl-item--key .tl-card{padding:var(--s6) var(--s5);box-shadow:var(--shadow-2)}
.tl-item--key .tl-card::before{content:"";position:absolute;left:20px;right:20px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--brand-grad)}

/* date (big number) + evidence badge */
.tl-when{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 10px}
.tl-date{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-variant-numeric:tabular-nums}
.tl-y{font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.tl-md{font-size:17px;line-height:1.3;font-weight:800;color:var(--ink-2)}
.tl-item--key .tl-y{font-size:44px;color:var(--cat-fg)}
.tl-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:13px;line-height:1.5;font-weight:700;white-space:nowrap}
.tl-bi{width:15px;height:15px;flex:none}
.tl-badge--registry{box-shadow:inset 0 0 0 1.5px var(--btn-line);color:var(--ink-2)}
.tl-badge--archive{background:var(--surface-tint);color:var(--cat-fg)}
.tl-badge--proof{background:var(--ok-bg);color:var(--ok)}

/* archive stamp (code-drawn, decorative): top right of the key card */
.tl-stamp{position:absolute;right:14px;top:16px;width:88px;height:88px;color:var(--brand-red);opacity:.9;transform:rotate(-12deg);pointer-events:none}
.tl-item--key .tl-when{min-height:88px;align-content:flex-start;justify-content:flex-start;padding-right:96px}

/* fact + detail */
.tl-fact{margin:0;font-size:18px;line-height:1.45;font-weight:800;letter-spacing:-.02em}
.tl-item--key .tl-fact{font-size:21px}
.tl-detail{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.tl-tag{display:inline-block;margin-bottom:8px;padding:2px 10px;border-radius:var(--r-pill);background:var(--pressed-bg);color:var(--pressed-fg);font-size:12px;font-weight:800}
.tl-dl{display:grid;gap:4px;margin:12px 0 0;font-size:14px}
.tl-dl>div{display:grid;gap:2px}
.tl-dl dt{color:var(--ink-2);font-size:13px}
.tl-dl .pv-hash{display:inline-block;max-width:100%}
@media (min-width:600px){.tl-dl>div{grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:10px;align-items:center}}
.tl-dl dd{margin:0;min-width:0;font-variant-numeric:tabular-nums}
.tl-hashline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:13px;color:var(--ink-2)}

/* "check it yourself" links (44px boxes) */
.tl-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;margin-top:10px}
.tl-check{display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;font-size:15px;font-weight:800;color:var(--cat-fg);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.tl-check--2{font-weight:700;color:var(--ink-2)}
.tl-check--anchor{display:inline-block;padding:11px 0;line-height:22px;font-size:14px;font-weight:700;color:var(--ink-2)}
.tl-check--anchor .tl-arr{margin-left:4px}
.tl-arr{display:inline-block;text-decoration:none;font-weight:700}
.tl-links--ref{display:block;margin-top:12px}
.tl-ref{margin:2px 0 0;font-size:13px;color:var(--ink-2)}
.tl-cmd{display:block;width:fit-content;max-width:100%;margin-top:6px}

/* today */
.tl-now::before{content:"";position:absolute;z-index:1;left:4px;top:15px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 4px #ff3a4e}
.tl-now-in{position:relative;z-index:2;display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:10px 18px;border-radius:var(--r-pill);background:var(--pressed-bg);color:var(--pressed-fg)}
.tl-now-l{font-size:13px;font-weight:700;color:var(--pressed-sub)}
.tl-elapsed{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}

/* PC: middle axis, alternating sides; neighbouring cards overlap vertically by 48px (they are on opposite sides) */
@media (min-width:1024px){
  .tl{gap:0}
  .tl::before,.tl::after{left:50%;margin-left:-1px}
  .tl-item{display:flex;padding-left:0}
  .tl-item+.tl-item{margin-top:-48px}
  .tl-item:nth-child(even){justify-content:flex-end}
  .tl-card{width:calc(50% - 48px)}
  .tl-item::before{left:50%;margin-left:-7px;top:30px}
  .tl-item--key::before{margin-left:-10px;top:27px}
  .tl-card::after{content:"";position:absolute;top:36px;width:40px;height:2px;background:var(--line)}
  .tl-item:nth-child(odd) .tl-card::after{left:100%}
  .tl-item:nth-child(even) .tl-card::after{right:100%}
  .tl-now{display:flex;justify-content:center;padding:var(--s10) 0 0}
  .tl-now::before{display:none}
  .tl-y{font-size:40px}
  .tl-item--key .tl-y{font-size:52px}
}

@media (prefers-reduced-motion:reduce){
  html.js .tl[data-tl-ready]::after{transform:none}
}