/* =====================================================================
   CTFY · Midnight Theta · Journal index (/blog/) — page layer
   Spec: docs/redesign/pages/40-blog.md (index only; no article exists in the repo, so no article template here).
   Builds on css/site.css (foundation) and css/modules.css (M23, M30, M17). A reading page: no hero moment, calm reveals.
   Chapters: I Journal (H6 paper subhero) · II Posts (M23 index, M30 bridge card) · III Close (compact finale, signup slot)
   Scoped overrides of shared parts (none touches site.css / modules.css):
     · "Coming soon" cards are not links, so the paper-card hover lift and image zoom are switched off for them
       (a live card, i.e. one whose title is a link, keeps both)
     · the M17 signup slot (built, hidden) needs its own [hidden] rule because .form / .form__ok set display
   ===================================================================== */

#posts,#subscribe{scroll-margin-top:96px}

/* ---------- I · 1 · H6 paper subhero ---------- */
.blog-hero .hero__title{max-width:16ch}
.blog-hero .hero__title em{font-style:italic}          /* the one italic accent: "focus" */
.blog-hero .hero__lead{max-width:56ch}

/* ---------- II · 2 · M23 Journal index ---------- */
.m-journal{max-width:1180px;margin-inline:auto}
.blog-posts .m-post__cat{margin-top:4px}
.blog-posts .m-journal__grid .card__media{aspect-ratio:16/10}
.blog-posts .m-journal__grid .card__media img{position:absolute;inset:0}   /* portrait sources must not stretch the 16:10 frame */
.blog-posts .m-post--feature>.card__media{aspect-ratio:auto;min-height:100%}
.blog-posts .m-post--feature>.card__media img{height:100%}
@media (max-width:1023px){.blog-posts .m-post--feature>.card__media{aspect-ratio:16/9;min-height:0}}
@media (hover:hover) and (pointer:fine){
  .ch--paper.blog-posts .card:not(:has(.m-post__title a)):hover{transform:none}
  .blog-posts .card:not(:has(.m-post__title a)):hover .card__media img{transform:none}
}
.blog-posts .m-post__soon{top:14px;right:14px}

/* ---------- II · 3 · M30 bridge card ---------- */
.ch--paper.blog-posts{padding-bottom:clamp(72px,8vw,128px)}
.ch--paper.blog-bridge{padding-top:clamp(24px,3vw,48px);padding-bottom:calc(120px + clamp(48px,5vw,80px));--seam-to:var(--bg-0)}
.blog-bridge .m-bridge__line{max-width:26ch}
.blog-bridge .m-bridge__product{max-width:420px}

/* ---------- III · 4 · Mailing-list band ---------- */
.blog-finale .m-finale__inner h2{max-width:20ch}
.blog-signup{width:min(100%,460px);margin-top:8px;text-align:left}
.blog-signup[hidden],.blog-signup [hidden]{display:none}
.blog-signup__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* ---------- Journal "Show more" (js/journal.js adds the button; without JS every card is visible) ---------- */
.blog-more{display:flex;justify-content:center;margin:clamp(28px,4vw,48px) 0 0}
.m-journal__grid>li[hidden]{display:none}