/* blog.html – the blog listing (review round 2, Oct 4, 2026) */

/* Most read: a ruled planner page beside the intro. A rank column, a blue margin rule, one post per ruled line.
   The four are the top /post/ pages by GA4 landing-page sessions, Jan 1 to Oct 2, 2026. */
.mostread { margin-top: 2.5rem; background: #fff; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10,40,81,0.06), 0 22px 44px -22px rgba(10,40,81,0.35); }
.mostread__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.125rem; background: var(--gray-50); border-bottom: 1px solid var(--rule); }
.mostread__head h2 { margin: 0; font-size: 1.125rem; letter-spacing: -0.005em; }
.mostread__head span { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.mostread__list { list-style: none; margin: 0; padding: 0 0 1.5rem;
  /* the planner's margin rule runs the whole page, past the last entry */
  background: linear-gradient(to right, transparent calc(3.25rem - 1px), var(--card-rule) calc(3.25rem - 1px), var(--card-rule) 3.25rem, transparent 3.25rem); }
.mostread__list > li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); align-items: baseline; margin: 0; padding: 0.8rem 1.125rem 0.75rem 0; border-bottom: 1px solid var(--card-rule); }
.mostread__n { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-3); text-align: center; }
.mostread__list > li > div { padding-left: 1rem; min-width: 0; }
.mostread__list a { display: block; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9875rem; line-height: 1.35; }
.mostread__list a:hover { color: var(--link); text-decoration: underline; }
.mostread__tag { display: block; margin-top: 0.3rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) { .mostread { margin-top: 0.5rem; } }

/* Every post leads with its image: the live post's own header image, cropped to 16:9 so a row lines up */
.post__img { order: 0; display: block; aspect-ratio: 16 / 9; margin: 0 0 0.875rem; border-radius: 6px; overflow: hidden; border: 1px solid var(--rule-soft); background: var(--gray-50); }
.post__img img { display: block; width: 100%; height: 100%; object-fit: cover; }