.branch-timeline { position: relative; margin: 36px 0 0; padding: 0 0 110px; }
.branch-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, #c7cdbe 0%, #c7cdbe calc(100% - 100px), transparent 100%); }
.timeline-month { position: relative; margin: 0 0 42px; }
.month-label { position: relative; width: max-content; margin: 0 auto 26px; padding: 8px 14px; background: var(--paper); color: var(--muted); font: 12px/1.6 'Courier New', monospace; letter-spacing: 1px; text-transform: uppercase; }
.month-branches { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; list-style: none; padding: 0; margin: 0; align-items: start; }
.branch { position: relative; min-width: 0; }
.branch:nth-child(even) { margin-top: 72px; }
.branch::before { content: ''; position: absolute; top: 27px; right: -32px; height: 1px; width: 32px; background: #c7cdbe; }
.branch::after { content: ''; position: absolute; right: -37px; top: 23px; width: 9px; height: 9px; background: #657d43; border-radius: 50%; box-shadow: 0 0 0 5px var(--paper); }
.branch:nth-child(even)::before { right: auto; left: -32px; }
.branch:nth-child(even)::after { right: auto; left: -36px; }
.branch-note { display: block; background: #faf9f4; border: 1px solid var(--line); padding: 24px; text-decoration: none; }
a.branch-note:hover { border-color: #8c9b78; color: var(--ink); }
a.branch-note:focus-visible { outline: 2px solid #657d43; outline-offset: 5px; }
.branch-note h3 { margin: 12px 0 18px; font: 400 27px/1.2 Georgia, serif; letter-spacing: -.5px; }
.branch-note .node-action { color: #52693a; font-size: 13px; }
.branch-note .date { display: block; font: 12px/1.6 'Courier New', monospace; color: var(--muted); margin-bottom: 12px; }
.branch-note .source-body { border: 0; padding: 0; }
.branch-note .source-body::before { display: none; }
.related-report { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.branch-note .meta { font: 11px/1.7 'Courier New', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.discussion-item { margin: 0; }
.discussion-item + .discussion-item { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.discussion-item p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.discussion-item .source-link { font-size: 13px; }
.twitter-tweet { margin: 20px 0; max-width: 100%; }
.branch-note { overflow-wrap: anywhere; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; display: block; border: 1px solid var(--line); background: #161616; margin: 20px 0 12px; }
@media(max-width: 680px) {
  .branch-timeline::before { left: 6px; }
  .month-label { margin-left: 0; padding-left: 0; }
  .month-branches { grid-template-columns: 1fr; gap: 26px; padding-left: 30px; }
  .branch::before,.branch:nth-child(even)::before { left: -24px; right: auto; width: 24px; }
  .branch::after,.branch:nth-child(even)::after { left: -28px; right: auto; }
  .branch-note { padding: 20px; }
  .branch:nth-child(even) { margin-top: 0; }
  .branch-note h3 { font-size: 24px; }
}

/* Compact media previews keep the timeline readable as the archive grows. */
.tweet-preview { zoom: .75; width: 133.333333%; max-width: 550px; margin: 24px auto; }
.tweet-preview .twitter-tweet { margin: 0 auto !important; }
.subnodes { list-style: none; margin: 0 0 0 22px; padding: 18px 0 0 20px; border-left: 1px solid #c7cdbe; }
.subnodes li { position: relative; margin-bottom: 12px; }
.subnodes li::before { content: ''; position: absolute; left: -21px; top: 30px; width: 20px; border-top: 1px solid #c7cdbe; }
.subnodes li::after { content: ''; position: absolute; left: -24px; top: 27px; width: 6px; height: 6px; border-radius: 50%; background: #879475; }
.subnode { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); text-decoration: none; background: #faf9f4; }
.subnode:hover { border-color: #879475; }
.subnode img, .play-preview { width: 84px; height: 66px; flex: 0 0 84px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.play-preview { display: grid; place-items: center; font-size: 28px; color: #657d43; }
.subnode time { display: block; font: 10px/1.5 'Courier New', monospace; color: var(--muted); margin-bottom: 6px; }
.subnode strong { display: block; font: 400 17px/1.3 Georgia, serif; }
.media-note .video-frame { max-width: 280px; }
@media(max-width: 420px) {
  .subnodes { margin-left: 12px; padding-left: 14px; }
  .subnodes li::before { left: -15px; width: 14px; }
  .subnodes li::after { left: -18px; }
  .subnode { gap: 10px; }
  .subnode img, .play-preview { width: 60px; flex-basis: 60px; height: 52px; }
}

/* Marginal notes point back to their source cards without covering neighbors. */
.sketch-note { position: relative; margin: 0 12px 20px 28px; padding: 16px 20px; background: #edf1e4; border: 1px solid #8b9d76; border-radius: 26px 19px 29px 14px / 16px 25px 18px 23px; color: #46563a; box-shadow: 2px 3px 0 #657d4310; }
.sketch-note::before { content: ''; position: absolute; bottom: -10px; left: 28px; width: 17px; height: 17px; background: #edf1e4; border-right: 1px solid #8b9d76; border-bottom: 1px solid #8b9d76; transform: skewY(15deg) rotate(45deg); }
.sketch-note p, .note-toggle { position: relative; margin: 0; font: italic 17px/1.5 Georgia, serif; }
.note-toggle { display: block; width: 100%; border: 0; padding: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.note-toggle:focus-visible { outline: 2px solid #657d43; outline-offset: 5px; }
.note-attachment { padding-top: 12px; }
.note-attachment[hidden] { display: none; }
.branch:hover > .sketch-note, .branch:focus-within > .sketch-note { border-color: #52693a; }
.branch-timeline::before { width: 2px; }
.month-label { border: 1px solid #c7cdbe; border-radius: 3px; font-size: 13px; letter-spacing: 1.8px; padding: 9px 16px; }
.branch-note > .date { width: max-content; padding: 4px 9px; margin: -5px 0 16px -9px; border-left: 2px solid #879b70; color: #526343; background: #e8eddf80; font-weight: bold; letter-spacing: .6px; }
.branch::after { width: 10px; height: 10px; background: var(--paper); border: 2px solid #657d43; }
.branch:hover::after { background: #657d43; }

/* A simple editorial opening, followed by the paper-colored timeline. */
.opening-art { margin: 32px calc(50% - 50vw) 0; width: 100vw; }
.opening-art img { display: block; width: 100%; height: auto; }
.opening-art figcaption { padding: 0 20px; margin-top: 10px; text-align: right; color: #505749; font: 12px/1.6 Arial, sans-serif; }
.opening-art cite { font-style: italic; }
@media(max-width:680px) { .opening-art { margin-top: 24px; } .opening-art figcaption { text-align: center; } }
.branch-note .date { font-size: 13px; color: #46583a; }
.branch-note .node-action, .discussion-item .source-link { font-size: 14px; color: #40562d; }
.discussion-item p { color: #505749; font-size: 15px; }
.month-label { color: #46523e; border-color: #86967a; }
.branch-timeline::before { background: linear-gradient(to bottom, #8a9c79 0%, #8a9c79 calc(100% - 100px), transparent 100%); }
.branch::before { background: #8a9c79; }
.subnodes { border-color: #8a9c79; }
.subnodes li::before { border-color: #8a9c79; }
.subnode time { font-size: 12px; color: #46583a; }

/* Header artwork starts flush with the page; title follows beneath it. */
main:has(> .opening) { padding-top: 0; }
.opening .opening-art { margin-top: 0; }
.opening #title { margin: 36px 0 0; text-align: center; }
.video-frame { margin-left: auto; margin-right: auto; }

/* Every marker uses the same center as the timeline spine. */
.branch-timeline::before { transform: translateX(-50%); }
.branch::after { right: -32px; top: 27px; transform: translate(50%, -50%); width: 14px; height: 14px; }
.branch:nth-child(even)::after { left: -32px; right: auto; transform: translate(-50%, -50%); }
.branch-note .date { font-size: 17px; font-weight: 700; color: #365126; letter-spacing: .5px; }
.month-label { font-size: 17px; font-weight: 700; color: #365126; border-color: #657d43; }
.subnode time { font-size: 14px; font-weight: 700; color: #365126; }
.timeline-controls { display: flex; justify-content: center; gap: 4px; margin: 24px auto; padding: 5px; width: max-content; border: 1px solid #a5b197; border-radius: 6px; background: var(--paper); }
.timeline-controls button { border: 0; border-radius: 3px; padding: 10px 20px; font: 14px Arial, sans-serif; color: #40562d; background: transparent; cursor: pointer; }
.timeline-controls button[aria-pressed="true"] { background: #40562d; color: #fff; }
.timeline-controls button:focus-visible, .overview-event:focus-visible, .overview-month:focus-visible { outline: 2px solid #657d43; outline-offset: 3px; }
.timeline-overview[hidden], .branch-timeline[hidden] { display: none; }
.timeline-overview { max-width: 820px; margin: 32px auto 80px; border-left: 2px solid #8a9c79; padding-left: 26px; }
.overview-group { margin-bottom: 32px; }
.overview-group h3 { color: #365126; font: 700 20px 'Courier New', monospace; }
.overview-event, .overview-month { display: flex; align-items: baseline; gap: 20px; width: 100%; padding: 15px 18px; border: 1px solid var(--line); margin: 8px 0; text-align: left; background: #faf9f4; color: var(--ink); cursor: pointer; }
.overview-event:hover, .overview-month:hover { border-color: #657d43; background: #edf1e4; }
.overview-event time { flex: 0 0 70px; font: 700 14px 'Courier New', monospace; color: #365126; }
.overview-event span, .overview-month span { font: 20px/1.35 Georgia, serif; }
.overview-month small { margin-left: auto; white-space: nowrap; color: #40562d; }
@media(max-width:680px) {
  .branch::after, .branch:nth-child(even)::after { left: -24px; right: auto; transform: translate(-50%, -50%); }
  .month-label { padding-left: 16px; }
  .timeline-overview { padding-left: 14px; }
  .overview-event { gap: 10px; padding: 12px; }
  .overview-event span { font-size: 18px; }
}

/* A persistent edge control keeps zoom available while reading. */
.timeline-controls { position: fixed; z-index: 20; right: 12px; top: 50%; transform: translateY(-50%); flex-direction: column; margin: 0; box-shadow: 0 3px 14px #262b2412; }
.timeline-controls button { padding: 10px 8px; font-size: 12px; }
.timeline-overview { padding-bottom: 65vh; }
@media(max-width: 900px) {
  .timeline-controls { top: auto; bottom: 16px; right: 12px; transform: none; flex-direction: row; }
  .timeline-controls button { padding: 10px 14px; }
}

/* Small source branches finish at their final node. */
.subnodes { border-left: 0; position: relative; }
.subnodes::before { content: ''; position: absolute; left: -1px; top: 0; height: 48px; border-left: 1px solid #8a9c79; }
.subnodes li::before { height: calc(100% + 12px); border-left: 1px solid #8a9c79; }
.subnodes li:last-child::before { height: 0; border-left: 0; }

.branch-note:has(.tweet-preview) { border: 0; background: transparent; }
.tweet-heading { display: none; }
.tweet-commentary { margin: 20px 0; }
.tweet-commentary p { color: #46563a; font: italic 17px/1.5 Georgia, serif; }