:root{
  --bg:#03050B; --ink:#F2EEE6; --muted:#8B93A5; --faint:#5A6274; --body:#D3CFC7;
  --accent:#E8B877; --accent-soft:rgba(232,184,119,.14); --on-accent:#140F08;
  --line:rgba(255,255,255,.08); --node-bg:#05070E; --hover:rgba(255,255,255,.03); --sel:transparent;
  --toggle-bg:transparent; --toggle-ink:var(--ink);
  --serif:"Outfit","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --sans:"Outfit","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --cols:minmax(280px,320px) 1fr; --panel-col:1; --stage-col:2;
  --fill-glow:none;
}

/* Panel: quieter against the globe */
aside{
  background:linear-gradient(180deg,rgba(6,8,14,.88),rgba(3,5,11,.92));
  border-right:1px solid rgba(255,255,255,.06);
  padding:28px 22px 18px 26px;
}

/* Header: name only, slightly smaller; quiet lang words */
.top{align-items:flex-start;margin-bottom:2px}
.n2{font-family:var(--sans);font-size:11px;color:rgba(90,98,116,.85);letter-spacing:.22em;font-weight:500}
html[lang^="zh"] .n2{font-family:var(--sans);font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:500;color:var(--faint)}
.id{margin:6px 0 28px}
.name{font-family:var(--sans);font-weight:500;font-size:36px;line-height:1.08;letter-spacing:-.02em;margin:0}
html[lang^="zh"] .name{font-weight:500;font-size:34px;letter-spacing:.06em}

.lang{background:transparent;border:0;padding:0;gap:2px;border-radius:0}
.lang button{
  background:transparent;border:0;border-radius:0;
  font-size:11px;font-weight:500;letter-spacing:.06em;
  color:var(--faint);padding:2px 6px;min-width:0;opacity:.7;
}
.lang button:hover{color:var(--muted);opacity:1}
.lang button[aria-pressed="true"]{
  background:transparent;color:var(--accent);opacity:1;
  box-shadow:none;font-weight:600;
}

#t-role,.id .role{display:none!important}
#hero,.hero{display:none!important}
.kicker{display:none!important}

/* Timeline head + circular icon play */
.tl-head{
  padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.06);
  align-items:center;
}
.tl-title{color:var(--faint);font-size:10px;letter-spacing:.22em;font-weight:500}
.tl-head .play,
body.tour-idle .tl-head .play,
body.tour-started .tl-head .play{
  width:28px;height:28px;padding:0;gap:0;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(232,184,119,.9);color:#140F08;
  box-shadow:none;
}
.tl-head .play:hover{background:#F2C88D}
.tl-head .play svg{width:10px;height:10px;margin-left:1px}
.tl-head .play #play-txt,
.tl-head .play .play-txt{display:none!important}

/* Timeline rhythm: thinner rail, lighter years, client names primary */
.tl-scroll{padding:18px 4px 12px 0}
.tl-wrap{--rx:44px}
.tl-rail,.tl-fill{width:1px;margin-left:-0.5px}
.tl-rail{background:rgba(255,255,255,.1)}
.tl-fill{background:rgba(232,184,119,.55);box-shadow:none}

.row{grid-template-columns:40px 22px 1fr;margin:0 0 6px}
.row.entry-row{margin:0 0 18px}
.row .y{
  font-family:var(--sans);font-size:12px;font-weight:400;
  padding-top:14px;color:rgba(160,168,184,.72);letter-spacing:.04em;
}
.row.gap{height:18px;margin:0}
.row.gap .y{font-size:9px;padding-top:5px;opacity:.45}
.row.gap .node{width:3px;height:3px;margin-top:8px;background:rgba(255,255,255,.18);border:0}
.row .node{
  width:6px;height:6px;margin-top:16px;
  border:1px solid rgba(232,184,119,.55);background:transparent;
  box-shadow:none;transform:none;
}
.row.first .node{width:7px;height:7px;margin-top:15px}
.row.past .node{background:rgba(232,184,119,.7);border-color:transparent}
.row.past .y{color:rgba(232,184,119,.7)}
.row.gap.past .node{background:rgba(232,184,119,.4);opacity:1}
.row.gap.past .y{opacity:.5}
.row.now .y{font-style:italic;font-size:11px;color:rgba(148,156,172,.5)}
.row.now.past .node{transform:none;background:var(--accent)}
.row.active .node{
  transform:none;background:var(--accent);border-color:transparent;
  box-shadow:0 0 0 3px rgba(232,184,119,.15);
}

.entry{padding:0}
.client{
  padding:10px 8px 10px 8px;border-radius:0;
  background:transparent;position:relative;
  border:0;border-left:0;
  transition:color .25s;
}
.client:hover{background:transparent}
.client:hover .nm{color:rgba(242,238,230,.88)}
.client .nm{
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.25;
  color:rgba(242,238,230,.62);letter-spacing:-.01em;
  transition:font-size .25s ease,font-weight .25s ease,color .25s ease;
}
html[lang^="zh"] .client .nm{font-size:15px;font-weight:400}
.client .meta{font-size:11px;color:var(--faint);margin-top:4px;letter-spacing:.02em}
.client[aria-pressed="true"]{
  background:transparent!important;
  border:0!important;border-left:0!important;
  box-shadow:none!important;
}
.client[aria-pressed="true"] .nm{
  color:var(--ink);font-size:19px;font-weight:600;letter-spacing:-.02em;
}
html[lang^="zh"] .client[aria-pressed="true"] .nm{font-size:17px;font-weight:600}
.client[aria-pressed="true"] .meta{color:rgba(232,184,119,.7)}
/* Active year tint (not a side bar) */
.row.active .y{color:var(--accent)!important;font-weight:500}
.row.active .node{background:var(--accent);border-color:transparent}

/* Never cram blurbs into the left column */
.inl{display:none!important}

.foot{font-size:10px;color:rgba(90,98,116,.7);margin-top:16px;letter-spacing:.02em}

/* Detail card: overlay on globe (right) */
.detail{
  right:28px;top:28px;left:auto;
  width:min(360px,calc(100% - 48px));
  background:rgba(9,13,24,.82);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(232,184,119,.22);
  border-radius:2px;
  box-shadow:0 28px 70px -18px rgba(0,0,0,.75);
  opacity:0;transform:translate3d(14px,4px,0);
  transition:opacity .48s ease,transform .48s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.detail.show{opacity:1;transform:none}
.detail h2{font-family:var(--sans);font-size:28px;font-weight:600;letter-spacing:-.02em}
html[lang^="zh"] .detail h2{font-size:24px;font-weight:600}

.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 52%,rgba(0,0,0,.5) 100%)}
.loading{font-family:var(--sans);font-style:normal;font-size:15px;font-weight:400}

.mk .dot{background:#FFE2B0;box-shadow:0 0 0 2px rgba(255,214,150,.22),0 0 12px 3px rgba(255,190,110,.5)}
.mk .lbl{
  background:rgba(6,9,16,.78);color:var(--ink);
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(8px);
  font-family:var(--sans);font-size:12px;font-weight:550;letter-spacing:-.01em;
  padding:5px 10px 5px;border-radius:8px;line-height:1.15;
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  white-space:nowrap;
}
.mk .lbl.two{padding:6px 10px 7px}
.mk .lbl .lbl-nm{font-size:12.5px;font-weight:600;line-height:1.15;color:inherit}
.mk .lbl .lbl-co{font-size:11px;font-weight:400;opacity:.62;letter-spacing:.02em;line-height:1.2}
.mk.active .lbl{background:var(--accent);color:#140F08;border-color:var(--accent)}
.mk.active .lbl .lbl-co{opacity:.7;color:#140F08}
.mk.active .dot{background:#fff;box-shadow:0 0 0 2px rgba(255,214,150,.28),0 0 14px 5px rgba(255,190,110,.55)}
.mk.left .lbl{align-items:flex-end;text-align:right}
.glabel{background:rgba(6,9,16,.88);color:var(--ink);border:1px solid rgba(232,184,119,.3)}

.row.future-full{display:none!important}
.row.entry-row.future .entry{display:none!important}
.row.entry-row.future{opacity:.35;margin:0 0 8px}
.row.entry-row.future .y{cursor:pointer}
.row.entry-row.future .node{cursor:pointer;opacity:.6}
.mk.future{opacity:0!important;pointer-events:none!important}

/* Center circular play CTA on globe */
.tour-cta{
  position:absolute;z-index:5;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72px;height:72px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;
  cursor:pointer;
  background:rgba(232,184,119,.92);
  color:#140F08;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 48px -8px rgba(0,0,0,.7),0 0 36px rgba(232,184,119,.4);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  pointer-events:auto;
}
.tour-cta:hover{background:#F2C88D;transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 0 1px rgba(255,255,255,.22) inset,0 20px 56px -8px rgba(0,0,0,.75),0 0 48px rgba(232,184,119,.5)}
.tour-cta:active{transform:translate(-50%,-50%) scale(.98)}
.tour-cta[hidden]{display:none!important}
.tour-cta svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.tour-cta #tour-cta-txt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:820px){
  .name{font-size:26px} html[lang^="zh"] .name{font-size:26px}
  .id{margin:6px 0 8px}
  .n2{font-size:10px}
  .client .nm{font-size:14px}
  .client[aria-pressed="true"] .nm{font-size:16px}
  html[lang^="zh"] .client[aria-pressed="true"] .nm{font-size:15px}
  .client{padding:8px 6px}
  .client .meta{font-size:10px;margin-top:2px}
  .row{grid-template-columns:36px 18px 1fr;margin:0 0 4px}
  .row.entry-row{margin:0 0 10px}
  .row .y{font-size:11px;padding-top:10px}
  .row .node{width:5px;height:5px;margin-top:12px}
  .row.first .node{width:6px;height:6px;margin-top:11px}
  .row.gap{height:12px}
  .tl-head{padding:10px 0 8px}
  .tl-scroll{padding:6px 16px 160px!important;margin:0}
  .tl-wrap{--rx:40px}
  .tour-cta{width:64px;height:64px}
  .tour-cta svg{width:20px;height:20px}

  /* Globe pinned top ~42%; never covered by a card */
  .stage{
    height:42vh!important;
    min-height:260px!important;
    max-height:45vh!important;
  }
  .row{scroll-margin-top:calc(42vh + 8px);scroll-margin-bottom:120px}

  /* On select: expand timeline entry inline; hide floating detail card */
  .detail,.detail.show{display:none!important;opacity:0!important;pointer-events:none!important}
  .row.active .inl{
    display:block!important;
    padding:2px 6px 12px;
  }
  .inl .when{
    font-size:11px;color:rgba(232,184,119,.75);letter-spacing:.02em;
  }
  .inl .blurb{
    margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--body);
  }
  html[lang^="zh"] .inl .blurb{line-height:1.7;text-align:justify}

  /* Only active client's two-line marker label while one is selected */
  body.has-sel .mk:not(.active) .lbl{
    opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  }
  body.has-sel .mk:not(.active){pointer-events:auto}

  .foot{display:none}
  .top{padding:12px 16px 0}
  .id{padding:0 16px}
  .tl-head{margin:0 16px}
}