/* Notes: text-post blocks laid out like the Works index — a vertical list under
   the fixed top banner, scrolling in the band above the tools footer. Rows run
   the full page width (inset 16px, like the chrome rules) and every block is
   the same height. */
.notes-view {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  padding: calc(var(--banner-height) + var(--content-gap)) 16px calc(var(--footer-h) + var(--content-gap));
  width: 100%;
}

.notes-list { touch-action: pan-y; }

.notes-list {
  height: 100%;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  width: 100%;
}

.note-card { border-top: 1px solid var(--rule-color); }
.notes-list > .note-card:first-child { border-top: 0; }

.note-link {
  color: inherit;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr 220px;
  height: 220px;            /* uniform block height */
  padding: 20px 0;
  text-decoration: none;
}
.note-card.no-cover .note-link { grid-template-columns: 1fr; }

.note-text { display: flex; flex-direction: column; min-width: 0; }

.note-title {
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-date { font-size: var(--font-size-b1); margin-top: 6px; opacity: 0.7; }

.note-excerpt {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: var(--font-size-b1);
  -webkit-line-clamp: 3;
  line-clamp: 3;
  line-height: 1.3;
  margin-top: auto;
  max-width: 56ch;
  overflow: hidden;
}

.note-cat { font-size: var(--font-size-b1); margin-top: 14px; opacity: 0.8; text-transform: lowercase; }

.note-cover { overflow: hidden; }
.note-cover img { display: block; height: 100%; object-fit: cover; width: 100%; }

@media (max-width: 700px) {
  .note-link { grid-template-columns: 1fr; height: auto; }
  .note-cover { aspect-ratio: 4 / 3; order: -1; }
  .note-title { white-space: normal; }
}