/* 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; }

/* Horizontal pinned timeline inside the INTERVALS board. */
.timeline-horizontal{--tl-bg:#faf7ec;margin:46px 0 0;padding:26px 20px 20px;background:#faf7ec;box-shadow:3px 5px 7px #30201444;min-width:0}
.timeline-horizontal>header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:0 0 12px}
.timeline-horizontal .tl-scroll-hint{font:13px/1.5 Arial,sans-serif;margin:8px 0 0;color:#62695e}
.tl-controls{display:flex;gap:8px}.tl-controls button{width:44px;height:44px;border:1px solid #788b7e;background:#faf7ec;color:#174e4a;cursor:pointer;font:24px/1 Arial,sans-serif}.tl-controls button:disabled{opacity:.35;cursor:default}
.tl-scroll{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-color:#536f5b #e1dfd2;scrollbar-width:auto;padding:12px 4px 20px}
.timeline-horizontal .tl-line{display:flex;max-width:none;width:max-content;gap:0;padding:0;align-items:stretch}
.timeline-horizontal .tl-mark,.timeline-horizontal .tl-mark:last-child{flex:0 0 290px;width:290px;padding:30px 20px 12px 0;scroll-snap-align:start}
.timeline-horizontal .tl-mark::before{display:block;left:0;right:0;top:9px;bottom:auto;width:auto;height:2px}
.timeline-horizontal .tl-mark:last-child::before{right:calc(100% - 12px)}
.timeline-horizontal .tl-mark::after{left:4px;top:3px;box-shadow:0 0 0 4px #faf7ec}
.timeline-horizontal .tl-date{position:static;width:auto;text-align:left;line-height:1.4;margin:0 0 16px;font-weight:700}
.timeline-horizontal .tl-body{padding:18px;background:#f1eee3;border:1px solid #ddd6c6;height:calc(100% - 38px);overflow-wrap:anywhere}
.timeline-horizontal .tl-mark p,.timeline-horizontal .tl-now p:first-of-type{font:16px/1.65 Georgia,serif;margin:0 0 12px}
.timeline-horizontal .tl-tiles{display:block;margin-top:18px}.timeline-horizontal .tl-tiles li+li{margin-top:10px}.timeline-horizontal .tl-tile{display:flex;flex-direction:column;font-size:13px}.timeline-horizontal .tl-kind{border-right:0;border-bottom:1px solid #d4cebd;padding:8px 12px}.timeline-horizontal .tl-what{padding:10px 12px}
.timeline-horizontal .tl-now .tl-body{background:#dce5d8;border-color:#a9b8a4}
.tl-scroll:focus-visible{outline:3px solid #315844;outline-offset:4px}
@media(max-width:760px){.timeline-horizontal{padding:20px 14px 16px;margin-top:34px}.timeline-horizontal>header{flex-wrap:wrap;gap:12px}.timeline-horizontal .tl-mark,.timeline-horizontal .tl-mark:last-child{flex-basis:250px;width:250px;padding-right:16px}.timeline-horizontal h2{font-size:25px}}