/* =============================================
   CAREER TIMELINE (About page)
   Reads CAREER_DATA (career-data.js); drawn by career-timeline.js.
   Colours and fonts come from the site's :root variables; the few
   fixed colours (eras, sectors, categories) live in career-data.js.
   ============================================= */

#career-timeline {
  --ct-top: 84px;          /* sticky offset: clears the fixed "Sae Kim" name */
  --ct-band: rgba(10, 9, 8, 0.035);
  position: relative;
  /* The About page is 860px wide and left-aligned at 40px; the timeline
     breaks out to span the viewport (3px custom scrollbar accounted for). */
  width: calc(100vw - 84px);
  margin: 56px 0 64px;
}
#career-timeline.ct-empty { display: none; }

.ct-panel { position: sticky; top: var(--ct-top); }
#career-timeline.ct-static .ct-panel { position: static; transform: none !important; width: auto !important; }

/* ---- header: one line of context and the two filters ---- */
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 10px; }
.ct-sub { font-family: var(--mono); font-size: 8px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--g3); margin: 0; }
.ct-filters { display: flex; gap: 22px; }
.ct-filters button {
  background: none; border: 0; padding: 0 0 4px; cursor: pointer;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--g4); border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.ct-filters button:hover { color: var(--ink); }
.ct-filters button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.ct-filters button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* ---- drawing surface: a wide canvas inside a clipped window ---- */
.ct-viewport { position: relative; width: 100%; overflow: hidden; }
#career-timeline.ct-static .ct-viewport { overflow-x: auto; }
.ct-canvas { position: relative; will-change: transform; }
.ct-canvas > * { position: absolute; left: 0; }

/* filter changes slide the zones rather than redrawing them */
#career-timeline.ct-animate .ct-canvas > *,
#career-timeline.ct-animate .ct-canvas,
#career-timeline.ct-animate .ct-viewport { transition: top 0.5s ease, height 0.5s ease, opacity 0.35s ease; }

/* era bar */
.ct-era { width: 100%; height: 10px; border-radius: 5px; }
.ct-era-label {
  position: absolute; top: 50%; line-height: 1;
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92); white-space: nowrap; transform: translate(-50%, -50%);
}
.ct-era-label.left { transform: translate(0, -50%); }
.ct-era-label.right { transform: translate(-100%, -50%); }
.ct-event-tri {
  position: absolute; top: -9px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor;
}
.ct-event-line { width: 0; border-left: 1px dashed currentColor; opacity: 0.55; pointer-events: none; }
.ct-event-label {
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.15em; text-transform: uppercase;
  white-space: nowrap; padding-left: 5px; pointer-events: none;
}

/* year axis */
.ct-year { font-family: var(--mono); font-size: 9px; color: var(--g3); transform: translateX(-50%); white-space: nowrap; transition: color 0.2s; }
.ct-year.cur { color: var(--ink); }
.ct-break { font-size: 10px; color: var(--g4); transform: translateX(-50%) skewX(-20deg); letter-spacing: 0.1em; }

/* education / practice track: a winding path drawn as SVG strokes, grey base
   under one coloured stretch per stint, revealed as the walker advances. */
.ct-track-base, .ct-track { width: 100%; }
.ct-track-base svg, .ct-track svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.ct-track-base path:not(.ct-wedge) { stroke: var(--g5); }
.ct-track-base .ct-wedge { fill: var(--g5); }
.ct-seg { cursor: pointer; outline: none; }
.ct-seg path { transition: filter 0.2s; }
.ct-seg:hover path, .ct-seg:focus-visible path { filter: brightness(1.08); }
.ct-seg:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.ct-seg-label {
  position: absolute; font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92); white-space: nowrap; pointer-events: none;
}

/* school and firm logos: round badges on the path beside the label, revealed
   with the path. A badge grows under the pointer like a thumbnail. */
.ct-badges { width: 100%; pointer-events: none; }
.ct-badge {
  position: absolute; margin: -16px 0 0 -16px; border-radius: 50%; overflow: hidden; z-index: 1;
  background: var(--paper); border: 2px solid currentColor; box-sizing: border-box; pointer-events: auto;
  opacity: 0; transform: scale(0.5); transition: opacity 0.35s ease, transform 0.25s ease, box-shadow 0.25s;
}
.ct-badge img { display: block; width: 100%; height: 100%; }
.ct-badge.on { opacity: 1; transform: scale(1); }
.ct-badge.on:hover, .ct-badge.on:focus-visible { transform: scale(3); z-index: 4; box-shadow: 0 2px 6px rgba(10, 9, 8, 0.18); }
#career-timeline.ct-static .ct-badge { opacity: 1; transform: none; transition: none; }
/* a logo fits inside its circle; a photo fills it */
.ct-logo img { object-fit: contain; padding: 14%; box-sizing: border-box; background: #fff; }

/* the walker: a chunky cartoon in solid ink, the face in paper colour.
   The body is a filled bean; the limbs are stubby strokes. */
.ct-walker { pointer-events: none; overflow: visible; z-index: 2; }
.ct-fig { stroke-linecap: round; stroke-linejoin: round; }
.ct-fig-ink { fill: #2a2724; stroke: none; }
.ct-fig-limb { fill: none; stroke: #2a2724; stroke-width: 7px; }
.ct-fig-face { fill: none; stroke: var(--paper); stroke-width: 1.6px; }
.ct-fig-face.filled { fill: var(--paper); }
.ct-fig-face-fill { fill: var(--paper); stroke: none; }

/* ---- items: one column per project or achievement ---- */
.ct-col { display: block; width: 16px; text-decoration: none; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; transition: opacity 0.35s ease; }
.ct-col.plain { cursor: default; }
.ct-col.faded { opacity: 0.4; }
.ct-col.off { opacity: 0 !important; pointer-events: none; }
.ct-col:focus { outline: none; }
.ct-col:hover, .ct-col:focus-visible { z-index: 4; }
.ct-col.gig .ct-name { font-size: 9px; color: var(--g3); }
.ct-line { position: absolute; left: 50%; top: 0; width: 1px; background: var(--g4); transform-origin: top; }
.ct-line-up { transform-origin: bottom; }
.ct-thumb {
  position: absolute; left: 50%; border-radius: 50%; overflow: hidden;
  background: var(--paper); border: 2px solid currentColor; box-sizing: border-box;
}
.ct-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-col:hover .ct-thumb, .ct-col:focus-visible .ct-thumb { box-shadow: 0 2px 6px rgba(10, 9, 8, 0.18); }
.ct-name {
  position: absolute; left: 50%; top: 0;
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; line-height: 1; letter-spacing: 0.04em;
  color: var(--g2); padding: 6px 0 2px;
}
.ct-col.key .ct-name { font-weight: 500; color: var(--ink); }
.ct-col:hover .ct-name { color: var(--ink); }
.ct-col:focus-visible .ct-name, .ct-col:focus-visible .ct-alabel { outline: 1px solid var(--ink); outline-offset: 2px; }
.ct-bar { width: 6px; border-radius: 3px; transform-origin: top; }
.ct-bar.off { opacity: 0 !important; }
.ct-band { width: 100%; }
.ct-band.odd { background: var(--ct-band); }
.ct-band-label {
  position: absolute; left: 0; top: 0; padding-left: 6px;
  font-family: var(--mono); font-size: 7px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--g3);
}
/* achievement labels read upward from the track */
.ct-alabel {
  position: absolute; left: 50%; top: 0;
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--mono); font-size: 9px; line-height: 1; letter-spacing: 0.04em;
  padding: 2px 0 6px;
}
.ct-col.bold .ct-alabel { font-weight: 500; }

/* chart */
.ct-chart { width: 100%; }
.ct-chart svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.ct-cband { position: absolute; left: 0; width: 100%; }
.ct-cband.odd { background: var(--ct-band); }
.ct-cband-label { position: absolute; left: 6px; top: 0; font-family: var(--mono); font-size: 7px; color: var(--g4); }

/* ---- scroll reveal ---- */
.ct-col .ct-line { transform: scaleY(0); transition: transform 0.45s ease; }
.ct-col .ct-thumb, .ct-col .ct-name { opacity: 0; transform: translate(-50%, -8px); transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s, color 0.2s, box-shadow 0.25s; }
.ct-col.on .ct-thumb { transition: opacity 0.4s ease 0.15s, transform 0.25s ease, box-shadow 0.25s; }
.ct-col .ct-alabel { opacity: 0; transform: translate(-50%, 8px) rotate(180deg); transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s; }
.ct-bar { transform: scaleY(0); opacity: 0; transition: transform 0.5s ease 0.25s, opacity 0.35s ease 0.25s; }
.ct-col.on .ct-line { transform: scaleY(1); }
.ct-col.on .ct-thumb, .ct-col.on .ct-name { opacity: 1; transform: translate(-50%, 0); }
.ct-col.on .ct-alabel { opacity: 1; transform: translate(-50%, 0) rotate(180deg); }
.ct-bar.on { transform: scaleY(1); opacity: 1; }
.ct-bar.faded.on { opacity: 0.4; }
.ct-col.on:hover .ct-thumb, .ct-col.on:focus-visible .ct-thumb { transform: translate(-50%, 0) scale(3); }
#career-timeline.ct-static .ct-col .ct-line,
#career-timeline.ct-static .ct-bar { transform: scaleY(1); opacity: 1; transition: none; }
#career-timeline.ct-static .ct-bar.faded { opacity: 0.4; }
#career-timeline.ct-static .ct-col .ct-thumb,
#career-timeline.ct-static .ct-col .ct-name { opacity: 1; transform: translate(-50%, 0); transition: none; }
#career-timeline.ct-static .ct-col .ct-alabel { opacity: 1; transform: translate(-50%, 0) rotate(180deg); transition: none; }
#career-timeline.ct-static .ct-clip { clip-path: none !important; }

.ct-cursor { width: 1px; background: var(--ink); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.ct-cursor.show { opacity: 0.15; }
.ct-cursor-year {
  position: absolute; top: -18px; left: 0; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink); white-space: nowrap;
}
#career-timeline.ct-static .ct-cursor { display: none; }

/* ---- tooltip ---- */
.ct-tip {
  position: absolute; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 0.15s;
  background: var(--ink); color: var(--paper); border-radius: 3px; padding: 8px 10px;
  font-family: var(--sans); font-size: 11px; font-weight: 300; line-height: 1.45; max-width: 260px; white-space: normal;
}
.ct-tip.show { opacity: 1; }
.ct-tip b { font-weight: 500; display: block; }
.ct-tip span { display: block; color: var(--g4); }

/* ---- legend (the sector dots are buttons that show or hide that type) ---- */
.ct-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; }
.ct-lgroup { display: inline-flex; flex-wrap: wrap; gap: 6px 18px; }
.ct-lgroup.off { display: none; }
.ct-legend span, .ct-legend button { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g3); }
.ct-legend button { background: none; border: 0; padding: 0; cursor: pointer; transition: opacity 0.2s, color 0.2s; }
.ct-legend button:hover { color: var(--ink); }
.ct-legend button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.ct-legend button[aria-pressed="false"] { opacity: 0.4; }
.ct-legend button[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }
.ct-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-sizing: border-box; }
.ct-legend i.faded { opacity: 0.4; background: var(--g2); }

/* ---- plain list for screen readers ---- */
.ct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- mobile: vertical timeline ---- */
.ct-m .ct-head { align-items: flex-start; flex-direction: column; gap: 14px; }
.ct-m-list { list-style: none; margin: 8px 0 0; padding: 0; border-left: 1px solid var(--g5); }
.ct-m-year { display: grid; grid-template-columns: 54px 1fr; gap: 0 10px; padding: 12px 0 12px 0; border-bottom: 1px solid var(--g5); }
.ct-m-year.off, .ct-m-item.off { display: none; }
.ct-m-yr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; padding-left: 10px; padding-top: 2px; position: relative; }
.ct-m-yr::before { content: ''; position: absolute; left: -4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ct-m-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ct-m-item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ct-m-item.faded { opacity: 0.45; }
.ct-m-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.ct-m-chip { flex: none; width: 10px; height: 22px; border-radius: 5px; }
.ct-m-thumb { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; border: 2px solid currentColor; box-sizing: border-box; background: var(--paper); }
.ct-m-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-m-track .ct-m-thumb { margin-left: -4px; }
.ct-m-text { min-width: 0; }
.ct-m-name { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--ink); text-decoration: none; }
.ct-m-name.key { font-weight: 500; }
a.ct-m-name { border-bottom: 1px solid var(--g4); }
a.ct-m-name:hover { border-bottom-color: var(--ink); }
.ct-m-meta { font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g3); margin-top: 3px; }
.ct-m-event { font-family: var(--mono); font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; }

@media (max-width: 767px) {
  #career-timeline { width: auto; margin: 48px 0 48px; }
  .ct-panel { position: static; }
}