/* Leo's portfolio timeline (timeline.js draws it into [data-tl]; About › Research). Wide: the Figma spread, every
   layer at its own position (9330 × 6000 units, --u = one unit; type sizes matched to the spread's line widths in Inter). Narrow (< 860 px): the four chapters stacked on a
   vertical line, the faded earlier projects left out. Which one: .tlw--wide / .tlw--narrow, set by timeline.js. */
/* on About › Research it takes the full width of the section, under the five questions */
.ab__tl{grid-column:1 / -1;margin-top:4px}
/* one layout at a time: timeline.js measures the timeline and sets .tlw--wide (>= 860 px) or .tlw--narrow, and --tlw
   = its width (no container queries: a browser applied both when the home tile appeared, Leo 10/21 "不对") */
.tlw{position:relative}
.tl{--tl-blue:#005eae;--tl-tint:rgba(37,99,235,.09);--tl-tint-h:rgba(37,99,235,.15);--tl-q:#52514e;--tl-cap:#79797a;
  position:relative;isolation:isolate;color:var(--ink)}
[data-theme="dark"] .tl{--tl-blue:#4d9bff;--tl-tint:rgba(110,160,255,.12);--tl-tint-h:rgba(110,160,255,.2);--tl-q:var(--ink-2);--tl-cap:#8e8e93}
.tl a{color:inherit;text-decoration:none}
.tl-im{display:block;height:auto;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tl-h b{color:var(--tl-blue);font-style:italic;font-weight:700;letter-spacing:-.01em}
.tl-n{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.tl-q{color:var(--tl-q)}
.tl-cap{color:var(--tl-cap)}
.tl-n a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
a.tl-ch:focus-visible .tl-bg,a.tl-ch:focus-visible{outline:2px solid var(--tl-blue);outline-offset:4px}
.tl-sub:focus-visible .tl-im,.tl-f:focus-visible img{outline:2px solid var(--tl-blue);outline-offset:4px;border-radius:6px}

/* ---------- wide: the spread ---------- */
  /* laid out to its box (Leo 10/21 "铺开 不要聚集在中间 根据空间去排版啊"): x on the width (--ux), y on the height (--uy);
     type and pictures on the smaller of the two (--u). timeline.js sets --tlw / --tlh; on About the box keeps the spread's proportion */
  .tlw--wide .tl{aspect-ratio:9330 / 6000;width:100%;height:var(--tlh);--ux:calc(var(--tlw,1000px) / 9330);--uy:calc(var(--tlh,var(--tlw,1000px) / 1.555) / 6000);--u:min(var(--ux),var(--uy))}
  .tlw--wide .tl-ch,.tlw--wide .tl-txt,.tlw--wide .tl-pics,.tlw--wide .tl-sub,.tlw--wide .tl-axis,.tlw--wide .tl-fades,.tlw--wide .tl-f{display:contents}
  .tlw--wide .tl [style*="--x"]{position:absolute;left:calc((var(--x) - 420) / 9330 * 100%);top:calc((var(--y) - 440) / 6000 * 100%)}
  .tlw--wide .tl [style*="--w"]{width:calc(var(--ux) * var(--w))}
  /* a picture keeps its proportion, centred on its own span of the line */
  .tlw--wide .tl img[style*="--w"]{width:calc(var(--u) * var(--w));margin-left:calc((var(--ux) - var(--u)) * var(--w) / 2)}
  .tlw--wide .tl .tl-arrow[style*="--w"]{width:calc(var(--u) * var(--w))}
  .tlw--wide .tl-bg{z-index:0;height:calc(var(--uy) * var(--h));border-radius:calc(var(--u) * 46);background:linear-gradient(to bottom,var(--tl-tint),transparent 96%);transition:background .3s}
  .tlw--wide .tl-bg--up{background:linear-gradient(to top,var(--tl-tint),transparent 96%)}
  .tlw--wide a.tl-ch:hover .tl-bg,.tlw--wide .tl-c2:hover .tl-bg{background:linear-gradient(to bottom,var(--tl-tint-h),transparent 96%)}
  .tlw--wide a.tl-ch:hover .tl-bg--up,.tlw--wide .tl-c2:hover .tl-bg--up{background:linear-gradient(to top,var(--tl-tint-h),transparent 96%)}
  .tlw--wide .tl-line{z-index:1;height:calc(var(--u) * 22);background:var(--tl-blue);border-radius:calc(var(--u) * 11)}
  .tlw--wide .tl-arrow{z-index:1;height:auto;fill:var(--tl-blue)}
  .tlw--wide .tl-y{z-index:1;font-size:calc(var(--u) * 230);font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--tl-blue)}
  .tlw--wide .tl-im{z-index:2}
  .tlw--wide a.tl-ch:hover .tl-im,.tlw--wide .tl-sub:hover .tl-im{transform:translateY(calc(var(--u) * -45))}
  .tlw--wide .tl-im--juno{z-index:3}
  .tlw--wide .tl-txt>*{z-index:4}
  .tlw--wide .tl-h{font-size:calc(var(--u) * 178);font-weight:600;line-height:calc(var(--u) * 310);white-space:nowrap;letter-spacing:.01em}
  .tlw--wide .tl-h b{font-size:calc(var(--u) * 246);margin-right:.06em}
  .tlw--wide .tl-n{font-size:calc(var(--u) * 170);line-height:calc(var(--u) * 216);white-space:nowrap}
  .tlw--wide a.tl-ch:hover .tl-n{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.06em}
  .tlw--wide .tl-q,.tlw--wide .tl-cap{font-size:calc(var(--u) * 140);line-height:calc(var(--u) * 216)}
  .tlw--wide .tl-cap{z-index:4}
  /* the earlier projects stay faint; pointing at one brings it up with its name */
  .tlw--wide .tl-f img{z-index:1;height:auto;opacity:.24;transition:opacity .3s}
  [data-theme="dark"] .tlw--wide .tl-f img{opacity:.3}
  .tlw--wide .tl-f:hover img{opacity:.55}
  .tlw--wide .tl-f--link:hover img{opacity:1}
  .tlw--wide .tl-fl{z-index:4;font-size:calc(var(--u) * 140);line-height:1.2;text-align:center;color:var(--ink-2);opacity:0;transition:opacity .25s;pointer-events:none}
  .tlw--wide .tl-f:hover .tl-fl,.tlw--wide .tl-f:focus-visible .tl-fl{opacity:1}
/* ---------- narrow: the chapters stacked on a vertical line ---------- */
  .tlw--narrow .tl{display:flex;flex-direction:column;gap:14px;padding:30px 0 34px 22px}
  .tlw--narrow .tl::before{content:"";position:absolute;left:5px;top:6px;bottom:10px;width:3px;border-radius:2px;background:var(--tl-blue)}
  .tlw--narrow .tl::after{content:"";position:absolute;left:0;bottom:0;border-left:6.5px solid transparent;border-right:6.5px solid transparent;border-top:12px solid var(--tl-blue)}
  .tlw--narrow .tl-fades,.tlw--narrow .tl-line,.tlw--narrow .tl-arrow,.tlw--narrow .tl-bg{display:none}
  .tlw--narrow .tl-axis{display:contents}
  .tlw--narrow .tl-y{position:absolute;left:22px;top:0;font-size:15px;font-weight:700;line-height:1;color:var(--tl-blue)}
  .tlw--narrow .tl-y--end{top:auto;bottom:0}
  .tlw--narrow .tl-ch{display:block;position:relative;padding:16px 16px 18px;border-radius:16px;background:var(--tl-tint)}
  .tlw--narrow a.tl-ch:active,.tlw--narrow .tl-sub:active{opacity:.85}
  .tlw--narrow .tl-txt{display:block}
  .tlw--narrow .tl-h{display:block;font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1.3}
  .tlw--narrow .tl-h b{font-size:20px;margin-right:2px}
  .tlw--narrow .tl-n{display:block;margin-top:2px;font-size:17px;line-height:1.3}
  .tlw--narrow .tl-q{display:block;margin-top:2px;font-size:14px;line-height:1.4}
  .tlw--narrow .tl-pics{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin-top:14px}
  .tlw--narrow .tl-sub{display:flex;flex:1 1 0;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:4px;min-width:0}
  .tlw--narrow .tl-im{width:auto;max-width:100%;max-height:150px;min-width:0}
  .tlw--narrow .tl-c1 .tl-im{max-height:140px}
  .tlw--narrow .tl-im--fold{max-height:60px}
  .tlw--narrow .tl-im--juno{max-height:90px}
  .tlw--narrow .tl-c4 .tl-im{max-height:160px}
  .tlw--narrow .tl-im--d2{max-width:58%}
  .tlw--narrow .tl-cap{display:block;flex-basis:100%;margin-top:6px;font-size:13px;line-height:1.35;text-align:center}