/* INTERVALS timeline: dates in the margin, one line, one dot per moment. */
.timeline {
  --tl-bg: #d9d5ca;
  --tl-ink: #1d2322;
  --tl-teal: #174e4a;
  --tl-paper: #fbf8f0;
  --tl-y: 11px;
  --tl-node: 13px;
  --tl-gutter: 36px;
  margin: 0 0 72px;
}
.timeline > header { margin: 0 0 40px; }
.timeline h2 { font: 400 30px/1.2 'Courier New', monospace; margin: 0; }
.timeline .tl-line { margin: 0; padding: 0; list-style: none; max-width: 56rem; }
.timeline .tl-mark { position: relative; padding: 0 0 48px var(--tl-gutter); }
.timeline .tl-mark:last-child { padding-bottom: 0; }
.timeline .tl-mark::before {
  content: "";
  position: absolute;
  left: 11px;
  top: var(--tl-y);
  bottom: calc(var(--tl-y) * -1);
  width: 2px;
  background: var(--tl-teal);
}
.timeline .tl-mark:last-child::before { display: none; }
.timeline .tl-mark::after {
  content: "";
  position: absolute;
  left: calc(12px - var(--tl-node) / 2);
  top: calc(var(--tl-y) - var(--tl-node) / 2);
  width: var(--tl-node);
  height: var(--tl-node);
  border-radius: 50%;
  background: var(--tl-teal);
  box-shadow: 0 0 0 4px var(--tl-bg);
}
.timeline .tl-date {
  display: block;
  margin: 0 0 6px;
  color: var(--tl-teal);
  font: 400 15px/1.3 'Courier New', monospace;
  letter-spacing: .01em;
}
.timeline .tl-mark p { margin: 0 0 .6em; max-width: 36rem; }
.timeline .tl-mark p:last-of-type { margin-bottom: 0; }
.timeline .tl-tiles { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.timeline .tl-tile {
  display: inline-flex;
  align-items: stretch;
  min-height: 44px;
  border: 1px solid var(--tl-ink);
  border-radius: 2px;
  background: var(--tl-paper);
  color: var(--tl-ink);
  font: 15px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  transition: background-color .12s, color .12s, border-color .12s;
}
.timeline .tl-kind {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid currentColor;
  color: var(--tl-teal);
  font-weight: 700;
}
.timeline .tl-what { display: flex; align-items: center; padding: 8px 14px; }
.timeline .tl-tile:hover, .timeline .tl-tile:focus-visible {
  background: var(--tl-teal);
  border-color: var(--tl-teal);
  color: #f4efe3;
}
.timeline .tl-tile:hover .tl-kind, .timeline .tl-tile:focus-visible .tl-kind { color: #f4efe3; }
.timeline .tl-tile:focus-visible { outline: 3px solid var(--tl-ink); outline-offset: 3px; }
.timeline .tl-now p:first-of-type { font-size: 25px; line-height: 1.4; font-weight: 400; }
.timeline .tl-now::after { background: var(--tl-ink); }
.timeline .tl-now .tl-date { color: var(--tl-ink); }
.timeline .tl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 720px) {
  .timeline { --tl-y: 15px; --tl-date: 11rem; --tl-gap: 1.75rem; }
  .timeline .tl-mark { padding-left: calc(var(--tl-date) + var(--tl-gap) * 2); }
  .timeline .tl-mark::before { left: calc(var(--tl-date) + var(--tl-gap) - 1px); }
  .timeline .tl-mark::after { left: calc(var(--tl-date) + var(--tl-gap) - var(--tl-node) / 2); }
  .timeline .tl-date {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--tl-date);
    margin: 0;
    text-align: right;
    line-height: 30px;
  }
}
@media (prefers-reduced-motion: reduce) { .timeline .tl-tile { transition: none; } }

/* Story under the timeline (INTERVALS page) */
.story-now { max-width: 40rem; margin: 72px auto 0; padding: 0 16px 24px; border-left: 0; background: none; }
.story-now h2 { margin: 2.4em 0 .6em; font: 400 clamp(1.5rem, 3vw, 1.9rem)/1.25 "Courier New", Courier, monospace; color: #174e4a; }
.story-now h2:first-child { margin-top: 0; }
.story-now p { margin: 0 0 1.1em; font: 1.15rem/1.75 Georgia, "Times New Roman", serif; color: #1d2322; }
.story-now p.pull { margin: 1.4em 0; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1.25; color: #174e4a; }