.work-index-intro { padding-block: clamp(4rem, 9vw, 8rem) clamp(2rem, 5vw, 4rem); }
.work-index-intro h1 { max-width: 12ch; }
.work-index-intro .hero-description { max-width: 45rem; }
.work-index-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); padding-bottom: clamp(5rem, 10vw, 9rem); }
.work-index-card { border-top: 2px solid var(--ink); padding-top: 1rem; }
.work-index-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
.work-index-card h2 { margin: 1.25rem 0 .65rem; }
.work-index-card p { max-width: 38rem; }
.work-index-card .text-link { display: inline-flex; margin-top: .75rem; }
@media (max-width: 720px) { .work-index-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .variant-b .header:has(.menu-button) .persistent-cta { font-size: 12px; }
  .variant-b .header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
  .variant-b .header nav a { min-height: 44px; display: flex; align-items: center; padding-block: 10px; }
  .variant-b .header nav .nav-cta { display: none; }
}
@media (max-width: 360px) { .journal-intro h1 { font-size: 42px; } }