.articles-page { width:100%; max-width:1180px; margin:0 auto; padding:7.5rem 1.5rem 5rem; color:#173752; }
.articles-hero { max-width:760px; margin:0 auto; padding:2rem 0 4.5rem; text-align:center; }.articles-kicker { display:inline-block; margin-bottom:.7rem; color:#178d9a; font-size:.68rem; font-weight:800; letter-spacing:.18em; }.articles-hero h1 { margin:0; color:#173752; font-size:clamp(2.3rem,5vw,4.3rem); font-weight:800; letter-spacing:-.06em; line-height:1.04; }.articles-hero p { max-width:650px; margin:1rem auto 0; color:#6b8193; font-size:1rem; line-height:1.75; }
.articles-feed-section { padding-bottom:2rem; }.articles-section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; }.articles-section-heading h2 { margin:0; color:#173752; font-size:1.8rem; font-weight:800; letter-spacing:-.04em; }.articles-feed-status { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .65rem; color:#178d9a; background:#e3f8f6; border-radius:999px; font-size:.68rem; font-weight:700; }.articles-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; min-height:250px; }.article-card { display:flex; min-height:270px; flex-direction:column; padding:1.35rem 1.45rem 1.2rem; background:rgba(255,255,255,.82); border:1px solid rgba(121,158,178,.25); border-radius:18px; box-shadow:0 12px 30px rgba(42,89,113,.08),inset 0 1px 0 #fff; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }.article-card:hover { border-color:rgba(23,141,154,.4); box-shadow:0 18px 38px rgba(42,89,113,.14); transform:translateY(-3px); }.article-card-top { display:flex; align-items:center; justify-content:space-between; color:#178d9a; font-size:.61rem; font-weight:800; letter-spacing:.13em; }.article-card-top i { font-size:1.1rem; }.article-card h3 { margin:1.2rem 0 .65rem; color:#173752; font-size:1.18rem; font-weight:800; line-height:1.3; }.article-card h3 a { color:inherit; text-decoration:none; }.article-card h3 a:hover { color:#178d9a; }.article-card p { display:-webkit-box; overflow:hidden; margin:0; color:#6b8193; font-size:.82rem; line-height:1.7; -webkit-box-orient:vertical; -webkit-line-clamp:4; }.article-card-footer { display:flex; align-items:center; justify-content:space-between; gap:.7rem; margin-top:auto; padding-top:1.3rem; border-top:1px solid rgba(121,158,178,.16); }.article-card-footer small { display:flex; align-items:center; gap:.3rem; color:#8aa0af; font-size:.66rem; }.article-card-footer a { display:inline-flex; align-items:center; gap:.25rem; color:#178d9a; font-size:.7rem; font-weight:800; text-decoration:none; white-space:nowrap; }.articles-loading,.articles-empty { display:flex; min-height:240px; grid-column:1 / -1; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; color:#7890a0; background:rgba(255,255,255,.55); border:1px dashed rgba(121,158,178,.3); border-radius:18px; font-size:.8rem; }.articles-loading i,.articles-empty i { color:#178d9a; font-size:1.7rem; }.articles-empty strong { color:#244862; font-size:.9rem; }.articles-empty span { font-size:.75rem; }
@media (max-width:700px) { .articles-page { padding:6rem 1rem 3rem; }.articles-hero { padding-bottom:3rem; }.articles-hero h1 { font-size:2.45rem; }.articles-section-heading { align-items:flex-start; flex-direction:column; }.articles-grid { grid-template-columns:1fr; }.articles-loading,.articles-empty { grid-column:auto; } }