.abf {
    --abf-accent: #165d63;
    --abf-filter-active: #e5b94b;
    --abf-filter-ink: #292929;
    --abf-filter-hover: #e5b94b;
    --abf-ink: #192b32;
    --abf-muted: #52656b;
    --abf-border: #dce5e5;
    --abf-columns: 3;
    color: var(--abf-ink);
    margin-block: 24px 48px;
    scroll-margin-top: 100px;
}
.abf, .abf * { box-sizing: border-box; }
.abf--columns-1 { --abf-columns: 1; }
.abf--columns-2 { --abf-columns: 2; }
.abf--columns-4 { --abf-columns: 4; }
.abf .abf__heading { margin: 0 0 24px; }
.abf .abf__filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.abf .abf__filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid var(--abf-filter-active);
    border-radius: 999px;
    background: #fff;
    color: var(--abf-filter-ink);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.abf .abf__filter[aria-current] { background: var(--abf-filter-active); border-color: var(--abf-filter-active); color: var(--abf-filter-ink); }
.abf .abf__filter:hover { border-color: var(--abf-filter-hover); color: var(--abf-filter-ink); box-shadow: 0 0 0 1px var(--abf-filter-hover); }
.abf a:focus-visible, .abf__results:focus-visible { outline: 3px solid var(--abf-accent); outline-offset: 4px; }
.abf .abf__filter:focus-visible { outline-color: var(--abf-filter-ink); }
.abf .abf__status { color: var(--abf-muted); font-size: 14px; margin: 0 0 24px; }
.abf__grid { display: grid; grid-template-columns: repeat(var(--abf-columns), minmax(0, 1fr)); gap: 24px; align-items: start; }
.abf__sizer { display: none; }
.abf .abf__card { margin: 0; min-width: 0; overflow: hidden; background: #fff; border: 1px solid var(--abf-border); border-radius: 12px; }
.abf__grid--masonry { display: block; }
.abf__grid--masonry .abf__sizer { display: block; height: 0; }
.abf__grid--masonry .abf__sizer, .abf__grid--masonry .abf__card { width: calc((100% - (var(--abf-columns) - 1) * 24px) / var(--abf-columns)); }
.abf__grid--masonry .abf__card { margin-bottom: 24px; }
.abf .abf__image { display: block; overflow: hidden; background: #f1f5f5; }
.abf .abf__image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0; }
.abf__body { padding: 24px; }
.abf__date { display: block; color: var(--abf-muted); font-size: 13px; margin-bottom: 12px; }
.abf .abf__title { font-size: 22px; font-weight: 650; line-height: 1.3; margin: 0 0 14px; overflow-wrap: anywhere; }
.abf .abf__title a { color: var(--abf-ink); text-decoration: none; }
.abf .abf__title a:hover { color: var(--abf-accent); text-decoration: underline; }
.abf .abf__excerpt { font-size: 15px; line-height: 1.65; color: var(--abf-muted); margin: 0 0 20px; overflow-wrap: anywhere; }
.abf .abf__read { color: var(--abf-accent); font-size: 14px; font-weight: 700; text-decoration: none; }
.abf .abf__read:hover { text-decoration: underline; }
.abf__pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px; margin-top: 32px; }
.abf .abf__pagination a { color: var(--abf-accent); padding: 12px; font-weight: 600; }
.abf[aria-busy="true"] .abf__results { opacity: .55; }
@media (max-width: 900px) { .abf { --abf-columns: 2; } .abf--columns-1 { --abf-columns: 1; } }
@media (max-width: 580px) { .abf { --abf-columns: 1; } .abf__body { padding: 20px; } .abf .abf__filter { padding-inline: 14px; } }
