html,body{margin:0;min-height:100%;}body{font-family:Geist,Inter,"SF Pro Display","PingFang SC",-apple-system,BlinkMacSystemFont,sans-serif;}
.journey-shell {
  --journey-ink: #101828;
  --journey-muted: #6a7282;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  color: var(--journey-ink);
  font-family: Geist, Inter, "SF Pro Display", "PingFang SC", -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: -0.015em;
  background: #fff;
}

.journey-sidebar {
  position: sticky;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  height: 100vh;
  overflow-y: auto;
  padding: 15px;
  border-right: 1px solid #e5e7eb;
  background: #fafafa;
}

.journey-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  margin-bottom: 20px;
  padding: 0 2px;
  color: inherit;
  text-decoration: none;
}

.journey-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.journey-profile-copy { display: grid; gap: 2px; }
.journey-profile-copy strong { font-size: 17.5px; font-weight: 650; line-height: 25px; }
.journey-profile-copy span { color: var(--journey-muted); font-size: 17.5px; line-height: 23px; }
.journey-sections,.journey-socials { display: flex; flex-direction: column; gap: 5px; }

.journey-section,.journey-social {
  box-sizing: border-box;
  display: flex;
  width: 100%;
  height: 45px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--journey-ink);
  font-size: 17.5px;
  line-height: 25px;
  text-decoration: none;
}

.journey-section-label,.journey-social-label { display: flex; align-items: center; gap: 10px; min-width: 0; }
.journey-section-label img { width: 16px; height: 16px; object-fit: contain; }
.journey-section.is-active { color: #fff; background: #000; }
.journey-count { display: grid; width: 25px; height: 25px; place-items: center; flex: none; border: 1px solid #e5e7eb; border-radius: 5px; background: #f3f4f6; color: #6a7282; font-size: 15px; line-height: 20px; }
.journey-section.is-active .journey-count { border-color: #4a5565; background: #364153; color: #e5e7eb; }
.journey-divider { height: 1px; margin: 30px 0; background: #e5e7eb; }
.journey-online-title { margin: 0 0 10px; padding: 0 10px; color: #4b5565; font-size: 15px; font-weight: 500; line-height: 25px; }
.journey-social { height: 45px; }
.journey-social-label img,.journey-external { width: 16px; height: 16px; object-fit: contain; }
.journey-social:hover { background: #f0f1f2; }

.journey-main {
  min-width: 0;
  background: linear-gradient(180deg, #e2f5ff 0, #f7fcff 95px, #fff 190px);
}

.journey-content { box-sizing: border-box; width: min(100%, 960px); margin: 0 auto; padding: 120px 0 80px; }
.journey-content h1 { margin: 0; color: #000; font-size: 37.5px; font-weight: 650; line-height: 45px; letter-spacing: -1.875px; }
.journey-years { display: grid; gap: 30px; margin-top: 30px; }
.journey-year { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: start; }
.journey-year > h2 { margin: 0; color: #000; font-size: 25px; font-weight: 650; line-height: 35px; letter-spacing: -1.25px; }
.journey-timeline { display: flex; flex-direction: column; min-width: 0; }

.journey-entry { padding-bottom: 40px; }
.journey-entry-content { min-width: 0; }
.journey-entry-content h3 { margin: 0; color: #101828; font-size: 20px; font-weight: 650; line-height: 31px; letter-spacing: -0.5px; }
.journey-entry-content p { margin: 0; color: #101828; font-size: 17.5px; font-weight: 400; line-height: 25px; }
.journey-photo-frame { width: 100%; aspect-ratio: var(--journey-photo-ratio, 4 / 3); margin-top: 10px; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 14px; background: #f3f4f6; }
.journey-photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.journey-photo--original { display: block; max-width: 100%; height: auto; margin-top: 10px; border: 1px solid #e5e7eb; border-radius: 14px; }
.journey-record-link { display: inline-block; margin-top: 10px; color: #1769ff; font-size: 14px; text-decoration: none; }
.journey-place { margin-top: 5px !important; color: var(--journey-muted) !important; font-size: 14px !important; }

@media (max-width: 1100px) and (min-width: 981px) {
  .journey-sidebar { padding: 15px 12px; }
  .journey-content { padding-top: 80px; }
}

@media (max-width: 980px) {
  .journey-shell { grid-template-columns: minmax(0, 1fr); }
  .journey-sidebar { position: relative; height: auto; overflow: visible; padding: 14px 20px; border-right: 0; border-bottom: 1px solid #e5e7eb; }
  .journey-profile { margin-bottom: 12px; }
  .journey-sections,.journey-socials { flex-direction: row; overflow-x: auto; gap: 5px; padding-bottom: 2px; }
  .journey-section,.journey-social { width: auto; min-width: max-content; height: 42px; padding: 0 10px; font-size: 15px; }
  .journey-count,.journey-external { display: none; }
  .journey-divider { margin: 12px 0 8px; }
  .journey-online-title { margin: 0 0 4px; }
  .journey-main { min-height: calc(100vh - 160px); }
  .journey-content { width: min(100%, 840px); padding: 48px 24px 64px; }
  .journey-content h1 { font-size: 34px; line-height: 42px; }
  .journey-year { grid-template-columns: 72px minmax(0, 1fr); }
}

@media (max-width: 560px) {
  .journey-sidebar { padding: 12px 14px; }
  .journey-profile-copy strong,.journey-profile-copy span { font-size: 15px; }
  .journey-content { padding: 34px 16px 48px; }
  .journey-content h1 { font-size: 31px; }
  .journey-year { grid-template-columns: 58px minmax(0, 1fr); }
  .journey-year > h2 { font-size: 20px; }
  .journey-entry-content h3 { font-size: 17px; line-height: 25px; }
  .journey-entry-content p { font-size: 15px; line-height: 23px; }
  .journey-photo { border-radius: 10px; }
}