@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');
/* ovarticles.css - shared article polish + related-reads, loaded on the 34
   editorial article pages. Modern type on headings, a reading-progress bar,
   and a "More from our data desk" card row. 2026-09-20. */

/* modern grotesk on the article headline + hero text */
h1, .hero .htxt, .heyebrow, .statbox .big, .ov-rr-h {
  font-family: 'Space Grotesk', 'DM Sans', Arial, sans-serif;
  letter-spacing: -0.015em;
}

/* reading-progress bar */
.ov-prog { position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #69BE28, #C9A24B); z-index: 1200;
  transition: width .12s ease; box-shadow: 0 0 8px rgba(105,190,40,.5); }
html.ovf-on .ov-prog { top: 54px; }
@media (max-width: 820px){ html.ovf-on .ov-prog { top: 0; } }

/* key takeaways box */
.ov-kt { background: linear-gradient(180deg,#F3F8F3,#FBFDFB); border: 1px solid #D8E6D8;
  border-left: 4px solid #69BE28; border-radius: 12px; padding: 14px 18px 15px; margin: 18px 0 22px;
  box-shadow: 0 6px 18px rgba(18,54,31,.06); }
.ov-kt-h { font-family: 'Space Grotesk','DM Sans',sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #1F5C3D; margin: 0 0 8px; }
.ov-kt ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.ov-kt li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.5; color: #21372A; }
.ov-kt li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: #2E7D4F; font-weight: 800; }

/* hero chart / stat pop */
.hero .hsvg svg, .hero svg { filter: drop-shadow(0 4px 10px rgba(0,0,0,.18)); }
.statbox .big { font-family: 'Space Grotesk','DM Sans',sans-serif; letter-spacing: -.02em; }

/* breadcrumb */
.ov-crumb { font-size: 12px; color: #7d8a7d; margin: 0 0 10px; }
.ov-crumb a { color: #1F5C3D; text-decoration: none; font-weight: 600; }
.ov-crumb span { margin: 0 6px; opacity: .6; }

/* related reads */
.ov-rr { margin: 40px 0 8px; }
.ov-rr-h { font-weight: 700; font-size: 21px; color: #143620; margin: 0 0 4px; }
.ov-rr-sub { font-size: 12.5px; color: #6E7A6E; margin: 0 0 16px; }
.ov-rr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .ov-rr-grid { grid-template-columns: 1fr; } }
.ov-rr-card { display: flex; flex-direction: column; background: linear-gradient(180deg,#fff,#FBF7EC);
  border: 1px solid #E7DDC6; border-radius: 14px; overflow: hidden; text-decoration: none; color: #16261b;
  box-shadow: 0 6px 18px rgba(18,54,31,.07); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ov-rr-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(18,54,31,.14); border-color: #C9A24B; }
.ov-rr-img { height: 116px; background-size: cover; background-position: center; position: relative; }
.ov-rr-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,42,24,.05), rgba(16,42,24,.42)); }
.ov-rr-body { padding: 12px 14px 15px; display: flex; flex-direction: column; gap: 6px; }
.ov-rr-cat { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #7a5a12; }
.ov-rr-t { font-weight: 800; font-size: 14.5px; line-height: 1.25; color: #16261b; }
.ov-rr-hook { font-size: 12px; color: #5c6a5c; line-height: 1.45; }
.ov-rr-go { margin-top: auto; font-size: 12px; font-weight: 800; color: #1F5C3D; padding-top: 4px; }
.ov-rr-all { display: inline-block; margin: 18px 0 6px; font-weight: 800; color: #1F5C3D; text-decoration: none; }
.ov-rr-all:hover { color: #2E7D4F; }