/* Personal timeline for homepage updates. */
.post-list { position: relative; gap: 46px; padding: 12px 0 12px 50px; }
  .post-list::before { content: ''; position: absolute; top: 31px; bottom: 36px; left: 12px; width: 2px; background: linear-gradient(#326c6c, #aac4b8 88%, transparent); }
  .post { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px 28px; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .post::before { content: ''; position: absolute; left: -44px; top: 11px; width: 14px; height: 14px; border: 3px solid var(--bg); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px #8eafa3; }
  .post:first-child::before { box-shadow: 0 0 0 5px #326c6c12, 0 0 0 1px #8eafa3; }
  .post > .date { grid-column: 1 / -1; grid-row: 1; align-self: start; margin: 0; padding: 9px 15px; color: var(--accent-dark); border: 1px solid #cbded4; background: #e5eeea; border-radius: 8px; font-size: 14px; font-weight: 700; }
  .post:first-child > .date { background: var(--accent); color: white; border-color: var(--accent); }
  .post-content { grid-column: 1; grid-row: 2; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: 0 5px 20px #293e3e04; gap: 20px; }
  .post:not(:has(.post-media)) .post-content { grid-column: 1 / -1; }
  .post-media { grid-column: 2; grid-row: 2; align-self: start; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 9px 24px #293e3e0a; transform: rotate(1deg); }
  .post:nth-child(even) .post-media { transform: rotate(-1deg); }
  .post-media img { width: 100%; height: auto; max-height: none; border-radius: 6px; object-fit: contain; }
  .post-content .description { font-size: 17px; line-height: 1.75; }
  .post-footer { border-top: 1px solid var(--line); padding-top: 18px; }
  @media (max-width: 760px) {
    .post-list { padding-left: 28px; gap: 34px; }
    .post-list::before { left: 3px; }
    .post { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .post::before { left: -31px; }
    .post-media { grid-column: 1; grid-row: 2; max-width: 100%; transform: none; }
    .post:nth-child(even) .post-media { transform: none; }
    .post-content { grid-column: 1; grid-row: 3; padding: 20px; }
    .post:not(:has(.post-media)) .post-content { grid-row: 2; }
    .post-content .description { font-size: 16px; line-height: 1.7; }
    .post-footer { gap: 8px; }
    .like-button, .comments-toggle { font-size: 13px; padding: 9px 11px; }
  }

/* Keep the existing introduction above the timeline on mobile as well. */
.story > .interaction-note { order: 0; }