/* Side stories: the compact list in the article's right rail (.rail-list,
   .rail-story).
*/

/* latest stories */
.rail-list__items{ list-style:none; margin:20px 0 0; padding:0; }
.rail-list__items li + li{ border-top:1px solid var(--hair); }
.rail-story{ display:grid; grid-template-columns:84px minmax(0,1fr); gap:16px; align-items:center; padding:18px 0; }
.rail-list__items li:last-child .rail-story{ padding-bottom:0; }
.rail-story__img{ width:84px; height:84px; object-fit:cover; background:var(--paper-deep); }
.rail-story__text{ display:flex; flex-direction:column; gap:8px; }
.rail-story__rubric{ font:600 9.5px/1 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:var(--label); }
.rail-story__hed{
  font:600 19px/1.22 var(--serif); color:var(--text);
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .5s var(--ease-out);
}
.rail-story:hover .rail-story__hed{ background-size:100% 1px; }

/* no right column below 1100px: the list runs full width after the article, so its photo
   takes the shared compact-list size (--thumb-w, base.css), at the 4:3 of the cards */
@media (max-width:1099px){
  .rail-story{ grid-template-columns:var(--thumb-w) minmax(0,1fr); gap:18px; }
  .rail-story__img{ width:100%; height:auto; aspect-ratio:4 / 3; }
}