/* Clean futuristic article theme: light, neutral, no grid background */
:root {
  --article-ink: #0a1422;
  --article-muted: #5f6d7c;
  --article-line: rgba(113, 128, 145, 0.22);
  --article-shadow: 0 24px 70px rgba(17, 24, 39, 0.09);
}

body.blog-article {
  background:
    linear-gradient(128deg, rgba(255,255,255,0) 0 52%, rgba(209,216,226,0.22) 52% 62%, rgba(255,255,255,0) 62% 100%),
    radial-gradient(900px 640px at 78% 4%, rgba(198, 208, 219, 0.48), transparent 62%),
    radial-gradient(760px 520px at 12% 28%, rgba(255, 255, 255, 0.94), transparent 68%),
    radial-gradient(620px 420px at 6% 84%, rgba(191, 201, 214, 0.34), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f4f6f8 44%, #e9eef3 100%) !important;
  color: var(--article-ink) !important;
}

body.blog-article::before {
  background:
    linear-gradient(112deg, rgba(15,23,42,0.035) 0 1px, transparent 1px 100%),
    linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.72) 42%, transparent 68%),
    radial-gradient(circle at 50% -10%, rgba(255,255,255,0.9), transparent 38%) !important;
  mix-blend-mode: normal !important;
}

.article-shell {
  max-width: 1080px !important;
  padding-top: clamp(132px, 13vw, 166px) !important;
  display: block !important;
}

.article-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.62fr);
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
  margin-bottom: clamp(30px, 5vw, 48px);
}

.article-hero {
  position: relative;
  grid-column: 1;
  margin-bottom: 0 !important;
  padding: clamp(24px, 4vw, 40px) !important;
  border: 1px solid var(--article-line) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(140deg, rgba(255,255,255,0.94), rgba(248,250,252,0.74)),
    radial-gradient(circle at 100% 0%, rgba(203, 213, 225, 0.42), transparent 38%) !important;
  box-shadow: var(--article-shadow) !important;
  overflow: hidden;
}

.article-hero::before {
  content: "TrendMakers / 2025" !important;
  width: fit-content;
  color: #334155 !important;
  background: rgba(241, 245, 249, 0.88) !important;
  border: 1px solid rgba(148, 163, 184, 0.34);
  box-shadow: none !important;
  letter-spacing: 0.16em !important;
}

.article-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -110px;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  border: 1px solid rgba(100, 116, 139, 0.16);
  background: radial-gradient(circle, rgba(255,255,255,0.85), rgba(226,232,240,0.24) 56%, transparent 58%);
  pointer-events: none;
}

.back-link { display: none !important; }

.article-hero h1 {
  max-width: 860px;
  margin: 10px 0 4px !important;
  background: linear-gradient(120deg, #07111f 0%, #263a52 44%, #6f4a64 74%, #0f172a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-size: clamp(2.2rem, 4.2vw, 3.9rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase;
}

.article-meta {
  color: #6f4a64 !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem !important;
}

.lead {
  max-width: 860px !important;
  color: #46586b !important;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem) !important;
  line-height: 1.75 !important;
}

.lead:first-of-type { color: #263a52 !important; }

.article-intro > .article-image {
  grid-column: 2;
  margin: 0 !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--article-line);
  background: rgba(255,255,255,0.78) !important;
  box-shadow: var(--article-shadow);
  position: sticky !important;
  top: 96px;
}

.article-intro > .article-image::before { display: none !important; }

.article-intro > .article-image img {
  border-radius: 12px !important;
  box-shadow: none !important;
  filter: saturate(0.92) contrast(1.02);
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.article-shell > .article-image {
  margin: 18px 0 24px !important;
  padding: 12px !important;
  border-radius: 18px !important;
  border: 1px solid var(--article-line);
  background: rgba(255,255,255,0.78) !important;
  box-shadow: var(--article-shadow);
  position: relative !important;
  top: auto !important;
}

.article-shell > .article-image::before { display: none !important; }

.article-shell > .article-image img {
  border-radius: 12px !important;
  box-shadow: none !important;
  filter: saturate(0.92) contrast(1.02);
}

.article-section {
  border-radius: 16px !important;
  padding: clamp(20px, 3.2vw, 30px) !important;
  margin-bottom: 16px !important;
  background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(246,248,250,0.78)) !important;
  border: 1px solid var(--article-line) !important;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.065) !important;
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
}

.article-section:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(51, 65, 85, 0.28) !important;
  background: #ffffff !important;
  box-shadow: 0 24px 62px rgba(17, 24, 39, 0.09) !important;
}

.article-section::after {
  top: 18px !important;
  right: 18px !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(15,23,42,0.08), rgba(148,163,184,0.08)) !important;
  opacity: 1 !important;
}

.article-section h2 {
  color: #182433 !important;
  font-size: clamp(1.28rem, 2vw, 1.78rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
}

.article-section:nth-of-type(1) h2 { color: #31516f !important; }
.article-section:nth-of-type(2) h2 { color: #5b6470 !important; }
.article-section:nth-of-type(3) h2 { color: #6f4a64 !important; }
.article-section:nth-of-type(4) h2 { color: #2f5c68 !important; }
.article-section:nth-of-type(5) h2 { color: #42536b !important; }

.article-section p,
.article-section ul { color: var(--article-muted) !important; }
.article-section strong { color: var(--article-ink); }
.article-section li::marker { color: #6f4a64 !important; }

#section-conclusion {
  border: 1px solid rgba(15, 23, 42, 0.24) !important;
  background: linear-gradient(145deg, #111827, #253142) !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.18) !important;
}

#section-conclusion h2,
#section-conclusion p { color: #ffffff !important; }
#section-conclusion p { opacity: 0.82; }

.article-cta {
  justify-self: start;
  border-radius: 10px !important;
  padding: 15px 22px !important;
  background: #0a1422 !important;
  border: 1px solid rgba(15, 23, 42, 0.2) !important;
  color: #ffffff !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.article-cta::after { display: none !important; }

@media (max-width: 900px) {
  .article-intro { grid-template-columns: 1fr; }
  .article-hero,
  .article-intro > .article-image { grid-column: 1; }
  .article-intro > .article-image {
    position: relative !important;
    top: auto;
    max-width: 520px;
    width: 100%;
    margin: -8px 0 24px !important;
  }
  .article-intro > .article-image img { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .article-shell { padding-top: 124px !important; }
  .article-hero {
    padding: 20px 16px !important;
    border-radius: 14px !important;
  }
  .article-hero h1 { font-size: clamp(2.15rem, 13vw, 3.3rem) !important; }
}

/* Final article color lock. Keeps old dark/purple article styles from bleeding back in. */
html body.blog-article {
  background:
    linear-gradient(128deg, rgba(255,255,255,0) 0 52%, rgba(209,216,226,0.22) 52% 62%, rgba(255,255,255,0) 62% 100%),
    radial-gradient(900px 640px at 78% 4%, rgba(198, 208, 219, 0.48), transparent 62%),
    radial-gradient(760px 520px at 12% 28%, rgba(255, 255, 255, 0.94), transparent 68%),
    radial-gradient(620px 420px at 6% 84%, rgba(191, 201, 214, 0.34), transparent 64%),
    linear-gradient(180deg, #ffffff 0%, #f4f6f8 44%, #e9eef3 100%) !important;
  color: #0a1422 !important;
}

html body.blog-article .article-hero {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.96), rgba(248,250,252,0.78)),
    radial-gradient(circle at 100% 0%, rgba(203, 213, 225, 0.42), transparent 38%) !important;
  border-color: rgba(113, 128, 145, 0.22) !important;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.09) !important;
}

html body.blog-article .article-hero h1 {
  background: linear-gradient(120deg, #07111f 0%, #263a52 44%, #6f4a64 74%, #0f172a 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

html body.blog-article .article-meta {
  color: #6f4a64 !important;
}

html body.blog-article .lead {
  color: #46586b !important;
}

html body.blog-article .article-intro > .article-image,
html body.blog-article .article-shell > .article-image {
  background: rgba(255,255,255,0.78) !important;
  border-color: rgba(113, 128, 145, 0.22) !important;
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.09) !important;
}

html body.blog-article .article-section {
  background: linear-gradient(145deg, rgba(255,255,255,0.94), rgba(246,248,250,0.8)) !important;
  border-color: rgba(113, 128, 145, 0.22) !important;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.065) !important;
}

html body.blog-article .article-section h2 {
  color: #182433 !important;
}

html body.blog-article .article-section p,
html body.blog-article .article-section ul {
  color: #5f6d7c !important;
}

html body.blog-article .article-section strong {
  color: #0a1422 !important;
}

html body.blog-article #section-conclusion {
  background: linear-gradient(145deg, #111827, #253142) !important;
  border-color: rgba(15, 23, 42, 0.24) !important;
}

html body.blog-article #section-conclusion h2,
html body.blog-article #section-conclusion p {
  color: #ffffff !important;
}

html body.blog-article .back-link {
  position: fixed !important;
  left: clamp(10px, 1.5vw, 22px) !important;
  top: clamp(98px, 12vh, 132px) !important;
  z-index: 90 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(113, 128, 145, 0.28) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #0a1422 !important;
  font-size: 0.94rem !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.12) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  transform: translateY(0) !important;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease !important;
}

html body.blog-article .back-link::before {
  content: "\2190" !important;
  font-size: 1rem !important;
  line-height: 1 !important;
}

html body.blog-article .back-link:hover {
  background: #ffffff !important;
  border-color: rgba(37, 99, 235, 0.32) !important;
  box-shadow: 0 22px 54px rgba(15, 23, 42, 0.17) !important;
  transform: translateX(3px) !important;
}

@media (max-width: 820px) {
  html body.blog-article .back-link {
    top: 92px !important;
    left: 12px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 0 !important;
  }

  html body.blog-article .back-link::before {
    font-size: 1.05rem !important;
  }
}

@media (max-width: 640px) {
  html body.blog-article .article-shell {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  html body.blog-article .article-intro,
  html body.blog-article .article-section,
  html body.blog-article .article-cta,
  html body.blog-article #section-conclusion {
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  html body.blog-article .article-intro > .article-image,
  html body.blog-article .article-shell > .article-image {
    width: calc(100vw - 32px) !important;
    max-width: 390px !important;
    margin: 18px auto 24px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    justify-self: center !important;
    transform: none !important;
  }

  html body.blog-article .article-intro > .article-image img,
  html body.blog-article .article-shell > .article-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    box-sizing: border-box !important;
  }
}