/* News items as a timeline: a thin line down the left, each item on a round
   node that carries the icon of its kind, and each item's first sentence set
   larger than the rest. Used on the news page and on the home page. */

.timeline {
  --node: 2.25rem;
}


/* ---------- filter buttons: an icon and a count ---------- */

.filters button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.filters svg { flex: none; }
.filters .n {
  font: 400 0.75rem/1 var(--mono);
  opacity: 0.8;
}


/* ---------- the timeline ---------- */

.item {
  --c: var(--tag-paper);
  --top: 2.25rem;
  position: relative;
  padding: var(--top) 0 0 calc(var(--node) + 1.25rem);
}
.item:first-child { --top: 0rem; }

.item[data-tag="award"]    { --c: var(--tag-award); }
.item[data-tag="people"]   { --c: var(--tag-people); }
.item[data-tag="resource"] { --c: var(--tag-resource); }

/* The line is drawn a piece per item, the height of the item, so that it can
   start at the first node and stop at the last. */
.item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--node) / 2 - 0.5px);
  border-left: 1px solid var(--border);
}
.item:first-child::before { top: calc(var(--node) / 2); }
.item:last-child::before { bottom: auto; height: var(--top); }

.node {
  position: absolute;
  top: var(--top);
  left: 0;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 1px solid var(--c);
  border-radius: 50%;
  color: var(--c);
  background: var(--bg);
}
.node svg { width: 1.125rem; height: 1.125rem; }

/* awards: a filled node with a ring round it, like a medal */
.item[data-tag="award"] .node {
  color: var(--bg);
  background: var(--c);
  outline: 1px solid var(--c);
  outline-offset: 3px;
}

/* the item someone was linked to (news.html#id) */
.item:target .node {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* the kind of news, as a word next to its node */
.item .kicker { min-height: var(--node); }
.item .tag {
  padding: 0;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--c);
  background: none;
}

.item .kicker + .first { margin-top: 0.35rem; }

/* larger rather than bold, so the words the item itself sets in bold still stand out */
.item .first {
  max-width: 40rem;
  font: 400 var(--size-large)/1.38 var(--serif);
  color: var(--text);
}
/* only weights 400 and 600 of the serif are loaded */
.item .first strong { font-weight: 600; }

.item .rest {
  max-width: 40rem;
  margin-top: 0.4rem;
  font: 400 var(--size-prose)/1.55 var(--serif);
  color: var(--muted);
}

.item .more-lines {
  max-width: 40rem;
  margin-top: 0.75rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
  font: 400 var(--size-prose)/1.5 var(--serif);
  color: var(--muted);
}

@media (min-width: 40rem) {
  .item .first { text-wrap: pretty; }
}

@media (max-width: 39.99rem) {
  .timeline { --node: 1.75rem; }
  .item { --top: 1.75rem; padding-left: calc(var(--node) + 0.75rem); }
}

@media print {
  .item { break-inside: avoid; }
}