.articles-grid{gap:var(--space-8);margin-top:var(--space-10);grid-template-columns:repeat(auto-fill,minmax(320px,1fr));display:grid}.article-card{background:var(--color-surface);border:1px solid var(--color-border);height:100%;transition:all var(--transition-base);flex-direction:column;text-decoration:none;display:flex;position:relative}.article-card-image-wrapper{aspect-ratio:16/10;border-bottom:1px solid var(--color-border);background:var(--navy-950);width:100%;position:relative;overflow:hidden}.article-card-image{object-fit:cover;transition:transform .6s var(--ease-out-expo), filter .6s var(--ease-out-expo);filter:grayscale(.2)contrast(1.05)}.article-card:hover .article-card-image{filter:grayscale(0)contrast(1.1);transform:scale(1.05)}.article-card-content{padding:var(--space-6);flex-direction:column;flex-grow:1;display:flex}.article-card-meta{margin-bottom:var(--space-3);font-family:var(--font-mono);color:var(--color-text-muted);justify-content:space-between;align-items:center;font-size:11px;display:flex}.article-card-category{color:var(--amber-600);text-transform:uppercase;letter-spacing:.05em;font-weight:600}.article-card-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--navy-900);margin-bottom:var(--space-3);transition:color var(--transition-fast);line-height:1.25}.article-card:hover .article-card-title{color:var(--amber-600)}.article-card-excerpt{font-size:var(--text-sm);color:var(--warm-600);margin-bottom:var(--space-6);flex-grow:1;line-height:1.6}.article-card-footer{border-top:1px dashed var(--color-border-subtle);padding-top:var(--space-4);font-family:var(--font-mono);color:var(--color-text-faint);justify-content:space-between;align-items:center;font-size:11px;display:flex}.article-card-author{color:var(--color-text-muted)}.filters-bar{gap:var(--space-6);margin-bottom:var(--space-12);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-8);flex-direction:column;display:flex}@media (min-width:768px){.filters-bar{flex-direction:row;justify-content:space-between;align-items:center}}.search-input-wrapper{width:100%;max-width:100%;position:relative}@media (min-width:768px){.search-input-wrapper{width:320px}}.search-input-field{width:100%;padding:var(--space-3) var(--space-4) var(--space-3) var(--space-10);font-family:var(--font-body);font-size:var(--text-sm);color:var(--navy-900);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xs);transition:all var(--transition-base)}.search-input-field:focus{border-color:var(--amber-500);outline:none;box-shadow:0 0 0 3px #d9a83c26}.search-icon-svg{color:var(--color-text-faint);pointer-events:none;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.category-filters{gap:var(--space-2);scrollbar-width:none;padding-bottom:var(--space-1);display:flex;overflow-x:auto}.category-filters::-webkit-scrollbar{display:none}.category-filter-btn{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border:1px solid var(--color-border);border-radius:var(--radius-xs);transition:all var(--transition-base);white-space:nowrap;background:0 0;padding:8px 16px;font-size:11px}.category-filter-btn:hover{color:var(--navy-900);border-color:var(--navy-400)}.category-filter-btn.active{background:var(--navy-900);color:var(--warm-white);border-color:var(--navy-900)}.single-article-container{max-width:var(--max-width-narrow);padding:0 var(--space-4);margin:0 auto}.article-header{margin-bottom:var(--space-12);text-align:center}.article-header-category{font-family:var(--font-mono);color:var(--amber-600);text-transform:uppercase;letter-spacing:.15em;margin-bottom:var(--space-3);font-size:12px;font-weight:600;display:inline-block}.article-header-title{font-family:var(--font-display);color:var(--navy-900);margin-bottom:var(--space-6);font-size:clamp(2rem,5vw,3.2rem);font-weight:400;line-height:1.15}.article-header-meta{justify-content:center;align-items:center;gap:var(--space-4);font-family:var(--font-mono);color:var(--color-text-muted);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);padding:var(--space-3) 0;font-size:12px;display:flex}.article-header-media-frame{aspect-ratio:16/9;border:1px solid var(--color-border);width:100%;padding:var(--space-3);background:var(--color-surface);margin-bottom:var(--space-12);box-shadow:var(--shadow-md);position:relative}.article-header-image-wrapper{background:var(--navy-950);width:100%;height:100%;position:relative;overflow:hidden}.article-body{color:var(--color-text);font-size:1.05rem;line-height:1.8}.article-body p{margin-bottom:var(--space-6)}.article-body h2,.article-body h3{font-family:var(--font-heading);color:var(--navy-900);margin-top:var(--space-10);margin-bottom:var(--space-4);font-weight:600}.article-body h2{font-size:var(--text-2xl);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-2)}.article-body h3{font-size:var(--text-xl)}.article-body ul,.article-body ol{margin-bottom:var(--space-6);padding-left:var(--space-6)}.article-body li{margin-bottom:var(--space-2)}.article-body pre{background:var(--navy-950);color:var(--navy-200);padding:var(--space-5);font-family:var(--font-mono);font-size:var(--text-sm);border-radius:var(--radius-xs);margin-bottom:var(--space-6);border:1px solid var(--navy-800);overflow-x:auto}.article-body blockquote{border-left:3px solid var(--amber-500);padding-left:var(--space-5);color:var(--color-text-muted);margin-bottom:var(--space-6);font-style:italic}.article-action-btn{align-items:center;gap:var(--space-2);font-family:var(--font-mono);color:var(--navy-900);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xs);transition:all var(--transition-base);cursor:pointer;padding:8px 16px;font-size:12px;text-decoration:none;display:inline-flex}.article-action-btn:hover{background:var(--warm-50);border-color:var(--navy-900)}.related-articles{margin-top:var(--space-20);border-top:1px solid var(--color-border);padding-top:var(--space-16)}.related-title{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--navy-900);margin-bottom:var(--space-8);text-align:center}.empty-state{text-align:center;padding:var(--space-16) 0;border:1px dashed var(--color-border);margin-top:var(--space-8);background:#ffffff80}.empty-state-title{font-family:var(--font-display);font-size:var(--text-xl);color:var(--navy-900);margin-bottom:var(--space-2)}.empty-state-desc{color:var(--color-text-muted);font-size:var(--text-sm)}