.home-topics-band {
  padding-block: clamp(42px, 5vw, 72px) 24px;
  border-block: 1px solid #dae4ef;
  background: #f1f6fc;
  color: var(--ink);
}

.home-topics-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.home-topic-group { min-width: 0; }
.home-topic-routes { padding-inline-end: clamp(26px, 4.5vw, 67px); }
.home-topic-events { border-inline-start: 1px solid #c7d6e7; padding-inline-start: clamp(26px, 4.5vw, 67px); }

.home-topic-group .eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .07em;
  color: #365e8a;
}

.home-topic-group h2 {
  margin: 0;
  max-width: 18em;
  font-size: clamp(28px, 2.45vw, 36px);
  line-height: 1.25;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.home-topic-intro, .home-topic-stages dd, .home-topic-list p {
  font-size: 16px;
  line-height: 1.7;
  color: #445b73;
}

.home-topic-intro { margin: 14px 0 0; max-width: 58ch; }
.home-topic-stages { display: grid; gap: 8px; margin: 14px 0 0; }
.home-topic-stages > div { display: grid; grid-template-columns: 6.7em minmax(0, 1fr); gap: 12px; }
.home-topic-stages dt { font-size: 15px; line-height: 1.7; font-weight: 750; color: #294b70; }
.home-topic-stages dd { margin: 0; }
:lang(zh) .home-topic-stages > div { grid-template-columns: 2.3em minmax(0, 1fr); }

.home-topic-list { margin: 21px 0 0; padding: 0; list-style: none; border-top: 1px solid #bdcee1; }
.home-topic-list li { border-bottom: 1px solid #cbd9e9; }
.home-topic-list a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 14px 0;
  color: var(--ink);
}

.home-topic-list h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.45;
  font-weight: 730;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}

.home-topic-list p { margin: 5px 0 0; }
.home-topic-date { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 4px; color: #315b87; font-size: 14px; line-height: 1.5; font-weight: 700; }
.home-topic-underway { color: #36574f; }
.home-topic-arrow { color: var(--blue); font-size: 19px; line-height: 1; }
.home-topic-index {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 7px;
  color: var(--blue);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 750;
}

.home-topics-overview { margin-top: 14px; border-top: 1px solid #c7d6e7; text-align: end; }
.home-topics-band a:hover h3, .home-topic-index:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.home-topics-band a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (max-width: 760px) {
  .home-topics-band { padding-block: 40px 15px; }
  .home-topics-layout { grid-template-columns: minmax(0, 1fr); gap: 21px; }
  .home-topic-routes { padding-inline-end: 0; }
  .home-topic-events { border-inline-start: 0; border-top: 1px solid #b9cbdf; padding: 26px 0 0; }
  .home-topic-group .eyebrow { margin-bottom: 9px; }
  .home-topic-group h2 { font-size: 28px; line-height: 1.32; }
  .home-topic-list { margin-top: 16px; }
  .home-topic-list a { gap: 10px; padding-block: 12px; }
  .home-topic-list h3 { font-size: 18px; }
  .home-topic-stages > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :lang(zh) .home-topic-stages > div { grid-template-columns: 2.3em minmax(0, 1fr); gap: 10px; }
  .home-topics-overview { margin-top: 7px; text-align: start; }
}