:root {
  --ink: #172c2b;
  --muted: #657775;
  --soft: #8b9a98;
  --line: #e3eae7;
  --paper: #ffffff;
  --canvas: #f7faf9;
  --mint: #dff3e9;
  --green: #19795f;
  --green-dark: #115e4b;
  --warm: #f0f5f2;
  --shadow: 0 10px 34px rgba(22, 53, 44, .055);
  --font: 'Segoe UI', Arial, sans-serif;
  --display: 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.site-header { position: relative; z-index: 2; background: rgba(255,255,255,.95); border-bottom: 1px solid rgba(227,234,231,.9); }
.header-inner { width: min(1160px, calc(100% - 48px)); min-height: 84px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 13px; text-decoration: none; min-width: 0; }
.brand-mark { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; gap: 3px; border-radius: 11px; background: var(--green); transform: rotate(-4deg); }
.brand-mark span { display: block; width: 4px; border-radius: 4px; background: #e2f8ed; transform: rotate(4deg); }
.brand-mark span:nth-child(1) { height: 12px; opacity: .76; }.brand-mark span:nth-child(2) { height: 21px; }.brand-mark span:nth-child(3) { height: 16px; opacity: .86; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.25; }.brand-copy strong { font-family: var(--display); font-size: 15px; letter-spacing: -.02em; }.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 10px; letter-spacing: .075em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; gap: 29px; }.nav-link { text-decoration: none; color: #526561; font-size: 13px; font-weight: 600; transition: color .18s; }.nav-link:hover { color: var(--green); }
.site-main { min-height: 60vh; }.hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; width: min(1160px, calc(100% - 48px)); min-height: 330px; margin: 0 auto; padding: 56px 0 61px; border-bottom: 1px solid var(--line); }.hero-copy { position: relative; z-index: 1; max-width: 720px; }.eyebrow, .section-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--green); font-size: 10px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; }.eyebrow-dot { display: inline-block; width: 7px; height: 7px; background: #46a986; border-radius: 100%; box-shadow: 0 0 0 4px #e2f3eb; }
h1, h2, h3, p { margin-top: 0; }.hero h1 { max-width: 700px; margin: 19px 0 15px; font-family: var(--display); font-size: clamp(34px, 4.3vw, 55px); font-weight: 700; letter-spacing: -.055em; line-height: 1.12; }.hero h1 span { color: var(--green); }.hero-description { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 15px; line-height: 1.8; }
.hero-graphic { position: relative; flex: 0 0 250px; height: 230px; margin-right: 26px; opacity: .95; }.orbit { position: absolute; left: 50%; top: 46%; border: 1px solid #d3e7de; border-radius: 50%; transform: translate(-50%,-50%) rotate(-27deg); }.orbit-one { width: 235px; height: 124px; }.orbit-two { width: 190px; height: 190px; transform: translate(-50%,-50%) rotate(35deg); }.orbit-core { position: absolute; left: 50%; top: 46%; width: 91px; height: 91px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f5fff9, #c5ead9); border: 1px solid #c5e8d7; box-shadow: 0 15px 38px rgba(28,122,90,.13); transform: translate(-50%,-50%); display: grid; place-items: center; }.core-dot { width: 26px; height: 26px; border-radius: 8px; background: var(--green); transform: rotate(45deg); box-shadow: 0 0 0 8px rgba(25,121,95,.1); }.orbit-node { position: absolute; width: 12px; height: 12px; border-radius: 100%; background: #72c5a3; border: 3px solid white; box-shadow: 0 0 0 1px #bbdfd0; }.node-one { left: 18px; top: 58px; }.node-two { right: 31px; top: 24px; background: #98c9b4; }.node-three { right: 10px; bottom: 39px; background: var(--green); }.graphic-label { position: absolute; right: 5px; bottom: 9px; color: #879d95; font-size: 9px; font-weight: 700; letter-spacing: .2em; }
.listing-section { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 47px 0 82px; }.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }.section-heading h2 { margin: 7px 0 0; font-family: var(--display); font-size: clamp(25px, 3vw, 32px); letter-spacing: -.045em; line-height: 1.25; }.result-count { padding-bottom: 4px; color: var(--muted); font-size: 12px; white-space: nowrap; }.filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 29px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfc; }.search-field { flex: 1 1 270px; min-width: 180px; position: relative; }.search-field svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; fill: none; stroke: #79908a; stroke-width: 1.7; transform: translateY(-50%); pointer-events: none; }.search-field input, .select-field select { width: 100%; height: 43px; border: 1px solid transparent; outline: none; border-radius: 8px; background: white; color: var(--ink); font: inherit; font-size: 12px; }.search-field input { padding: 0 12px 0 42px; border-color: #e7eeeb; }.search-field input::placeholder { color: #96a4a0; }.search-field input:focus, .select-field select:focus { border-color: #77bea3; box-shadow: 0 0 0 3px rgba(57,151,113,.1); }.select-field { flex: 0 1 163px; min-width: 140px; }.select-field select { padding: 0 29px 0 12px; border-color: #e7eeeb; cursor: pointer; }.sort-field { flex-basis: 150px; }.filter-button { min-width: 86px; height: 43px; border: 0; border-radius: 8px; padding: 0 19px; background: var(--green); color: white; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .18s, transform .18s; }.filter-button:hover { background: var(--green-dark); transform: translateY(-1px); }.reset-filters { padding: 0 7px; color: var(--muted); font-size: 12px; text-decoration: none; }.reset-filters:hover { color: var(--green); }
.article-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 19px; }.article-card { min-height: 257px; display: flex; flex-direction: column; padding: 22px 21px 19px; border: 1px solid var(--line); border-radius: 14px; background: white; color: inherit; text-decoration: none; box-shadow: 0 1px 0 rgba(20,60,44,.01); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }.article-card:hover { transform: translateY(-4px); border-color: #b8dccc; box-shadow: var(--shadow); }.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 20px; color: var(--soft); font-size: 10px; }.card-category { color: #4f9679; font-size: 9px; font-weight: 700; letter-spacing: .13em; }.article-card h3 { margin-bottom: 10px; font-family: var(--display); font-size: 18px; line-height: 1.4; letter-spacing: -.025em; font-weight: 700; }.card-excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 22px; color: var(--muted); font-size: 12px; line-height: 1.75; }.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid #eff3f1; }.author-chip { display: inline-flex; align-items: center; gap: 8px; color: #536761; font-size: 11px; font-weight: 600; }.author-avatar { display: inline-grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 800; text-transform: uppercase; }.read-link { color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }.read-link span { margin-left: 4px; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 39px; }.page-control { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; padding: 0 12px; border-radius: 7px; color: var(--green); background: #f0f7f3; font-size: 11px; font-weight: 700; text-decoration: none; }.page-control:hover { background: #e2f2e9; }.page-control.disabled { color: #a0afaa; background: #f7f9f8; }.page-indicator { color: var(--muted); font-size: 11px; }.page-indicator strong { color: var(--ink); }.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 70px 20px; border: 1px dashed #cadbd3; border-radius: 16px; background: #fbfdfc; }.empty-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 15px; border-radius: 14px; background: var(--mint); color: var(--green); font-size: 30px; }.empty-state h3 { margin-bottom: 7px; font-family: var(--display); font-size: 20px; letter-spacing: -.03em; }.empty-state p { max-width: 480px; margin-bottom: 0; color: var(--muted); font-size: 13px; }.empty-state code { padding: 2px 5px; border-radius: 4px; background: #eef4f1; color: #35564b; font-size: .9em; }.text-link { margin-top: 18px; color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; }
.site-footer { background: var(--canvas); border-top: 1px solid var(--line); }.footer-inner { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 39px 0 28px; }.footer-heading { margin-bottom: 9px; font-family: var(--display); font-size: 15px; font-weight: 800; letter-spacing: -.025em; }.footer-inner p { max-width: 720px; margin-bottom: 11px; color: var(--muted); font-size: 11px; line-height: 1.8; }.footer-inner .ai-note { color: #526a62; }.copyright { display: block; margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--line); color: #91a09b; font-size: 10px; }
.article-page { width: min(840px, calc(100% - 48px)); margin: 0 auto; padding: 37px 0 80px; }.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; }.back-link:hover { color: var(--green); }.article-header { padding: 46px 0 27px; border-bottom: 1px solid var(--line); }.article-header h1 { margin: 17px 0 22px; font-family: var(--display); font-size: clamp(32px, 5.2vw, 48px); line-height: 1.2; letter-spacing: -.05em; overflow-wrap: anywhere; }.article-byline { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 11px; }.article-byline time { font-size: 11px; }.byline-divider { width: 4px; height: 4px; border-radius: 100%; background: #a1b2aa; }.copy-link { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 7px; background: white; color: #526b62; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }.copy-link:hover { border-color: #afd8c6; color: var(--green); }.prose { color: #344642; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; }.article-page > .prose { padding-top: 31px; }.prose h1, .prose h2, .prose h3, .prose h4 { margin: 2em 0 .7em; color: var(--ink); font-family: var(--display); letter-spacing: -.03em; line-height: 1.35; }.prose h1 { font-size: 30px; }.prose h2 { font-size: 25px; }.prose h3 { font-size: 19px; }.prose h4 { font-size: 16px; }.prose p { margin-bottom: 1.25em; }.prose ul, .prose ol { padding-left: 1.5em; margin: .4em 0 1.5em; }.prose li { padding-left: .25em; margin: .4em 0; }.prose li::marker { color: #65a88b; }.prose a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }.prose a:hover { color: var(--green-dark); }.prose blockquote { margin: 1.5em 0; padding: 3px 0 3px 20px; border-left: 3px solid #7bc4a3; color: #587067; }.prose code { padding: .17em .36em; border-radius: 4px; background: #f0f5f2; color: #2f5a4a; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .85em; }.prose pre { overflow-x: auto; margin: 1.5em 0; padding: 18px; border: 1px solid #e4ece7; border-radius: 10px; background: #f7faf8; line-height: 1.6; }.prose pre code { padding: 0; background: transparent; color: #29443a; }.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; margin: 1.5em 0; font-size: 13px; }.prose th, .prose td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }.prose th { background: #f1f7f4; color: var(--ink); }.prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }.prose img { max-width: 100%; height: auto; border-radius: 10px; }.sources-section { margin-top: 47px; padding: 25px 27px 20px; border: 1px solid var(--line); border-radius: 13px; background: #fbfdfc; }.sources-heading-row { margin-bottom: 14px; }.sources-heading-row h2 { margin: 5px 0 0; font-family: var(--display); font-size: 23px; letter-spacing: -.04em; }.source-prose { font-size: 13px; line-height: 1.75; }.source-prose p:last-child, .source-prose ol:last-child, .source-prose ul:last-child { margin-bottom: 0; }.article-end { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 55px; color: #9baaa4; }.article-end span { width: 44px; height: 1px; background: #dce7e1; }.article-end p { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }.not-found { width: min(740px, calc(100% - 48px)); margin: 0 auto; padding: 100px 0 120px; }.not-found h1 { margin: 13px 0; font-family: var(--display); font-size: clamp(34px, 5vw, 48px); letter-spacing: -.05em; }.not-found p { color: var(--muted); font-size: 14px; }.primary-link { display: inline-flex; gap: 10px; margin-top: 13px; padding: 11px 15px; border-radius: 8px; background: var(--green); color: white; font-size: 12px; font-weight: 700; text-decoration: none; }.primary-link:hover { background: var(--green-dark); }.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; }
@media (max-width: 950px) { .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hero-graphic { flex-basis: 190px; transform: scale(.85); transform-origin: center right; margin-right: -6px; }.hero-copy { max-width: 630px; }.filters { gap: 8px; }.search-field { flex-basis: 220px; }.select-field { flex-grow: 1; } }
@media (max-width: 640px) { .header-inner, .hero, .listing-section, .footer-inner, .article-page { width: min(100% - 32px, 1160px); }.header-inner { min-height: 72px; }.brand-mark { width: 32px; height: 32px; }.brand-copy strong { font-size: 13px; }.brand-copy small { max-width: 210px; font-size: 8px; letter-spacing: .04em; }.main-nav { gap: 13px; }.nav-link { font-size: 11px; }.nav-link:last-child { display: none; }.hero { min-height: unset; padding: 43px 0 44px; }.hero-graphic { position: absolute; right: -75px; top: 52px; opacity: .2; transform: scale(.9); }.hero-copy { max-width: 100%; }.hero h1 { max-width: 490px; font-size: clamp(35px, 10vw, 47px); }.hero-description { max-width: 470px; font-size: 13px; }.listing-section { padding: 36px 0 57px; }.section-heading { align-items: flex-end; }.section-heading h2 { font-size: 25px; }.result-count { font-size: 10px; }.filters { padding: 9px; gap: 8px; }.search-field { flex: 1 1 100%; }.select-field, .sort-field { flex: 1 1 calc(50% - 6px); min-width: 0; }.filter-button { flex: 1 1 100%; }.reset-filters { padding: 4px 5px; }.article-grid { grid-template-columns: 1fr; gap: 12px; }.article-card { min-height: unset; padding: 19px 18px 16px; }.card-meta { margin-bottom: 13px; }.article-card h3 { font-size: 17px; }.card-excerpt { margin-bottom: 16px; }.pagination { gap: 10px; }.page-control { padding: 0 9px; font-size: 10px; }.page-indicator { font-size: 10px; }.footer-inner { padding: 31px 0 24px; }.article-page { padding-top: 26px; }.article-header { padding-top: 37px; }.article-header h1 { font-size: clamp(30px, 9vw, 41px); }.article-byline { gap: 9px; }.copy-link { margin-left: 0; }.prose { font-size: 14px; line-height: 1.85; }.prose h2 { font-size: 22px; }.prose h3 { font-size: 18px; }.sources-section { padding: 19px 17px 15px; }.sources-heading-row h2 { font-size: 21px; } }