/* R7: readable chronology first; decorative motion is optional enhancement. */
.timeline::before { content: none; }
.timeline-track { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 64px; }
.time-point { min-width: 0; }
.time-point strong {
  font-family: var(--sans);
  font-size: clamp(25px, 2.6vw, 36px);
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.time-point span { margin: 16px 0 10px; line-height: 1.5; }
.time-point p { margin: 0; max-width: 21em; font-size: 13px; }
.timeline { scroll-margin-top: 24px; }
@media (max-width: 980px) and (min-width: 721px) {
  .timeline-track { gap: 20px; }
  .time-point strong { font-size: 25px; }
  .time-point span { font-size: 16px; }
}
@media (max-width: 720px) {
  .timeline-track { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 42px; padding: 0 0 0 24px; }
  .timeline-track::before { display: block; width: 1px; height: auto; left: 4px; right: auto; top: 12px; bottom: 32px; background: linear-gradient(var(--gold), var(--line)); }
  .time-point { padding: 0 0 32px 12px; }
  .time-point:last-child { padding-bottom: 0; }
  .time-point::before { top: 8px; left: -29px; }
  .time-point strong { font-size: 30px; line-height: 1.2; }
  .time-point span { margin: 10px 0 7px; }
}
/* One bounded atmosphere pass, not an endless GPU loop or hidden-content reveal. */
@media (prefers-reduced-motion: no-preference) and (min-width: 721px) {
  .hero-atmosphere { animation: shiji-dawn 4s ease-out 1; }
}
@keyframes shiji-dawn {
  from { opacity: .45; transform: translate3d(-18px, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .cover-frame:hover, .button:hover { transform: none; }
}