/* Blog posts only: designs and photos inside the post, and the desktop scroll effects (blog.js adds the classes) */
.post h2, .post h3 { scroll-margin-top: 96px; }

/* a design shown under the idea it matches */
.picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 1.4em 0 2em; }
.pick { margin: 0; background: var(--card); border: 1px solid var(--pink-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.pick:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(74, 46, 42, .06), 0 14px 32px rgba(74, 46, 42, .12); }
.pick img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--blush); }
.pick figcaption { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; font-size: .93rem; }
.pick .eyebrow { margin: 0; font-size: .68rem; }
.pick strong { font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.2; }
.pick p { margin: 0; color: var(--cocoa-soft); }
.pick .card-link { margin-top: auto; padding-top: 8px; font-weight: 700; text-decoration: none; }
/* just one: photo beside the words */
.picks-1 .pick { flex-direction: row; }
.picks-1 .pick > a { flex: 0 0 48%; }
.picks-1 .pick img { height: 100%; }
.picks-1 figcaption { justify-content: center; padding: 18px 22px; }
/* four: two by two, no lonely card on its own row */
@media (min-width: 561px) { .picks-4 { grid-template-columns: repeat(2, 1fr); } }

/* listing photos, side by side */
.photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 1.4em 0 2em; }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); }
.photo figcaption { margin-top: 8px; font-size: .92rem; color: var(--cocoa-soft); text-align: center; }

.post-more, .post-keep { margin-top: 56px; }
.post-keep .posts { margin-top: 20px; }
.read-progress { display: none; }

@media (max-width: 560px) {
  .picks-1 .pick { flex-direction: column; }
  .picks-1 .pick > a { flex: none; }
}

/* desktop: a raspberry reading bar fills along the top, and each block eases up as it scrolls into view */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .read-progress { display: block; position: fixed; inset: 0 0 auto; height: 4px; z-index: 30; background: linear-gradient(90deg, var(--pink-border), var(--rasp)); transform-origin: 0 50%; transform: scaleX(0); }
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .reveal.in { opacity: 1; transform: none; }
  .picks.reveal .pick, .photos.reveal .photo { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .2s; }
  .picks.reveal.in .pick, .photos.reveal.in .photo { opacity: 1; transform: none; }
  .picks.reveal.in .pick:nth-child(2), .photos.reveal.in .photo:nth-child(2) { transition-delay: .12s; }
  .picks.reveal.in .pick:nth-child(3) { transition-delay: .24s; }
  .picks.reveal.in .pick:nth-child(4) { transition-delay: .36s; }
  .picks.reveal.in .pick:hover { transform: translateY(-3px); transition-delay: 0s; }
}