/* ══════════════════════════════════════════════════════════════════════════
   article.css — styling for /articles hub + individual article pages.
   Layers on top of main.css design tokens (--bg, --accent, --card, etc.).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Sticky site header ── */
.site-head{
  position:sticky; top:0; z-index:1200;
  background:rgba(6,18,30,0.72);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-head-inner{
  max-width:var(--max); margin:0 auto;
  padding:.8rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap;
}
.site-brand{
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:700; letter-spacing:.03em; font-size:1.05rem; color:#fff;
}
.site-brand:hover{ color:var(--accent); }
.site-nav{ display:flex; gap:1.3rem; flex-wrap:wrap; }
.site-nav a{
  font-weight:600; color:var(--muted); font-size:.95rem;
  border-bottom:2px solid transparent; padding:.2rem 0;
  transition:color .2s ease, border-color .2s ease;
}
.site-nav a:hover{ color:#fff; }
.site-nav a[aria-current="page"]{ color:var(--accent); border-bottom-color:var(--accent); }

/* ── Individual article ── */
.article-wrap{
  max-width:760px; margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) var(--pad) 5rem;
}
.article-wrap h1{
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:clamp(1.9rem,4.6vw,2.7rem); line-height:1.15; letter-spacing:-.01em;
  margin:.15em 0 .5rem; color:#fff;
}
.article-meta{ color:var(--muted); font-size:.95rem; margin:0 0 1.3em; }
.article-meta a{ color:var(--muted); }
.article-meta a:hover{ color:#fff; }
.article-meta time{ color:var(--accent-2); }
.article-hero{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:center 22%;
  border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);
  margin:1.2em 0 2em;
}
.article-body{ font-size:1.08rem; line-height:1.8; color:var(--text); }
.article-body p{ margin:0 0 1.25em; }
.article-body h2{
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.5rem; line-height:1.25; margin:1.9em 0 .55em; color:#fff;
  padding-left:.7rem; border-left:3px solid var(--accent);
}
.article-body a{
  color:var(--accent-2); text-decoration:underline;
  text-underline-offset:2px; text-decoration-thickness:1px;
}
.article-body a:hover{ color:#fff; }
.article-body strong{ color:#fff; }
.article-body em{ color:#eaf2f8; }
.article-body ul,.article-body ol{ margin:0 0 1.25em 1.3em; }
.article-body li{ margin:.35em 0; }
.article-source{
  margin:1.6em 0; padding:1em 1.2em; font-size:.98rem;
  background:var(--card); border:1px solid var(--border); border-radius:14px;
}
.article-source a{ color:var(--accent); }
.article-foot{
  margin-top:3em; padding:1.4em 1.5em; font-size:.95rem; color:var(--muted);
  background:var(--card); border:1px solid var(--border); border-radius:16px;
}
.article-foot a{ color:var(--accent); }

/* ── Hub: Articles & Insights ── */
.articles-wrap{
  max-width:880px; margin:0 auto;
  padding:clamp(1.5rem,4vw,3rem) var(--pad) 5rem;
}
.articles-wrap > h1{
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:clamp(2rem,5vw,2.8rem); line-height:1.1; color:#fff; margin:.1em 0 .4em;
}
.articles-lede{ color:var(--muted); margin:0 0 .3em; font-size:1.05rem; }
nav.articles-lede{ font-size:.85rem; margin-bottom:1.6em; }
nav.articles-lede a{ color:var(--muted); }
nav.articles-lede a:hover{ color:#fff; }
.article-card{
  display:block; margin:1.1rem 0; padding:1.4em 1.5em;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  transition:transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}
.article-card:hover{
  transform:translateY(-2px);
  border-color:rgba(107,231,255,0.4); box-shadow:var(--shadow);
}
.article-card h2{
  font-family:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:1.32rem; line-height:1.25; margin:0 0 .4em;
}
.article-card h2 a{ color:#fff; }
.article-card h2 a:hover{ color:var(--accent); }
.article-card .meta{
  color:var(--accent-2); font-size:.8rem; text-transform:uppercase;
  letter-spacing:.08em; margin:0 0 .5em;
}
.article-card .meta time{ color:var(--accent-2); }
.article-card p{ margin:0; color:var(--muted); }

@media (max-width:560px){
  .site-nav{ gap:.9rem; }
  .site-nav a{ font-size:.88rem; }
}