/* Catalog pages (/themes, /fonts). Loaded after styles.css; reuses its tokens. */
.cat-page { --gutter: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px)); }
.cat-page .nav nav a[aria-current="page"] { color: var(--fg); }
.cat-page .glow-bg { animation: none; }
.cat-page main a:not(.btn) { color: var(--fg); text-decoration-color: var(--accent); text-underline-offset: 3px; }

.page-hero { padding-block: clamp(28px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.page-hero .wrap { display: flex; flex-direction: column; gap: 20px; }
.page-hero h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); }
.crumbs { display: flex; gap: 8px; align-items: center; }
.crumbs a { color: var(--fg-2) !important; text-decoration: none; }
.crumbs a:hover { color: var(--fg) !important; }

.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg) !important; text-decoration: none; font-size: .88rem; white-space: nowrap; }
.jump a span { font-family: var(--mono); font-size: .72rem; color: var(--fg-2); }
.jump a:hover { border-color: var(--fg-2); }

.cat-group { padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.cat-group h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 20px; }
.cat-group h2 .count { font-family: var(--mono); font-weight: 500; letter-spacing: .06em; }

/* themes */
.theme-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 760px) { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.theme { min-width: 0; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; scroll-margin-top: 72px; }
.theme img { width: 100%; height: auto; aspect-ratio: 480 / 330; object-fit: cover; background: var(--bg-2); }
.theme .tx { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.theme h3 { font-size: 1rem; }
.theme p { font-size: .84rem; line-height: 1.4; color: var(--fg-2); }
.theme .pairs { font-size: .66rem; letter-spacing: .04em; margin-top: 2px; }
@media (max-width: 480px) { .theme p:not(.pairs) { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } }

/* fonts */
.style-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tstyle { min-width: 0; padding: 16px 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; scroll-margin-top: 72px; }
.tstyle .sample { font-family: system-ui, -apple-system, "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: clamp(1.5rem, 5.6vw, 1.85rem); line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.tstyle .meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tstyle .nm { font-family: var(--mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; font-family: var(--mono); font-size: .66rem; letter-spacing: .05em; color: var(--lcd); background: var(--lcd-bg); border: 1px solid color-mix(in srgb, var(--lcd) 35%, transparent); white-space: nowrap; }

.notes .promise a { color: var(--fg); }
@media (max-width: 760px) { .cat-page .promise { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); padding-inline: var(--gutter) var(--gutter-r); padding-bottom: 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .jump::-webkit-scrollbar { display: none; }
}