/* Article entries: the list of the blog and the related articles at the foot of an article.
   An entry is a picture and its text on the page ground, no box. Entries stand two across, a wide one
   and a narrow one that sits lower, and the grid fills row by row, so the sides change with every row. */

.od-entries { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3.4vw, 48px); row-gap: clamp(64px, 7vw, 104px); align-items: start; margin: 0; padding: 0; list-style: none; }
.od-entry { position: relative; min-width: 0; scroll-margin-top: calc(var(--od-header-h) + 32px); }
.od-entry--wide { grid-column: span 7; }
.od-entry--narrow { grid-column: span 5; margin-top: clamp(40px, 6vw, 88px); }
.od-entry--solo { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(20px, 3.4vw, 48px); align-items: end; }
.od-entry[hidden] { display: none; }

.od-entry__media { display: block; aspect-ratio: 3 / 2; }
.od-entry--narrow .od-entry__media { aspect-ratio: 4 / 3; }
.od-entry--solo .od-entry__media { aspect-ratio: 16 / 9; }
.od-entry__media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.od-entry__body { min-width: 0; }
.od-entry__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 22px 0 12px; }
.od-entry--solo .od-entry__top { margin-top: 0; }
.od-entry__top .od-tag { border-width: 1.5px; line-height: 1.6; white-space: nowrap; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.od-entry__top .od-tag:hover, .od-entry__top .od-tag:focus-visible { background: var(--od-brand-deep); border-color: var(--od-brand-deep); color: var(--od-white); }
.od-entry__meta { display: flex; align-items: center; gap: 12px; margin: 0; font-size: var(--od-fs-b5); line-height: 1.6; font-weight: 500; color: var(--od-fg-mute); white-space: nowrap; }
.od-entry__meta span { padding-left: 12px; border-left: 1px solid currentColor; line-height: 1.1; }

.od-entry__title { margin: 0; font-size: var(--od-fs-h4); line-height: 1.1; font-weight: 600; letter-spacing: var(--od-track); color: var(--od-black); text-wrap: balance; overflow-wrap: break-word; }
.od-entry--narrow .od-entry__title { font-size: var(--od-fs-h6); line-height: 1.16; }
/* The title is underlined in orange by the pointer anywhere on the entry, and stays so on the entry the visitor has
   just come back from. The line is the text's own underline: it sits close under each line of a title of two or
   three lines, gives way to descenders and never reaches the line below, however tight the leading. */
.od-entry__title a { color: inherit; text-decoration: underline 2px transparent; text-underline-offset: 0.13em; text-decoration-skip-ink: auto; }
.od-entry:hover .od-entry__title a, .od-entry__title a:focus-visible, .od-entry.is-from .od-entry__title a, .od-entry:target .od-entry__title a { text-decoration-color: var(--od-brand); }
.od-entry__title a:focus-visible { outline: 2px solid var(--od-brand); outline-offset: 4px; }
.od-entry__text { margin: 12px 0 0; max-width: 34em; font-size: var(--od-fs-b3); line-height: 1.5; color: var(--od-fg-soft); text-wrap: pretty; }
.od-entry__more { display: none; }

@media (prefers-reduced-motion: no-preference) {
	.od-entry__title a { transition: text-decoration-color 0.3s ease-out; }
	.od-entry__media img { transition: transform 0.9s var(--od-ease); }
	.od-entry:hover .od-entry__media img, .od-entry:focus-within .od-entry__media img { transform: scale(1.045); }
}

@media (max-width: 600px) {
	.od-entries { row-gap: 56px; }
	.od-entry--wide, .od-entry--narrow, .od-entry--solo { grid-column: 1 / -1; display: block; margin-top: 0; }
	.od-entry--narrow .od-entry__media, .od-entry--solo .od-entry__media { aspect-ratio: 3 / 2; }
	.od-entry__top, .od-entry--solo .od-entry__top { margin: 18px 0 10px; }
	.od-entry__meta { gap: 10px; }
	.od-entry__meta span { padding-left: 10px; }
}

@media print {
	.od-entries { display: block; }
	.od-entry, .od-entry--solo { display: block; margin: 0 0 24pt; break-inside: avoid; }
	.od-entry__media { max-width: 60%; }
}