.notepad {
    --rule: 1.6rem; /* one ruled line */
    --pad-left: 3.25rem; /* room for the binding holes */
    --date-col: 6rem;
    --margin-x: calc(var(--pad-left) + var(--date-col) + 0.75rem); /* the margin line */
    --line: color-mix(in srgb, var(--accent-2) 30%, transparent);
    --margin: color-mix(in srgb, var(--warn) 50%, transparent);

    padding: var(--rule) var(--space-md) var(--rule) var(--pad-left);

    /* Top to bottom: binding holes, the margin line, the ruled lines. No
       corner screws here: paper isn't bolted down. */
    background-image:
        radial-gradient(
            circle at 1.15rem calc(var(--rule) * 2),
            var(--bg) 0 0.3rem,
            var(--border) 0.33rem 0.45rem,
            transparent 0.5rem
        ),
        linear-gradient(
            to right,
            transparent var(--margin-x),
            var(--margin) var(--margin-x) calc(var(--margin-x) + 2px),
            transparent 0
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0 calc(var(--rule) - 1px),
            var(--line) calc(var(--rule) - 1px) var(--rule)
        );
    background-size:
        100% calc(var(--rule) * 3),
        auto,
        auto;
    /* `space` places whole binding holes only, never one cut off at the bottom */
    background-repeat: space, no-repeat, repeat;
}

.notes {
    list-style: none;
    line-height: var(--rule);
}

.notes li {
    display: grid;
    grid-template-columns: var(--date-col) minmax(0, 1fr);
    column-gap: 1.5rem;
}

.notes li + li {
    margin-top: var(--rule);
}

.notes a {
    font-weight: 700;
}

.note-date {
    font-size: 0.9rem;
    white-space: nowrap;
    color: color-mix(in srgb, var(--text) 70%, transparent);
}

@media (max-width: 44rem) {
    .notepad {
        --pad-left: 2.75rem;
        --date-col: 0rem;
        --margin-x: calc(var(--pad-left) - 0.75rem);
    }

    .notes li {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
}

/* Year headings: one ruled line tall, so the text underneath stays on the lines */
.notepad > .year {
    height: var(--rule);
    margin-top: var(--rule);
    font-size: 1rem;
    line-height: var(--rule);
    color: var(--accent);
}

.notepad > .year:first-of-type {
    margin-top: 0;
}

.notepad > ol.notes {
    margin-top: 0;
}