:root { --bg:#05070b; --panel:#0b1019; --ink:#f4f7fb; --muted:#9ba7b8; --line:rgba(255,255,255,.11); --blue:#2d7fff; --cyan:#69b8ff; --soft:#111926; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.shell { width:min(1180px, calc(100% - 48px)); margin-inline:auto; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow,.section-kicker { color:var(--cyan); font-size:.71rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:rgba(5,7,11,.88); border-bottom:1px solid var(--line); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand img { height:36px; width:auto; display:block; }
.top-nav { display:flex; align-items:center; gap:30px; color:#c2cad5; font-size:.82rem; }
.top-nav a { transition:.2s; opacity:.85; }
.top-nav a:hover, .top-nav a.active { color:white; opacity:1; }

/* Hero */
.portal-hero { padding-block: 60px 30px; text-align: left; }
.portal-hero h1 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); line-height: 1.05; letter-spacing: -.04em; margin: 16px 0 20px; color: #ffffff; font-weight: 900; }
.hero-deck { max-width: 840px; color: #9ba7b8; font-size: 1.1rem; line-height: 1.7; margin: 0 0 32px; }

/* Category Filter Bar */
.category-filter-bar, .filters {
  display: flex;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin: 28px 0 36px !important;
}

.filter-btn, .filters button {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  background: rgba(11, 16, 25, 0.8) !important;
  color: #aeb7c4 !important;
  padding: 10px 20px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  backdrop-filter: blur(8px) !important;
}

.filter-btn:hover, .filter-btn.active, .filters button:hover, .filters button.active {
  color: #ffffff !important;
  border-color: #69b8ff !important;
  background: linear-gradient(135deg, rgba(45, 127, 255, 0.4), rgba(9, 16, 29, 0.9)) !important;
  box-shadow: 0 0 16px rgba(45, 127, 255, 0.4) !important;
  transform: translateY(-1px) !important;
}

/* Articles Grid & Cards */
.articles-grid-section {
  padding-block: 10px 80px !important;
}

.articles-grid, .article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  width: 100% !important;
}

.article-card {
  display: flex;
  flex-direction: column !important;
  background: #0b1019 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.article-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(105, 184, 255, 0.4) !important;
  box-shadow: 0 20px 40px rgba(45, 127, 255, 0.25) !important;
}

.card-image-wrap {
  width: 100% !important;
  height: 200px !important;
  position: relative !important;
  overflow: hidden !important;
  background: #05070b !important;
}

.card-image-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.article-card:hover .card-image-wrap img {
  transform: scale(1.08) !important;
}

.card-category-badge {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  background: rgba(5, 7, 11, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  color: #69b8ff !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 5px 12px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(105, 184, 255, 0.3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  z-index: 2 !important;
}

.card-content {
  padding: 24px !important;
  display: flex;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.card-num {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  color: #69b8ff !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 8px !important;
}

.card-title {
  font-size: 1.18rem !important;
  line-height: 1.35 !important;
  margin: 0 0 12px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.card-title a {
  color: #ffffff !important;
  transition: color 0.2s ease !important;
}

.card-title a:hover {
  color: #69b8ff !important;
}

.card-excerpt {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  color: #9ba7b8 !important;
  margin: 0 0 20px !important;
  flex-grow: 1 !important;
}

.card-meta {
  display: flex;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  font-size: 0.76rem !important;
  color: #778292 !important;
}

.card-meta .read-more {
  color: #69b8ff !important;
  font-weight: 700 !important;
  transition: transform 0.2s ease !important;
}

.card-meta .read-more:hover {
  transform: translateX(4px) !important;
}

/* Buttons */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; background:var(--blue); color:white; font-size:.83rem; font-weight:800; letter-spacing:.04em; transition:.2s; border:1px solid var(--blue); border-radius:4px; }
.btn-primary:hover { background:#4b91ff; transform:translateY(-2px); }

/* Article Detail Page Layout */
.article-hero { padding-block:50px 36px; border-bottom:1px solid var(--line); }
.breadcrumbs { display:flex; align-items:center; gap:8px; color:#778292; font-size:.75rem; margin-bottom:24px; }
.breadcrumbs a { color:#b7c0cc; }

.article-hero h1 { font-size:clamp(1.8rem, 3.4vw, 2.7rem) !important; line-height:1.25 !important; letter-spacing:-.03em; max-width:900px; margin:12px 0 18px !important; color:white !important; font-weight:800 !important; }
.article-deck { max-width:820px; color:#aeb8c6; font-size:1.1rem; line-height:1.65; margin:0 0 24px; }

.byline { display:flex; align-items:center; gap:13px; margin-top:24px; }
.mini-monogram { width:42px; height:42px; border-radius:50%; border:1px solid rgba(105,184,255,.45); display:grid; place-items:center; font-family:Georgia,serif; color:var(--cyan); }
.byline strong { font-size:.82rem; color:white; display:block; }
.byline span { font-size:.7rem; color:#778292; }

/* PURE SINGLE-COLUMN READING CONTAINER */
.article-layout {
  display: block !important;
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  padding-block: 40px 80px !important;
}

.article-body {
  width: 100% !important;
  max-width: 820px !important;
  margin: 0 auto !important;
  color: #d8dde5;
}

.article-body > p, .article-body section > p { font-size:1.08rem; line-height:1.85; margin:0 0 24px; }
.article-body section { padding-top:36px; scroll-margin-top:90px; }
.article-body h2 { font-size:clamp(1.5rem, 3vw, 2.2rem); line-height:1.25; letter-spacing:-.03em; color:white; margin:28px 0 16px; font-weight:800; }

.quote-box { background: linear-gradient(135deg, rgba(45,127,255,0.08), rgba(9,16,29,0.6)); border-left: 4px solid #2d7fff; padding: 24px 28px; border-radius: 0 12px 12px 0; margin-block: 28px; }
.quote-box p { font-size: 1.05rem; line-height: 1.65; color: #f4f7fb; font-style: italic; margin: 0 0 12px; }
.quote-box span { font-size: 0.8rem; font-weight: 700; color: #69b8ff; text-transform: uppercase; letter-spacing: 0.1em; }

.action-list { list-style:none; padding:0; margin:20px 0; }
.action-list li { display:grid; grid-template-columns:44px 1fr; gap:16px; border-top:1px solid var(--line); padding:20px 0; }
.action-list li > span { color:var(--cyan); font-size:.75rem; font-weight:800; }
.action-list h3 { font-size:1.1rem; color:white; margin:0 0 6px; }
.action-list p { font-size:.9rem; line-height:1.65; color:#909bab; margin:0; }

.benefit-list { padding-left: 20px; color: #d8dde5; margin: 20px 0; }
.benefit-list li { margin-bottom: 12px; font-size: 1.02rem; line-height: 1.7; }
.benefit-list strong { color: white; }

.article-cta { padding:36px!important; margin-top:60px; background:linear-gradient(145deg,rgba(45,127,255,.22),rgba(11,16,25,.9)); border:1px solid rgba(105,184,255,.3); border-radius:12px; }
.article-cta > span { font-size:.65rem; letter-spacing:.16em; color:var(--cyan); font-weight:800; }
.article-cta h2 { font-size:2rem; margin:12px 0 16px; color:white; }
.article-cta p { font-size:.95rem!important; line-height:1.65!important; color:#aab5c2; margin-bottom:24px; }
.article-cta > div { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }

.site-footer { border-top:1px solid var(--line); padding-block:50px; background:#030509; }
.footer-grid { display:grid; grid-template-columns:1fr 1.5fr .7fr; gap:50px; align-items:start; }
.footer-grid p { font-size:.78rem; line-height:1.7; color:#7f8a99; }
.footer-links { display:flex; flex-direction:column; gap:10px; font-size:.78rem; color:#bec7d3; }

/* Responsive Grid */
@media (max-width: 992px) {
  .articles-grid, .article-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 640px) {
  .articles-grid, .article-grid {
    grid-template-columns: 1fr !important;
  }
  .portal-hero h1 { font-size: 2.2rem; }
  .article-hero h1 { font-size: 1.75rem !important; }
  .article-cta { padding: 24px!important; }
  .article-cta h2 { font-size: 1.6rem; }
  .category-filter-bar, .filters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .filter-btn, .filters button { white-space: nowrap; }
}

/* Filter hidden state */
.is-hidden { display: none !important; }