/* About / timeline — layered on top of tufte.css + custom.css.
   A big centred vertical timeline that reveals itself on scroll. */

body { overflow-x: hidden; }

/* break the timeline out of Tufte's narrow column and centre it in the viewport */
.about-bleed { position: relative; left: 50%; margin-left: -50vw; width: 100vw; }
.about-inner { max-width: 880px; margin: 0 auto; padding: 0 1.2rem; }
.about-inner h1 { margin-bottom: .2rem; }
.about-inner .subtitle { margin-top: 0; }

/* the timeline + its central spine */
.timeline { position: relative; margin: 2.6rem 0 5rem; }
.spine {
  position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
  transform: translateX(-50%); background: #e4e4de; border-radius: 2px;
}
.spine-fill {                                   /* coloured progress fill (height set by JS) */
  position: absolute; top: 0; left: 0; width: 100%; height: 0;
  background: linear-gradient(#0099FF, #2f8fd8); border-radius: 2px;
}
.spine-fill::after {                            /* glowing dot that leads the fill down the spine */
  content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%; background: #0099FF;
  box-shadow: 0 0 0 4px rgba(0,153,255,.15), 0 0 10px rgba(0,153,255,.6);
}

/* one entry = half width, sitting on one side of the spine */
.tl-item { position: relative; width: 50%; box-sizing: border-box; padding: 0 3rem; margin: 0 0 2.6rem; }
.tl-item.right { margin-left: 50%; }

/* logo badge, centred on the spine */
.tl-badge {
  position: absolute; top: 2px; width: 56px; height: 56px; z-index: 2;
  background: #fff; border: 1px solid #e0ded6; border-radius: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
  display: flex; align-items: center; justify-content: center;
}
.tl-badge img { width: 72%; height: 72%; object-fit: contain; display: block; }
.tl-item.right .tl-badge { left: -28px; }
.tl-item.left  .tl-badge { right: -28px; }
.tl-item.in .tl-badge { border-color: #bfe3ff; box-shadow: 0 4px 16px rgba(0,153,255,.22); }
.tl-item[data-kind="edu"].in .tl-badge { border-color: #cfe8df; box-shadow: 0 4px 16px rgba(47,143,107,.18); }
.tl-item[data-kind="award"].in .tl-badge { border-color: #ecdcb0; box-shadow: 0 4px 16px rgba(192,138,46,.22); }

/* the text card */
.tl-card {
  background: #fbfaf7; border: 1px solid #e8e6df; border-radius: 7px;
  padding: 1rem 1.25rem 1.1rem; box-shadow: 0 1px 4px rgba(0,0,0,.045);
}
.tl-tag {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: #0099FF; display: inline-block; margin-bottom: .35rem;
}
.tl-item[data-kind="edu"] .tl-tag { color: #2f8f6b; }
.tl-item[data-kind="award"] .tl-tag { color: #c08a2e; }
.tl-role {
  font-family: "et-book", Palatino, Georgia, serif; font-weight: 600;
  font-size: 1.5rem; line-height: 1.15; margin: 0 0 .1rem;
}
.tl-org {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: 1.02rem; color: #3b3b3b; margin-bottom: .15rem;
}
.tl-meta {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: .9rem; color: #9a978e; margin-bottom: .65rem;
}
/* .tl-card .tl-text out-specifies tufte's `body.layout-post p {width:55%}`,
   which was clamping the paragraph to ~half the card width. */
.tl-card .tl-text { width: 100%; margin: 0; font-size: 1.22rem; line-height: 1.5; color: rgb(59,59,59); }

/* ---- scroll-reveal animations ---- */
/* card: slides in from its side + fades up */
.tl-item.reveal .tl-card {
  opacity: 0; transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1);
}
.tl-item.right.reveal .tl-card { transform: translate(48px, 12px); }
.tl-item.left.reveal  .tl-card { transform: translate(-48px, 12px); }
/* same specificity as the .reveal rules above (and declared later) so the settled
   state actually wins — otherwise revealed cards stay shifted +48px and overflow. */
.tl-item.right.in .tl-card,
.tl-item.left.in  .tl-card { opacity: 1; transform: translate(0, 0); }

/* badge: springs in (scale + fade), slightly after the card starts moving */
.tl-item.reveal .tl-badge {
  opacity: 0; transform: scale(.2);
  transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1), border-color .4s, box-shadow .4s;
}
.tl-item.in .tl-badge {
  opacity: 1; transform: scale(1);
  transition-delay: .14s, .14s, 0s, 0s;
}

@media (prefers-reduced-motion: reduce) {
  .tl-item.reveal .tl-card, .tl-item.reveal .tl-badge {
    opacity: 1 !important; transform: none !important; transition: none;
  }
}

/* ---- extra sections below the timeline (skills / languages / honors) ---- */
.about-extra { margin: 0 0 5rem; }
.about-block { margin: 2.8rem 0 0; }
.about-h {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: #0099FF;
  border-bottom: 1px solid #e4e4de; padding-bottom: .45rem; margin: 0 0 1.15rem;
}

/* friendly language pills: flag + name + a casual note */
.langs { display: flex; flex-wrap: wrap; gap: .9rem; }
.lang {
  display: flex; align-items: center; gap: .7rem;
  background: #fbfaf7; border: 1px solid #e8e6df; border-radius: 999px;
  padding: .5rem 1.1rem .5rem .8rem;
}
.lang-flag { font-size: 1.7rem; line-height: 1; }
.lang-text { display: flex; flex-direction: column; line-height: 1.2; }
.lang-name { font-family: "et-book", Palatino, Georgia, serif; font-size: 1.3rem; font-weight: 600; }
.lang-note {
  font-family: "Gill Sans", "Gill Sans MT", "Lato", Calibri, sans-serif;
  font-size: .9rem; color: #8a877e;
}

/* reveal-on-scroll for the extra blocks */
.about-block.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.about-block.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .about-block.reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---- mobile: single left-aligned rail ---- */
@media (max-width: 720px) {
  .spine { left: 27px; }
  .tl-item, .tl-item.right, .tl-item.left {
    width: 100%; margin-left: 0; padding: 0 0 0 68px; text-align: left;
  }
  .tl-item.right .tl-badge, .tl-item.left .tl-badge { left: 0; right: auto; }
  .tl-badge { width: 48px; height: 48px; }
  /* no horizontal slide on phones (would overflow); fade up only */
  .tl-item.right.reveal .tl-card, .tl-item.left.reveal .tl-card { transform: translateY(18px); }
}