.card {
background: #fff;
border: 1px solid var(--g2);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
display: flex;
flex-direction: column;
transition: border-color 0.15s;
}
.card:hover { border-color: var(--g3); }
.card__img {
aspect-ratio: 16 / 9;
background: var(--dark);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.card__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card__img-label {
font-size: 10px;
color: rgba(255, 255, 255, 0.2);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.card__body {
padding: 16px 18px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
background: var(--g1);
}
.card__cats {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.card__title {
font-size: 15px;
font-weight: 700;
color: var(--dark);
line-height: 1.35;
}
.card__meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 6px;
}
.card__date { font-size: 11px; color: var(--dark); }
.card__dot {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--g2);
}
.card__author { font-size: 11px; color: var(--g4); } .archive-header {
background: var(--dark);
padding: 28px 0 24px;
}
.archive-header h1 {
font-size: 34px;
font-weight: 700;
color: #fff;
margin-bottom: 14px;
} .filter-bar {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.filter-bar__btn {
font-size: 10px;
font-weight: 600;
padding: 5px 12px;
border-radius: 40px;
border: 1px solid rgba(255, 255, 255, 0.18);
color: rgba(255, 255, 255, 0.45);
background: none;
cursor: pointer;
font-family: var(--font);
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.filter-bar__btn.is-active {
background: var(--orange);
border-color: var(--orange);
color: #fff;
}
.filter-bar__btn:hover:not(.is-active) {
border-color: rgba(255, 255, 255, 0.35);
color: rgba(255, 255, 255, 0.75);
} .archive-body {
padding: 32px 0 56px;
}
.archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
} .scroll-sentinel {
text-align: center;
padding: 24px 0;
font-size: 11px;
color: var(--g3);
font-style: italic;
}
.scroll-sentinel.is-done { display: none; } @media (max-width: 1023px) {
.archive-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.archive-grid { grid-template-columns: 1fr; }
.archive-header h1 { font-size: 28px; }
.filter-bar { gap: 4px; }
.filter-bar__btn { font-size: 9px; padding: 4px 10px; }
}