/* css/home-show.css — the home pages' "See it working", "Who it's for" and the
   Sigma Pi club line (scripts/lib/home-show.js). Below the fold, so the home
   pages load it without blocking render (the head CSS budget, scripts/seo-crawl-check.js). */
/* ---- See it working, Who it's for, the Sigma Pi club line (Pete, 8 Nov 2026:
   "clean but informative and premium"; scripts/lib/home-show.js) ---- */
.mk-show .mk-lede { max-width: 40em; }
.mk-shots { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: var(--ibm-s4); overflow-x: auto; scroll-snap-type: x mandatory; margin: var(--ibm-s8) 0 0; padding: 4px 2px var(--ibm-s3); }
.mk-shot { margin: 0; scroll-snap-align: start; background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(6,37,89,.05), 0 12px 32px rgba(6,37,89,.08); }
.mk-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: var(--ibm-surface-2); border-bottom: 1px solid var(--ibm-line); }
.mk-shot figcaption { padding: 14px 16px 16px; font-weight: 600; color: var(--ibm-dark); line-height: 1.4; }
@media (min-width: 900px) { .mk-shots { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: var(--ibm-s8) 0 0; padding: 4px 0 0; } }
.mk-who__grid { display: grid; gap: var(--ibm-s4); margin-top: var(--ibm-s6); }
@media (min-width: 760px) { .mk-who__grid { grid-template-columns: repeat(3, 1fr); } }
.mk-who__card { background: var(--ibm-surface); border: 1px solid var(--ibm-line); border-radius: 16px; padding: var(--ibm-s5); box-shadow: var(--ibm-shadow); display: flex; flex-direction: column; }
.mk .mk-who__card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--ibm-dark); }
.mk-who__card p { margin: 0 0 var(--ibm-s3); color: var(--ibm-ink-2); }
.mk-who__card a { margin-top: auto; font-weight: 700; }
.mk-free__club { display: flex; gap: var(--ibm-s3); align-items: center; margin: var(--ibm-s5) 0 0; font-size: var(--ibm-text-sm); color: #c9d6ee; }
.mk-free__club img { flex: none; width: 28px; height: 28px; border-radius: 6px; background: #fff; }
.mk .mk-free__club a { color: #fff; font-weight: 700; }
.mk-badge { display: inline-block; font-weight: 800; font-size: .72rem; letter-spacing: .08em; color: var(--ibm-dark); background: #fff; border-radius: 5px; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; }