/* Catalogue Index — trending stories as an exhibition catalogue (Dotline) */
.epg-cat {
    --ct-ink: var(--text-main);
    --ct-mat: #ffffff;
    --ct-frame: #111111;
    --ct-line: color-mix(in srgb, var(--text-main) 12%, transparent);
    --ct-muted: color-mix(in srgb, var(--text-main) 66%, transparent);
}
[data-theme="dark"] .epg-cat { --ct-mat: #e9e5de; --ct-frame: #000000; }

.epg-cat__list { margin: 0; padding: 0; list-style: none; }
.epg-cat__item {
    position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr) 132px; align-items: center; gap: 26px;
    padding: 24px 0; border-bottom: 1px solid var(--ct-line);
}

/* Catalogue number: outlined, filled on hover and for number one */
.epg-cat__no {
    align-self: start; font-family: 'Chillax', var(--font-heading), sans-serif; font-size: 3.1rem; font-weight: 600; line-height: .9; letter-spacing: -.04em;
    color: transparent; -webkit-text-stroke: 1.2px var(--ct-ink); font-variant-numeric: tabular-nums; transition: color .3s ease, -webkit-text-stroke-color .3s ease;
}
.epg-cat__item:hover .epg-cat__no { color: var(--accent-text, var(--accent)); -webkit-text-stroke-color: var(--accent); }

.epg-cat__body { position: relative; min-width: 0; padding-bottom: 16px; }
.epg-cat__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 9px; }
.epg-cat__kicker {
    display: inline-flex; align-items: center; gap: 8px; color: var(--ct-ink) !important;
    font-size: 10.5px; font-weight: 600; letter-spacing: 2.5px; line-height: 1.2; text-transform: uppercase;
}
.epg-cat__kicker::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.epg-cat__badge {
    display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--accent);
    color: var(--accent-text, var(--accent)); font-size: 9.5px; font-weight: 700; letter-spacing: 2px; line-height: 1; text-transform: uppercase;
}
.epg-cat__title { margin: 0 0 10px; font-family: var(--font-heading); font-size: 1.22rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.epg-cat__title a { color: var(--ct-ink); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1.5px no-repeat; transition: background-size .35s ease; }
.epg-cat__item:hover .epg-cat__title a { background-size: 100% 1.5px; }
.epg-cat__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.epg-cat .epj-meta { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ct-muted); }
.epg-cat__reads { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-text, var(--accent)); font-size: 11px; font-weight: 700; letter-spacing: .6px; font-variant-numeric: tabular-nums; }
.epg-cat__reads i { font-size: 14px; }

/* Heat rule: how much this story is read compared with number one */
.epg-cat__heat { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: radial-gradient(circle, var(--ct-line) 1px, transparent 1.3px) 0 50% / 6px 2px repeat-x; }
.epg-cat__heat::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--heat, 50%); background: var(--accent); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.epg-cat__item:not(.is-lead) .epg-cat__heat::after { background: color-mix(in srgb, var(--accent) 55%, var(--ct-ink) 0%); opacity: .75; }

/* Framed thumbnail */
.epg-cat__thumb { display: block; padding: 6px; background: var(--ct-mat); box-shadow: 0 0 0 2px var(--ct-frame), 0 18px 26px -20px rgba(17, 17, 17, .55); transition: transform .3s ease, box-shadow .3s ease; }
.epg-cat__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-section-alt); }
.epg-cat__art img, .epg-cat__art .epj-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.epg-cat__item:hover .epg-cat__thumb { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--ct-frame), 0 26px 32px -22px rgba(17, 17, 17, .6); }
.epg-cat__item:hover .epg-cat__art img { transform: scale(1.05); }
.epg-cat__save.save-btn { position: absolute; top: 14px; right: -10px; width: 32px; height: 32px; border-radius: 50%; background: var(--bg-body); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .25); opacity: 0; transform: scale(.85); transition: opacity .25s ease, transform .25s ease; }
.epg-cat__item:hover .epg-cat__save, .epg-cat__save:focus-visible, .epg-cat__save.saved { opacity: 1; transform: none; }
/* Saved: filled accent circle with a readable icon (the white circle hid the white icon) */
.epg-cat__save.save-btn.saved, .epg-cat__save.save-btn.saved:hover { border-color: var(--btn-bg, var(--accent-fill, var(--accent))); background: var(--btn-bg, var(--accent-fill, var(--accent))); }
.epg-cat__save.save-btn.saved svg { fill: var(--btn-text, var(--on-accent-fill, #fff)); stroke: var(--btn-text, var(--on-accent-fill, #fff)); }

/* Number one: larger, filled number and a bigger frame */
.epg-cat__item.is-lead { grid-template-columns: 74px minmax(0, 1fr) 210px; padding: 30px 0; }
.epg-cat__item.is-lead .epg-cat__no { color: var(--accent-text, var(--accent)); -webkit-text-stroke-color: var(--accent); font-size: 3.8rem; }
.epg-cat__item.is-lead .epg-cat__title { font-size: clamp(1.35rem, 1rem + 1vw, 1.75rem); line-height: 1.2; }
.epg-cat__item.is-lead .epg-cat__thumb { padding: 8px; }

@media (max-width: 768px) {
    .epg-cat__item, .epg-cat__item.is-lead { grid-template-columns: 46px minmax(0, 1fr) 92px; gap: 14px; padding: 18px 0; }
    .epg-cat__no { font-size: 2.1rem; }
    .epg-cat__item.is-lead .epg-cat__no { font-size: 2.4rem; }
    .epg-cat__title { font-size: 1.02rem; }
    .epg-cat__item.is-lead { grid-template-columns: 46px minmax(0, 1fr); }
    .epg-cat__item.is-lead .epg-cat__thumb { grid-column: 1 / -1; grid-row: 1; padding: 6px; }
    .epg-cat__item.is-lead .epg-cat__art { aspect-ratio: 16 / 9; }
    .epg-cat__thumb { padding: 4px; }
    .epg-cat__save.save-btn { opacity: 1; transform: none; top: 10px; right: 6px; }
    .epg-cat__item:not(.is-lead) .epg-cat__save { display: none; }
}
@media (prefers-reduced-motion: reduce) { .epg-cat * { transition: none !important; } }