.timeline-main { padding-top: var(--space-32); }

.timeline-header { margin-bottom: var(--space-48); }
.timeline-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-16);
  font-variation-settings: "opsz" 60;
}
.timeline-headline em { font-style: italic; color: var(--accent); font-weight: 400; }
.timeline-sub {
  font-family: var(--serif-body);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
}

.timeline-list {
  position: relative;
  padding-left: var(--space-32);
  border-left: 2px solid var(--hairline);
}

.timeline-week {
  position: relative;
  margin-bottom: var(--space-48);
}
.timeline-week::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-32) - 1px);
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  transform: translateX(-50%);
}
.timeline-week.thriving::before { border-color: var(--status-thriving); }
.timeline-week.steady::before { border-color: var(--status-steady); }
.timeline-week.checkin::before { border-color: var(--status-checkin); }
.timeline-week.risk::before { border-color: var(--status-risk); }

.timeline-week-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
  margin-bottom: var(--space-12);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.timeline-week-headline {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.3;
  margin: 0 0 var(--space-16);
  font-variation-settings: "opsz" 24;
}

.timeline-section {
  margin-bottom: var(--space-16);
}
.timeline-section-label {
  font-family: var(--sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}
.timeline-section-body {
  font-family: var(--serif-body);
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink);
}
.timeline-section-body.muted { color: var(--ink-muted); font-style: italic; }

/* First week (most recent) gets a drop-cap on its first reflection */
.timeline-week.first .timeline-section.reflection .timeline-section-body::first-letter {
  font-family: var(--serif-display);
  float: left;
  font-size: 3.2em;
  line-height: 0.9;
  margin-right: 8px;
  margin-top: 6px;
  color: var(--accent);
  font-variation-settings: "opsz" 144;
}