/* ========================================================================
   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: three across, measured off the reference ----
   At 1440 they run three 449-wide cards inside a 1360 content width with only
   6px between them, so the row reads as one band of artwork rather than three
   separate objects. The card is very slightly portrait (449x487) and the media
   fills the whole of it, with the caption laid over the foot. */
.blg .blg-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}

/* ---- card ---- */
.blg .blg-card.blog-card{aspect-ratio:449/487;border-radius:20px}
/* 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:20px;right:20px;bottom:20px}
.blg .blg-card .blog-meta p{font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#E3E3E3;margin-bottom:12px}
.blg .blg-card .blog-meta h3{font-size:24px;font-weight:600;letter-spacing:-.03em;line-height:1.3;color:#fff;text-wrap:balance}

/* ---- responsive ---- */
@media (max-width:1180px){
  .blg .blg-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .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}
}

/* the reference lifts the artwork on hover instead of moving the card: the media
   scales to 1.15 inside a clipped frame, so the caption stays exactly where it is */
@media (hover:hover) and (pointer:fine){
  .blg .blg-card.blog-card{overflow:hidden}
  .blg .blg-card.blog-card img,.blg .blg-card.blog-card video{
    transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .blg .blg-card.blog-card:hover img,.blg .blg-card.blog-card:hover video{transform:scale(1.15)}
}

/* ========================================================================
   ARTICLE, set to the reference's measurements (taken at 1440).
   They run a 1200 container with the article itself at 1120, and the reading
   column narrower still at 800, which is what makes their long text feel
   settled rather than sprawling. The scale: date 14/500 in #6E6E6E, the
   headline 90/600 with -.04em, the standfirst 18/500 at 600 wide, body
   18/500 lh1.4 in #4F4F4F and section heads 32/600. The hero is a 1120x665
   frame with a slightly larger blurred copy bleeding out behind it.
   ======================================================================== */
/* their container is 1200 with the article at 1120 inside it; our wrap carries
   40px of padding, so 1200 is what leaves exactly 1120 of content */
.csd-article .wrap{max-width:1200px}
.csd-article .label{font-size:14px;font-weight:500;line-height:1;letter-spacing:-.03em;color:#6E6E6E}
.csd-article .csd-title{font-size:90px;font-weight:600;line-height:1.1;letter-spacing:-.04em;color:#0A0A0A;
  max-width:1120px;text-wrap:balance}
.csd-article .csd-lead{max-width:600px}
.csd-article .csd-lead p{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#4F4F4F;
  max-width:600px}

/* the hero: a framed 1120x665 plate with its own light bleeding out behind it */
.csd-article .csd-hero{position:relative;width:100%;aspect-ratio:1120/665;border-radius:24px;overflow:hidden;
  background:#0A0A0A}
.csd-article .csd-hero img{width:100%;height:100%;object-fit:cover;display:block}
.csd-article .csd-hero::before{content:"";position:absolute;inset:-26px -20px;z-index:-1;border-radius:32px;
  background:inherit;filter:blur(26px);opacity:.5;pointer-events:none}

/* the reading column */
.csd-article .csd-block{max-width:800px;margin-left:auto;margin-right:auto}
.csd-article .csd-h{font-size:32px;font-weight:600;line-height:1.3;letter-spacing:-.03em;color:#0A0A0A}
.csd-article .csd-par{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:-.03em;color:#4F4F4F;max-width:none}
.csd-article .csd-sub{font-size:18px;font-weight:600;line-height:1.4;letter-spacing:-.03em;color:#0A0A0A}

@media (max-width:1180px){
  .csd-article .csd-title{font-size:clamp(40px,7vw,72px)}
}
@media (max-width:760px){
  .csd-article .csd-title{font-size:clamp(34px,9vw,44px);letter-spacing:-.03em}
  .csd-article .csd-h{font-size:26px}
  .csd-article .csd-par,.csd-article .csd-lead p{font-size:17px}
  .csd-article .csd-hero{border-radius:18px}
}

/* the newsletter field carried two rings: the form kept its old full-width pill
   while the rebuilt input gained its own 12px frame inside it, so it read as a
   box within a box. The reference sets the field and the button side by side as
   two separate shapes, so the outer pill goes. */
.nq-ft .ft2-form{background:none;box-shadow:none;border-radius:0;padding:0}