/* Writing · builds on site.css. Essays as ruled entries, dated in the margin like a docket. */
.essay-list { list-style: none; border-top: 1.5px solid var(--ink); max-width: 46rem; }
.essay-list li { border-bottom: 1px solid var(--rule); }
.essay-list a {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: 1.5rem;
    padding: 1.6rem 0 1.7rem;
    text-decoration: none;
    color: var(--ink);
}
.essay-list .date { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--graphite); padding-top: 0.45rem; font-variant-numeric: tabular-nums; }
.essay-list .title { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; text-wrap: balance; }
.essay-list .desc { grid-column: 2; font-family: var(--serif); font-size: 1.1875rem; line-height: 1.55; color: var(--text); margin-top: 0.6rem; }
.essay-list .where { grid-column: 2; font-family: var(--mono); font-size: 0.75rem; color: var(--graphite); margin-top: 0.75rem; }
.essay-list a:hover .title, .essay-list a:focus-visible .title { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; }

@media (max-width: 860px) {
    .essay-list a { grid-template-columns: minmax(0, 1fr); }
    .essay-list .date { padding-top: 0; margin-bottom: 0.4rem; }
    .essay-list .desc, .essay-list .where { grid-column: 1; }
    .essay-list .desc { font-size: 1.125rem; }
}