/* Publications. Hero: a masthead, the title first and the photograph below.
   Authored moment: hovering an article shows its photograph, which follows
   the pointer across the list. */

/* ---------- Hero: masthead, then a photograph across the whole window ---------- */
.hero--masthead__text { padding-block: var(--s-7) var(--s-8); }
.hero--masthead__text h1 { max-width: var(--hero-title-max); }
@media (max-width: 63.99em) { .hero--masthead__text h1 { max-width: none; } }
.hero--masthead__fig { margin: 0; }
.hero--masthead__fig .hero__media { aspect-ratio: 21 / 9; max-height: var(--hero-h); }
.hero--masthead__fig .cap { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
@media (max-width: 47.99em) {
  .hero--masthead__text { padding-top: var(--s-5); }
  .hero--masthead__fig .hero__media { aspect-ratio: auto; height: var(--hero-media-phone); }
}

/* ---------- Article index ---------- */
.pubs { position: relative; }
.pubs summary { position: relative; }   /* the thumbnail belongs to its own row, so a scroll never leaves it behind */
.pubs summary {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr) var(--control-h-sm);
  grid-template-areas: "meta title icon" "meta sub icon";
  column-gap: var(--col-gap); row-gap: var(--s-2);
}
.pubs .disclosure__meta { grid-area: meta; margin: 0; padding-top: var(--s-2); text-wrap: balance; }
.pubs .disclosure__title { grid-area: title; text-wrap: balance; }
.pubs .disclosure__sub { grid-area: sub; margin: 0; font: italic var(--wt-medium) var(--fs-caption) / var(--lh-small) var(--font-serif); color: var(--ink-2); }
.pubs .disclosure__icon { grid-area: icon; }
.pubs .disclosure__body { margin-left: var(--pub-indent); padding-bottom: var(--s-8); }
.pubs .disclosure__body h3 { font-size: var(--fs-h4); font-family: var(--font-sans); font-weight: var(--wt-strong); margin-top: var(--s-6); }
.pubs .pub-copy { gap: var(--s-4); }
@media (max-width: 63.99em) {
  .pubs summary { grid-template-columns: minmax(0, 1fr) var(--control-h-sm); grid-template-areas: "meta icon" "title icon" "sub icon"; }
  .pubs .disclosure__body { margin-left: 0; }
}

/* The photograph that follows the pointer */
.pubs .thumb { right: var(--s-9); top: 50%; width: var(--thumb-w); aspect-ratio: 4 / 5; translate: 0 -50%; }
/* Where the photograph can appear, titles stop short of its column, so it never meets a line of text */
@media (hover: hover) and (pointer: fine) and (min-width: 64em) {
  .pubs .disclosure__title, .pubs .disclosure__sub { padding-right: calc(var(--thumb-w) + var(--s-6)); }
}
/* The photograph follows the pointer up and down only, pinned to the right so it never covers a title */
.pubs.is-following .thumb { top: 0; translate: none; transform: translate3d(0, calc(var(--fy) - 50%), 0); }
.pubs details[open] .thumb { display: none; }

/* ---------- What all five have in common (night) ---------- */
.thread__quote { max-width: var(--quote-max); }
.thread__seq { margin-top: var(--s-8); }   /* the three findings follow the statement directly */