/* Blog index glue. Every part is the site's own: the ruled heading, the
   homepage's pill tabs as the topic filter, the research page's paper cards
   in the ruled frame. */
.blog-heading { padding-top: 6rem; }   /* the page opens on it: the hero band's air, not a section's 160 */
.blog-cats { margin-top: 3rem; }
.blog-cats .show-tabs { flex-wrap: wrap; border: 0; padding: 0; }   /* the pills alone, no tray: no stroke, and no inset that only served it */
.blog-cats .show-tab { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; font-size: var(--text-mini-size); }   /* the tab at the small button's measure (32 tall, 12 in, 8 to the glyph, mini text), so ten topics and their glyphs hold one line */
.blog-cats .show-tab svg { display: block; flex: none; }
.blog-cats .show-tab[aria-pressed='true'] { background: var(--stone-100); color: var(--brand-black); }   /* the tab's selected state, for a toggle */
.blog-cats .show-tab:focus-visible { outline: var(--tt-focus-ring-width) solid var(--tt-color-focus-ring); outline-offset: var(--tt-focus-ring-offset); }
@media (width <= 700px) { .blog-heading { padding-top: 2rem; } .blog-cats { margin-top: 2rem; } }
.blog-empty { margin: 0; padding: 4rem 2rem; text-align: center; color: var(--text-tertiary); font-size: var(--text-small-size); }

/* ---------- the editorial index ----------
   One post markup (cover, topics, title, summary, byline) dressed by the
   place it stands in. The type is the site's: the lead's title in the page
   heading register, the pair's in the research title's serif, the rows' in
   the research rows' sans; summaries, topics and bylines as on the cards. */
.ed-post { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.ed-post > * { margin: 0; min-width: 0; }
.ed-post .res-title { transition: color .2s; }
.ed-post:hover .res-title, .ed-post:focus-visible .res-title { color: var(--citron-300); }
.ed-post:hover .blog-cover img { scale: 1.02; }
.ed-post .res-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ed-post .res-tags span { font-family: var(--font-family-label-mono); font-size: var(--text-mini-size); letter-spacing: .02em; color: var(--citron-300); }
.ed-post .res-sum { font-size: var(--text-small-size); line-height: 1.5; color: var(--text-tertiary); }
.ed-post .res-authors { display: flex; align-items: center; gap: 10px; font-size: var(--text-small-size); color: var(--text-secondary); }
.ed-post .res-stack img { background: var(--stone-875); }
.ed-post[hidden], .ed-feat-row[hidden], .ed-list-row[hidden] { display: none; }

/* the lead: the cover over six columns, a column of air, the copy over five,
   centred on the cover. The lead keeps one height whichever post it holds: the
   script measures every post as the lead and sets --lead-h to the tallest,
   and the cover fills that height (cropped, like every cover). */
.ed-lead { padding: 2.5rem 2rem 3rem; }
.ed-lead .ed-post { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto auto 1fr; column-gap: 24px; row-gap: 16px; min-height: var(--lead-h, 0px); }
.ed-lead .blog-cover { position: relative; grid-column: 1 / 7; grid-row: 1 / 7; aspect-ratio: auto; align-self: stretch; min-height: 0; }
.ed-lead .blog-cover img { position: absolute; inset: 0; }   /* the picture fills the cover but never sizes it: a square one would stretch the lead */   /* no ratio here: the height is the lead's, so a ratio would push the width past the six columns */
.ed-lead .ed-post > :not(.blog-cover) { grid-column: 8 / 13; }
.ed-lead .res-tags { grid-row: 2; }
.ed-lead .res-title { grid-row: 3; font-family: var(--heading-page-family); font-size: var(--heading-page-size); line-height: var(--heading-page-line-height); letter-spacing: var(--heading-page-letter-spacing); font-weight: var(--heading-page-weight); text-wrap: balance; }
.ed-lead .res-sum { grid-row: 4; font-size: var(--text-large-size); line-height: var(--text-large-line-height); color: var(--text-secondary); }
.ed-lead .res-authors { grid-row: 5; margin-top: 8px; }

/* the pair: two cards, the research grid's divider between them */
.ed-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-feats .ed-post { position: relative; grid-template-rows: subgrid; grid-row: span 5; row-gap: 12px; align-content: start; padding: 2.5rem 2rem 2.75rem; }
.ed-feats { grid-template-rows: auto auto auto auto auto; }
.ed-feats .ed-post + .ed-post::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: var(--border-hairline); margin-left: calc(var(--border-hairline) / -2);
    background: var(--rule-v-taper); pointer-events: none; z-index: 4;
}
.ed-feats .blog-cover { margin-bottom: 8px; }
.ed-feats .res-title { font-family: var(--heading-section-family); font-size: var(--heading-section-size); line-height: var(--heading-section-line-height); letter-spacing: var(--heading-section-letter-spacing); font-weight: 300; text-wrap: balance; }
.ed-feats .res-authors { margin-top: 8px; }

/* the rows: the research page's ongoing projects, the cover at the right */
.ed-list .ed-post {
    position: relative; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: 24px; row-gap: 12px;
    padding: 3rem 2rem;
}
.ed-list .ed-post + .ed-post::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.055) 18%, rgba(255, 255, 255, 0.055) 82%, transparent 100%);
    pointer-events: none;
}
/* the byline on the title's line, the topics beside the summary, so a long
   topic list never pushes a summary off its title */
.ed-list .res-authors { grid-column: 1 / 5; grid-row: 1; align-self: center; }
.ed-list .res-tags { grid-column: 1 / 5; grid-row: 2 / 4; align-self: start; margin-top: 3px; }
.ed-list .res-title { grid-column: 5 / 10; grid-row: 1; align-self: center; font-family: var(--font-family-sans); font-size: var(--text-large-size); font-weight: 400; line-height: 1.35; letter-spacing: 0; }
.ed-list .res-sum { grid-column: 5 / 10; grid-row: 2 / 4; }
.ed-list .blog-cover { grid-column: 10 / 13; grid-row: 1 / 4; align-self: start; }
.ed-list .blog-cover.is-mark svg { width: 22%; }

@media (width <= 940px) {
    .ed-mid { display: none; }
    .ed-lead .ed-post, .ed-list .ed-post { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 12px; }
    .ed-lead .ed-post > *, .ed-list .ed-post > * { grid-column: 1 !important; grid-row: auto !important; }
    .ed-lead .blog-cover, .ed-list .blog-cover { margin-bottom: 8px; }
    .ed-lead .res-title { font-size: 2rem; }
    .ed-lead .ed-post { min-height: 0; }
    .ed-lead .blog-cover { aspect-ratio: 16 / 10; }
    .ed-feats { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
    .ed-feats .ed-post { grid-template-rows: none; grid-row: auto; }
    .ed-feats .ed-post + .ed-post::before {
        top: 0; bottom: auto; left: 0; right: 0; width: auto; height: var(--border-hairline); margin: calc(var(--border-hairline) / -2) 0 0; background: var(--rule-h-taper);
    }
    /* on one column every place reads in the same order: cover, topics, title, summary, byline */
    .ed-post .blog-cover { order: 0; } .ed-post .res-tags { order: 1; } .ed-post .res-title { order: 2; } .ed-post .res-sum { order: 3; } .ed-post .res-authors { order: 4; }
}
@media (width <= 700px) {
    .ed-lead { padding: 2rem 1rem 2.5rem; }
    .ed-feats .ed-post { padding: 2rem 1rem 2.5rem; }
    .ed-list .ed-post { padding: 2rem 1rem; }
}