/*
  Post list (.posts; Figma All Articles 164:1428–1452 "Recent"): a section title over a stack of full-width post
  teasers. Each post is a 1360×644 image, then the title (.t-teaser, the same type as the homepage Insights bar) and a
  short summary beside it (.t-summary), closed by a hairline. On black.

  Markup:
    <section class="posts rule-t" aria-labelledby="…">
      <h2 class="section-title cal h-section" id="…">Recent</h2>          (shared section title, site.css)
      <div class="posts__feed" data-follow>                   data-follow: the "Read article" CTA follows the cursor
        <ol class="posts__list">
        <li class="post">
          <div class="post__media" data-follow-zone data-title="…" data-href="/insights/<slug>/"><img src alt></div>
          <h3 class="post__name t-teaser"><a href="/insights/<slug>/">…</a></h3>
          <p class="post__dek t-summary">…</p>
        </li>
        …
        </ol>
        <a class="view-work" href="#" aria-label="Read article"><span class="cta__label">Read article</span><span class="cta__arrow"><img src="/home-assets/arrow-red.svg" alt=""></span></a>
      </div>
    </section>
  A post without a page yet has data-href="#" on its image and a plain title: no CTA, nothing to open.
  The follow CTA and touch badges come from /shared/cards.css + cards.js; the badge reads "Read article" because it
  takes the CTA's own label.

  Fields: title, posts[] of { image, alt, title, summary, link? }.
  When the list ends the page, the last post's rule is the footer's top rule, so the section ends flush with it.
  --stacked: the summary sits under the title instead of beside it (Figma Work 165:1505, the list version of
  "Highlighted work", where the summary is the type of work).
*/
.posts__feed{position:relative;margin:0 4rem}
.posts__list{display:grid;gap:8.2rem;margin:0;padding:0;list-style:none}
.post{display:grid;grid-template-columns:61.68rem 44rem 1fr;grid-template-rows:auto 1fr;align-items:start;min-height:82.6rem;border-bottom:var(--rule) solid var(--fg)}
.posts:last-child .post:last-of-type{border-bottom:0}
.post__media{grid-column:1 / -1;position:relative;height:64.4rem;overflow:hidden}
.post__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.post:hover .post__media img{transform:scale(1.04)}
/* Title and summary share a cap line 54px under the image (trimmed to cap height, as in Figma) */
.post__name,.post__dek{margin-top:5.4rem;text-box:trim-both cap alphabetic}
.post__name{width:55.52rem}
.post__name a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.5rem;transition:text-decoration-color .25s}
.post__name a:hover{text-decoration-color:currentColor}
/* Stacked: title, then the summary's cap line 24px under the title's baseline */
.posts--stacked .post{grid-template-columns:55.52rem 1fr;grid-template-rows:auto auto 1fr}
.posts--stacked .post__dek{grid-column:1;margin-top:2.43rem}

@media (max-width:767px){
  .posts__feed{margin:0}
  .posts__list{gap:0}
  .post{grid-template-columns:1fr;min-height:0;padding-bottom:3.2rem;border-bottom:var(--rule) solid var(--fg)}
  .post + .post{padding-top:3.2rem}
  .post__media{height:auto;aspect-ratio:1360 / 644}
  .post__name,.post__dek{margin:2rem 2rem 0}
  .post__name{width:auto}
  .post__dek{margin-top:1.4rem}
}