.breadcrumbs {margin-bottom:20px;}
.hero-section {margin-bottom:32px;max-width:800px;}
.hero-title {font-family:var(--font-display);font-size:40px;font-weight:700;color:var(--primary);margin-bottom:12px;}
.hero-description {font-size:16px;color:var(--on-surface-variant);line-height:1.5;}
.article-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:48px;}
.article-card {background:var(--surface-container-lowest);display:flex;flex-direction:column;border:1px solid var(--outline-variant);transition:transform 0.3s cubic-bezier(0.165,0.84,0.44,1),box-shadow 0.3s ease;text-decoration:none;color:inherit;}
.article-card:hover {transform:translateY(-4px);box-shadow:0 12px 24px rgba(0,0,0,0.05);}
.card-image-wrap {aspect-ratio:16 / 10;overflow:hidden;display:block;}
.card-image {width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
.article-card:hover .card-image {transform:scale(1.04);}
.card-body {padding:20px;flex:1;display:flex;flex-direction:column;}
.card-category {font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--on-surface-variant);margin-bottom:8px;}
.card-title {font-family:var(--font-display);font-size:20px;font-weight:600;margin-bottom:12px;line-height:1.3;color:var(--primary);}
.card-excerpt {font-size:14px;color:var(--on-surface-variant);margin-bottom:16px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.card-footer {display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--outline-variant);}
.author-info {display:flex;flex-direction:column;}
.author-name {font-size:13px;font-weight:600;}
.author-role {font-size:11px;color:var(--on-surface-variant);}
.pagination {display:flex;justify-content:center;align-items:center;gap:6px;}
.page-btn {width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--outline-variant);background:none;cursor:pointer;font-size:13px;font-weight:600;color:var(--on-surface);transition:all 0.2s;}
.page-btn:hover {border-color:var(--primary);background:var(--surface-container-low);}
.page-btn.active {background-color:var(--primary);color:white;border-color:var(--primary);}
@media (max-width:1024px) {.article-grid {grid-template-columns:repeat(2,1fr);}
;}
@media (max-width:768px) {.hero-title {font-size:32px;}
.article-grid {grid-template-columns:1fr;}
;}