@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  --brand: #157a6e;
  --brand-dark: #0c443c;
  --brand-soft: #d4e7e3;
  --brand-light: #ecf5f3;
  --accent: #499f68;
  --warm: #b4654a;
  --blue: #157a6e;
  --blue-dark: #0c443c;
  --blue-soft: #d4e7e3;
  --blue-light: #ecf5f3;
  --navy: #0c443c;
  --text: #33413d;
  --muted: #5d6a65;
  --line: #dcded7;
  --paper: #f8f6f1;
  --soft-gray: #f6f5f0;
  --shadow: 0 18px 40px rgba(12, 68, 60, .1);
}

body {
  background: var(--paper);
  font-family: 'Source Sans 3', 'Segoe UI', sans-serif;
}

h1, h2, h3, .brand-text strong {
  font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.top-strip { background: #0c443c; }

header {
  background: rgba(248, 246, 241, .94);
  border-bottom-color: rgba(12, 68, 60, .12);
}

.nav { min-height: 82px; }
.brand-mark { border-color: rgba(12, 68, 60, .14); box-shadow: 0 6px 18px rgba(12, 68, 60, .08); }
.brand-text strong { color: #0c443c; }
.nav-links { color: #33413d; }
.lang-switch { border-color: #dcded7; }
.lang-switch a.active { background: #157a6e; color: #fff; }

.article-head {
  position: relative;
  overflow: hidden;
  padding: 54px 0 48px;
  background:
    radial-gradient(circle at 88% -20%, rgba(119, 178, 140, .24), transparent 34%),
    linear-gradient(155deg, #f8f6f1 0%, #ecf5f3 100%);
  border-bottom-color: rgba(12, 68, 60, .12);
}

.article-head::after {
  content: '';
  position: absolute;
  right: 7%;
  bottom: -92px;
  width: 230px;
  height: 230px;
  border: 42px solid rgba(73, 159, 104, .1);
  border-radius: 50%;
  pointer-events: none;
}

.article-head .container { position: relative; z-index: 1; }
.breadcrumb { color: #5d6a65; }
.breadcrumb a, .article-kicker { color: #3a8355; }
.article-kicker { letter-spacing: .13em; }
.article-head h1 {
  position: relative;
  color: #0c443c;
  font-size: clamp(32px, 4.2vw, 50px);
  letter-spacing: -.035em;
  padding-bottom: 19px;
}
.article-head h1::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 62px;
  height: 5px;
  border-radius: 999px;
  background: #b4654a;
}
.article-meta { color: #5d6a65; }

.article-wrap { padding: 56px 0 24px; }
.prose { color: #33413d; font-size: 18px; }
.prose h2, .prose h3 { color: #0c443c; letter-spacing: -.025em; }
.prose h2 { margin-top: 42px; }
.prose a { color: #157a6e; }
.prose .callout {
  background: #ecf5f3;
  border-color: #d4e7e3;
  border-left-color: #499f68;
  border-radius: 14px;
  color: #33413d;
}

.article-cover img, .article-figure img {
  border-color: rgba(12, 68, 60, .12);
  box-shadow: 0 16px 38px rgba(12, 68, 60, .1);
}
.article-cover img { border-radius: 24px; }
.article-figure img { border-radius: 16px; }

.toc, .related-box {
  background: #fff;
  border-color: #dcded7;
  box-shadow: 0 10px 30px rgba(12, 68, 60, .07);
}
.toc { border-radius: 18px; padding: 22px 24px; }
.toc strong, .related-box strong { color: #0c443c; font-family: 'Poppins', sans-serif; }
.toc a, .related-box a { color: #157a6e; }

.hub-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 0 0 30px;
}
.hub-card {
  overflow: hidden;
  padding: 0;
  border-color: #dcded7;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(12, 68, 60, .08);
}
.hub-card:hover {
  transform: translateY(-5px);
  border-color: #c3c9be;
  box-shadow: 0 18px 40px rgba(12, 68, 60, .13);
}
.hub-thumb {
  height: auto;
  aspect-ratio: 1200 / 630;
  margin: 0 0 20px;
  border: 0;
  border-radius: 0;
}
.hub-card .tag, .hub-card h2, .hub-card p, .hub-card .read { margin-left: 22px; margin-right: 22px; }
.hub-card .tag {
  background: #ecf5f3;
  color: #0f5a51;
  margin-bottom: 12px;
  letter-spacing: .04em;
}
.hub-card h2 {
  color: #0c443c;
  font-size: 19px;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.hub-card p { color: #5d6a65; font-size: 15px; }
.hub-card .read { color: #157a6e; margin-bottom: 22px; }

.article-cta { background: #0c443c; margin-top: 56px; padding: 58px 0; }
.article-cta h2 { font-family: 'Poppins', sans-serif; letter-spacing: -.025em; }
.article-cta .btn-outline:hover { color: #fff; }

footer { background: #0c443c; padding: 42px 0 34px; }
.footer-main strong { font-family: 'Poppins', sans-serif; }

@media (max-width: 1020px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav { min-height: 68px; }
  .mobile-menu { background: #f8f6f1; }
}

@media (max-width: 680px) {
  .article-head { padding: 38px 0 34px; }
  .article-head::after { display: none; }
  .article-wrap { padding-top: 34px; }
  .hub-grid { grid-template-columns: 1fr; gap: 18px; }
  .prose { font-size: 17px; }
}