/* ============================== ARTICLES ============================== */

.articles-hero{ padding: clamp(2.5rem,5vw,4rem) 0 2rem; }
.articles-hero h1{ font-size: clamp(2.2rem, 4.6vw, 3.4rem); max-width:18ch; }
.articles-hero p{ color: var(--ink-dim); max-width:56ch; margin-top:1rem; }

.articles-shell{ display:grid; grid-template-columns: 272px 1fr; gap: 2.5rem; align-items:start; padding-bottom: 5rem; }

/* ---- Sidebar ---- */
.articles-sidebar{ position:sticky; top: 5.5rem; display:flex; flex-direction:column; gap:1.6rem; }
.side-block{ padding: 1.4rem; }
.side-block h4{ font-family: var(--f-display); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color: var(--ink-dim); margin-bottom:1rem; }
.search-box{ position:relative; }
.search-box input{ width:100%; padding:.75em 1em .75em 2.4em; border-radius:12px; border:1px solid var(--glass-border); background: rgba(5,4,9,.4); font-size:.86rem; }
.search-box svg{ position:absolute; left:.8em; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--ink-faint); }
.cat-list{ display:flex; flex-direction:column; gap:.4rem; }
.cat-item{ display:flex; align-items:center; justify-content:space-between; width:100%; padding:.65em .8em; border-radius:10px; font-size:.86rem; color: var(--ink-dim); transition: all var(--dur-fast); text-align:left; }
.cat-item:hover{ background: var(--glass-bg); color: var(--ink); }
.cat-item.is-active{ background: linear-gradient(90deg, rgba(39,39,42,.18), transparent); color: var(--ink); border-left:2px solid var(--violet); padding-left: calc(.8em - 2px); }
.cat-item .dot{ width:8px; height:8px; border-radius:50%; margin-right:.6em; display:inline-block; }
.cat-item .count{ font-family: var(--f-mono); font-size:.72rem; color: var(--ink-faint); }
.tag-cloud{ display:flex; flex-wrap:wrap; gap:.5rem; }
.articles-sidebar .ad-sticky{ width:100%; }

/* ---- Content column ---- */
.articles-content{ display:flex; flex-direction:column; gap:2.4rem; }
.content-ad-top{ margin:0; }

.featured-article{ display:grid; grid-template-columns: 1.1fr .9fr; gap:0; overflow:hidden; padding:0; }
.featured-art{ position:relative; min-height:280px; background: var(--g-flux); overflow:hidden; }
.featured-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.featured-art::before{ content:""; position:absolute; inset:0; background: linear-gradient(135deg, rgba(39,39,42,.5), transparent 55%, rgba(161,161,170,.35)), linear-gradient(0deg, rgba(5,4,9,.55), transparent 55%); z-index:1; }
.featured-art-grid{ position:absolute; inset:0; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size:26px 26px; opacity:.35; z-index:2; }
.featured-body{ padding: 2.2rem; display:flex; flex-direction:column; justify-content:center; }
.cat-tag{ display:inline-flex; align-self:flex-start; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:.4em .9em; border-radius:999px; margin-bottom:1rem; }
.featured-body h2{ font-size: clamp(1.4rem,2.6vw,2rem); }
.featured-body p{ color: var(--ink-dim); margin-top:.9rem; font-size:.94rem; }
.article-meta{ display:flex; align-items:center; gap:.7rem; margin-top:1.4rem; font-size:.78rem; color: var(--ink-faint); }
.article-meta-avatar{ width:28px; height:28px; border-radius:50%; overflow:hidden; flex:none; border:1px solid var(--glass-border); }
.article-meta-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.article-meta-rest{ display:flex; align-items:center; gap:.6rem; }
@media (max-width: 760px){ .featured-article{ grid-template-columns:1fr; } .featured-art{ min-height:180px; } }

.article-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
.article-card{ display:flex; flex-direction:column; gap: .9rem; }
.article-thumb{ height:130px; border-radius:14px; position:relative; overflow:hidden; background: var(--bg-card); }
.article-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease-out); }
.article-card:hover .article-thumb img{ transform: scale(1.06); }
.article-thumb::before{ content:""; position:absolute; inset:0; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 10px); pointer-events:none; }
.article-thumb::after{ content:""; position:absolute; inset:0; background: linear-gradient(0deg, rgba(5,4,9,.4), transparent 55%); pointer-events:none; }
.article-card h3{ font-size:1.02rem; line-height:1.35; }
.article-card p{ font-size:.83rem; color: var(--ink-faint); line-height:1.5; }
.article-card--lg{ grid-column: span 2; flex-direction:row; align-items:stretch; gap:1.4rem; }
.article-card--lg .article-thumb{ width:220px; height:auto; flex:none; }
.article-card--lg .article-card-body{ display:flex; flex-direction:column; justify-content:center; }
@media (max-width: 700px){ .article-card--lg{ flex-direction:column; } .article-card--lg .article-thumb{ width:100%; height:150px; } }

.article-ad{ grid-column: span 1; display:flex; align-items:center; justify-content:center; border-style:dashed; }
.article-ad .ad-embed{ width:100%; }

@media (max-width: 640px){ .article-grid{ grid-template-columns: 1fr; } .article-card--lg{ grid-column: span 1; } }

.load-more-wrap{ display:flex; justify-content:center; margin-top:1rem; }

/* category accent colors */
[data-category="ai"] .cat-tag, .dot-ai{ background: rgba(39,39,42,.3); color:#d4d4d8; }
[data-category="edtech"] .cat-tag, .dot-edtech{ background: rgba(244,244,245,.16); color:#f4f4f5; }
[data-category="remote"] .cat-tag, .dot-remote{ background: rgba(161,161,170,.2); color:#d4d4d8; }
[data-category="credentials"] .cat-tag, .dot-credentials{ background: rgba(212,212,216,.2); color:#e4e4e7; }
[data-category="neuroscience"] .cat-tag, .dot-neuroscience{ background: rgba(82,82,91,.28); color:#c7c7cc; }
[data-category="policy"] .cat-tag, .dot-policy{ background: rgba(113,113,122,.24); color:#d4d4d8; }
.dot-ai{ background:#a1a1aa; } .dot-edtech{ background:#f4f4f5; } .dot-remote{ background:#d4d4d8; } .dot-credentials{ background:#e4e4e7; } .dot-neuroscience{ background:#71717a; } .dot-policy{ background:#52525b; }

@media (max-width: 980px){
  .articles-shell{ grid-template-columns:1fr; }
  .articles-sidebar{ position:static; flex-direction:row; flex-wrap:wrap; }
  .side-block{ flex:1; min-width:220px; }
}