:root {
  --green: #004226;
  --cream: #fbf4e2;
  --paper: #fff;
  --ink: #152e21;
  --muted: #607267;
  --hair: rgba(0, 66, 38, .19);
  --display: "Neue Haas Grotesk", "Helvetica Neue", Arial, sans-serif;
  --reading: Georgia, "Times New Roman", serif;
  --side: clamp(22px, 4vw, 72px);
  --max: 1180px;
  --nav-height: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  background: var(--cream);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--green); background: var(--cream); font: 400 16px/1.5 var(--display); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
img { max-width: 100%; display: block; }
::selection { color: var(--cream); background: var(--green); }
.container { width: min(calc(100% - var(--side) * 2), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; left: 14px; top: 14px; z-index: 200; padding: 12px 18px; background: var(--cream); color: var(--green); transform: translateY(-200%); }
.skip-link:focus { transform: none; }

/* Consistent with the insights4org homepage navigation. */
.site-nav { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--nav-height); border-bottom: 1px solid rgba(255,255,255,.17); color: white; background: transparent; transition: background-color 300ms var(--ease), color 300ms var(--ease), border-color 300ms var(--ease); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.nav-brand { position: relative; display: block; flex-shrink: 0; width: 136px; aspect-ratio: 2048 / 450; overflow: hidden; }
.nav-logo { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); filter: brightness(0) invert(1); transition: filter 300ms var(--ease); }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 11px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; }
.nav-links a:not(.nav-contact):hover { text-decoration: underline; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 8px; }
.nav-links .nav-contact { min-height: 36px; padding: 0 17px; border: 1px solid rgba(255,255,255,.5); border-radius: 100px; transition: background-color 220ms var(--ease), color 220ms var(--ease); }
.nav-contact:hover { color: var(--green); background: #fff; }
.site-nav.is-scrolled { color: var(--green); background: var(--cream); border-bottom-color: var(--hair); }
.site-nav.is-scrolled .nav-logo { filter: brightness(0); }
.site-nav.is-scrolled .nav-contact { border-color: var(--hair); }
.site-nav.is-scrolled .nav-contact:hover { color: var(--cream); background: var(--green); }

/* Full-screen artwork hero echoes the insights4vc blog, in the org palette. */
.blog-hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; isolation: isolate; overflow: hidden; color: #fff; background: #212018; }
.blog-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(5, 17, 10, .20) 0%, rgba(5, 17, 10, .38) 46%, rgba(5, 17, 10, .68) 100%); }
.blog-hero-art { position: absolute; z-index: -2; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: center center; }
.blog-hero-content { display: grid; justify-items: center; gap: 26px; padding-block: var(--nav-height); text-align: center; }
.blog-hero-logo { width: min(620px, 70vw); height: auto; max-height: 165px; object-fit: contain; filter: brightness(0) invert(1); }
.blog-hero-subtitle { max-width: 680px; color: #fff; font-size: clamp(15px, 1.4vw, 19px); font-weight: 400; letter-spacing: .08em; line-height: 1.5; text-wrap: balance; }
.section-kicker { font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .19em; text-transform: uppercase; }

/* Editorial index. */
.index-intro { padding-block: clamp(85px, 10vw, 147px) 80px; }
.index-intro-grid { display: grid; grid-template-columns: minmax(0, .39fr) minmax(0, .61fr); gap: 50px; align-items: start; }
.index-intro .section-kicker { padding-top: 13px; color: var(--muted); }
.index-intro-heading { max-width: 830px; font-size: clamp(49px, 6.3vw, 89px); font-weight: 450; line-height: 1.01; letter-spacing: -.068em; text-wrap: balance; }
.index-intro-deck { max-width: 680px; margin: 27px 0 0 auto; color: #44594a; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; }
.feature-section { padding-bottom: clamp(95px, 10vw, 150px); }
.section-heading-rule { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; padding-bottom: 23px; border-bottom: 1px solid var(--hair); }
.section-heading-rule h2 { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2; font-weight: 450; letter-spacing: -.04em; }
.section-heading-rule span { color: var(--muted); font-size: 12px; letter-spacing: .04em; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding-top: 30px; }
.feature-card { display: flex; flex-direction: column; min-width: 0; height: 100%; background: var(--green); color: #fff; }
.feature-card-image { position: relative; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: #5d5548; }
.feature-card-image img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 52% 50%; transition: transform 800ms var(--ease); }
.feature-card:hover .feature-card-image img { transform: scale(1.035); }
.feature-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-height: 443px; padding: clamp(28px, 3vw, 41px); }
.feature-meta { color: rgba(255,255,255,.72); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: .13em; text-transform: uppercase; }
.feature-card h3 { margin-top: 25px; max-width: 500px; font-size: clamp(31px, 3.1vw, 44px); font-weight: 450; line-height: 1.08; letter-spacing: -.06em; }
.feature-deck { max-width: 490px; margin-top: 21px; margin-bottom: 94px; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.65; }
.feature-action { display: inline-flex; align-items: center; justify-content: center; width: 212px; min-height: 54px; margin-top: auto; padding: 16px 20px; border: 1px solid rgba(255,255,255,.62); border-radius: 2px; font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: .14em; text-align: center; text-transform: uppercase; transition: background-color 230ms var(--ease), color 230ms var(--ease), border-color 230ms var(--ease); }
.feature-card:is(:hover,:focus-visible) .feature-action { color: var(--green); background: #fff; border-color: #fff; }
.series-note { display: grid; grid-template-columns: 1fr 2fr; gap: 50px; padding-block: clamp(56px, 7vw, 99px); border-top: 1px solid var(--hair); }
.series-note .section-kicker { color: var(--muted); }
.series-note h2 { max-width: 610px; font-size: clamp(30px, 3.6vw, 49px); font-weight: 450; line-height: 1.14; letter-spacing: -.053em; }
.series-note p { max-width: 590px; margin-top: 19px; color: #52665a; font-size: 16px; line-height: 1.68; }

/* Article hero and reading experience. */
.article-hero { position: relative; display: flex; align-items: flex-end; isolation: isolate; min-height: min(880px, 96svh); min-height: clamp(690px, 92svh, 960px); overflow: hidden; color: #fff; background: #515a4d; }
.article-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,19,12,.23) 0%, rgba(9,19,12,.18) 34%, rgba(9,19,12,.76) 100%); }
.article-hero-art { position: absolute; inset: 0; z-index: -2; height: 100%; width: 100%; object-fit: cover; object-position: 50% 52%; }
.article-hero-copy { padding-top: 180px; padding-bottom: clamp(57px, 7vw, 100px); }
.article-hero-breadcrumb { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.article-hero-breadcrumb a { border-bottom: 1px solid rgba(255,255,255,.55); }
.article-hero-kicker { margin-top: 63px; font-size: 12px; letter-spacing: .21em; text-transform: uppercase; }
.article-hero h1 { max-width: 1050px; margin-top: 18px; font-size: clamp(53px, 7.2vw, 107px); line-height: 1; font-weight: 450; letter-spacing: -.073em; text-wrap: balance; }
.article-hero-deck { max-width: 760px; margin-top: 29px; color: rgba(255,255,255,.92); font-size: clamp(18px, 2.0vw, 24px); line-height: 1.46; text-wrap: balance; }
.article-hero-meta { display: flex; flex-wrap: wrap; gap: 9px 21px; margin-top: 44px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.81); }
.artwork-credit { padding-block: 15px; color: var(--muted); border-bottom: 1px solid var(--hair); font-size: 11px; line-height: 1.45; }
.artwork-credit a { text-decoration: underline; }
.article-layout { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 740px); justify-content: center; gap: clamp(35px, 5vw, 88px); padding-block: clamp(65px, 9vw, 127px) 90px; }
.article-rail { align-self: start; position: sticky; top: 112px; padding-top: 7px; }
.article-rail-rule { width: 45px; height: 1px; margin-bottom: 18px; background: var(--green); }
.article-rail .section-kicker { color: var(--green); }
.article-rail p { max-width: 150px; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.article-prose { min-width: 0; }
.article-prose > p, .article-prose > h2, .article-prose > blockquote { max-width: 740px; }
.article-prose > p { margin: 0 0 26px; color: var(--ink); font: 400 clamp(18px, 1.73vw, 21px)/1.77 var(--reading); }
.article-prose > p:first-of-type::first-letter { float: left; margin: 11px 10px 0 -3px; font: 400 73px/.72 var(--reading); color: var(--green); }
.article-prose h2 { margin: 60px 0 23px; font-size: clamp(32px, 3.6vw, 47px); line-height: 1.15; font-weight: 450; letter-spacing: -.055em; }
.article-prose a:not(.citation-link) { color: var(--green); text-decoration: underline; }
.article-prose sup { vertical-align: super; font: 500 12px/1 var(--display); white-space: nowrap; }
.citation-link { padding-left: 3px; color: #446e57; }
.article-prose blockquote { margin: 40px 0; padding: 11px 0 11px 28px; border-left: 2px solid var(--green); color: var(--green); font: 400 clamp(24px, 3vw, 38px)/1.3 var(--reading); }
.article-prose blockquote cite { display: block; margin-top: 16px; font: 500 11px/1.5 var(--display); letter-spacing: .13em; text-transform: uppercase; }
.record-wrap { margin: 35px 0 38px; padding: 33px; background: #fff; border: 1px solid var(--hair); }
.record-wrap h3 { margin-bottom: 22px; font-size: 25px; font-weight: 450; line-height: 1.2; letter-spacing: -.04em; }
.record-table { width: 100%; border-collapse: collapse; text-align: left; }
.record-table tr { border-top: 1px solid var(--hair); }
.record-table th, .record-table td { vertical-align: top; padding: 13px 0; font-size: 14px; line-height: 1.55; }
.record-table th { width: 31%; padding-right: 16px; font-weight: 500; color: var(--muted); }
.record-table td { color: var(--ink); }
.record-note { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.exhibit { margin: 40px 0 45px; padding: clamp(22px, 3vw, 38px); color: #fff; background: var(--green); }
.exhibit h3 { margin-top: 9px; font-size: clamp(26px, 3vw, 39px); font-weight: 450; letter-spacing: -.04em; line-height: 1.17; }
.exhibit-subtitle { margin-top: 10px; margin-bottom: 25px; color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.55; }
.exhibit-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.timeline { display: grid; grid-template-columns: minmax(90px, .8fr) repeat(4, minmax(118px, 1fr)); min-width: 600px; }
.timeline--five { grid-template-columns: minmax(90px, .8fr) repeat(5, minmax(112px, 1fr)); min-width: 720px; }
.timeline--five .timeline-cell:nth-child(5n+1) { padding-left: 10px; font-weight: inherit; color: inherit; }
.timeline--five .timeline-cell:nth-child(6n+1) { padding-left: 0; font-weight: 600; color: rgba(255,255,255,.95); }
.timeline-cell { min-height: 65px; padding: 13px 10px; border-top: 1px solid rgba(255,255,255,.22); font-size: 12px; line-height: 1.45; }
.timeline-cell:nth-child(5n+1) { padding-left: 0; font-weight: 600; color: rgba(255,255,255,.95); }
.timeline-head { min-height: 40px; padding-top: 0; border-top: none; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.68); }
.timeline-pill { display: inline-block; padding: 3px 8px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; }
.exhibit-caption { margin-top: 21px; color: rgba(255,255,255,.68); font-size: 11px; line-height: 1.6; }
.feedback-table { width: 100%; min-width: 570px; border-collapse: collapse; text-align: left; }
.feedback-table th, .feedback-table td { padding: 15px 13px; border-top: 1px solid rgba(255,255,255,.23); vertical-align: top; font-size: 12px; line-height: 1.5; }
.feedback-table thead th { border-top: 0; padding-top: 0; color: rgba(255,255,255,.73); font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
.feedback-table tbody th { width: 21%; padding-left: 0; color: #fff; font-weight: 600; }
.feedback-table tbody td { width: 39.5%; color: rgba(255,255,255,.86); }
.article-after { padding-block: 35px 100px; border-top: 1px solid var(--hair); }
.article-after-grid { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 740px); justify-content: center; gap: clamp(35px, 5vw, 88px); }
.article-after .section-kicker { padding-top: 8px; color: var(--muted); }
.sources-heading { margin-bottom: 24px; font-size: 34px; font-weight: 450; letter-spacing: -.05em; }
.sources-list { padding-left: 22px; }
.sources-list li { margin-bottom: 18px; padding-left: 5px; font-size: 14px; color: #41594c; line-height: 1.6; overflow-wrap: anywhere; }
.sources-list a { color: var(--green); text-decoration: underline; }
.sources-note { margin-top: 25px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.back-link { display: inline-flex; gap: 13px; align-items: center; margin-top: 42px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; border-bottom: 1px solid var(--green); padding-bottom: 8px; }
.site-footer { background: var(--green); color: var(--cream); }
.footer-inner { min-height: 92px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; padding-block: 25px; }
.footer-inner small { font-size: 12px; }
.footer-links { display: flex; gap: 27px; align-items: center; flex-wrap: wrap; }
.footer-links a { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.footer-links a:hover { text-decoration: underline; }

@media (max-width: 950px) {
  .article-layout, .article-after-grid { grid-template-columns: minmax(0, 730px); }
  .article-rail { position: static; display: flex; align-items: center; gap: 15px; }
  .article-rail-rule { margin: 0; }
  .article-rail p { max-width: none; margin-top: 0; }
  .article-after .section-kicker { margin-bottom: 21px; }
  .feature-card h3 { font-size: clamp(31px, 3.7vw, 40px); }
}
@media (max-width: 760px) {
  :root { --nav-height: 66px; }
  .nav-inner { gap: 9px; }
  .nav-brand { width: 102px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 10px; letter-spacing: .1em; }
  .nav-links .nav-contact { min-height: 34px; padding-inline: 14px; }
  .blog-hero-content { gap: 23px; }
  .blog-hero-logo { width: min(310px, 72vw); }
  .blog-hero-subtitle { max-width: 340px; font-size: 15px; line-height: 1.6; letter-spacing: .06em; }
  .index-intro { padding-block: 68px 64px; }
  .index-intro-grid { grid-template-columns: 1fr; gap: 20px; }
  .index-intro-heading { font-size: clamp(52px, 11vw, 73px); }
  .index-intro-deck { margin: 23px 0 0; font-size: 17px; }
  .feature-grid { grid-template-columns: 1fr; gap: 25px; padding-top: 25px; }
  .feature-card-image { aspect-ratio: 16 / 10; }
  .feature-card-copy { min-height: 392px; padding: 32px 30px 40px; }
  .feature-card h3 { margin-top: 24px; font-size: clamp(36px, 8vw, 49px); }
  .feature-deck { margin-bottom: 89px; }
  .feature-action { margin-top: auto; }
  .series-note { grid-template-columns: 1fr; gap: 15px; }
  .article-hero { min-height: min(790px, 94svh); }
  .article-hero-art { object-position: 58% 50%; }
  .article-hero-copy { padding-top: 130px; padding-bottom: 58px; }
  .article-hero-kicker { margin-top: 42px; }
  .article-hero h1 { font-size: clamp(49px, 11vw, 76px); }
  .article-hero-deck { font-size: 18px; }
  .article-layout { padding-block: 62px 65px; gap: 33px; }
  .article-prose > p { font-size: 18px; line-height: 1.75; }
  .record-wrap { margin-inline: -1px; padding: 24px 19px; }
  .record-table th { width: 34%; }
  .record-table td, .record-table th { font-size: 13px; }
  .exhibit { margin-inline: -1px; padding: 24px 17px; }
  .article-after { padding-bottom: 73px; }
  .footer-inner { min-height: 105px; }
}
@media (max-width: 359px) {
  :root { --side: 14px; }
  .nav-inner { gap: 8px; }
  .nav-brand { width: 86px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 9px; letter-spacing: .07em; }
  .nav-links .nav-contact { min-height: 32px; padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* Editorial evidence photography, kept secondary to the artwork-led hero. */
.editorial-photo { max-width: 740px; margin: 46px 0 54px; }
.editorial-photo img { display: block; width: 100%; height: auto; background: #f0f0eb; }
.editorial-photo-narrow { max-width: min(440px, 100%); margin-inline: auto; }
.editorial-photo figcaption { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(15, 47, 30, .23); color: #6a6d67; font: 400 12px/1.6 var(--display); }
.editorial-photo-number { color: var(--green); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.article-prose .editorial-photo figcaption a:not(.citation-link) { color: inherit; text-underline-offset: 2px; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .editorial-photo { margin: 35px 0 45px; } .editorial-photo figcaption { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; font-size: 11px; } }