/* --- Tablet (< 768px) --- */
@media (max-width: 768px) {
  .timeline__line {
    left: 2rem;
  }

  .timeline__node,
  .timeline__node--left,
  .timeline__node--right {
    width: 100%;
    margin-left: 0;
    align-self: stretch;
    padding-left: calc(3rem + var(--timeline-node-size) / 2);
    padding-right: var(--space-sm);
    text-align: left;
  }

  .timeline__node--left .timeline__card,
  .timeline__node--right .timeline__card {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    border-left: 3px solid var(--color-gold);
    border-right: none;
  }

  /* Override mood border for mobile - always left */
  .timeline__node--left[data-mood="hopeful"] .timeline__card,
  .timeline__node--right[data-mood="hopeful"] .timeline__card {
    border-left-color: var(--mood-hopeful);
  }

  .timeline__node--left[data-mood="curious"] .timeline__card,
  .timeline__node--right[data-mood="curious"] .timeline__card {
    border-left-color: var(--mood-curious);
  }

  .timeline__node--left[data-mood="reflective"] .timeline__card,
  .timeline__node--right[data-mood="reflective"] .timeline__card {
    border-left-color: var(--mood-reflective);
  }

  .timeline__node--left[data-mood="melancholy"] .timeline__card,
  .timeline__node--right[data-mood="melancholy"] .timeline__card {
    border-left-color: var(--mood-melancholy);
  }

  .timeline__node--left[data-mood="joyful"] .timeline__card,
  .timeline__node--right[data-mood="joyful"] .timeline__card {
    border-left-color: var(--mood-joyful);
  }

  .timeline__node--left[data-mood="mysterious"] .timeline__card,
  .timeline__node--right[data-mood="mysterious"] .timeline__card {
    border-left-color: var(--mood-mysterious);
  }

  .timeline__marker {
    left: calc(2rem - var(--timeline-node-size) / 2) !important;
    right: auto !important;
  }

  /* All scroll reveals slide from left on mobile */
  .timeline__node--left.scroll-reveal,
  .timeline__node--right.scroll-reveal {
    transform: translateX(-20px) translateY(15px);
  }

  .timeline__node--left.scroll-reveal.is-visible,
  .timeline__node--right.scroll-reveal.is-visible {
    transform: translateX(0) translateY(0);
  }
}

/* --- Mobile (< 480px) --- */
@media (max-width: 480px) {
  :root {
    --timeline-gap: var(--space-md);
  }

  .hero {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }

  .timeline__card {
    padding: var(--space-sm);
  }

  .footer {
    padding: var(--space-lg) var(--space-sm) var(--space-md);
  }
}