.journal-ledger {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  background: #efeee5;
  border: 1px solid #deded2;
  border-radius: 5px;
  padding: 24px 27px;
  margin: 0 0 26px;
}

.ledger-index { font: 12px monospace; color: var(--accent); padding-top: 4px; }
.journal-ledger .eyebrow { font-size: 8px; letter-spacing: 1.4px; margin-bottom: 9px; color: #8c8d7d; }
.journal-ledger h2 { font-size: 20px; letter-spacing: -.7px; margin: 0 0 8px; }
.journal-ledger p:not(.eyebrow) { font-size: 11px; line-height: 1.9; color: var(--muted); margin: 0; max-width: 560px; }
.journal-ledger .journal-order { font: 9px/1.8 monospace; color: #7d8174; text-align: right; padding-top: 7px; white-space: pre-line; }

@media (max-width: 680px) {
  .journal-ledger { grid-template-columns: 28px minmax(0, 1fr); gap: 13px; padding: 19px 17px; margin-bottom: 22px; }
  .journal-ledger h2 { font-size: 18px; }
  .journal-ledger p:not(.eyebrow) { font-size: 10px; }
  .journal-ledger .journal-order { grid-column: 2; text-align: left; padding: 0; font-size: 8px; }
}

.timeline-date { display: none; }
.journal-timeline {
  display: block;
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 5px 0 0;
  counter-reset: diary;
}
.journal-timeline::before {
  content: '';
  position: absolute;
  left: 126px;
  top: 0;
  bottom: 28px;
  width: 1px;
  background: #d5d6c9;
}
.journal-timeline .post-card {
  counter-increment: diary;
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  column-gap: 45px;
  margin: 0;
  padding: 0 0 34px;
  min-height: 132px;
  border: 0;
}
.journal-timeline .post-card::before {
  content: '';
  position: absolute;
  left: 121px;
  top: 5px;
  width: 11px;
  height: 11px;
  border: 3px solid var(--paper);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px #c6c8ba;
}
.journal-timeline .post-card::after {
  content: counter(diary, decimal-leading-zero);
  position: absolute;
  left: 108px;
  top: 27px;
  font: 8px monospace;
  color: #989b8d;
}
.journal-timeline .timeline-date {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 4;
  color: #777b70;
  font: 11px/1.5 monospace;
  text-align: right;
  padding-top: 1px;
}
.journal-timeline .post-picture { display: none; }
.journal-timeline .post-meta {
  grid-column: 2;
  margin: 0 0 8px;
  align-self: start;
}
.journal-timeline .post-card h3 {
  grid-column: 2;
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 7px;
}
.journal-timeline .post-card > p {
  grid-column: 2;
  max-width: 590px;
  font-size: 12px;
  margin: 0 0 13px;
}
.journal-timeline .post-bottom {
  grid-column: 2;
  max-width: 590px;
  padding-top: 10px;
}
.journal-timeline .post-bottom > span:first-child { display: none; }

@media (max-width: 680px) {
  .journal-timeline { margin: 0; padding-top: 0; }
  .journal-timeline::before { left: 78px; bottom: 24px; }
  .journal-timeline .post-card { grid-template-columns: 59px minmax(0, 1fr); column-gap: 35px; padding-bottom: 28px; min-height: 120px; }
  .journal-timeline .post-card::before { left: 73px; width: 10px; height: 10px; }
  .journal-timeline .post-card::after { left: 61px; top: 26px; font-size: 7px; }
  .journal-timeline .timeline-date { font-size: 9px; }
  .journal-timeline .post-card h3 { font-size: 16px; }
  .journal-timeline .post-card > p { font-size: 11px; }
}