.notes-page .notes-container {
    max-width: 840px;
}

.note-entry {
    padding: 2.5rem 0;
    border-top: 1px solid var(--border-color);
    overflow-wrap: anywhere;
}

.note-entry time {
    color: var(--text-light);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.note-title {
    margin: 0.75rem 0 1.25rem;
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    line-height: 1.5;
}

.note-title a {
    color: var(--text-color);
    text-decoration: none;
}

.note-title a:hover,
.note-permalink:hover {
    color: var(--primary-strong);
}

.note-title a:focus-visible,
.note-permalink:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.note-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.note-permalink,
.notes-empty {
    color: var(--text-light);
    font-size: 0.9rem;
}

.notes-empty {
    border-top: 1px solid var(--border-color);
    padding: 2.5rem 0;
    line-height: 1.9;
}

.notes-page .article-body > :first-child {
    margin-top: 0;
}

.notes-page .article-body img {
    max-height: 560px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 600px) {
    .note-entry {
        padding: 1.75rem 0;
    }
}