/* /demos/ — the showcase of scroll-story demos */
.dh-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.dh-card {
  display: grid; gap: .55rem; height: 100%; padding: 12px 12px 22px; border-radius: calc(var(--radius) + 6px);
  background: var(--card, #fff); color: var(--ink); text-decoration: none;
  box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(0, 0, 0, .35); transition: transform .3s, box-shadow .3s;
}
.dh-card:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--line), 0 34px 60px -30px rgba(0, 0, 0, .4); }
.dh-card img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--radius); display: block; margin-bottom: .6rem; }
.dh-card > :not(img) { padding-inline: 10px; }
.dh-tag { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green-deep); }
.dh-card h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.dh-card p { margin: 0; color: var(--muted); }
.dh-go { margin-top: .4rem; font-weight: 600; color: var(--green-deep); }
.dh-card:hover .dh-go { text-decoration: underline; }
.dh-end { text-align: center; }
.dh-end h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-top: 12px; }
.dh-end p { color: var(--muted); max-width: 44ch; margin: 1rem auto 1.8rem; }
.dh-end .hero__cta { justify-content: center; }
@media (max-width: 760px) { .dh-grid { grid-template-columns: minmax(0, 1fr); } }
.phero + .sec { padding-top: 0; }