/* Past readings as a quiet stack of doors. */
@layer components {

.readings { margin: 1rem 0 2rem; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.readings__reading {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem;
  padding: 0.7rem 1rem; text-decoration: none;
  background: var(--paper-high); border: 1px solid var(--line); border-radius: 10px;
}
@media (hover: hover) {
  .readings__reading:hover { text-decoration: none; border-color: var(--gold-dim); }
}
.readings__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.readings__about { color: var(--ink-dim); font-size: 0.85rem; font-style: italic; }
.readings__when { margin-left: auto; color: var(--ink-dim); font-family: var(--font-ui); font-size: 0.78rem; }

}