/* Notes index: notes grouped by year, one line each. */

.notes__band {
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  border-radius: 6px 6px 0 0;
  background: var(--tag);
}

.notes__crumb { margin: 26px 0 0; color: var(--paper-muted); font: .8rem var(--f-ui); }

.notes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 26px; }
.notes__crumb + .notes__head { margin-top: 4px; }
.notes__head h1 { margin: 0; font-size: 2.3rem; line-height: 1.1; }
.notes__count { color: var(--paper-muted); font: .8rem var(--f-ui); }

.notes__description { max-width: 34em; margin: 6px 0 0; color: var(--paper-muted); font-size: .9em; }

.notes__year { width: max-content; margin: 1.1em 0 0; rotate: -2deg; color: var(--pen); font-size: 1.05em; }

.notes__list { margin: 4px 0 0; padding: 0; list-style: none; }

.note-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 2px dashed var(--dot);
}
.note-row__date { color: var(--paper-muted); font: .75rem var(--f-mono); }
.note-row__title { text-decoration: none; }
.note-row__title:hover { text-decoration: underline; text-decoration-color: var(--pen); }
.note-row__tags { display: flex; gap: 5px; }

@media (max-width: 640px) {
  .notes__band { border-radius: 14px 14px 0 0; }
  .note-row { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; }
  .note-row__date { grid-column: 1 / -1; }
}