/* News/Index.cshtml — a dateline list, not the article grid.

   This file exists to make news look like news. The shared furniture in layout.css is
   article-shaped: editorial family, generous rows, a headline that dominates. News
   inverts all three - the UI family, a rule down the inline edge, rows that touch - and
   the two indexes are then unmistakable at a glance, which is the complaint that started
   this wave. */

@layer components {

  .one-lead--news,
  .one-list--news .one-list__item {
    display: grid;
    gap: var(--sp-2);
    padding-block: var(--sp-4);
    padding-inline-start: var(--sp-4);
    border-inline-start: 2px solid var(--bh-ion);
    border-block-end: 1px solid var(--bh-hairline);
  }

  .one-lead--news {
    margin-block-end: var(--sp-2);
    padding-block-end: var(--sp-4);
  }

  .one-lead--news .one-lead__title {
    max-inline-size: 36ch;
    /* Inter, not Newsreader. A dateline is information, and the editorial family is
       reserved for pieces that are read rather than scanned. */
    font-family: var(--ff-ui);
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
  }

  .one-list--news {
    gap: 0;
  }

  .one-list--news .one-list__title {
    font-family: var(--ff-ui);
    font-size: var(--fs-body);
    font-weight: 600;
  }
}