/* Pinned horizontal experience timeline - see js/experience-timeline.js.
   Default (no JS, no GSAP, reduced motion) is a plain vertical list with everything visible.
   `.tl-live` on the section switches on the pinned horizontal layout. */
/* Own background so the timeline reads as a distinct band: warm cream in light mode, deep navy in dark mode */
.beta-tl{--tl-bg:#f1e8d3;--tl-line:#0f3b2d;--ink:#162a22;--muted:#4b5b53;--line:#d8cdb2;background:var(--tl-bg);color:var(--ink)}
:root[data-theme="dark"] .beta-tl{--tl-bg:#0e2233;--tl-line:#8cc0ec;--ink:#eaf1f8;--muted:#a9bed5;--line:#2b4a63}
.beta-tl{padding:0;border-block:1px solid var(--line)}
.tl-stage{width:calc(100% - 48px);max-width:var(--maxw);margin:0 auto;padding:72px 0}
.tl-track{display:flex;flex-direction:column;gap:36px}
.tl-mask{display:block;overflow:hidden;padding-bottom:.08em}
.tl-rise{display:block}
.tl-heading{font-size:clamp(30px,3.4vw,48px);line-height:1;font-weight:500;max-width:11ch}
.tl-period{margin-top:14px;font-size:13px;color:var(--muted)}
.tl-rail{display:none}
.tl-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px;border-left:1px solid var(--line);padding-left:24px}
.tl-item{position:relative}
.tl-stem,.tl-node{display:none}
.tl-card{display:flex;flex-direction:column;gap:12px}
.tl-year{font-size:clamp(28px,4vw,40px);line-height:1;font-weight:500}
.tl-logo{display:flex;align-items:center;justify-content:center;width:220px;height:84px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.tl-logo img{max-width:100%;max-height:100%;object-fit:contain}
.tl-label{font-size:14px;line-height:1.35;color:color-mix(in srgb,var(--ink) 82%,transparent);max-width:26ch}
.tl-sum{font-size:13px;line-height:1.4;color:var(--ink);max-width:34ch}
.tl-card{outline-offset:6px}

/* Pinned horizontal layout */
.tl-live{position:relative}/* height is set by the script from the scroll timeline */
.tl-live .tl-stage{position:sticky;top:0;height:100vh;width:100%;max-width:none;margin:0;padding:0;overflow:hidden;display:flex;align-items:center;box-sizing:border-box;padding-top:clamp(84px,7.4vw,150px)}
.tl-live .tl-track{--h:min(70vh,620px);position:relative;flex-direction:row;gap:0;height:var(--h);width:max-content;padding:0 6vw}
.tl-live .tl-lead{flex:0 0 26vw;align-self:flex-start;padding-top:calc(var(--h) * .04)}
.tl-live .tl-period{position:absolute;left:6vw;bottom:calc(var(--h) * .04);margin:0}
.tl-live .tl-rail{display:flex;align-items:center;position:absolute;left:6vw;width:0;top:50%;height:10px;transform:translateY(-50%)}
.tl-live .tl-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--tl-line)}
.tl-live .tl-grow{flex:1;height:2px;background:var(--tl-line)}
.tl-live .tl-items{position:relative;flex-direction:row;gap:0;height:100%;border:0;padding:0}
.tl-live .tl-item{flex:0 0 30vw;height:100%;padding-left:0}
.tl-live .tl-stem{display:block;position:absolute;left:0;width:2px;background:var(--tl-line);height:calc(50% - 5px);transform:scaleY(0)}
.tl-live .tl-node{display:block;position:absolute;left:-5px;width:10px;height:10px;border-radius:50%;background:var(--tl-line);transform:scale(0)}
.tl-live .tl-top .tl-stem{top:0;bottom:auto;transform-origin:bottom}
.tl-live .tl-top .tl-node{top:calc(50% - 5px)}
.tl-live .tl-top .tl-card{justify-content:flex-start;height:calc(50% - 20px);padding-top:0}
.tl-live .tl-bottom .tl-stem{bottom:0;transform-origin:top}
.tl-live .tl-bottom .tl-node{bottom:calc(50% - 5px)}
.tl-live .tl-bottom .tl-card{position:absolute;bottom:0;left:0;justify-content:flex-end;height:calc(50% - 20px)}
.tl-live .tl-card{padding-left:2.2vw;gap:.8vw}
.tl-live .tl-top .tl-card{padding-top:0}
.tl-live .tl-year{font-size:clamp(30px,3.2vw,52px)}
.tl-live .tl-logo{width:clamp(190px,16vw,290px);height:clamp(72px,6vw,108px);padding:.9vw 1.3vw}
.tl-live .tl-label{font-size:clamp(13px,1.2vw,19px);max-width:22ch}
/* One-line summary: reserved space, revealed on hover or keyboard/tap focus */
.tl-live .tl-sum{font-size:clamp(12px,1.05vw,17px);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;min-height:2.8em;max-width:42ch}
.tl-live .tl-card:hover .tl-sum,.tl-live .tl-card:focus .tl-sum,.tl-live .tl-card:focus-within .tl-sum{opacity:1;transform:none}
/* End of the line: "Today" sits on the rail beside Dataiku's node, where the line stops */
.tl-endcap{display:none}
.tl-live .tl-endcap{display:block;position:absolute;left:1.1vw;bottom:calc(50% - .9vw);z-index:2;background:var(--tl-bg);padding:0 .6vw;font-size:clamp(13px,1.25vw,20px);font-weight:600;letter-spacing:.03em;color:var(--ink)}
.tl-live .tl-endcap .tl-mask{padding-bottom:.25em}
/* .tl-rise starts below its mask: set by js/experience-timeline.js */
.tl-live .tl-logo{opacity:0}

@media(max-width:600px){
  .tl-live .tl-track{--h:min(78vh,620px);padding:0 7vw}
  .tl-live .tl-lead{flex-basis:64vw}
  .tl-live .tl-period{left:7vw}
  .tl-live .tl-rail{left:7vw;height:12px}
  .tl-live .tl-dot,.tl-live .tl-node{width:12px;height:12px}
  .tl-live .tl-node{left:-6px}
  .tl-live .tl-item{flex-basis:72vw}
  .tl-live .tl-card{padding-left:6vw;gap:3vw}
  .tl-live .tl-year{font-size:11vw}
  .tl-live .tl-logo{width:56vw;height:21vw}
  .tl-live .tl-label{font-size:4.2vw}
  .tl-live .tl-sum{font-size:3.8vw}
  .tl-live .tl-heading{font-size:10vw}
}


/* Feature panel: while a job is in focus its logo comes up big on the left and role, one line and a Learn more button
   arrive top right, aligned with the top of the logo plate. Only exists in the live layout; the plain list already shows the same text. */
.tl-features{display:none}
.tl-live .tl-features{display:block;position:absolute;inset:0;z-index:3;pointer-events:none}
.tl-feature{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;align-content:center;padding:clamp(84px,7.4vw,150px) 6vw 4vw;box-sizing:border-box;visibility:hidden}
.tf-logo{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;max-height:62vh;width:100%;background:#fff;border:1px solid var(--line);border-radius:22px;padding:6%;box-sizing:border-box}
.tf-logo img{width:100%;height:100%;object-fit:contain}
.tf-copy{display:flex;flex-direction:column;gap:22px}
.tf-kicker{font-size:clamp(12px,1vw,15px);letter-spacing:.14em;text-transform:uppercase;font-weight:650;color:var(--tl-line)}
.tf-role{font-size:clamp(30px,3.6vw,60px);line-height:1.02;font-weight:500;max-width:14ch}
.tf-line{font-size:clamp(15px,1.4vw,22px);line-height:1.45;max-width:34ch;color:color-mix(in srgb,var(--ink) 82%,transparent)}
.tf-cta{align-self:flex-start;margin-top:6px;pointer-events:auto}
.tf-rise{display:block}
/* "Today" pulses once the line has arrived */
@keyframes tl-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--tl-line) 55%,transparent)}100%{box-shadow:0 0 0 1.6vw transparent}}
@keyframes tl-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.tl-live.tl-pulse .tl-item:last-child .tl-node{animation:tl-ring 1.6s ease-out infinite}
.tl-live.tl-pulse .tl-endcap{animation:tl-beat 1.6s ease-in-out infinite;transform-origin:left center}
@media(max-width:820px){
  .tl-feature{grid-template-columns:1fr;gap:20px;padding:84px 7vw 6vw;align-content:start}
  .tf-logo{aspect-ratio:2/1;max-height:30vh}
  .tf-role{font-size:9vw}
  .tf-line{font-size:4.6vw}
}