/* ========================================================================
   AI LAB · /journal index (wave 3, agent 5). Linked only on journal.html,
   after style.css and before a11y-focus.css. Everything here overrides the
   ".blg-*" grid rules in style.css ("/journal index: the blog page grid")
   with one extra level of specificity (.blg ...); style.css is untouched.

   Editorial layout: TWO articles per row on desktop, exactly the blog-card
   language of the homepage (.blog-grid: 2 columns, 16px gutter, 16/9.6 image,
   meta 13.5px, title 28px/600/-.015em/1.15). The 3-up portrait template grid
   (449x487, 6px gaps, meta 14px/500 #e3e3e3, title 24px/-.03em) is retired.

   Breakpoints are measured, not guessed (out/w3-a5/probe-bp.js): with the
   longest title on the page, a 2-column card keeps its headline at <=3 lines
   and the caption under 45% of the artwork down to 910px; at 900px it flips
   to 4 lines / 57%. So: 2 columns >= 901px, 1 column <= 900px. The headline
   steps 28px -> 24px under the site's own 1180px breakpoint (cards < 545px).
   ======================================================================== */

/* ---- grid ---- */
.blg .blg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* ---- card: the artwork breathes at the loop's own 16:9-ish frame ---- */
.blg .blg-card.blog-card{aspect-ratio:16/9.6;border-radius:var(--r-card)}
/* the poster JPG + living-still loop keep their style.css behaviour untouched: lazy
   sources from data-webm/data-mp4, fade-in on "playing", hidden for reduced motion,
   and the existing fine-pointer hover zoom */

/* ---- caption: house meta + title (same as .blog-meta on the homepage) ---- */
.blg .blg-card .blog-meta{left:24px;right:24px;bottom:22px}
.blg .blg-card .blog-meta p{font-size:13.5px;font-weight:400;letter-spacing:normal;color:rgba(255,255,255,.75);margin-bottom:8px}
.blg .blg-card .blog-meta h3{font-size:28px;font-weight:600;letter-spacing:-.015em;line-height:1.15;text-wrap:balance}

/* ---- responsive ---- */
@media (max-width:1180px){
  .blg .blg-card .blog-meta h3{font-size:24px}
}
@media (max-width:900px){
  .blg .blg-grid{grid-template-columns:minmax(0,1fr)}
  /* one wide card again (688px at 768): the desktop headline size fits in 2 lines */
  .blg .blg-card .blog-meta h3{font-size:26px}
}
@media (max-width:560px){
  /* phones: a slightly taller frame so the artwork keeps room above the caption */
  .blg .blg-card.blog-card{aspect-ratio:4/3}
  .blg .blg-card .blog-meta{left:20px;right:20px;bottom:20px}
  .blg .blg-card .blog-meta h3{font-size:22px}
}

/* ---- motion: the reveal stays the site's [data-nv-reveal] (main.js adds .in, and
   adds it immediately under prefers-reduced-motion); the image zoom is stilled there ---- */
@media (prefers-reduced-motion:reduce){
  .blg .blg-card.blog-card img,.blg .blg-card.blog-card video{transition:none}
  .blg .blg-card.blog-card:hover img,.blg .blg-card.blog-card:hover video{transform:none}
}