/* Keep Reading: three related posts at the end of every blog post (Ed's pick 2026-11-07, layout "A. Three Cards").
   The block itself is written by maketzo-backend lib/blog-keep-reading.js between KEEP-READING markers; this file
   only styles it, with the blog index card's look (picture, category, title, author and date). On a phone each
   card turns into a compact row with a small picture. Site tokens from assets/css/tokens.css. */
.kr { padding: 40px 0 32px; }
.kr-eye { font-family: var(--mk-font-mono); font-size: var(--mk-mono-xs); letter-spacing: var(--mk-track-eyebrow); text-transform: uppercase; color: var(--mk-brand); margin: 0 0 8px; text-align: center; }
.kr-h { font-family: var(--mk-font-display); font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: var(--mk-track-display); text-transform: uppercase; font-weight: 400; line-height: 1.05; color: var(--mk-text-primary); margin: 0 0 28px; text-align: center; text-wrap: balance; }
.kr-h em { font-style: normal; background: var(--mk-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; max-width: 1120px; margin: 0 auto; }
.kr-card { display: flex; flex-direction: column; background: var(--mk-surface-raised); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--mk-radius-card); overflow: hidden; color: inherit; text-decoration: none; transition: transform var(--mk-dur-snap), border-color var(--mk-dur-snap), box-shadow var(--mk-dur-snap); }
.kr-card:hover, .kr-card:focus-visible { transform: translateY(-3px); border-color: rgba(212, 175, 55, .32); box-shadow: var(--mk-glow-gold-sm); }
.kr-card:focus-visible { outline: 2px solid var(--mk-brand); outline-offset: 2px; }
.kr-card .th { aspect-ratio: 16 / 9; overflow: hidden; }
.kr-card .th img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms var(--mk-ease-out); }
.kr-card:hover .th img { transform: scale(1.04); }
.kr-card .e { font-family: var(--mk-font-mono); font-size: var(--mk-mono-xs); letter-spacing: var(--mk-track-eyebrow); text-transform: uppercase; color: var(--mk-brand); margin: 18px 20px 8px; }
.kr-card .t { font-family: var(--mk-font-display); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.08; letter-spacing: var(--mk-track-display); text-transform: uppercase; color: var(--mk-text-primary); margin: 0 20px 12px; }
.kr-card .m { font-family: var(--mk-font-mono); font-size: var(--mk-mono-xs); color: var(--mk-text-tertiary); letter-spacing: .04em; text-transform: uppercase; margin: auto 20px 18px; }
/* The way back to the whole blog, under the cards (2026-11-07, with the post layout "A. Story opens"). */
.kr-all { margin: 24px 0 0; text-align: center; }
.kr-all a { display: inline-block; padding: 12px 8px; font-family: var(--mk-font-mono); font-size: var(--mk-mono-xs); letter-spacing: var(--mk-track-eyebrow); text-transform: uppercase; color: var(--mk-brand); }
.kr-all a:hover, .kr-all a:focus-visible { color: var(--mk-text-primary); }
@media (max-width: 760px) {
  .kr { padding: 32px 0 28px; }
  .kr-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .kr-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
  .kr-card .th { aspect-ratio: auto; grid-row: 1 / span 3; }
  .kr-card .th img { height: 100%; }
  .kr-card .e { margin: 14px 14px 4px; }
  .kr-card .t { margin: 0 14px 8px; font-size: 1.15rem; }
  .kr-card .m { margin: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) { .kr-card, .kr-card .th img { transition: none; } .kr-card:hover { transform: none; } .kr-card:hover .th img { transform: none; } }