.example-cover { max-width: none; background: #e7ebe2; padding-top: 2rem; padding-bottom: 4rem; }
.example-back { display: inline-block; margin-bottom: 3.5rem; font-size: .8rem; }
.example-cover h1 { font-size: clamp(2.3rem, 5vw, 4.8rem); }
.example-lead { font-size: 1.05rem; }
.example-caption { margin-top: .75rem; color: #52624f; font-size: .8rem; }
.example-intro, .example-before { display: grid; gap: 2.5rem; }
.example-draft { padding: 1.25rem; border-left: 3px solid #8c7856; background: #efede5; font-size: .8rem; align-self: start; }
.example-before, .example-day { border-top: 1px solid #d5d8cf; }
.example-timeline { list-style: none; padding: 0; margin: 3rem 0 0; }
.example-timeline li { display: grid; gap: 1rem; position: relative; border-left: 1px solid #b5c0af; padding: 0 0 3rem 1.5rem; margin-left: .3rem; }
.example-timeline li:last-child { padding-bottom: 0; }
.example-timeline li::before { content: ''; position: absolute; top: .55rem; left: -.3rem; width: .55rem; height: .55rem; border-radius: 50%; background: #8c7856; }
.example-time { color: #736247; font-size: .8rem; letter-spacing: .06em; }
.example-timeline h3 { font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; font-size: 1.4rem; }
.example-timeline div { max-width: 42rem; }
.example-timeline div p { font-size: 1.0625rem; line-height: 2.1; }
.example-timeline div p + p { margin-top: 1rem; }
.example-boundaries { max-width: none; background: #e7ebe2; }
.example-ending { text-align: center; }
.example-ending .prose { max-width: 40rem; margin: 2rem auto; text-align: left; }
.example-ending > a { display: block; width: fit-content; margin: 1.5rem auto 0; font-size: .85rem; }
@media (min-width: 1024px) {
  .example-cover { padding-top: 3rem; }
  .example-intro, .example-before { grid-template-columns: 1fr 1.15fr; gap: 6vw; }
  .example-timeline li { grid-template-columns: 12rem 1fr; gap: 2rem; padding-left: 2rem; }
}