/* Theme catalog (/t), theme pages (/t/:slug), and related-page grids. */
.browse-page { padding-top: 40px; padding-bottom: 24px; }
.browse-page .picture-heading { align-items: flex-start; }
.browse-page .lead { margin: 12px 0 0; }
.browse-page .app-availability { margin: 0; flex: none; }
.tag-cloud { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 36px 0 48px; }
.tag-cloud a { display: inline-flex; align-items: baseline; gap: 6px; background: #f2f4ee; color: #364b3e; padding: 9px 16px; border-radius: 22px; font-size: 16px; text-decoration: none; min-height: 44px; box-sizing: border-box; align-items: center; }
.tag-cloud a:hover, .tag-cloud a:focus-visible { background: #e4e9dc; }
.tag-cloud small { font-size: 13px; color: var(--ink-2); }
.tags a.tag { color: #627057; text-decoration: none; }
.tags a.tag:hover, .tags a.tag:focus-visible { background: #e4e9dc; color: var(--ink); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 24px 20px; margin: 36px 0 48px; }
.page-card { display: block; color: inherit; text-decoration: none; padding: 14px; border-radius: 14px; background: #edf0e7; }
.card-art { display: grid; border-radius: 3px; overflow: hidden; box-shadow: 0 5px 12px #00000008;
  transition: --wipe var(--wipe-duration) var(--wipe-easing), transform .2s ease, box-shadow .2s ease; }
.page-card span { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; }
@media (hover: hover) { .page-card:hover .card-art { transform: translateY(-3px); box-shadow: 0 10px 22px #33432a20; } }
/* Hovering or focusing a card wipes it to the outline; leaving wipes it back. */
@media (hover: hover) { .page-card:hover .card-art { --wipe: 1; } }
.page-card:focus-visible .card-art { --wipe: 1; }
.page-card:hover span, .page-card:focus-visible span { text-decoration: underline; text-underline-offset: 4px; }
.related { margin-top: 72px; }
.related h2 { font-family: "SF Pro Rounded", ui-rounded, "Nunito", -apple-system, system-ui, sans-serif; font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 0; color: #343b32; }
.related .card-grid { margin: 24px 0 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.browse-all { font-size: 16px; color: var(--ink-2); margin: 0 0 24px; }
.browse-all a { color: #364b3e; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.browse-all .arrow-icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .card-art { transition: none; } }
@media (max-width: 850px) { .browse-page .picture-heading { display: block; } .browse-page .app-availability { margin-top: 24px; } }
@media (max-width: 600px) { .browse-page { padding-top: 28px; } .card-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 12px; } .page-card { padding: 10px; } .related { margin-top: 48px; } }