/* folded from: assets/home.css, assets/home-art-direction-20261009.css */
/* ==== assets/home.css ==== */
/* Homepage foundation and shared shell. Keep breakpoint-specific rules at their original cascade position. */
:root {
--ink: #131713;
--serif: "Playfair Display","Iowan Old Style",Georgia,serif;
--sans: Inter,Arial,sans-serif;
--mono: "JetBrains Mono",ui-monospace,monospace;
--ease: var(--cv-ease-move);
--ease-soft: var(--cv-ease-move);
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
a {
color: inherit;
text-decoration: none;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
img {
display: block;
max-width: 100%;
}
button {
font: inherit;
}
/* Home's sections share the shell measure, so nav, sections, closing band and footer
all start on one edge. */
.container {
width: min(calc(100% - 44px),var(--cv-shell-max,1280px));
margin-inline: auto;
padding-inline: 0;
}
@media (max-width:720px) {
.container {
width: calc(100% - 40px);
}
}
.kicker {
display: block;
margin-bottom: 18px;
color: #315d48;
font: 600 10.5px/1.2 var(--mono);
text-transform: uppercase;
}
.display-title {
margin: 0;
font: 400 clamp(44px,5.5vw,78px)/.94 var(--serif);
letter-spacing: -.045em;
}
.editorial-link {
gap: 12px;
font: 600 11.5px/1.35 var(--mono);
letter-spacing: .012em;
}
.editorial-link b {
font-size: 14px;
font-weight: 500;
transition: transform 180ms ease;
}
.editorial-link:hover b {
transform: translate(2px,-2px);
}
.editorial-link {
padding-bottom: 5px;
}
.reveal {
transition: opacity 700ms var(--ease),transform 700ms var(--ease);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (max-width:620px) {
.display-title {
font-size: clamp(42px,13vw,60px);
}
}
.kicker {
font-size: 11px;
}
.editorial-link {
font-size: 12px;
}
:root {
--shell-paper: #f4f1e9;
--shell-paper-2: #eee9df;
--shell-paper-hi: #faf8f2;
--shell-ink: #151a15;
--shell-line: rgba(20,37,27,.16);
--shell-line-soft: rgba(20,37,27,.085);
--shell-moss: #9ab391;
--shell-forest: #09251a;
--shell-soil: #1b130d;
}
body {
background: var(--shell-paper);
color: var(--shell-ink);
}
main {
position: relative;
overflow: hidden;
}
main>section {
scroll-margin-top: var(--nav-h);
}
.kicker {
letter-spacing: .145em;
}
.display-title {
text-wrap: balance;
}
.reveal {
transition-duration: 640ms;
}
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
}
.page-home .shell-primary-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 21px;
border: 1px solid #141714;
border-radius: 999px;
background: #141714;
color: #fff;
font-size: .86rem;
transition: transform 220ms var(--ease),background 220ms var(--ease);
}
.page-home .shell-primary-button:is(:hover,:focus-visible) {
transform: translateY(-1px);
background: #0d2f20;
}
.page-home .home-mavh,
.page-home .home-publication {
position: relative;
scroll-margin-top: var(--nav-h);
overflow: hidden;
}
.page-home .home-mavh__media {
min-width: 0;
}
.page-home .home-mavh__media img {
height: clamp(500px,52vw,690px);
}
.page-home .home-mavh__media figcaption {
justify-content: space-between;
gap: 18px;
padding-top: 10px;
border-top: 1px solid rgba(19,23,19,.16);
}
.page-home .home-publication {
color: var(--ink);
}
.page-home .home-publication__spread {
grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
gap: clamp(42px,6vw,92px);
align-items: start;
}
.page-home .home-publication__lede {
font: 400 clamp(24px,2.25vw,33px)/1.25 var(--serif);
letter-spacing: -.025em;
}
.page-home .home-publication__media figcaption {
border-top: 1px solid rgba(19,23,19,.16);
font: 500 10.5px/1.45 var(--mono);
}
@media (max-width:980px) {
.page-home .home-mavh__media img {
height: 560px;
}
.page-home .home-publication__spread {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
}
@media (min-width:981px) {
.page-home .home-mavh {
padding-top: clamp(56px,5vw,72px);
padding-bottom: clamp(56px,5vw,72px);
}
.page-home .home-mavh__media img {
height: clamp(470px,43vw,590px);
}
.page-home .home-publication {
padding-top: clamp(56px,5vw,74px);
padding-bottom: clamp(58px,5.2vw,76px);
}
.page-home .home-publication__spread {
grid-template-columns: minmax(0,.96fr) minmax(420px,1.04fr);
gap: clamp(44px,5.2vw,78px);
align-items: center;
}
.page-home .home-publication__lede {
margin-top: 20px;
}
}
@media (max-width:760px) {
.page-home .home-mavh__grid,
.page-home .home-publication__spread {
grid-template-columns: 1fr;
}
.page-home .home-mavh__grid,
.page-home .home-publication__spread {
gap: 24px;
}
.page-home .home-mavh__media img {
height: min(78vw,360px);
}
.page-home .home-publication__lede {
margin-top: 18px;
}
}
.page-home .home-publication__masthead {
padding-top: 2px;
border-top: 1px solid rgba(19,23,19,.18);
}
.page-home .home-publication__copy {
padding-top: 28px;
max-width: none;
}
.page-home .home-publication__media figcaption {
justify-content: flex-end;
padding-top: 9px;
}
@media (max-width: 760px) {
.page-home .home-publication__masthead {
padding-top: 0;
border-top: 0;
}
body.page-home .cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-menu {
width: auto;
height: 44px;
min-width: 44px;
min-height: 44px;
border: 1px solid rgba(255,255,255,.68);
background: rgba(5,12,8,.24);
box-shadow: 0 2px 14px rgba(0,0,0,.13),inset 0 0 0 1px rgba(0,0,0,.06);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
filter: drop-shadow(0 1px 2px rgba(0,0,0,.32));
}
body.page-home .cv-global-menu::before,
body.page-home .cv-global-menu::after {
width: 15px;
height: 1.75px;
}
}
@media (prefers-reduced-motion:reduce) {
body.page-home .cv-global-menu {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
.page-home .home-mavh__media figcaption {
font-size: 11px;
line-height: 1.5;
}
.page-home .home-mavh__copy>.editorial-link {
display: inline-flex;
min-height: 46px;
align-items: center;
gap: 8px;
color: #173e2b;
font-size: 12px;
font-weight: 700;
letter-spacing: .01em;
}
@media (min-width:761px) and (max-width:820px) {
.page-home .home-mavh__media img {
height: min(62vw,460px);
}
}
@media (max-width:760px) {
.page-home .home-mavh__media figcaption,
.page-home .home-publication__media figcaption {
padding-top: 8px;
font-size: 11.5px;
line-height: 1.45;
}
.page-home .home-mavh__copy .display-title {
margin-top: 10px;
}
.page-home .home-mavh__copy>.editorial-link {
width: 100%;
min-height: 48px;
padding: 0 2px;
justify-content: space-between;
border-bottom: 1px solid rgba(23,62,43,.28);
font-size: 12.5px;
}
.page-home .home-publication__intro .editorial-link {
display: inline-flex;
min-height: 46px;
align-items: center;
font-size: 11px;
font-weight: 600;
}
.page-home .home-publication__plate {
flex-direction: column;
}
.page-home .home-publication__media {
order: 1;
margin-top: 0;
}
}
:root {
  --cv-nav-height: 64px;
  --global-nav-height: var(--cv-nav-height);
  --nav-height: var(--cv-nav-height);
  --nav-h: var(--cv-nav-height);
  --cv-shell-max: 1280px;
  --cv-shell-gutter: clamp(22px,3.5vw,42px);
  --cv-shell-paper: rgba(249,249,245,.975);
  --cv-shell-ink: #171b17;
  --cv-shell-muted: #5a605a;
  --cv-shell-line: rgba(23,27,23,.12);
  --cv-shell-ease: var(--cv-ease-enter);
}

.cv-global-nav {
  --cv-nav-cta: #141814;
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  height: var(--cv-nav-height);
  color: var(--cv-shell-ink);
  background: var(--cv-shell-paper);
  border-bottom: 1px solid var(--cv-shell-line);
  box-shadow: none;
  backdrop-filter: blur(18px) saturate(1.04);
  -webkit-backdrop-filter: blur(18px) saturate(1.04);
  transition: background .28s var(--cv-shell-ease),color .28s var(--cv-shell-ease),border-color .28s var(--cv-shell-ease),backdrop-filter .28s var(--cv-shell-ease);
}

.cv-global-nav__inner {
  width: min(calc(100% - 44px),var(--cv-shell-max));
  height: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 136px 1fr auto;
  align-items: center;
  gap: clamp(24px,2.8vw,44px);
}

.cv-global-brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  width: 136px;
  height: 44px;
  min-height: 44px;
}

.cv-global-logo {
  position: absolute;
  left: 0;
  top: 50%;
  width: 136px;
  height: auto;
  transform: translateY(calc(-50% + 1px));
  transition: opacity .22s ease;
  pointer-events: none;
  filter: none;
  box-shadow: none;
  object-fit: contain;
  object-position: left center;
}

.cv-global-logo--primary {
  opacity: 1;
}

.cv-global-logo--reverse {
  opacity: 0;
}

.cv-global-links {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(18px,1.5vw,28px);
  font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .065em;
  text-transform: uppercase;
  color: var(--cv-shell-muted);
}

.cv-global-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
  transition: color .18s ease,opacity .18s ease;
}

.cv-global-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(.62);
  transform-origin: center;
  transition: opacity .18s ease,transform .2s var(--cv-shell-ease);
}

.cv-global-links a:is(:hover,:focus-visible,[aria-current="page"]) {
  color: var(--cv-shell-ink);
}

.cv-global-links a:is(:hover,:focus-visible,[aria-current="page"])::after {
  opacity: .72;
  transform: scaleX(1);
}

.cv-global-cta {
  display: inline-flex;
}

.cv-global-menu {
  display: none;
  position: relative;
  justify-self: end;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 40px 0 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .16s ease,opacity .16s ease,filter .16s ease;
}

/* The plus sits after the visible "Menu" label and turns to a close mark when open. */
.cv-global-menu::before,
.cv-global-menu::after {
  content: "";
  position: absolute;
  left: calc(100% - 20px);
  top: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 140ms var(--cv-shell-ease);
}

.cv-global-menu::before {
  transform: translate(-50%,-50%) rotate(0deg);
}

.cv-global-menu::after {
  transform: translate(-50%,-50%) rotate(90deg);
}

.cv-global-menu[aria-expanded="true"]::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.cv-global-menu[aria-expanded="true"]::after {
  transform: translate(-50%,-50%) rotate(135deg);
}

.cv-global-menu:is(:hover,:focus-visible) {
  opacity: 1;
}

.cv-global-menu:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.cv-global-mobile {
  display: none;
  position: fixed;
  top: var(--cv-nav-height);
  left: 0;
  right: 0;
  z-index: 999;
  padding: 14px 22px max(26px,env(safe-area-inset-bottom));
  border-bottom: 1px solid var(--cv-shell-line);
  background: #f9f9f5;
  box-shadow: 0 18px 42px rgba(10,24,16,.10);
}

.cv-global-mobile.is-open {
  display: grid;
}

.cv-global-mobile a {
  display: flex;
  align-items: center;
  min-height: 48px;
  border-bottom: 1px solid rgba(23,27,23,.09);
  color: var(--cv-shell-ink);
  font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .075em;
  text-transform: uppercase;
  text-decoration: none;
}

.cv-global-mobile a[aria-current="page"] {
  font-weight: 600;
}

.cv-global-mobile > a:not(.cv-global-mobile__cta) {
  padding-inline-start: 12px;
}

.cv-global-mobile > a[aria-current="page"] {
  color: #16382a;
  box-shadow: inset 2px 0 0 #528467;
}

.cv-global-mobile .cv-global-mobile__cta {
  justify-content: center;
  margin-top: 16px;
  border: 0;
  border-radius: 999px;
  background: #16382a;
  color: #fff;
  font-weight: 600;
  letter-spacing: .045em;
}

/* Funding priorities inside the shared mobile menu inherit the institutional shell. */
.funding-mobile-menu__detail[hidden]{display:none}
@media(max-width:1180px){
.cv-global-mobile .funding-mobile-menu{display:block;margin:0;padding:0 0 0 16px;border-bottom:1px solid rgba(23,27,23,.09)}
.cv-global-mobile .funding-mobile-menu__head{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:100%;min-height:44px;padding:0 40px 0 14px;position:relative;border:0;background:transparent;color:rgba(20,23,20,.72);text-align:left;cursor:pointer}
.cv-global-mobile .funding-mobile-menu__head::before,.cv-global-mobile .funding-mobile-menu__head::after{content:"";position:absolute;right:14.5px;top:50%;width:11px;height:1.5px;border-radius:999px;background:currentColor;transform:translateY(-50%);transition:transform 140ms var(--cv-shell-ease)}
.cv-global-mobile .funding-mobile-menu__head::after{transform:translateY(-50%) rotate(90deg)}
.cv-global-mobile .funding-mobile-menu__head[aria-expanded="true"]::after{transform:translateY(-50%) rotate(0deg)}
.cv-global-mobile .funding-mobile-menu__head:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.cv-global-mobile .funding-mobile-menu__body{padding-bottom:8px}
.cv-global-mobile .funding-mobile-menu__body[hidden]{display:none}
.cv-global-mobile .funding-mobile-menu__label{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;color:inherit}
.cv-global-mobile .funding-mobile-menu__head small{font-family:var(--mono,'JetBrains Mono',monospace);font-size:11px;color:rgba(20,23,20,.62)}
.cv-global-mobile .funding-mobile-menu__list{display:grid}
.cv-global-mobile .funding-mobile-menu__priority{min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;align-content:center;width:100%;padding:0;border:0;border-top:1px solid rgba(23,24,19,.09);background:transparent;color:rgba(20,23,20,.78);text-align:left;font:500 14px/1.25 var(--sans,'Inter',sans-serif);cursor:pointer}
.cv-global-mobile .funding-mobile-menu__priority small{font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;font-weight:500;color:rgba(20,23,20,.62)}
.cv-global-mobile .funding-mobile-menu__priority:is(.is-active,[aria-expanded="true"]){color:#16382a;box-shadow:inset 3px 0 0 #77a553;padding-left:12px}
.cv-global-mobile .funding-mobile-menu__detail{padding:12px 0 8px;border-top:1px solid rgba(23,24,19,.1)}
.cv-global-mobile .funding-mobile-menu__detail p{display:grid;gap:5px;margin:0;color:rgba(20,23,20,.68);font-size:12.5px;line-height:1.45}
.cv-global-mobile .funding-mobile-menu__detail p strong{color:#16382a;font-size:13px}
.cv-global-mobile .funding-mobile-menu__detail p em{font-style:normal;font-family:var(--mono,'JetBrains Mono',monospace);font-size:12px;letter-spacing:.02em;color:rgba(20,23,20,.62)}
.cv-global-mobile .funding-mobile-menu__detail a{display:inline-flex;min-height:44px;align-items:center;margin-top:4px;padding:7px 0 0;border:0;color:#16382a;font-size:12.5px;font-weight:600}
}
body.mobile-menu-open,
body.global-menu-open {
overflow: hidden;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) {
color: #fff;
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-logo--primary {
opacity: 0;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-logo--reverse {
opacity: 1;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-links {
color: rgba(255,255,255,.84);
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-links a:is(:hover,:focus-visible,[aria-current="page"]) {
color: #fff;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-cta {
background: rgba(10,18,12,.34);
color: #fff;
box-shadow: none;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-menu {
color: #fff;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
}
.cv-global-nav[data-cv-entry="transparent"][data-cv-tone="light"]:not(.is-scrolled) {
color: var(--cv-shell-ink);
background: transparent;
border-bottom-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.cv-global-nav[data-cv-entry="transparent"][data-cv-tone="light"]:not(.is-scrolled) .cv-global-cta {
background: var(--cv-nav-cta);
color: #fff;
box-shadow: none;
}
.cv-footer-v3 {
position: relative;
margin: 0;
background: #070d09;
color: #f3f5ef;
border-top: 1px solid rgba(169,202,156,.22);
}
/* Footer imprint: brand and links share a top line; the contact rule runs the full width
beneath both. The utility wrapper dissolves so nav and contact sit on the footer grid. */
.cv-footer-v3__inner {
width: min(calc(100% - 44px),var(--cv-shell-max));
margin-inline: auto;
padding: clamp(44px,4.6vw,64px) 0 clamp(25px,2.6vw,34px);
display: grid;
grid-template-columns: minmax(210px,.62fr) minmax(0,1.38fr);
grid-template-areas: "mast nav" "contact contact";
gap: clamp(30px,3.2vw,44px) clamp(38px,6vw,86px);
align-items: start;
}
.cv-footer-v3__mast {
grid-area: mast;
display: grid;
gap: 13px;
}
.cv-footer-v3__brand {
display: inline-flex;
width: 140px;
min-height: 44px;
align-items: center;
}
.cv-footer-v3__brand img {
display: block;
width: 140px;
height: auto;
}
.cv-footer-v3__mast p {
margin: 0;
color: rgba(243,245,239,.76);
font-family: var(--sans,Inter,system-ui,sans-serif);
font-size: .94rem;
line-height: 1.45;
}
.cv-footer-v3__utility {
display: contents;
}
.cv-footer-v3__nav {
grid-area: nav;
display: flex;
flex-wrap: wrap;
gap: 4px clamp(18px,2vw,30px);
}
.cv-footer-v3__nav a,
.cv-footer-v3__contact a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: rgba(243,245,239,.82);
text-decoration: none;
font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
font-size: 11px;
font-weight: 550;
line-height: 1.3;
letter-spacing: .045em;
text-transform: uppercase;
transition: color .18s ease;
}
.cv-footer-v3__nav a:is(:hover,:focus-visible),
.cv-footer-v3__contact a:is(:hover,:focus-visible) {
color: #fff;
}
.cv-footer-v3__contact {
grid-area: contact;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 28px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,.14);
}
.cv-footer-v3__contact>a:first-child {
color: rgba(243,245,239,.94);
text-transform: none;
letter-spacing: .02em;
}
.cv-footer-v3__credit {
color: rgba(243,245,239,.68) !important;
font-size: 10.5px !important;
text-transform: none !important;
letter-spacing: .025em !important;
}
/* Stack with the closing band at 900px: brand, one row of links, then contact. */
@media (max-width:900px) {
.cv-footer-v3__inner {
grid-template-columns: 1fr;
grid-template-areas: "mast" "nav" "contact";
gap: 24px;
}
}
@media (max-width:1180px) {
.cv-global-nav__inner {
grid-template-columns: 128px 1fr auto;
}
.cv-global-links,
.cv-global-cta {
display: none;
}
.cv-global-menu {
display: inline-flex;
align-items: center;
}
.cv-global-brand,
.cv-global-logo {
width: 128px;
}
}
@media (max-width: 760px) {
/* Links and CTA are hidden, so MENU takes the last track and meets the right content edge. */
.cv-global-menu {
grid-column: 3;
}
@media (max-width:720px) {
:root {
--cv-nav-height: 58px;
--global-nav-height: 58px;
--nav-height: 58px;
--nav-h: 58px;
}
.cv-global-nav__inner {
width: calc(100% - 40px);
grid-template-columns: clamp(116px,30.5vw,124px) 1fr auto;
}
.cv-global-brand,
.cv-global-logo {
width: clamp(116px,30.5vw,124px);
}
.cv-global-mobile {
padding-inline: 20px;
}
.cv-footer-v3__inner {
width: calc(100% - 40px);
padding-top: 34px;
}
.cv-footer-v3__nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
.cv-footer-v3__nav a {
min-height: 44px;
display: flex;
align-items: center;
}
.cv-footer-v3__contact {
display: grid;
justify-content: start;
}
}
}
@media (max-width:767px) {
body.page-home .cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-menu {
color: #fff;
}
}
@media (prefers-reduced-motion:reduce) {
.cv-global-nav,
.cv-global-logo,
.cv-global-links a,
.cv-global-links a::after,
.cv-global-cta,
.cv-global-menu,
.cv-global-menu::before,
.cv-global-menu::after {
transition: none;
}
}
body.page-home {
--cv-page-cta: #141814;
--cv-page-cta-hover: #263128;
}
.cv-global-links a,
.cv-global-links a:is(:hover,:focus-visible,[aria-current="page"]) {
background: transparent;
box-shadow: none;
transform: none;
}
body .cv-primary-cta {
display: inline-flex;
}
.cv-global-cta,
body .cv-primary-cta {
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
border: 1px solid var(--cv-page-cta,var(--cv-nav-cta,#141814));
border-radius: 999px;
background: var(--cv-page-cta,var(--cv-nav-cta,#141814));
color: #fff;
text-decoration: none;
white-space: nowrap;
font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: .035em;
box-shadow: none;
transition: background .18s ease,border-color .18s ease,color .18s ease;
}
/* The header CTA speaks the same uppercase mono as the links, MENU and drawer CTA. */
#mainNav .cv-global-cta {
text-transform: uppercase;
letter-spacing: .065em;
}
.cv-global-cta:is(:hover,:focus-visible),
body .cv-primary-cta:is(:hover,:focus-visible) {
background: var(--cv-page-cta-hover,var(--cv-page-cta,#141814));
border-color: var(--cv-page-cta-hover,var(--cv-page-cta,#141814));
color: #fff !important;
transform: none;
filter: none;
box-shadow: none;
}
.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-cta {
--cv-page-cta: rgba(10,18,12,.28);
--cv-page-cta-hover: rgba(10,18,12,.42);
border-color: rgba(255,255,255,.56);
}
body .cv-primary-cta:disabled,
body .cv-primary-cta[aria-disabled="true"] {
background: #e3e7e2;
border-color: #d7dcd6;
color: #747d76;
cursor: not-allowed;
box-shadow: none;
}
body .cv-footer-v3 {
margin-top: 0;
}
body .cv-footer-v3__brand img {
max-width: 100%;
object-fit: contain;
}
.skip-link {
position: fixed;
top: 12px;
left: 12px;
z-index: 10000;
display: inline-flex;
min-height: 44px;
align-items: center;
padding: 10px 16px;
border-radius: 999px;
background: #fff;
color: #102018;
font: 600 .875rem/1.2 Inter,system-ui,sans-serif;
text-decoration: none;
/* The lift shadow appears only on focus; at rest it bled 20px into ivory headers. */
box-shadow: none;
transform: translateY(calc(-100% - 24px));
transition: transform 150ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
box-shadow: 0 8px 24px rgba(8,24,16,.18);
}
:root {
--cv-shell-offset: var(--cv-nav-height);
}
@media (max-width:767px) {
.cv-global-cta {
display: none !important;
}
.cv-global-mobile a:last-child:not([aria-current="page"]) {
margin-bottom: 0;
}
}
body .global-closing.global-closing {
position: relative;
isolation: isolate;
margin: 0;
padding: clamp(66px,7.5vw,104px) 0 clamp(80px,8.5vw,122px);
background: #10261a;
color: #f3f4ee;
border-top: 1px solid rgba(255,255,255,.12);
overflow: hidden;
}
body .global-closing.global-closing::after {
content: none;
}
body .global-closing.global-closing>.container {
position: relative;
z-index: 1;
width: min(calc(100% - 44px),var(--cv-shell-max,1280px));
max-width: none;
margin-inline: auto;
padding-inline: 0;
}
body .global-cta-band.global-cta-band {
display: grid;
width: 100%;
margin: 0;
grid-template-columns: minmax(0,.98fr) minmax(300px,.62fr);
gap: clamp(42px,7vw,104px);
align-items: end;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
box-shadow: none;
}
body .global-cta-kicker.global-cta-kicker {
display: block;
margin-bottom: 16px;
color: #a9c49d;
font-family: var(--mono,"JetBrains Mono",ui-monospace,monospace);
font-size: 10px;
font-weight: 600;
line-height: 1.3;
letter-spacing: .15em;
text-transform: uppercase;
}
body .global-cta-title.global-cta-title {
max-width: 14ch;
margin: 0;
color: #f5f4ed;
font-family: var(--serif,"Playfair Display",Georgia,serif);
font-size: clamp(3.35rem,5.2vw,5.75rem);
font-weight: 500;
line-height: .93;
letter-spacing: -.048em;
text-wrap: balance;
}
body .global-cta-action.global-cta-action {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding-bottom: 4px;
}
body .global-cta-copy.global-cta-copy {
max-width: 31rem;
margin: 0;
color: rgba(243,244,238,.72);
font-family: var(--sans,Inter,system-ui,sans-serif);
font-size: clamp(1rem,1.15vw,1.08rem);
font-weight: 400;
line-height: 1.58;
}
body .global-cta-actions.global-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
body .global-closing :is(.cv-primary-cta,.shell-primary-button) {
--cv-page-cta: #eef0e7;
--cv-page-cta-hover: #ffffff;
border-color: #eef0e7;
background: #eef0e7;
color: #10261a !important;
}
body .global-closing :is(.cv-primary-cta,.shell-primary-button):is(:hover,:focus-visible) {
border-color: #fff;
background: #fff;
color: #10261a !important;
}
@media (max-width: 900px) {
body .global-cta-band.global-cta-band {
grid-template-columns: 1fr !important;
gap: 28px !important;
align-items: start !important;
}
}
@media (max-width: 620px) {
body .global-closing.global-closing {
padding: 52px 0 54px;
}
body .global-closing.global-closing>.container {
width: calc(100% - 40px);
padding-inline: 0;
}
body .global-cta-band.global-cta-band {
padding: 0 !important;
border-radius: 0 !important;
}
body .global-cta-title.global-cta-title {
font-size: clamp(2.7rem,12vw,3.7rem);
}
}
@media (prefers-reduced-motion:reduce) {
body.page-home *,
body.page-home *::before,
body.page-home *::after {
transition: none !important;
animation: none !important;
scroll-behavior: auto !important;
}
}
.page-home .home-proof-caption__label {
display: block;
}
.page-home .home-publication__media figcaption {
gap: 12px 28px;
align-items: start;
}
@media (min-width: 761px) {
.page-home .home-mavh__media figcaption {
gap: 10px 24px;
align-items: start;
}
.page-home .home-mavh__media figcaption,
.page-home .home-publication__media figcaption {
padding-top: 11px;
font-size: 10.75px;
line-height: 1.48;
}
}
@media (max-width: 760px) {
.page-home .home-publication {
overflow: visible;
scroll-margin-top: calc(var(--cv-nav-height,64px) + 18px);
}
.page-home .home-publication__spread {
transform: none !important;
overflow: visible;
}
.page-home .home-publication__copy {
padding-top: 0;
overflow: visible;
}
.page-home .home-publication__copy .display-title {
margin-top: 9px;
overflow: visible;
}
.page-home .home-publication__intro {
margin-top: 17px;
padding-top: 16px;
}
.page-home .home-publication__plate {
margin-top: 20px;
}
.page-home .home-publication__media figcaption {
padding-top: 8px;
}
}
.editorial-arrow {
display: block;
flex: 0 0 auto;
width: 16px;
height: 16px;
overflow: visible;
}
.editorial-arrow path {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: square;
stroke-linejoin: miter;
}
/* Same header CTA as the rest of the site: deep green on paper, one ink ghost over the hero. */
html body.page-home #mainNav.cv-global-nav .cv-global-cta {
background: #16382a;
border-color: #16382a;
color: #fff;
}
html body.page-home #mainNav.cv-global-nav .cv-global-cta:is(:hover,:focus-visible) {
background: #0f2a1f;
border-color: #0f2a1f;
}
html body.page-home:not(.mobile-menu-open):not(.global-menu-open) #mainNav.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-cta {
background: rgba(10,18,12,.34);
border-color: rgba(255,255,255,.56);
color: #fff;
}
html body.page-home:not(.mobile-menu-open):not(.global-menu-open) #mainNav.cv-global-nav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-cta:is(:hover,:focus-visible) {
background: rgba(10,18,12,.5);
border-color: rgba(255,255,255,.72);
}
.page-home .editorial-link {
position: relative;
display: inline-flex;
width: max-content;
max-width: 100%;
min-height: 44px;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
line-height: 1.35;
}
.page-home .editorial-link::after {
content: "";
position: absolute;
left: 0;
right: -6px;
bottom: 5px;
height: 1px;
background: currentColor;
opacity: .3;
transform-origin: left;
transition: opacity 180ms ease,transform 220ms var(--ease,var(--cv-ease-enter));
}
.page-home .editorial-link:is(:hover,:focus-visible)::after {
opacity: .72;
transform: scaleX(.97);
}
.page-home .editorial-link:is(:hover,:focus-visible) .editorial-arrow {
transform: translate(2px,-2px);
}
.page-home .editorial-arrow {
transition: transform 180ms ease;
}
.page-home .home-mavh__media picture,
.page-home .home-mavh__media picture img {
display: block;
width: 100%;
}
.page-home .home-mavh__media figcaption,
.page-home .home-publication__media figcaption {
display: block;
grid-template-columns: none;
}
.page-home .home-proof-caption__label {
color: #4b574f;
font-weight: 500;
}
@media (max-width: 760px) {
.page-home .home-mavh,
.page-home .home-publication {
padding-top: 42px;
padding-bottom: 46px;
}
}
@media (prefers-reduced-motion: reduce) {
.page-home .editorial-link::after,
.page-home .editorial-arrow {
transition: none !important;
}
}
/* Shared readability and optical rules. */
.reveal {
opacity: 1 !important;
transform: none !important;
}
.editorial-link {
position: relative;
display: inline-flex;
width: max-content;
max-width: 100%;
align-items: center;
border-bottom: 0 !important;
text-decoration: none;
}
.editorial-link::after {
content: "";
position: absolute;
right: 0;
bottom: 3px;
left: 0;
height: 1px;
background: currentColor;
opacity: .3;
}
@media (prefers-reduced-motion: reduce) {
.reveal {
transition: none !important;
animation: none !important;
}
}
@media (scripting: none) and (max-width: 760px) {
body:not(.page-retained-capital) .cv-global-nav {
position: relative !important;
inset: auto !important;
height: auto !important;
min-height: 58px !important;
background: #f9f9f5 !important;
color: #171b17 !important;
border-bottom: 1px solid rgba(23,27,23,.12) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body:not(.page-retained-capital) .cv-global-nav__inner {
height: auto !important;
min-height: 58px !important;
grid-template-columns: minmax(116px,128px) 1fr !important;
gap: 8px 18px !important;
padding: 7px 0 9px !important;
}
body:not(.page-retained-capital) .cv-global-logo--primary {
opacity: 1 !important;
}
body:not(.page-retained-capital) .cv-global-logo--reverse {
opacity: 0 !important;
}
body:not(.page-retained-capital) .cv-global-menu,
body:not(.page-retained-capital) .cv-global-cta {
display: none !important;
}
body:not(.page-retained-capital) .cv-global-links {
display: flex !important;
grid-column: 1 / -1 !important;
justify-self: start !important;
flex-wrap: wrap !important;
gap: 0 16px !important;
color: #656b65 !important;
}
body:not(.page-retained-capital) .cv-global-links a {
min-height: 44px !important;
color: inherit !important;
}
body:not(.page-retained-capital) .cv-global-mobile {
display: none !important;
}
body:not(.page-retained-capital) .cv-global-mobile + main {
padding-top: 0 !important;
}
}
/* Projects and publication. */
body.page-home main {
overflow: clip;
}
.page-home .home-mavh__media picture,
.page-home .home-mavh__media img {
width: 100%;
}
.page-home .home-mavh__dek {
margin-top: 18px;
}
.page-home .home-publication {
padding: clamp(78px,8vw,118px) 0 clamp(64px,6vw,96px);
background: #e7e2d7;
border-top: 1px solid rgba(19,23,19,.13);
}
.page-home .home-publication__spread {
display: block;
}
.page-home .home-publication__masthead {
display: grid;
grid-template-columns: minmax(0,1.08fr) minmax(300px,.62fr);
gap: clamp(42px,7vw,108px);
align-items: end;
margin-bottom: clamp(36px,4.5vw,58px);
}
.page-home .home-publication__copy .display-title {
max-width: 12ch;
margin: 15px 0 0;
line-height: .93;
}
/* The introduction sits on the headline's last line, as one block with it. */
.page-home .home-publication__intro {
max-width: 390px;
margin-left: auto;
padding: 0 0 .35em;
border-top: 0;
}
.page-home .home-publication__lede {
max-width: 31ch;
margin: 0;
color: #414a43;
font-family: var(--sans);
font-size: 16px;
line-height: 1.55;
}
.page-home .home-publication__intro .editorial-link {
margin-top: 20px;
}
/* One large photograph, then the record beneath it. */
.page-home .home-publication__plate {
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 0;
}
.page-home .home-publication__media {
position: relative;
min-width: 0;
margin: 0;
overflow: hidden;
}
.page-home .home-publication__media img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
object-fit: cover;
object-position: 50% 62%;
}
.page-home .home-publication__media figcaption {
position: static;
padding: 12px 0;
color: #4f5952;
font-size: 12px;
line-height: 1.5;
text-shadow: none;
}
.page-home .home-publication__media .home-proof-caption__label {
color: inherit;
}
@media (max-width:900px) {
.page-home .home-mavh__grid,
.page-home .home-publication__masthead {
grid-template-columns: 1fr;
}
.page-home .home-publication__intro {
margin-left: 0;
max-width: 520px;
}
}
@media (max-width:760px) {
.page-home .home-publication {
padding: 60px 0 68px;
}
.page-home .home-publication__masthead {
gap: 22px;
margin-bottom: 30px;
}
.page-home .home-publication__copy .display-title {
max-width: 100%;
}
.page-home .home-publication__media img {
aspect-ratio: 4/3;
object-position: 64% 60%;
}
}
/* Crop Intelligence and responsive evidence. */
body.page-home .home-ci-story {
--home-ci-paper: #edf0e8;
--home-ci-forest: #173a28;
--home-ci-muted: #536159;
position: relative;
overflow: visible;
padding: clamp(72px,6.4vw,94px) 0 clamp(48px,4.6vw,66px) !important;
background: var(--home-ci-paper, #edf0e8) !important;
color: var(--ink);
border-top: 0 !important;
border-bottom: 0 !important;
}
.page-home .home-ci-story__intro {
display: grid !important;
grid-template-columns: minmax(0,1.12fr) minmax(320px,.62fr) !important;
gap: clamp(42px,6vw,96px);
align-items: end !important;
}
.page-home .home-ci-story__intro .display-title {
max-width: 13.6ch !important;
margin: 14px 0 0 !important;
line-height: .98;
}
/* "district by district" is one phrase: it sets as the second line, never split. */
.page-home .home-ci-story__title-run {
white-space: nowrap;
}
.page-home .home-ci-story__body {
display: grid !important;
grid-template-columns: minmax(0,1.34fr) minmax(330px,.66fr) !important;
gap: clamp(44px,5.6vw,86px) !important;
align-items: start !important;
min-height: 0 !important;
margin-top: clamp(42px,4.3vw,62px) !important;
position: relative;
isolation: isolate;
}
.page-home .home-ci-story__visual {
position: sticky !important;
top: calc(var(--nav-h) + 18px) !important;
align-self: start !important;
min-height: 560px !important;
height: min(72svh,680px) !important;
margin: 0 !important;
overflow: hidden !important;
background: transparent !important;
border-top: 1px solid rgba(23,58,40,.24);
isolation: isolate;
}
.page-home .home-ci-story__visual::before {
content: "";
position: absolute;
inset: 44px 0 56px;
pointer-events: none;
background: linear-gradient(90deg,rgba(23,58,40,.03) 1px,transparent 1px),linear-gradient(0deg,rgba(23,58,40,.023) 1px,transparent 1px);
background-size: 56px 56px;
opacity: .58;
}
.page-home .home-ci-story__visual-head {
position: absolute !important;
inset: 14px 0 auto !important;
z-index: 8;
display: flex;
justify-content: space-between;
gap: 18px;
padding: 0;
color: var(--home-ci-muted, #536159);
font: 600 10px/1.3 var(--mono);
text-transform: uppercase;
}
.page-home .home-ci-story__year {
position: absolute !important;
z-index: 1 !important;
left: -.02em;
top: 66px !important;
color: #93402f !important;
font: 400 clamp(132px,14vw,216px)/.82 var(--serif) !important;
letter-spacing: -.08em;
opacity: 0 !important;
transform: none !important;
pointer-events: none !important;
transition: opacity 420ms ease !important;
}
.page-home .home-ci-story__map-wrap {
position: absolute !important;
z-index: 3 !important;
inset: 50px -2% 62px -3% !important;
display: flex !important;
align-items: center;
justify-content: center;
opacity: 1 !important;
transform: none !important;
transition: opacity 360ms ease,transform 520ms var(--ease-soft) !important;
}
.page-home [data-ci-story-state="history"] .home-ci-story__map-wrap {
opacity: 0 !important;
transform: scale(.985) !important;
pointer-events: none !important;
}
.page-home .home-ci-story__map {
width: 100% !important;
height: 100% !important;
max-height: none !important;
overflow: visible !important;
transform: scale(1.035) !important;
transform-origin: 49% 52% !important;
opacity: 1 !important;
transition: transform 620ms var(--ease-soft),opacity 360ms ease !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__map {
transform: scale(1.07) !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__map {
transform: scale(1.02) !important;
}
.page-home .home-ci-story__district {
vector-effect: non-scaling-stroke;
cursor: default;
outline: none;
transition: fill 520ms var(--ease-soft) var(--ci-reveal-delay, 0ms),
fill-opacity 520ms var(--ease-soft) var(--ci-reveal-delay, 0ms),
stroke 420ms ease var(--ci-reveal-delay, 0ms),
stroke-width 420ms ease var(--ci-reveal-delay, 0ms),
opacity 360ms ease var(--ci-reveal-delay, 0ms) !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__district {
cursor: pointer;
}
.page-home .home-ci-story__district:focus-visible {
stroke: #101a13 !important;
stroke-width: 2 !important;
stroke-opacity: 1 !important;
}
.page-home .home-ci-story__label-layer {
opacity: 0;
pointer-events: none;
transition: opacity 300ms ease 160ms;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__label-layer {
opacity: 1;
}
.page-home .home-ci-story__label-line {
stroke: #8f3b2a;
stroke-width: 1.25;
vector-effect: non-scaling-stroke;
}
.page-home .home-ci-story__label-dot {
fill: #8f3b2a;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
.page-home .home-ci-story__label-text {
fill: #23362a;
font: 600 14px/1 var(--sans);
paint-order: stroke;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 4px;
stroke-linejoin: round;
}
.page-home .home-ci-story__legend {
position: absolute !important;
z-index: 8 !important;
right: 0 !important;
bottom: 16px !important;
display: flex !important;
align-items: center !important;
gap: 9px !important;
max-width: 58% !important;
color: #526058;
font: 600 10px/1.25 var(--mono) !important;
text-transform: uppercase;
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity 240ms ease,transform 320ms var(--ease-soft) !important;
pointer-events: none !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__legend {
opacity: 1 !important;
transform: none !important;
}
.page-home .home-ci-story__legend-scale {
display: block;
width: clamp(92px,12vw,168px);
height: 7px;
background: linear-gradient(90deg,#d9e1d7 0%,#91ab94 48%,#174a33 100%);
border: 1px solid rgba(23,58,40,.12);
}
.page-home .home-ci-story__legend b {
font-weight: 600;
color: #314239;
white-space: nowrap;
}
.page-home .home-ci-story__history-wrap {
position: absolute !important;
z-index: 4 !important;
display: flex !important;
align-items: center !important;
opacity: 0 !important;
transform: translateY(10px) !important;
pointer-events: none !important;
transition: opacity 380ms ease 60ms,transform 520ms var(--ease-soft) 60ms !important;
}
.page-home [data-ci-story-state="history"] .home-ci-story__history-wrap {
opacity: 1 !important;
transform: none !important;
}
.page-home .home-ci-story__history {
width: 100% !important;
height: 100% !important;
overflow: visible;
}
.page-home .home-ci-history__grid line {
stroke: rgba(23,58,40,.11);
stroke-width: 1;
vector-effect: non-scaling-stroke;
}
.page-home .home-ci-history__axis-label {
font: 600 10px/1 var(--mono);
letter-spacing: .045em;
}
.page-home .home-ci-history__point {
fill: #184b34;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.page-home .home-ci-history__point--fao {
fill: #93402f;
}
.page-home .home-ci-history__guide {
stroke-width: 1;
stroke-dasharray: 4 5;
vector-effect: non-scaling-stroke;
}
.page-home .home-ci-history__label {
fill: #273a2e;
font: 600 11px/1 var(--sans);
paint-order: stroke;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 4px;
stroke-linejoin: round;
}
.page-home .home-ci-history__value {
fill: var(--home-ci-muted, #536159);
font: 600 10px/1 var(--mono);
letter-spacing: .035em;
paint-order: stroke;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 4px;
}
.page-home .home-ci-story__reading {
position: absolute !important;
z-index: 9 !important;
left: 0 !important;
bottom: 13px !important;
width: min(440px,66%) !important;
padding: 14px 0 0 !important;
border: 0 !important;
border-top: 1px solid rgba(23,58,40,.28) !important;
background: transparent !important;
box-shadow: none;
opacity: 1;
transition: opacity 220ms ease !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__reading:not(.is-district-reading) {
opacity: 0;
}
.page-home .home-ci-story__reading strong {
display: block;
color: var(--home-ci-forest, #173a28);
font: 400 clamp(40px,4.2vw,62px)/.9 var(--serif) !important;
letter-spacing: -.055em !important;
font-variant-numeric: lining-nums tabular-nums;
}
.page-home .home-ci-story__reading span {
display: block;
margin-top: 7px;
color: #4e5c53;
font: 600 10px/1.45 var(--mono);
letter-spacing: .055em;
text-transform: uppercase;
}
.page-home .home-ci-story__reading.is-district-reading strong {
font-size: clamp(34px,3.6vw,52px) !important;
}
.page-home .home-ci-story__carousel {
min-width: 0;
align-self: start !important;
border: 0;
margin: 0 !important;
}
.page-home .home-ci-story__steps {
position: relative !important;
top: auto !important;
display: block !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
border: 0 !important;
}
.page-home .home-ci-story__steps-track {
display: block !important;
position: relative !important;
height: auto !important;
transform: none !important;
transition: none !important;
will-change: auto;
}
/* Each step takes about half a screen of scrolling: enough for the map to hold each
state, without the empty bands a two-thirds-screen box left around short steps. */
.page-home .home-ci-story__step {
position: relative !important;
inset: auto !important;
display: flex !important;
min-height: 50svh !important;
padding: clamp(40px,6vh,68px) 0 !important;
flex-direction: column !important;
justify-content: center !important;
border: 0 !important;
border-top: 1px solid rgba(23,58,40,.14) !important;
opacity: .92 !important;
visibility: visible !important;
transform: none !important;
pointer-events: auto !important;
transition: opacity 300ms ease !important;
}
.page-home .home-ci-story__step:last-child {
border-bottom: 1px solid rgba(23,58,40,.14) !important;
}
.page-home .home-ci-story__step.is-active {
opacity: 1 !important;
}
.page-home .home-ci-story__step-index {
display: block;
margin-bottom: 16px;
color: var(--home-ci-muted, #536159);
font: 600 10px/1.25 var(--mono);
text-transform: uppercase;
}
.page-home .home-ci-story__step h3 {
max-width: 11.5ch !important;
margin: 0 !important;
color: var(--home-ci-forest, #173a28);
font: 400 clamp(44px,4.1vw,64px)/.96 var(--serif) !important;
}
.page-home .home-ci-story__step>p {
max-width: 40ch !important;
margin: 20px 0 0 !important;
color: #46534a;
font-size: 15.5px !important;
line-height: 1.6 !important;
}
/* The figure's line box is tighter than its glyphs (.78), so the clearance below it
scales with the figure: about .15em of overshoot plus a fixed gap. */
.page-home .home-ci-story__finding strong {
display: block;
margin: 14px 0 calc(.15em + 14px) !important;
color: #8f3b2a;
font: 400 clamp(88px,8.4vw,128px)/.78 var(--serif) !important;
letter-spacing: -.07em !important;
}
/* How many districts the figure has added up: "1 of 64" while it counts, "5 of 64" settled. */
.page-home .home-ci-story__finding-count {
display: block;
margin: 0 0 12px;
color: var(--home-ci-muted, #536159);
font: 600 11px/1.3 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
}
/* The sentence states the published share, so it waits until the count lands on it. */
.page-home .home-ci-story__finding-text {
transition: opacity 320ms ease;
}
.page-home .home-ci-story.is-share-counting .home-ci-story__finding-text,
.page-home .home-ci-story.is-reveal-pending .home-ci-story__finding-text {
opacity: 0;
}
.page-home .home-ci-story__product-proof {
display: grid !important;
row-gap: 0 !important;
align-items: start !important;
margin-top: clamp(24px,2.8vw,38px) !important;
border-top: 1px solid rgba(23,58,40,.24) !important;
border-bottom: 1px solid rgba(23,58,40,.14) !important;
}
.page-home .home-ci-story__product-proof span {
display: block;
text-transform: none !important;
}
.page-home .home-ci-story__footer {
display: flex !important;
align-items: center !important;
justify-content: space-between;
gap: 28px !important;
}
.page-home .home-ci-story__source {
max-width: 70ch !important;
margin: 0 !important;
color: #636e65;
font-size: 11.5px !important;
line-height: 1.55 !important;
}
.page-home .home-ci-story__action-wrap {
display: flex;
flex: 0 0 auto !important;
align-items: center;
margin: 0 !important;
}
.page-home .home-ci-story__action {
margin: 0 !important;
}
.page-home .home-ci-story.is-fallback .home-ci-story__body {
display: block !important;
min-height: 0 !important;
}
.page-home .home-ci-story.is-fallback .home-ci-story__visual {
display: none !important;
height: 0 !important;
min-height: 0 !important;
border: 0 !important;
}
.page-home .home-ci-story.is-fallback .home-ci-story__step {
min-height: 0 !important;
opacity: 1 !important;
padding: 24px 0 !important;
}
@media (max-width:900px) {
body.page-home .home-ci-story {
padding: 56px 0 48px !important;
}
.page-home .home-ci-story__intro {
display: block !important;
}
.page-home .home-ci-story__intro .display-title {
max-width: 100% !important;
}
.page-home .home-ci-story__body {
display: block !important;
margin-top: 30px !important;
}
.page-home .home-ci-story__visual {
top: var(--nav-h) !important;
z-index: 1 !important;
min-height: 0 !important;
height: 48svh !important;
max-height: 420px !important;
background: var(--home-ci-paper, #edf0e8) !important;
}
.page-home .home-ci-story__visual::before {
inset: 40px 0 48px;
background-size: 42px 42px;
}
.page-home .home-ci-story__map-wrap {
inset: 46px -6% 54px -6% !important;
}
.page-home .home-ci-story__map {
transform: scale(1.01) !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__map {
transform: scale(1.05) !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__map {
transform: scale(1) !important;
}
.page-home .home-ci-story__year {
top: 56px !important;
font-size: clamp(86px,27vw,126px) !important;
}
.page-home .home-ci-story__legend {
bottom: 9px !important;
max-width: 70% !important;
gap: 6px !important;
}
.page-home .home-ci-story__legend-scale {
width: 84px;
height: 6px;
}
.page-home .home-ci-story__reading {
width: 76% !important;
bottom: 8px !important;
padding-top: 9px !important;
}
.page-home .home-ci-story__reading strong {
font-size: clamp(34px,10vw,48px) !important;
}
.page-home .home-ci-story__reading span {
font-size: 10px !important;
}
.page-home .home-ci-story__carousel {
position: relative !important;
z-index: 2 !important;
margin-top: 0 !important;
}
.page-home .home-ci-story__step {
min-height: 56svh !important;
padding: 23svh 0 32px !important;
justify-content: flex-end !important;
opacity: 1 !important;
background: linear-gradient(180deg,rgba(237,240,232,0) 0%,rgba(237,240,232,.94) 38%,var(--home-ci-paper, #edf0e8) 58%) !important;
}
.page-home .home-ci-story__finding strong {
font-size: clamp(70px,21vw,94px) !important;
}
.page-home .home-ci-story__product-proof {
margin-top: 22px !important;
}
.page-home .home-ci-story__footer {
display: block !important;
}
.page-home .home-ci-story__action-wrap {
margin-top: 16px !important;
}
}
@media (max-width:560px) {
.page-home .home-ci-story__label-line {
stroke-width: 1;
}
}
@media (prefers-reduced-motion:reduce) {
.page-home .home-ci-story__year,
.page-home .home-ci-story__map-wrap,
.page-home .home-ci-story__map,
.page-home .home-ci-story__district,
.page-home .home-ci-story__label-layer,
.page-home .home-ci-story__legend,
.page-home .home-ci-story__history-wrap,
.page-home .home-ci-story__step {
transition: none !important;
animation: none !important;
}
}
.page-home .home-ci-story__history-wrap {
inset: 82px 0 90px !important;
}
.page-home .home-ci-history__segment {
fill: none;
stroke: #184b34;
stroke-width: 2.25;
vector-effect: non-scaling-stroke;
stroke-linecap: round;
}
.page-home .home-ci-history__stem {
stroke: rgba(23,58,40,.13);
stroke-width: 1;
vector-effect: non-scaling-stroke;
stroke-dasharray: 2 4;
}
.page-home .home-ci-history__watermark {
font-family: var(--serif);
font-weight: 400;
letter-spacing: -.06em;
}
.page-home .home-ci-history__regime-label {
fill: #59675f;
font: 600 10px/1 var(--mono);
text-transform: uppercase;
}
.page-home .home-ci-history__point {
r: 4.6;
}
.page-home .home-ci-history__point--fao {
r: 5.4;
}
.page-home [data-ci-story-state="history"] .home-ci-story__reading {
opacity: 0 !important;
pointer-events: none !important;
}
.page-home [data-ci-story-step="history"] h3 {
max-width: 12.5ch !important;
}
.page-home .home-ci-story__product-proof>div:first-child strong {
max-width: 13ch !important;
font-size: clamp(34px,3.5vw,52px) !important;
line-height: .94 !important;
}
.page-home .home-ci-story__footer {
margin-top: 22px !important;
padding-bottom: 4px !important;
}
@media (max-width:900px) {
.page-home .home-ci-story__history-wrap {
inset: 64px 0 62px !important;
}
.page-home .home-ci-story__product-proof>div:first-child strong {
font-size: clamp(32px,9.5vw,44px) !important;
}
}
.page-home .home-ci-story__history-wrap {
right: clamp(24px,3vw,42px) !important;
}
@media (max-width:640px) {
.page-home [data-ci-story-state="history"] .home-ci-story__history-wrap {
inset: 38px 0 16px !important;
right: 0 !important;
}
.page-home .home-ci-history__value {
stroke-width: 3px !important;
}
.page-home .home-ci-history__point--primary {
stroke-width: 2.5px !important;
}
}
.page-home .home-mavh {
padding: clamp(70px,7.4vw,112px) 0;
background: #eee9df;
color: var(--ink);
}
.page-home .home-mavh__grid {
display: grid;
/* The copy column is wide enough for the headline to set in three lines. */
grid-template-columns: minmax(0,1.4fr) minmax(310px,1fr);
gap: clamp(44px,5.6vw,88px);
/* The text column hangs from the photograph's top edge. */
align-items: start;
}
.page-home .home-mavh__media {
margin: 0;
overflow: hidden;
}
.page-home .home-mavh__media img {
display: block;
width: 100%;
aspect-ratio: 4/3;
object-fit: cover;
object-position: 50% 48%;
filter: saturate(.9) contrast(1.03);
/* Crops the red sleeve at the left edge; the hand and the produce stay. */
transform: scale(1.27);
transform-origin: 100% 30%;
}
.page-home .home-mavh__media figcaption {
margin-top: 10px;
color: #626b64;
font: 500 11px/1.45 var(--mono);
letter-spacing: .035em;
}
.page-home .home-mavh__copy {
max-width: none;
padding-top: 20px;
border-top: 1px solid rgba(19,23,19,.24);
}
.page-home .home-mavh__copy .display-title {
margin: 16px 0 0;
line-height: .93;
}
.page-home .home-mavh__dek {
max-width: 34ch;
margin: 20px 0 0;
color: #414a43;
font-size: clamp(16px,1.15vw,18px);
line-height: 1.56;
}
.page-home .home-mavh__proof {
display: grid;
grid-template-columns: minmax(0,.9fr) minmax(0,1.4fr);
align-items: start;
gap: 0;
margin-top: 28px;
padding: 16px 0 15px;
border-top: 1px solid rgba(19,23,19,.18);
border-bottom: 1px solid rgba(19,23,19,.18);
}
.page-home .home-mavh__proof span {
display: block;
min-width: 0;
margin: 0;
padding: 0 18px 0 0;
color: #566159;
font-size: 12px;
line-height: 1.4;
}
.page-home .home-mavh__proof span+span {
border-left: 1px solid rgba(19,23,19,.16);
padding: 0 0 0 18px;
}
.page-home .home-mavh__proof strong {
display: block;
margin-bottom: 6px;
color: #173a28;
font: 400 48px/.95 var(--serif);
}
.page-home .home-mavh__copy .editorial-link {
margin-top: 6px;
}
@media (max-width:900px) {
.page-home .home-mavh__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.page-home .home-mavh__copy {
max-width: 590px;
}
}
@media (max-width:760px) {
.page-home .home-mavh {
padding: 48px 0 66px;
}
.page-home .home-mavh__grid {
gap: 26px;
}
.page-home .home-mavh__media img {
aspect-ratio: 4/3;
object-position: 50% 46%;
}
.page-home .home-mavh__copy {
padding-top: 17px;
}
.page-home .home-mavh__copy .display-title {
line-height: .95;
}
.page-home .home-mavh__proof {
grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
margin-top: 24px;
}
.page-home .home-mavh__proof span {
padding-right: 14px;
}
.page-home .home-mavh__proof span+span {
padding-left: 14px;
}
}
@media (max-width:390px) {
.page-home .home-mavh__proof {
grid-template-columns: 1fr;
}
.page-home .home-mavh__proof span+span {
margin-top: 12px;
padding: 12px 0 0;
border-left: 0;
border-top: 1px solid rgba(19,23,19,.14);
}
}
.page-home .home-mavh__copy .display-title {
max-width: 13ch;
}
.page-home .home-ci-story__crops[hidden] {
display: none;
}
.page-home .home-ci-story__crops-label {
display: block;
color: var(--home-ci-muted, #536159);
font: 600 10px/1.3 var(--mono);
text-transform: uppercase;
}
.page-home .home-ci-story__crops button {
position: relative;
cursor: pointer;
}
.page-home .home-ci-story__crops button::after {
content: "";
position: absolute;
right: 0;
bottom: 6px;
left: 0;
height: 1.5px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms var(--ease-soft);
}
.page-home .home-ci-story__crops button[aria-pressed="true"] {
color: var(--home-ci-forest, #173a28);
font-weight: 600;
}
.page-home .home-ci-story__crops button[aria-pressed="true"]::after {
transform: scaleX(1);
}
.page-home .home-ci-story__crops button:focus-visible {
outline: 2px solid var(--home-ci-forest, #173a28);
outline-offset: 3px;
border-radius: 1px;
}
.page-home .home-ci-story.is-crop-loading .home-ci-story__crops button {
cursor: progress;
}
.page-home .home-ci-story__provenance {
position: absolute;
z-index: 8;
top: 44px;
left: 0;
right: auto;
max-width: 100%;
margin: 0;
text-align: left;
color: #56645b;
font: 500 10px/1.45 var(--mono);
opacity: 0;
transition: opacity 240ms ease;
pointer-events: none;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__provenance {
opacity: 1;
}
@media (prefers-reduced-motion:reduce) {
.page-home .home-ci-story__crops button::after,
.page-home .home-ci-story__provenance {
transition: none;
}
}
@media (max-width:760px) {
.page-home .home-ci-story {
padding: 56px 0 44px !important;
}
.page-home .home-ci-story__intro {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
/* Sized so "Bangladesh's crops," fits one line (about 7.8em) beside the gutters:
two lines from 375px up; at the narrowest phones it falls back to three. */
.page-home .home-ci-story__intro .display-title {
text-wrap: balance;
}
.page-home .home-ci-story__body {
margin-top: 34px !important;
}
/* The pinned stage keeps half the screen for reading, and its paper-coloured
lower edge lets step text pass beneath it instead of being cut mid-line. */
.page-home .home-ci-story__visual {
top: 0 !important;
z-index: 3 !important;
width: 100% !important;
height: min(50svh,440px) !important;
max-height: none !important;
margin: 0 0 10px !important;
box-shadow: 0 18px 14px -4px var(--home-ci-paper, #edf0e8);
}
.page-home .home-ci-story__visual-head {
line-height: 1.35 !important;
}
.page-home .home-ci-story__map-wrap {
inset: 48px -8% 74px -8% !important;
}
.page-home .home-ci-story__map {
transform: translateX(8px) scale(1.08) !important;
transform-origin: 50% 52% !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__map {
transform: translateX(8px) scale(1.08) !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__district.is-picker-selected {
stroke: #102f20 !important;
stroke-width: 3 !important;
}
.page-home .home-ci-story__reading {
width: min(82%,360px) !important;
}
.page-home [data-ci-story-state="history"] .home-ci-story__reading {
display: none !important;
}
.page-home .home-ci-story__steps,
.page-home .home-ci-story__steps-track {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
transform: none !important;
}
.page-home .home-ci-story__step {
display: block !important;
min-height: 52svh !important;
padding: 36px 0 !important;
justify-content: flex-start !important;
background: none !important;
}
.page-home .home-ci-story.is-r11-ready .home-ci-story__step:not(.is-active) {
visibility: hidden !important;
}
.page-home .home-ci-story__step:first-child {
padding-top: 28px !important;
}
.page-home .home-ci-story__step:nth-child(2) {
padding-block: 44px !important;
}
.page-home .home-ci-story__step h3 {
max-width: 11ch !important;
}
.page-home .home-ci-story__step>p {
max-width: 34ch !important;
margin-top: 18px !important;
font-size: 15px !important;
line-height: 1.58 !important;
}
.page-home .home-ci-story__finding strong {
margin: 8px 0 calc(.15em + 12px) !important;
font-size: clamp(76px,22vw,104px) !important;
line-height: .8 !important;
}
.page-home .home-ci-story__product-proof {
margin-top: 18px !important;
border-bottom: 0 !important;
}
.page-home .home-ci-story__product-proof>div,
.page-home .home-ci-story__product-proof>div+div {
display: block !important;
}
.page-home .home-ci-story__product-proof>div:first-child strong,
.page-home .home-ci-story__product-proof>div:not(:first-child) strong {
max-width: none !important;
line-height: 1.28 !important;
}
.page-home .home-ci-story__footer {
margin-top: 18px !important;
}
.page-home .home-ci-story__source {
max-width: 38ch !important;
font-size: 11px !important;
}
.page-home .home-ci-story__action-wrap {
margin-top: 20px !important;
}
}
@media (min-width:600px) and (max-width:760px) and (min-height:750px) {
.page-home .home-ci-story__visual {
height: min(72svh,580px) !important;
}
.page-home .home-ci-story__map-wrap {
inset: 50px -8% 60px -8% !important;
}
.page-home .home-ci-story__map,
.page-home [data-ci-story-state="pattern"] .home-ci-story__map,
.page-home [data-ci-story-state="resolution"] .home-ci-story__map {
transform: translateX(8px) scale(1.14) !important;
}
}
@media (min-width:761px) and (max-width:900px) {
.page-home .home-ci-story__body {
display: grid !important;
grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
gap: 28px !important;
}
.page-home .home-ci-story__visual {
width: auto !important;
height: min(560px,calc(100svh - var(--nav-h) - 24px)) !important;
max-height: none !important;
margin: 0 !important;
}
.page-home .home-ci-story__map-wrap {
inset: 46px 0 76px !important;
}
.page-home .home-ci-story__map,
.page-home [data-ci-story-state="pattern"] .home-ci-story__map,
.page-home [data-ci-story-state="resolution"] .home-ci-story__map {
transform: scale(1.02) !important;
}
.page-home .home-ci-story__carousel {
z-index: 1 !important;
}
.page-home .home-ci-story__step {
min-height: 60svh !important;
padding: 36px 0 !important;
justify-content: center !important;
background: none !important;
opacity: .92 !important;
}
.page-home .home-ci-story__step>p {
font-size: 14px !important;
}
.page-home .home-ci-story__finding strong {
font-size: clamp(70px,9vw,86px) !important;
}
}
.page-home .cv-homehero__field {
background-image: image-set(
url("rebuild/home-canon/816c7000626a4c81-1920.avif") type("image/avif"),
url("rebuild/home-canon/816c7000626a4c81-1920.webp") type("image/webp"),
url("rebuild/home-canon/816c7000626a4c81.jpg") type("image/jpeg")
) !important;
}
@media (max-width:760px) {
.page-home .cv-homehero__field {
background-image: image-set(
url("rebuild/home-canon/816c7000626a4c81-960.avif") type("image/avif"),
url("rebuild/home-canon/816c7000626a4c81-960.webp") type("image/webp"),
url("rebuild/home-canon/816c7000626a4c81.jpg") type("image/jpeg")
) !important;
}
}
/* One label line per section, keeping the page's argument: project, record, question. */
.page-home .home-method-step {
display: block;
margin: 0 0 14px;
color: #19422e;
font: 600 11px/1.3 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
}
.page-home .home-mavh__bridge {
max-width: 40ch;
margin: 20px 0 6px;
color: #414a43;
font: 400 14px/1.5 var(--sans);
}
.page-home .home-mavh__bridge a {
color: #19422e;
font-weight: 500;
white-space: nowrap;
text-decoration: underline;
text-decoration-color: rgba(25,66,46,.32);
text-decoration-thickness: 1px;
text-underline-offset: 4px;
transition: text-decoration-color 160ms ease;
}
.page-home .home-mavh__bridge a:hover {
text-decoration-color: currentColor;
}
.page-home .home-mavh__bridge a:focus-visible {
outline: 2px solid #19422e;
outline-offset: 4px;
border-radius: 2px;
}
.page-home .home-mavh__bridge a span {
display: inline-block;
margin-left: 2px;
}
/* The project's name sits with the way into its brief, in plain type: the column's
monospace is kept for its label and figures heading. */
.page-home .home-mavh__project {
display: block;
margin-top: 22px;
color: #4f5a52;
font: 500 14px/1.45 var(--sans);
}
.page-home .home-mavh__project span {
white-space: nowrap;
}
@media (max-width:760px) {
.page-home .home-method-step {
margin-bottom: 12px;
}
.page-home .home-mavh__bridge {
margin: 18px 0 4px;
font-size: 13.5px;
}
}
.page-home .home-ci-story__label {
transition: opacity 260ms ease;
}
.page-home .home-ci-story.is-reveal-pending .home-ci-story__label {
opacity: 0;
}
.page-home .home-ci-story__label-project {
fill: #19422e;
font-weight: 500;
font-size: .82em;
letter-spacing: .01em;
}
.page-home .home-ci-story__label--project .home-ci-story__label-dot {
fill: #19422e;
}
.page-home .home-ci-story__finding strong {
font-variant-numeric: lining-nums !important;
}
.page-home .home-ci-story.is-share-counting .home-ci-story__finding strong {
font-variant-numeric: lining-nums tabular-nums !important;
}
@media (prefers-reduced-motion:reduce) {
.page-home .home-ci-story__label {
transition: none !important;
}
}
.page-home .home-ci-history__break-label {
fill: #7a4a3c;
font: 600 10px/1 var(--mono);
text-transform: uppercase;
}
.page-home .home-ci-history__break-label tspan {
font-weight: 500;
letter-spacing: .04em;
text-transform: none;
fill: #6d6259;
}
.page-home .home-ci-history__guide {
stroke: rgba(147,64,47,.5);
}
@media (prefers-reduced-motion:no-preference) {
.page-home [data-ci-story-state="history"] .home-ci-story__history [data-seq] {
animation: homeCiHistoryIn 520ms var(--cv-ease-move) both;
animation-delay: calc(160ms + var(--seq, 0) * 210ms);
}
.page-home [data-ci-story-state="history"] .home-ci-story__history .home-ci-history__point[data-seq] {
transform-box: fill-box;
transform-origin: center;
animation-name: homeCiHistoryPoint;
}
.page-home [data-ci-story-state="history"] .home-ci-story__history .home-ci-history__stem[data-seq] {
transform-box: fill-box;
transform-origin: 50% 100%;
animation-name: homeCiHistoryStem;
}
}
@keyframes homeCiHistoryIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes homeCiHistoryPoint {
0% {
opacity: 0;
transform: scale(.2);
}
70% {
opacity: 1;
transform: scale(1.18);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes homeCiHistoryStem {
from {
opacity: 0;
transform: scaleY(0);
}
to {
opacity: 1;
transform: scaleY(1);
}
}
/* Hero geometry, media and motion. */
.page-home .cv-homehero {
--cv-second-act-shift: 10.5svh;
position: relative;
height: 100svh;
min-height: 0;
overflow: hidden;
isolation: isolate;
background: #07100a;
color: #fff;
}
.page-home .cv-homehero__stage {
position: absolute;
inset: 0;
overflow: hidden;
background: #07100a;
}
.page-home .cv-homehero__field {
position: absolute;
/* Reaches 12% above the frame and is bottom-anchored, so the photo's sky band (its top
~10%) sits out of view at any aspect ratio and the headline sits on land. */
inset: -12% -2% -2%;
background: url("rebuild/home-canon/816c7000626a4c81.jpg") center 100% / cover no-repeat;
/* Land, not murk: exposure held, mid-tones separated and the greens warmed. */
filter: brightness(.64) saturate(.9) contrast(1.12) sepia(.06);
transform: scale(1.018);
}
.page-home .cv-homehero__veil {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: radial-gradient(ellipse at 50% 51%,transparent 0%,rgba(3,8,5,.10) 52%,rgba(1,5,3,.28) 100%),linear-gradient(180deg,rgba(1,5,3,.14),rgba(1,5,3,.01) 44%,rgba(1,5,3,.20));
}
.page-home .cv-homehero__grain {
display: none;
}
.page-home .cv-homehero__brand-lockup {
display: flex;
position: absolute;
z-index: 10;
left: 50%;
top: 43.5%;
width: 100%;
flex-direction: column;
align-items: center;
/* Final place from the first frame: the headline's room is reserved, so nothing
re-centres when it arrives. */
transform: translate(-50%,-50%) translateY(var(--cv-second-act-shift));
pointer-events: none;
}
.page-home .cv-homehero__brand-mark {
display: block;
position: relative;
width: min(92vw,370px);
aspect-ratio: 119/136;
margin-bottom: -25px;
}
.page-home .cv-homehero__leaf,
.page-home .cv-homehero__leaf--advisory,
.page-home .cv-homehero__leaf--farms {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
aspect-ratio: auto;
overflow: hidden;
background: none;
opacity: 1;
filter: none;
transition: none;
transform: none;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
mask-position: center;
-webkit-mask-position: center;
}
.page-home .cv-homehero__leaf--mech {
z-index: 5;
mask-image: url("home/leaf-mask-field-systems.svg");
-webkit-mask-image: url("home/leaf-mask-field-systems.svg");
}
.page-home .cv-homehero__leaf--advisory {
z-index: 7;
mask-image: url("home/leaf-mask-advisory.svg");
-webkit-mask-image: url("home/leaf-mask-advisory.svg");
}
.page-home .cv-homehero__leaf--farms {
z-index: 6;
mask-image: url("home/leaf-mask-farms.svg");
-webkit-mask-image: url("home/leaf-mask-farms.svg");
}
.page-home .cv-homehero__leaf::before,
.page-home .cv-homehero__leaf::after {
display: none;
}
.page-home .cv-homehero__ghost {
position: absolute;
inset: 0;
z-index: 8;
pointer-events: none;
/* The leaves rise out of shadow, never through a milky placeholder. */
background: #050e08;
opacity: 0;
transform-origin: 50% 90%;
mask-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
mask-position: center;
-webkit-mask-position: center;
will-change: transform,opacity;
}
.page-home .cv-homehero__ghost--mech {
--cv-ghost-opacity: .42;
--cv-bloom-y: 22px;
--cv-bloom-scale: .82;
--cv-bloom-rotate: 5deg;
--cv-bloom-delay: 430ms;
mask-image: url("home/leaf-mask-field-systems.svg");
-webkit-mask-image: url("home/leaf-mask-field-systems.svg");
}
.page-home .cv-homehero__ghost--advisory {
--cv-ghost-opacity: .42;
--cv-bloom-y: 26px;
--cv-bloom-scale: .78;
--cv-bloom-rotate: -3.5deg;
--cv-bloom-delay: 470ms;
mask-image: url("home/leaf-mask-advisory.svg");
-webkit-mask-image: url("home/leaf-mask-advisory.svg");
}
.page-home .cv-homehero__ghost--farms {
--cv-ghost-opacity: .42;
--cv-bloom-y: 23px;
--cv-bloom-scale: .81;
--cv-bloom-rotate: -4.5deg;
--cv-bloom-delay: 450ms;
mask-image: url("home/leaf-mask-farms.svg");
-webkit-mask-image: url("home/leaf-mask-farms.svg");
}
.page-home .cv-homehero__media {
position: absolute;
display: block;
overflow: hidden;
visibility: visible;
opacity: 1;
pointer-events: none;
transition: none;
transform: none;
}
.page-home .cv-homehero.is-activated .cv-homehero__media {
visibility: visible;
}
.page-home .cv-homehero__media img,
.page-home .cv-homehero__media video {
display: block;
}
.page-home .cv-homehero__media img,
.page-home .cv-homehero__media video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
}
.page-home .cv-homehero__leaf .cv-homehero__media :is(img,video) {
filter: none;
}
.page-home .cv-homehero__media--mech {
left: 2%;
top: 40%;
width: 54%;
height: 57%;
/* The harvester photo is a hazy aerial: contrast, not brightness, gives it presence. */
filter: brightness(.96) saturate(.98) contrast(1.2) sepia(.03);
}
.page-home .cv-homehero__media--mech img {
object-position: 78% 52%;
transform: scale(1.43);
transform-origin: 78% 52%;
}
.page-home .cv-homehero__media--advisory {
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #cfe2ee url("rebuild/home-leaf-r2/advisory-rest-960.webp") 34% 51% / auto 103% no-repeat;
/* The cyan sky is pulled toward the field's grey-green; the flower stays warm. */
filter: brightness(.9) saturate(.76) sepia(.1) contrast(1.05);
}
.page-home .cv-homehero__media--advisory video {
z-index: 2;
inset: auto;
left: 34%;
top: 51%;
width: auto;
height: 103%;
transform: translate(-34%,-51%);
object-fit: fill;
opacity: 0;
visibility: hidden;
transition: none;
}
.page-home .cv-homehero.is-video-ready .cv-homehero__media--advisory video {
opacity: 1;
visibility: visible;
}
.page-home .cv-homehero__media--farms {
left: 0;
top: -5%;
width: 100%;
height: 98%;
filter: brightness(.92) saturate(.82) contrast(1.05);
}
.page-home .cv-homehero__media--farms img {
object-position: 0 100%;
transform: none;
}
.page-home .cv-homehero__wordmark {
display: block;
width: min(68vw,282px);
opacity: 0;
filter: drop-shadow(0 3px 18px rgba(0,0,0,.18));
}
.page-home .cv-homehero__wordmark svg {
display: block;
width: 100%;
height: auto;
}
.page-home .cv-homehero__wordmark {
position: relative;
}
.page-home .cv-homehero__content {
position: absolute;
z-index: 12;
inset: 0;
width: 100%;
height: 100%;
min-height: 0;
max-width: none;
padding: 0;
margin: 0;
display: block;
}
.page-home .cv-homehero__title {
position: absolute;
left: 50%;
top: 17svh;
width: min(90vw,390px);
margin: 0;
color: rgba(248,246,238,.93);
font-family: "Playfair Display",Georgia,"Times New Roman",serif;
font-size: clamp(29px,9.5vw,40px);
font-weight: 400;
line-height: .99;
letter-spacing: -.025em;
text-align: center;
text-wrap: balance;
text-shadow: 0 2px 18px rgba(0,0,0,.18);
opacity: 1;
transform: translate(-50%,0);
pointer-events: none;
}
.page-home .cv-homehero__proposition {
display: block;
}
.page-home .cv-homehero__proposition>span {
display: block;
white-space: nowrap;
}
.page-home .cv-homehero__title em {
font-style: italic;
font-weight: 400;
}
/* The headline and descriptor are readable while the surrounding artwork enters. */
.page-home .cv-homehero__headline {
margin: 0;
color: inherit;
font: inherit;
letter-spacing: inherit;
}
.page-home .cv-homehero__description {
max-width: 58ch;
margin: 16px auto 0;
color: #f8f6ee;
font: 400 15px/1.5 var(--sans);
letter-spacing: 0;
text-wrap: balance;
}
@media (max-width:760px) {
.page-home .cv-homehero__description {
max-width: 35ch;
margin-top: 14px;
font-size: 13px;
line-height: 1.5;
}
}
@media (prefers-reduced-motion:reduce) {
.page-home .cv-homehero *,
.page-home .cv-homehero *::before,
.page-home .cv-homehero *::after,
.page-home #mainNav {
scroll-behavior: auto;
transition: none !important;
}
}
@media (max-width:760px) {
.page-home .cv-homehero {
height: 100vh;
--cv-second-act-shift: 10.5svh;
}
@supports (height:100svh) {
.page-home .cv-homehero {
height: 100svh;
}
}
.page-home .cv-homehero__brand-mark {
width: min(91vw,365px,calc((100svh - 220px)*.76));
margin-bottom: -18px;
}
.page-home .cv-homehero__media--mech {
filter: brightness(.97) saturate(.98) contrast(1.2) sepia(.03);
}
.page-home .cv-homehero__media--mech img {
object-position: 76% 54%;
transform: scale(1.61);
transform-origin: 76% 54%;
}
.page-home .cv-homehero__media--advisory {
background-position: 39% 51%;
background-size: auto 103%;
filter: brightness(.9) saturate(.74) sepia(.1) contrast(1.05);
}
.page-home .cv-homehero__media--advisory video {
left: 39%;
top: 51%;
height: 103%;
transform: translate(-39%,-51%);
}
.page-home .cv-homehero__media--farms {
filter: brightness(.92) saturate(.78) contrast(1.05);
}
.page-home .cv-homehero__wordmark {
width: min(52vw,218px);
}
.page-home .cv-homehero__brand-lockup {
top: calc(43.5% - clamp(32px,4.9svh,47px) - 16px);
}
.page-home .cv-homehero__title {
top: calc(clamp(38px,calc(14.2svh - max(0px,900px - 100svh)*.38),135px) + 20px);
width: min(91vw,380px);
font-size: clamp(26px,8.5vw,36.5px);
}
}
@media (prefers-reduced-motion:no-preference) {
.page-home .cv-homehero.is-running .cv-homehero__field {
animation: cvFinalField 1100ms var(--cv-ease-enter) both;
}
.page-home .cv-homehero.is-running .cv-homehero__wordmark {
animation: cvFinalWordmark 480ms var(--cv-ease-enter) 120ms both;
}
.page-home .cv-homehero.is-running .cv-homehero__ghost {
animation: cvReferenceBloom 800ms var(--cv-ease-enter) var(--cv-bloom-delay) both;
}
.page-home .cv-homehero.is-activated .cv-homehero__ghost {
animation: cvReferenceBloom 800ms var(--cv-ease-enter) var(--cv-bloom-delay) both,cvReferenceGhostOut 620ms ease both;
}
}
@keyframes cvFinalField {
from {
transform: scale(1.018);
}
to {
transform: scale(1);
}
}
@keyframes cvFinalWordmark {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes cvReferenceBloom {
from {
opacity: 0;
transform: translateY(var(--cv-bloom-y)) scale(var(--cv-bloom-scale)) rotate(var(--cv-bloom-rotate));
}
68% {
opacity: var(--cv-ghost-opacity);
}
88% {
transform: translateY(-1px) scale(1.009) rotate(0deg);
}
to {
opacity: var(--cv-ghost-opacity);
transform: none;
}
}
@keyframes cvReferenceGhostOut {
from {
opacity: var(--cv-ghost-opacity);
}
to {
opacity: 0;
}
}
@media (max-width:760px) and (max-height:730px) and (min-aspect-ratio:1/1) {
.page-home .cv-homehero__brand-lockup {
top: 49%;
--cv-second-act-shift: 10svh;
}
.page-home .cv-homehero__brand-mark {
width: min(84vw,330px,calc((100svh - 230px)*.875));
}
.page-home .cv-homehero__wordmark {
width: min(64vw,255px,calc((100svh - 230px)*.7));
}
}
@media (min-width:761px) {
.page-home .cv-homehero {
--cv-second-act-shift: 5.5svh;
}
.page-home .cv-homehero__brand-lockup {
top: 55%;
}
.page-home .cv-homehero__brand-mark {
width: var(--cv-mark-width);
}
.page-home .cv-homehero__wordmark {
width: min(34vw,320px);
}
.page-home .cv-homehero__title {
top: 10svh;
width: min(92vw,980px);
font-size: clamp(42px,5.2vw,64px);
}
}
/* Laptop heights (720–880px): the lockup ends at least 32px above the fold. */
@media (min-width:761px) and (max-height:880px) {
.page-home .cv-homehero {
--cv-second-act-shift: 6svh;
--cv-mark-width: min(48vw,450px,calc((100svh - 330px)*.8));
}
}
@media (min-width:761px) and (max-height:620px) {
.page-home .cv-homehero {
--cv-second-act-shift: 3svh;
}
.page-home .cv-homehero__brand-lockup {
top: 56%;
}
.page-home .cv-homehero__title {
top: 10svh;
font-size: clamp(35px,4vw,50px);
}
}
@media (prefers-reduced-motion:reduce) {
.page-home .cv-homehero.is-running .cv-homehero__field,
.page-home .cv-homehero.is-running .cv-homehero__wordmark,
.page-home .cv-homehero.is-running .cv-homehero__ghost,
.page-home .cv-homehero.is-activated .cv-homehero__media,
.page-home .cv-homehero.is-activated .cv-homehero__ghost,
.page-home .cv-homehero.is-second-act .cv-homehero__title {
animation: none !important;
}
.page-home .cv-homehero__field {
transform: none;
}
.page-home .cv-homehero__wordmark {
opacity: 1;
transform: none;
}
.page-home .cv-homehero__ghost {
display: none;
}
.page-home .cv-homehero__media {
opacity: 1;
}
.page-home .cv-homehero__media--advisory video {
display: block;
}
.page-home .cv-homehero__title {
opacity: 1;
transform: translate(-50%,0);
}
}
/* The hero composition hangs a fixed distance below the nav: the headline never sits
closer than ~28px (desktop) or 22px (phones) to it, and the lockup moves with the
headline so the space between them holds. Uses the individual translate property, so
it composes with the intro's transform animations. */
.page-home .cv-homehero {
--cv-head-drop: max(0px,calc(80px - (clamp(38px,calc(14.2svh - max(0px,900px - 100svh)*.38),135px) + 20px)));
--cv-lockup-drop: calc(var(--cv-head-drop) + 18px);
}
/* Short phones: a slightly smaller mark keeps the tapped route's panel above the fold. */
@media (max-width:760px) and (max-height:779px) and (max-aspect-ratio:1/1) {
.page-home .cv-homehero__brand-mark {
width: min(91vw,365px,calc((100svh - 270px)*.76));
}
}
/* Taller phones: the lockup settles lower, centring the mark in the frame while
leaving room under the wordmark for the tapped route's panel. */
@media (max-width:760px) and (min-height:780px) {
.page-home .cv-homehero {
--cv-lockup-drop: calc(var(--cv-head-drop) + 12svh - 30px);
}
}
@media (min-width:761px) {
.page-home .cv-homehero {
--cv-head-drop: max(0px,calc(64px + clamp(28px,4.5svh,48px) - 10svh));
--cv-lockup-drop: var(--cv-head-drop);
}
}
.page-home .cv-homehero__title {
translate: 0 var(--cv-head-drop);
}
.page-home .cv-homehero__brand-lockup {
translate: 0 var(--cv-lockup-drop);
}
/* Returning with Back, or arriving at a section link, shows the intro's final frame at once. */
.page-home .cv-homehero.is-settled :is(.cv-homehero__field,.cv-homehero__wordmark,.cv-homehero__ghost,.cv-homehero__media,.cv-homehero__title) {
animation: none !important;
}
.page-home .cv-homehero.is-settled .cv-homehero__field {
transform: none;
}
.page-home .cv-homehero.is-settled :is(.cv-homehero__wordmark,.cv-homehero__media) {
opacity: 1;
}
.page-home .cv-homehero.is-settled .cv-homehero__ghost {
opacity: 0;
}
.page-home .cv-homehero.is-settled .cv-homehero__title {
opacity: 1;
transform: translate(-50%,0);
}
.page-home #mainNav {
opacity: 1;
transition: opacity .34s ease,transform .32s var(--cv-shell-ease,var(--cv-ease-enter)),visibility 0s,background .28s ease,color .28s ease,border-color .28s ease,backdrop-filter .28s ease;
}
/* Desktop opens on the land alone; the nav arrives as the intro settles (~1.8s) or on
scroll. Phones keep Menu reachable from the first frame. */
@media (min-width:761px) {
.page-home:has(#cvHomeHero[data-cv-hero-nav="latent"]) #mainNav {
opacity: 0;
transform: translate3d(0,0,0);
visibility: hidden;
pointer-events: none;
transition: opacity .34s ease,transform .32s var(--cv-shell-ease,var(--cv-ease-enter)),visibility 0s linear .34s;
}
}
/* One wordmark at a time, without leaving the bar unanchored: over the hero, during the
opening frame and while the hero wordmark is in view, the nav carries only the leaf-only
trustmark (Logo/svg/cultivera-leaf-*-nav.svg). The full logo waits behind it, cropped to
its own leaves, so on exit the wordmark unfolds from the leaf as the leaf settles into it. */
.page-home #mainNav .cv-global-logo {
clip-path: inset(-2px -2px -2px -2px);
transition: opacity .22s ease,clip-path .45s var(--cv-ease-move);
}
body.page-home #mainNav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-logo,
.page-home:has(#cvHomeHero[data-cv-hero-nav="latent"]) #mainNav .cv-global-logo,
.page-home:has(#cvHomeHero[data-cv-wordmark-in-view]) #mainNav .cv-global-logo {
opacity: 0 !important;
clip-path: inset(-2px 74% -2px -2px);
}
/* Leaf box = the full logo's leaf group at 1.24x, from the 416-unit nav viewBox:
leaves start 3 units in and span 96.5 units. Resting scale(.8065) = 1/1.24 lands the
leaf exactly on the full logo's own leaves, so the hand-off reads as one mark. */
.page-home #mainNav .cv-global-leaf {
position: absolute;
left: .894%;
top: 50%;
width: 28.765%;
height: auto;
opacity: 0;
pointer-events: none;
transform: translateY(calc(-50% + 1px)) scale(.8065);
transform-origin: -3.109% 50%;
transition: opacity .22s ease,transform .45s var(--cv-ease-move);
}
/* Reverse leaf over the hero: 90% white with the MENU pill's contact shadow, so it stays
white (not grey) over every hero frame. Hover and focus lift it to full white. */
body.page-home:not(.mobile-menu-open):not(.global-menu-open) #mainNav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-leaf--reverse {
opacity: .9;
filter: drop-shadow(0 1px 2px rgba(0,0,0,.42));
transform: translateY(calc(-50% + 1px));
}
body.page-home:not(.mobile-menu-open):not(.global-menu-open) #mainNav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-brand:is(:hover,:focus-visible) .cv-global-leaf--reverse {
opacity: 1;
}
/* Coloured leaf on ivory: menu open over the hero, or a scrolled bar while the hero
wordmark is still in view. */
body.page-home:is(.mobile-menu-open,.global-menu-open) #mainNav[data-cv-tone="overlay"]:not(.is-scrolled) .cv-global-leaf--primary,
.page-home:has(#cvHomeHero[data-cv-hero-nav="latent"]) #mainNav.is-scrolled .cv-global-leaf--primary,
.page-home:has(#cvHomeHero[data-cv-wordmark-in-view]) #mainNav.is-scrolled .cv-global-leaf--primary {
opacity: 1;
transform: translateY(calc(-50% + 1px));
}
@media (prefers-reduced-motion:reduce) {
.page-home #mainNav .cv-global-logo,
.page-home #mainNav .cv-global-leaf {
transition: opacity .22s ease;
}
}
@media (min-width:761px) and (max-width:1180px) {
.page-home #mainNav .cv-global-nav__inner {
width: calc(100% - 44px);
grid-template-columns: 120px minmax(0,1fr) auto;
gap: 10px;
}
.page-home #mainNav .cv-global-brand,
.page-home #mainNav .cv-global-logo {
width: 120px;
}
}
/* Same tablet rule as the rest of the site (global-shell-authority.css): from 761 to
1180px Home carries MENU and the drawer in every orientation. Without scripting
home-no-js.css keeps the full link row. */
@media (min-width:761px) and (max-width:1180px) and (scripting:enabled) {
.page-home #mainNav .cv-global-links {
display: none;
}
.page-home #mainNav .cv-global-cta {
display: none !important;
}
.page-home #mainNav .cv-global-menu {
display: inline-flex;
align-items: center;
grid-column: 3;
}
.cv-global-mobile.is-open {
grid-template-columns: minmax(0,560px);
}
}
.page-home .cv-homehero__hotspots {
position: absolute;
inset: 0;
z-index: 9;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
.page-home .cv-homehero__hotspot {
pointer-events: auto;
cursor: pointer;
outline: none;
touch-action: manipulation;
}
.page-home .cv-homehero__hotspot path {
fill: rgba(255,255,255,.001);
stroke: transparent;
stroke-width: .8;
vector-effect: non-scaling-stroke;
pointer-events: visiblePainted;
}
/* The leaf whose route is showing carries a quiet outline. */
.page-home .cv-homehero[data-active-leaf="mech"] [data-cv-hero-hotspot="mech"]:not(:focus-visible) path,
.page-home .cv-homehero[data-active-leaf="advisory"] [data-cv-hero-hotspot="advisory"]:not(:focus-visible) path,
.page-home .cv-homehero[data-active-leaf="farms"] [data-cv-hero-hotspot="farms"]:not(:focus-visible) path {
stroke: rgba(255,255,255,.72);
stroke-width: 1.25;
}
/* A light ring with a dark halo reads on every leaf, including the Advisory sky. */
.page-home .cv-homehero__hotspot:focus-visible path {
stroke: #fff;
stroke-width: 2.25;
filter: drop-shadow(0 0 1px rgba(7,16,10,.95)) drop-shadow(0 0 3px rgba(7,16,10,.7));
}
.page-home .cv-homehero__leaf {
transition: filter .28s var(--cv-ease-move);
}
.page-home .cv-homehero[data-active-leaf="mech"] .cv-homehero__leaf--mech,
.page-home .cv-homehero[data-active-leaf="advisory"] .cv-homehero__leaf--advisory,
.page-home .cv-homehero[data-active-leaf="farms"] .cv-homehero__leaf--farms {
filter: brightness(1.02) saturate(1.02) contrast(1.01);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
.page-home .cv-homehero__media {
transition: transform .30s var(--cv-ease-move);
}
.page-home .cv-homehero[data-active-leaf="mech"] .cv-homehero__leaf--mech .cv-homehero__media,
.page-home .cv-homehero[data-active-leaf="advisory"] .cv-homehero__leaf--advisory .cv-homehero__media,
.page-home .cv-homehero[data-active-leaf="farms"] .cv-homehero__leaf--farms .cv-homehero__media {
transform: scale(1.013);
}
}
.page-home .cv-homehero__destination {
position: absolute;
z-index: 20;
top: calc(100% + clamp(16px,2.2svh,22px));
left: 50%;
display: grid;
justify-items: center;
gap: 6px;
width: min(340px,calc(100vw - 32px));
color: #fff;
text-align: center;
text-shadow: 0 2px 16px rgba(0,0,0,.55);
opacity: 0;
visibility: hidden;
transform: translate(-50%,5px);
pointer-events: none;
transition: opacity .26s ease,transform .26s var(--cv-ease-move),visibility 0s linear .26s;
}
.page-home .cv-homehero__destination.is-visible {
opacity: 1;
visibility: visible;
transform: translate(-50%,0);
pointer-events: auto;
transition-delay: 0s;
}
.page-home .cv-homehero__destination-kicker {
font: 600 10px/1.3 var(--mono,"JetBrains Mono",ui-monospace,monospace);
letter-spacing: .1em;
text-transform: uppercase;
color: rgba(223,242,216,.94);
}
.page-home .cv-homehero__destination-title {
font: 400 clamp(15px,2vw,18px)/1.25 "Playfair Display",Georgia,serif;
}
.page-home .cv-homehero__destination-link {
display: inline-flex;
align-items: center;
gap: .32em;
margin-top: 7px;
padding: 6px 4px;
color: rgba(255,255,255,.96);
font: 600 11.5px/1.4 var(--mono,"JetBrains Mono",ui-monospace,monospace);
letter-spacing: .035em;
text-decoration: none;
border-bottom: 1px solid rgba(255,255,255,.62);
pointer-events: auto;
}
.page-home .cv-homehero__destination-link:is(:hover,:focus-visible) {
color: #fff;
border-bottom-color: #fff;
outline: none;
}
@media (max-width:760px) {
.page-home .cv-homehero__destination {
padding-bottom: max(10px,env(safe-area-inset-bottom,0px));
}
.page-home .cv-homehero__destination-title {
color: rgba(255,255,255,.98);
text-shadow: 0 2px 18px rgba(0,0,0,.68);
}
.page-home .cv-homehero__destination-link {
min-height: 44px;
margin-top: 8px;
padding: 7px 5px;
color: #fff;
font-weight: 600;
border-bottom-color: rgba(255,255,255,.72);
}
}
@media (min-width:761px) {
/* Placed beside its leaf from the leaves' real geometry (assets/home.js, placeRoute),
22px clear of every leaf at any width. */
.page-home .cv-homehero__destination {
left: var(--cv-route-left,50%);
top: var(--cv-route-top,40%);
width: max-content;
max-width: calc(100vw - 32px);
justify-items: start;
gap: 4px;
text-align: left;
transform: translate(0,6px);
transition: opacity .22s ease,transform .28s var(--cv-ease-move),visibility 0s linear .22s;
}
.page-home .cv-homehero__destination.is-visible {
transform: translate(0,0);
}
.page-home .cv-homehero[data-active-leaf="mech"] .cv-homehero__destination {
justify-items: end;
text-align: right;
}
/* Hover gives what a tap gives on phones: the route, what it is, and the way in. */
.page-home .cv-homehero__destination-title {
max-width: 17ch;
font-size: 17px;
text-wrap: balance;
}
.page-home .cv-homehero__destination-link {
margin-top: 6px;
min-height: 30px;
padding: 4px 2px;
white-space: nowrap;
}
}
@media (prefers-reduced-motion:reduce) {
.page-home .cv-homehero__destination,
.page-home .cv-homehero__leaf {
transition: none !important;
}
}
/* Persistent routes name the three leaf destinations before the first interaction.
Phone destination panels temporarily take this row's place after a tap. */
.page-home .cv-homehero__routes {
display: none;
}
@media (min-width:761px) {
.page-home .cv-homehero {
--cv-mark-width: min(44vw,420px,calc((100svh - 350px)*.8));
}
.page-home .cv-homehero__routes {
position: absolute;
z-index: 19;
top: calc(100% + 10px);
left: 50%;
display: block;
width: max-content;
max-width: calc(100vw - 32px);
transform: translateX(-50%);
color: #fff;
text-shadow: 0 2px 12px #07150c;
}
.page-home .cv-homehero__routes-kicker { display: none; }
.page-home .cv-homehero__routes-list {
display: flex;
justify-content: center;
gap: clamp(14px,2vw,28px);
}
.page-home .cv-homehero__routes a {
display: inline-flex;
pointer-events: auto;
align-items: center;
min-height: 44px;
padding-inline: 3px;
font: 500 12px/1.4 var(--mono);
letter-spacing: .025em;
text-decoration: underline;
text-underline-offset: 6px;
text-decoration-color: rgba(255,255,255,.55);
}
.page-home .cv-homehero__routes a:is(:hover,:focus-visible) {
text-decoration-color: #fff;
}
.page-home .cv-homehero__routes a:focus-visible {
outline: 2px solid currentColor;
outline-offset: 3px;
}
}
@media (min-width:761px) and (max-height:620px) {
.page-home .cv-homehero {
--cv-mark-width: min(38vw,calc((100svh - 330px)*.8));
}
}
@media (max-width:760px) {
.page-home .cv-homehero__routes {
position: absolute;
z-index: 19;
top: calc(100% + clamp(10px,1.8svh,18px));
left: 50%;
display: grid;
justify-items: center;
gap: 2px;
width: min(358px,calc(100vw - 32px));
color: #fff;
text-align: center;
text-shadow: 0 2px 14px rgba(0,0,0,.6);
transform: translateX(-50%);
pointer-events: none;
transition: opacity .22s ease,visibility 0s linear 0s;
}
.page-home .cv-homehero__routes-kicker {
font: 500 12px/1.3 var(--mono,"JetBrains Mono",ui-monospace,monospace);
letter-spacing: .04em;
color: rgba(236,244,232,.86);
}
.page-home .cv-homehero__routes-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 clamp(12px,4vw,20px);
}
.page-home .cv-homehero__routes a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0 4px;
color: #fff;
font: 600 12.5px/1 var(--mono,"JetBrains Mono",ui-monospace,monospace);
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.5);
text-decoration-thickness: 1px;
text-underline-offset: 5px;
pointer-events: auto;
}
.page-home .cv-homehero__routes a:is(:hover,:focus-visible) {
text-decoration-color: #fff;
}
.page-home .cv-homehero__routes a:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.page-home .cv-homehero[data-active-leaf] .cv-homehero__routes {
opacity: 0;
visibility: hidden;
transition: opacity .18s ease,visibility 0s linear .18s;
}
}
/* Landscape phones have no room under the wordmark; the labelled Menu carries the routes. */
@media (max-width:760px) and (max-height:500px) and (min-aspect-ratio:1/1) {
.page-home .cv-homehero__routes {
display: none;
}
}
/* Secondary route labels follow the leaf-shadow intro; primary content is already visible. */
@media (max-width:760px) and (prefers-reduced-motion:no-preference) and (scripting:enabled) {
.page-home .cv-homehero:not(.is-settled) .cv-homehero__routes {
opacity: 0;
}
.page-home .cv-homehero.is-activated:not(.is-settled) .cv-homehero__routes {
animation: cvHomeRoutesIn 520ms var(--cv-ease-enter) 380ms both;
}
.page-home .cv-homehero.is-activated:not(.is-settled)[data-active-leaf] .cv-homehero__routes {
animation: none;
opacity: 0;
}
}
@keyframes cvHomeRoutesIn {
from {
opacity: 0;
transform: translate(-50%,6px);
}
to {
opacity: 1;
transform: translate(-50%,0);
}
}
@media (prefers-reduced-motion:reduce) {
.page-home .cv-homehero__routes {
transition: none !important;
}
}
.page-home .cv-homehero__content {
pointer-events: none;
}
.page-home .cv-homehero__brand-mark,
.page-home .cv-homehero__leaf {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion:reduce) {
.page-home .cv-homehero__brand-mark,
.page-home .cv-homehero__leaf {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
}
@view-transition {
navigation: auto;
}
/* POST-AWARD PROSE FINISH: measured local headline measures and state titles. */
.page-home [data-ci-story-step="pattern"] h3{max-width:100%!important;text-wrap:pretty!important;}
.page-home [data-ci-story-step="resolution"] h3{max-width:100%!important;text-wrap:balance!important;}
.page-home #contactTitle{max-width:100%!important;}
/* TYPE FINISH: one scale for Home display type. Section headings, Crop
Intelligence step headings and proof figures each share one fluid size, so a
step heading never outsizes its section heading on phones. Tracking loosens
as type gets smaller: calc(.9px - .06em) is about -.048em at 76px, -.043em
at 54px and -.034em at 34px. The 52.6% feature figure and the hero lockup
keep their own settings. */
.page-home {
--home-type-section: clamp(32px, calc(21px + 3.6vw), 76px);
--home-type-step: clamp(30px, calc(20px + 2.3vw), 54px);
--home-type-figure: clamp(34px, calc(22px + 1.8vw), 48px);
--home-type-track: calc(.9px - .06em);
}
.page-home .home-mavh__copy .display-title,
.page-home .home-ci-story__intro .display-title,
.page-home .home-publication__copy .display-title,
.page-home #contactTitle {
font-size: var(--home-type-section) !important;
letter-spacing: var(--home-type-track) !important;
}
.page-home .home-ci-story__step h3,
.page-home [data-ci-story-step="history"] h3 {
font-size: var(--home-type-step) !important;
letter-spacing: var(--home-type-track) !important;
}
/* Balanced breaks: "Five districts / account for over half." rather than
stranding "for", and "Bring us what / needs to move." rather than "to move." */
.page-home [data-ci-story-step] h3,
.page-home #contactTitle {
text-wrap: balance !important;
}
.page-home .home-mavh__proof strong {
font-size: var(--home-type-figure) !important;
letter-spacing: var(--home-type-track) !important;
}
@media (min-width:761px) {
/* One line where it fits; otherwise two balanced lines, never "districts" alone. */
.page-home .home-ci-story__product-proof>div:first-child strong {
max-width: none !important;
font-size: var(--home-type-figure) !important;
text-wrap: balance !important;
}
}
/* Six crops on one row where the column allows; otherwise three over three, so
no crop is left alone on a row. One row needs about 372-380px. */
.page-home .home-ci-story__crops {
container: ci-crops / inline-size;
}

/* LABEL FINISH: small text on Home reads at its real size. The history chart is
now laid out in true pixels and the map labels are counter-scaled (home.js sets
--ci-svg-unit), so these sizes are what the reader sees. Mono labels keep their
archival voice with an 11px floor and less tracking as they get smaller. */
.page-home .home-ci-history__label {
font-size: 12px !important;
stroke-width: 3.5px !important;
}
.page-home .home-ci-history__label--primary {
font-size: 13px !important;
font-weight: 650 !important;
}
.page-home .home-ci-history__value,
.page-home .home-ci-history__axis-label,
.page-home .home-ci-history__regime-label,
.page-home .home-ci-history__break-label {
font-size: 11px !important;
}
.page-home .home-ci-history__axis-label {
fill: #59675f;
}
.page-home .home-ci-history__regime-label,
.page-home .home-ci-history__break-label {
letter-spacing: .06em !important;
}
.page-home .home-ci-story__label-text {
font-size: calc(12px * var(--ci-svg-unit, 1)) !important;
stroke-width: calc(3.5px * var(--ci-svg-unit, 1)) !important;
}
@media (max-width:760px) {
.page-home .home-ci-story__label-text {
font-size: calc(11px * var(--ci-svg-unit, 1)) !important;
stroke-width: calc(3px * var(--ci-svg-unit, 1)) !important;
}
}
.page-home .home-ci-story__visual-head,
.page-home .home-ci-story__step-index,
.page-home .home-ci-story__crops-label,
.page-home .home-ci-story__district-picker label {
font-size: 11px !important;
letter-spacing: .075em !important;
}
.page-home .home-ci-story__provenance,
.page-home .home-ci-story__legend,
.page-home .home-ci-story__legend b,
.page-home .home-ci-story__product-proof span {
font-size: 11px !important;
line-height: 1.45 !important;
letter-spacing: .03em !important;
}
.page-home .global-cta-kicker.global-cta-kicker {
font-size: 11px;
letter-spacing: .1em;
}
.page-home .home-ci-history__break-label {
paint-order: stroke;
stroke: var(--home-ci-paper, #edf0e8);
stroke-width: 5px;
stroke-linejoin: round;
}
/* Two-column tablets (761-900px) give the visual a narrow column; inset the map
from the left so the Dinajpur and Joypurhat labels stay inside it. */
@media (min-width:761px) and (max-width:900px) {
.page-home .home-ci-story__map-wrap {
left: 10% !important;
}
}
/* Pattern-state map key: rust is the five districts in the finding, the pale
ground is every other district. */
.page-home [data-ci-story-state="pattern"] .home-ci-story__legend {
opacity: 1 !important;
transform: none !important;
max-width: 100% !important;
flex-wrap: wrap;
}
.page-home .home-ci-story__key {
display: block;
flex: none;
width: 11px;
height: 11px;
background: #dfe4dc;
border: 1px solid rgba(23,58,40,.18);
}
.page-home .home-ci-story__key--top {
background: #a94734;
border-color: #a94734;
}
.page-home .home-ci-story__key + b {
margin-right: 6px;
}
/* Narrow visuals: the caption stops short of the scale beside it (tablets), or
the scale takes its own row under the caption (phones). */
@media (min-width:761px) and (max-width:900px) {
.page-home [data-ci-story-state="resolution"] .home-ci-story__reading span {
display: block;
max-width: calc(100% - 64px);
}
}
@media (max-width:760px) {
.page-home .home-ci-story__legend {
bottom: 12px !important;
max-width: 100% !important;
}
.page-home .home-ci-story__provenance {
line-height: 1.25 !important;
}
/* The map gives back the row the scale takes, in every state so it never jumps. */
.page-home .home-ci-story__map-wrap {
bottom: 81px !important;
}
}
@media (min-width:600px) and (max-width:760px) and (min-height:750px) {
.page-home .home-ci-story__map-wrap {
bottom: 101px !important;
}
}
/* Smallest phones: the source note runs to three lines; keep the map below it. */
@media (max-width:379px) {
.page-home .home-ci-story__map-wrap {
top: 66px !important;
}
}
/* Phones pin the Crop Intelligence stage at the top of the screen. When the nav
slides back in on scroll-up, the stage moves down with it instead of losing its
heading under the nav (same pattern as the potato long view). */
@media (max-width:760px) {
html.cv-nav-scroll-reveal:not(.cv-global-nav-hidden) .page-home .home-ci-story__visual {
top: var(--nav-h, 58px) !important;
}
html.cv-nav-scroll-reveal .page-home .home-ci-story__visual {
transition: top .32s var(--cv-shell-ease, var(--cv-ease-enter)) !important;
}
}
/* The stage frame and last step have no bottom rule; final proof-cell
borders are owned by the editorial ledger treatment below. */
.page-home .home-ci-story__visual,
.page-home [data-ci-story-step]:last-child {
border-bottom: 0 !important;
}
/* Shared mobile menu scroll ownership; mirrored from global-shell-authority.css. */
.cv-global-mobile {
box-sizing: border-box;
/* Preserve vh fallback before the dynamic-viewport override. */
max-height: calc(100vh - var(--cv-nav-height));
max-height: calc(100dvh - var(--cv-nav-height));
overflow-y: auto;
overscroll-behavior-y: contain;
scrollbar-gutter: stable;
}
.cv-global-mobile.is-open{align-content:start}
/* Contain the funding hierarchy without changing the shared type scale. */
.cv-global-mobile .funding-mobile-menu{padding-left:12px}
.cv-global-mobile .funding-mobile-menu__body{margin-left:3px;padding-left:10px;border-left:1px solid rgba(23,27,23,.14)}
.cv-global-mobile .funding-mobile-menu__priority:is(.is-active,[aria-expanded="true"]){background:rgba(63,113,75,.045)}
.cv-global-nav.cv-global-nav .cv-global-menu:focus-visible{border-radius:999px}
/* ==== assets/home-art-direction-20261009.css ==== */
/* Home editorial art-direction candidate | 2026-10-09 | isolated from main home.css
Sections intentionally scoped to body.page-home. Preserve source data and JS. */
/* Nav three-leaf trustmark: see the leaf-only rules beside the Home wordmark hand-off.
Open menu: header and drawer read as one ivory sheet. The coloured leaf-only mark
stays, so the nav never repeats the hero wordmark still visible below. */
body.page-home:is(.mobile-menu-open,.global-menu-open) #mainNav.cv-global-nav {
color: var(--cv-shell-ink);
background: #f9f9f5;
border-bottom-color: var(--cv-shell-line);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.page-home:is(.mobile-menu-open,.global-menu-open) #mainNav .cv-global-menu {
color: var(--cv-shell-ink);
border-color: currentColor;
background: transparent;
box-shadow: none;
filter: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
body.page-home #mainNav .cv-global-brand::after {
content: none !important;
display: none !important;
}
/* 01 · Bogra as a photographic magazine opening. */
body.page-home .home-mavh {
padding: 0;
background: #eee9df;
}
body.page-home .home-mavh > .container {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
body.page-home .home-mavh__grid {
display: grid;
grid-template-columns: minmax(0,54fr) minmax(0,46fr);
align-items: stretch;
gap: 0;
}
body.page-home .home-mavh__media {
position: relative;
display: block;
min-height: clamp(620px,58vw,820px);
margin: 0;
overflow: hidden;
background: #354b34;
}
body.page-home .home-mavh__media img {
display: block;
width: 100%;
height: 100%;
min-height: inherit;
object-fit: cover;
filter: none;
}
body.page-home .home-mavh__media figcaption {
position: absolute;
bottom: clamp(18px,2.1vw,34px);
left: clamp(22px,3.2vw,50px);
border: 0;
font: 500 11px/1.4 var(--mono);
}
body.page-home .home-mavh__copy {
display: flex;
flex-direction: column;
min-width: 0;
max-width: none;
padding: clamp(58px,5.7vw,94px) clamp(34px,5.2vw,92px) clamp(46px,5vw,80px);
}
body.page-home .home-mavh__copy .display-title {
max-width: 14ch;
font-size: clamp(42px,4.4vw,67px);
line-height: .98;
letter-spacing: -.052em;
}
body.page-home .home-mavh__project {
margin-top: auto;
padding-top: clamp(28px,3vw,44px);
}
body.page-home .home-mavh__copy > .editorial-link {
width: max-content;
min-height: 48px;
font-size: 12px;
}
/* 02 · Preserve existing atlas geometry and JS states.
Only make selected crop states and keyboard focus more legible. */
body.page-home .home-ci-story__crops button:focus-visible,
body.page-home .home-ci-story__district-picker select:focus-visible {
outline: 2px solid #174831;
outline-offset: 4px;
}
/* 03 · Retained Capital: existing image, immersive Insights-inspired yellow.
Evidence and exact contextual image credit remain outside/inside the cover. */
body.page-home .home-publication {
padding: 0;
background: #e7e2d7;
border-top: 0;
}
body.page-home .home-publication > .container {
width: 100%;
max-width: none;
margin: 0;
}
body.page-home .home-publication__spread {
display: block;
overflow: visible;
}
body.page-home .home-publication__plate {
position: relative;
display: grid;
grid-template-columns: minmax(0,1fr);
grid-template-rows: minmax(0,1fr);
min-height: clamp(660px,88svh,980px);
margin: 0;
overflow: hidden;
isolation: isolate;
background: #263225;
}
body.page-home .home-publication__media::after {
content: "";
position: absolute;
z-index: 0;
inset: 0;
background: linear-gradient(90deg,rgba(7,17,11,.76) 0%,rgba(7,17,11,.48) 42%,rgba(7,17,11,.08) 100%);
pointer-events: none;
}
body.page-home .home-publication__plate > .home-publication__media {
position: absolute;
inset: 0;
z-index: -1;
margin: 0;
overflow: hidden;
}
body.page-home .home-publication__media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
object-fit: cover;
object-position: 57% 57%;
}
body.page-home .home-publication__masthead {
z-index: 1;
grid-column: 1;
grid-row: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: clamp(42px,8svh,110px);
min-height: clamp(660px,88svh,980px);
margin: 0;
padding: clamp(48px,5.7vw,100px) clamp(28px,6vw,112px) clamp(52px,6vw,96px);
border: 0;
}
body.page-home .home-publication__copy {
max-width: min(810px,88vw);
margin-top: clamp(25px,4svh,74px);
padding: 0;
}
body.page-home .home-publication__copy .home-method-step {
color: #fff7e5;
}
body.page-home .home-publication__copy .display-title {
max-width: 13.5ch;
margin: 22px 0 0;
color: #efd68d;
font-family: var(--serif);
font-weight: 400;
font-size: clamp(64px,7.6vw,118px);
line-height: .94;
letter-spacing: -.057em;
text-wrap: balance;
}
body.page-home .home-publication__intro {
max-width: 480px;
margin: 0;
padding: 0;
border: 0;
}
body.page-home .home-publication__lede {
max-width: 37ch;
margin: 0 0 22px;
color: #f6f2e8;
font: 400 clamp(16px,1.35vw,20px)/1.53 var(--sans);
letter-spacing: -.012em;
}
body.page-home .home-publication__intro .editorial-link {
color: #fff6df;
font-size: 12px;
}
body.page-home .home-publication__media figcaption {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
box-sizing: border-box;
width: 100%;
max-width: none;
margin: 0;
padding: 26px 22px 12px;
border: 0;
background: linear-gradient(transparent,rgba(9,19,12,.72));
color: #eeeadd;
font: 400 11px/1.5 var(--sans);
letter-spacing: .015em;
text-align: right;
text-shadow: 0 1px 3px rgba(0,0,0,.65);
}
body.page-home .home-publication__media .home-proof-caption__label {
color: inherit;
}
@media (max-width:1100px) and (min-width:761px) {
body.page-home .home-mavh__grid { grid-template-columns: minmax(0,49fr) minmax(0,51fr); }
body.page-home .home-mavh__copy { padding: 50px 34px 44px; }
body.page-home .home-mavh__copy .display-title { font-size: clamp(39px,4.25vw,48px); }
}
@media (min-width:761px) and (max-width:900px) {
/* Tablet is an authored full-width photographic feature, not a cramped split. */
body.page-home .home-mavh__grid { grid-template-columns: minmax(0,1fr); }
body.page-home .home-mavh__media { min-height: 0; height: clamp(420px,54vw,590px); }
body.page-home .home-mavh__media img { height: 100%; min-height: 0; }
body.page-home .home-mavh__copy { padding: 52px clamp(38px,7vw,70px) 54px; }
body.page-home .home-mavh__copy .display-title {
max-width: 17ch;
font-size: clamp(48px,6vw,64px);
}
}
@media (max-width:760px) {
body.page-home .home-mavh__grid { grid-template-columns: minmax(0,1fr); }
body.page-home .home-mavh__media { min-height: 0; height: clamp(340px,90vw,510px); }
body.page-home .home-mavh__media img { height: 100%; min-height: 0; }
body.page-home .home-mavh__media figcaption { max-width: calc(100% - 36px); }
body.page-home .home-mavh__copy { padding: 40px 22px 52px; }
body.page-home .home-mavh__copy .display-title { max-width: 13.5ch; font-size: clamp(37px,9.7vw,53px); line-height: .99; }
body.page-home .home-mavh__project { margin-top: 20px; padding-top: 0; }
body.page-home .home-publication__plate { min-height: clamp(610px,92svh,850px); }
body.page-home .home-publication__masthead {
min-height: clamp(610px,92svh,850px);
gap: 32px;
padding: 35px 22px 62px;
}
body.page-home .home-publication__copy { max-width: 100%; }
body.page-home .home-publication__copy .display-title {
max-width: 11ch;
margin-top: 16px;
font-size: clamp(45px,12vw,64px) !important;
letter-spacing: -.035em !important;
line-height: .96;
}
body.page-home .home-publication__intro { max-width: 34ch; }
body.page-home .home-publication__lede { font-size: 16px; line-height: 1.48; margin-bottom: 16px; }
body.page-home .home-publication__media img { object-position: 65% 50%; }
body.page-home .home-publication__media figcaption {
padding: 24px 20px 12px;
text-align: left;
}
}
/* Photo credits and source notes stay readable beside the display type. */
body.page-home .home-mavh__media figcaption,
body.page-home .home-ci-story__source {
font-size: 12px;
line-height: 1.5;
}
/* Home art pass: preserve clear space between the map heading and its source. */
body.page-home .home-ci-story__intro .display-title { letter-spacing: -.038em !important; }
@media (max-width:760px) {
.page-home .home-ci-story__visual-head > :first-child { max-width: 74%; }
}
/* Opening animation fluidity and GPU compositing layer promotions */
@media (prefers-reduced-motion:no-preference) {
body.page-home .cv-homehero.is-running .cv-homehero__field {
will-change: transform;
}
body.page-home .cv-homehero.is-running .cv-homehero__wordmark {
will-change: transform, opacity;
}
body.page-home .cv-homehero.is-activated .cv-homehero__media {
will-change: opacity;
}
body.page-home .cv-homehero.is-settled :is(.cv-homehero__field, .cv-homehero__wordmark, .cv-homehero__media, .cv-homehero__ghost, .cv-homehero__title) {
will-change: auto !important;
}
}
/* Portrait-tablet first viewport | photographed device review | 2026-10-11.
Keep phone <=760px, desktop landscape and the approved hero narrative untouched.
Retain all seven links and 44px link targets; Contact remains available when the
duplicate header CTA is suppressed to free readable navigation width. */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait) {
body.page-home .cv-homehero {
--cv-second-act-shift:4.5svh;
}
body.page-home .cv-homehero__title {
top:clamp(96px,10.5svh,138px);
width:min(92vw,880px);
font-size:clamp(46px,5.8vw,58px);
line-height:1.01;
}
body.page-home .cv-homehero__brand-lockup {
top:52%;
}
}
/* Owner review, 27 October: clean leaves, restored atlas and research interstitial.
Keep all three editorial sections on the navigation/footer content edge. */
.page-home :is(.home-mavh,.home-ci-story,.home-publication)>.container {
width:min(calc(100% - 44px),var(--cv-shell-max,1280px));
max-width:none;margin-inline:auto;padding-inline:0;
}
@media(max-width:720px){
.page-home :is(.home-mavh,.home-ci-story,.home-publication)>.container {width:calc(100% - 40px)}
}
/* Short phones keep the descriptor clear of the unchanged leaf geometry. */
@media (max-width:760px) and (max-height:650px) and (orientation:portrait) {
.page-home .cv-homehero__title {font-size:clamp(23px,7.5vw,28px)}
.page-home .cv-homehero__description {max-width:none;margin-top:8px;font-size:12.5px;line-height:1.4}
.page-home .cv-homehero__brand-lockup {translate:0 calc(var(--cv-lockup-drop) + 24px)}
}
/* Home pass, 27 October (desktop, tablet and phone review).
Hero: the lockup clears the descriptor (home.js measures --cv-fit-shift and
--cv-fit-scale); the wordmark reads as part of the lockup, not disabled. */
.page-home .cv-homehero__brand-lockup {
margin-top: var(--cv-fit-shift,0px);
}
.page-home .cv-homehero__brand-mark {
scale: var(--cv-fit-scale,1);
transform-origin: 50% 100%;
}
.page-home .cv-homehero__wordmark path {
fill: rgba(248,246,238,.9);
}
.page-home .cv-homehero__destination-link {
font-size: 12px;
}
@media (min-width:761px) {
.page-home .cv-homehero__description {
max-width: 46ch;
font-size: clamp(16px,1.25vw,18px);
}
.page-home .cv-homehero__routes a {
font-size: 13px;
}
}
/* Shared finish: number ranges never split, short lines never strand a word. */
.page-home .home-nowrap {
white-space: nowrap;
}
.page-home :is(.home-mavh__dek,.home-mavh__bridge,.home-ci-story__step>p,.home-ci-story__finding-text,.home-ci-story__product-proof span,.home-ci-story__source,.home-publication__lede,.global-cta-copy) {
text-wrap: pretty;
}
.page-home .home-method-step {
text-wrap: balance;
}
/* 01 · MAVH: the baskets fill the frame, the caption sits on a plate, and the
copy runs label, headline, intro, figures (named for the hub), note, link. */
body.page-home .home-mavh__media img {
transform: none;
object-position: 58% 56%;
}
body.page-home .home-mavh__media figcaption {
right: auto;
width: max-content;
max-width: calc(100% - 36px);
padding: 6px 9px;
background: rgba(9,19,12,.84);
color: #fffdf5;
font-size: 11px;
letter-spacing: .08em;
text-shadow: none;
}
body.page-home .home-mavh__proof .home-mavh__project {
grid-column: 1/-1;
margin: 0 0 12px;
padding: 0;
color: #2f3a33;
font: 600 13px/1.4 var(--sans);
letter-spacing: 0;
}
body.page-home .home-mavh__proof .home-mavh__project span {
display: block;
color: #566159;
font-weight: 500;
}
body.page-home .home-mavh__copy > .editorial-link {
margin-top: auto;
}
body.page-home .home-mavh__bridge {
margin-bottom: 24px;
}
.page-home .home-mavh__bridge a {
display: inline-block;
padding-block: 6px;
margin-block: -6px;
}
@media (min-width:1101px) {
body.page-home .home-mavh__dek {
max-width: 44ch;
font-size: clamp(17px,1.25vw,19px);
line-height: 1.55;
}
body.page-home .home-mavh__bridge {
max-width: 46ch;
font-size: 15px;
}
body.page-home .home-mavh__proof span {
font-size: 13px;
}
}
@media (min-width:761px) and (max-width:900px) {
body.page-home .home-mavh__media img {
object-position: 50% 62%;
}
}
@media (max-width:760px) {
body.page-home .home-mavh__media img {
object-position: 55% 56%;
}
body.page-home .home-mavh__media figcaption {
left: 14px;
bottom: 12px;
font-size: 10.5px;
}
}
/* 02 · Crop Intelligence. Desktop gives the steps a column wide enough for two-line
headings and lets the map fill more of its frame; the number and its scale read
as one unit at the foot of the map. */
@media (min-width:1025px) {
.page-home .home-ci-story__body {
grid-template-columns: minmax(0,1.1fr) minmax(380px,.9fr) !important;
}
.page-home .home-ci-story__step h3 {
max-width: 16ch !important;
}
.page-home .home-ci-story__step>p {
max-width: 44ch !important;
font-size: 17px !important;
}
.page-home .home-ci-story__map-wrap {
inset: 46px 0 64px !important;
}
}
@media (min-width:761px) {
.page-home [data-ci-story-state="pattern"] .home-ci-story__map-wrap,
.page-home [data-ci-story-state="resolution"] .home-ci-story__map-wrap {
bottom: 132px !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__map-wrap { top: 76px !important; }
.page-home [data-ci-story-state="pattern"] .home-ci-story__reading,
.page-home [data-ci-story-state="resolution"] .home-ci-story__reading {
bottom: 44px !important;
}
.page-home .home-ci-story__legend {
right: auto !important;
left: 0 !important;
}
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__legend {
text-transform: none !important;
}
/* Time: a faint figure would read as a glitch; this one is set to be seen. */
.page-home .home-ci-history__watermark {
fill: var(--home-ci-forest, #173a28);
fill-opacity: .085;
}
/* Choose a district leads, on every screen; crops are buttons. */
.page-home .home-ci-story__district-picker {
display: block;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(23,58,40,.2);
}
.page-home .home-ci-story__district-picker label {
display: block;
margin-bottom: 9px;
color: var(--home-ci-muted, #536159);
font: 600 11px/1.3 var(--mono);
letter-spacing: .1em;
text-transform: uppercase;
}
.page-home .home-ci-story__district-picker select {
width: min(100%,340px);
min-height: 44px;
padding: 8px 12px;
border: 1px solid rgba(23,58,40,.42);
border-radius: 2px;
background: #f6f8f4;
color: var(--home-ci-forest, #173a28);
font: 500 15px/1.3 var(--sans);
}
.page-home .home-ci-story__district-picker select:focus-visible {
outline: 2px solid var(--home-ci-forest, #173a28);
outline-offset: 3px;
}
.page-home .home-ci-story__crops {
margin-top: 20px;
padding-top: 0;
border-top: 0;
}
.page-home .home-ci-story__crops-label {
font-size: 11px;
margin-bottom: 10px;
}
.page-home .home-ci-story__crops-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* The named container query follows flex, ahead of the mobile override. */
@container ci-crops (max-width: 383px) {
.page-home .home-ci-story__crops-list {
display: grid;
grid-template-columns: repeat(3, max-content);
justify-items: start;
}
}
.page-home .home-ci-story__crops button {
min-height: 44px;
padding: 0 14px;
border: 1px solid rgba(23,58,40,.34);
border-radius: 2px;
background: transparent;
color: #2f4136;
font: 500 14px/1.2 var(--sans);
transition: background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}
.page-home .home-ci-story__crops button::after {
display: none;
}
.page-home .home-ci-story__crops button:hover {
border-color: var(--home-ci-forest, #173a28);
color: var(--home-ci-forest, #173a28);
}
body.page-home .home-ci-story__crops button[aria-pressed="true"] {
border-color: var(--home-ci-forest, #173a28);
background: var(--home-ci-forest, #173a28);
color: #f4f3ed;
font-weight: 600;
}
@media (max-width:760px) {
.page-home .home-ci-story__crops-list {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
}
.page-home .home-ci-story__crops button {
min-height: 44px;
padding: 0 6px;
font-size: 15px;
}
.page-home .home-ci-story__district-picker select {
width: 100%;
min-height: 48px;
font-size: 16px;
}
}
/* Respect reduced motion after the final normal crop-button transition. */
@media (prefers-reduced-motion:reduce) {
.page-home .home-ci-story__crops button {
transition: none;
}
}
/* Three figures, one treatment: the number in the display serif, one plain line. */
.page-home .home-ci-story__product-proof {
grid-template-columns: repeat(3,minmax(0,1fr)) !important;
grid-template-areas: none !important;
column-gap: clamp(28px,4vw,64px) !important;
padding: 24px 0 22px !important;
}
.page-home .home-ci-story__product-proof>div,
.page-home .home-ci-story__product-proof>div+div,
.page-home .home-ci-story__product-proof>div:nth-child(n) {
grid-area: auto !important;
align-self: start !important;
padding: 0 !important;
border: 0 !important;
}
.page-home .home-ci-story__product-proof>div strong,
.page-home .home-ci-story__product-proof>div:first-child strong,
.page-home .home-ci-story__product-proof>div:not(:first-child) strong {
display: block;
color: var(--home-ci-forest, #173a28);
font: 400 var(--home-type-figure)/.95 var(--serif) !important;
letter-spacing: var(--home-type-track) !important;
}
.page-home .home-ci-story__product-proof span {
max-width: 34ch;
margin-top: 10px !important;
color: #46534a !important;
font: 400 14px/1.5 var(--sans) !important;
letter-spacing: 0 !important;
}
.page-home .home-ci-story__product-proof span span {
display: inline;
margin: 0 !important;
}
@media (max-width:760px) {
.page-home .home-ci-story__product-proof {
display: grid !important;
grid-template-columns: 1fr !important;
padding: 0 !important;
}
.page-home .home-ci-story__product-proof>div,
.page-home .home-ci-story__product-proof>div+div,
.page-home .home-ci-story__product-proof>div:nth-child(n) {
padding: 18px 0 !important;
border-top: 1px solid rgba(23,58,40,.13) !important;
}
.page-home .home-ci-story__product-proof>div strong,
.page-home .home-ci-story__product-proof>div:first-child strong,
.page-home .home-ci-story__product-proof>div:not(:first-child) strong {
font-size: 34px !important;
}
.page-home .home-ci-story__product-proof span {
margin-top: 6px !important;
font-size: 15px !important;
}
}
/* Phones: the map keeps its own frame. The source sits on one line under the head,
and the number, key and scale sit below the map instead of across it. */
@media (max-width:900px) {
.page-home .home-ci-story__provenance {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width:760px) {
.page-home .home-ci-story__provenance {
top: 52px;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__map-wrap {
top: 82px !important;
bottom: 100px !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__map {
transform: translateX(6px) scale(1.04) !important;
transform-origin: 50% 40% !important;
}
.page-home [data-ci-story-state="resolution"] .home-ci-story__reading {
bottom: 34px !important;
}
.page-home .home-ci-story__legend {
left: 0 !important;
right: auto !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__map-wrap {
bottom: 132px !important;
}
.page-home [data-ci-story-state="pattern"] .home-ci-story__reading {
bottom: 52px !important;
}
}
/* 03 · Retained Capital: dark only behind the words, the face left unshaded. */
@media (min-width:761px) {
body.page-home .home-publication__media::after {
background:
radial-gradient(ellipse 62% 70% at 10% 28%,rgba(7,17,11,.5) 0%,rgba(7,17,11,0) 70%),
linear-gradient(90deg,rgba(7,17,11,.8) 0%,rgba(7,17,11,.56) 36%,rgba(7,17,11,.12) 62%,rgba(7,17,11,0) 100%);
}
}
@media (max-width:760px) {
/* The photo meets the section above; the headline sits over sky and wheat, above
her, and the intro over the dark ground at the foot. */
.page-home .home-publication {
padding-top: 0 !important;
}
body.page-home .home-publication__copy {
margin-top: 0;
}
body.page-home .home-publication__media::after {
background: linear-gradient(180deg,rgba(9,21,13,.72) 0%,rgba(9,21,13,.5) 24%,rgba(9,21,13,.14) 42%,rgba(9,21,13,.18) 58%,rgba(9,21,13,.8) 82%,rgba(9,21,13,.88) 100%);
}
}
.page-home .home-ci-story__reading span {
max-width: 46ch;
}
.page-home .home-ci-story:not(.is-r11-ready) .home-ci-story__district-picker {
display: none;
}
/* A failed crop request keeps the current reading and offers an explicit retry. */
.page-home .home-ci-story__feedback { color: var(--home-ci-forest, #173a28); }
.page-home .home-ci-story__feedback.has-error { margin-top: 16px; }
.page-home .home-ci-story__feedback button[hidden] { display: none; }
.page-home .home-ci-story__feedback p { margin: 0; font: 400 14px/1.5 var(--sans); }
.page-home .home-ci-story__feedback button {
min-height: 44px;
padding: 8px 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font: 600 14px/1.5 var(--sans);
text-decoration: underline;
text-underline-offset: 4px;
cursor: pointer;
}
.page-home .home-ci-story__feedback button:focus-visible { outline: 2px solid var(--home-ci-forest, #173a28); outline-offset: 3px; }
/* Homepage service bridge: one editorial introduction between the hero and first project. */
.page-home .home-services {
padding: clamp(42px,4.3vw,64px) 0 clamp(46px,4.4vw,68px);
background: #f4f3ed;
color: #131713;
}
.page-home .home-services__intro {
display: grid;
grid-template-columns: minmax(0,1.6fr) minmax(210px,.7fr);
align-items: end;
gap: clamp(20px,3vw,52px);
margin-bottom: clamp(22px,2.4vw,32px);
}
.page-home .home-services__intro h2 {
max-width: 17ch;
margin: 0;
font: 400 clamp(38px,4.4vw,66px)/.99 var(--serif);
letter-spacing: -.035em;
text-wrap: balance;
}
.page-home .home-services__intro h2 span { display: block; }
.page-home .home-services__intro p {
max-width: 32ch;
margin: 0 0 5px;
font: 400 clamp(15px,1.35vw,19px)/1.5 var(--sans);
color: #515953;
}
.page-home .home-services__grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
grid-template-rows: minmax(430px,auto);
gap: clamp(18px,2vw,30px);
counter-reset: service;
}
.page-home .home-services__card {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
overflow: hidden;
isolation: isolate;
background: transparent;
color: #173a28;
border-bottom: 1px solid #bcc5b8;
counter-increment: service;
text-decoration: none;
}
.page-home .home-services__media,
.page-home .home-services__media img {
inset: 0 0 auto;
display: block;
width: 100%;
height: 260px;
}
.page-home .home-services__media img {
position: absolute;
object-fit: cover;
object-position: center;
}
.page-home .home-services__media { position: relative; flex: none; }
.page-home .home-services__card--field .home-services__media img { object-position: 50% 54%; }
.page-home .home-services__card--advisory .home-services__media img { object-position: 50% 43%; }
.page-home .home-services__card--farms .home-services__media img { object-position: 50% 55%; }
.page-home .home-services__copy {
position: relative;
z-index: 1;
inset: auto;
margin: 22px 0 24px;
padding-right: 22px;
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 0;
}
.page-home .home-services__kicker {
margin-bottom: 7px;
font: 600 11px/1.4 var(--mono);
letter-spacing: .13em;
text-transform: uppercase;
}
.page-home .home-services__title {
max-width: 20ch;
font: 400 clamp(28px,2.6vw,38px)/1.06 var(--serif);
letter-spacing: -.025em;
text-wrap: balance;
}
.page-home .home-services__detail {
max-width: 43ch;
margin-top: 8px;
font: 400 clamp(14px,1.05vw,16px)/1.5 var(--sans);
color: #515953;
}
.page-home .home-services__arrow {
position: absolute;
right: 0;
bottom: 1px;
font: 600 20px/1 var(--sans);
}
.page-home .home-services__kicker::before { content: "0" counter(service) " / "; color: #8a5038; }
.page-home .home-services__card:focus-visible {
outline: 3px solid #216b49;
outline-offset: 3px;
}
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
.page-home .home-services__card:hover .home-services__media img { transform: scale(1.025); }
}
@media (min-width:761px) and (max-width:1100px) {
.page-home .home-services__intro h2 { font-size: clamp(39px,4.6vw,52px); }
.page-home .home-services__grid { grid-template-rows: minmax(450px,auto); }
.page-home .home-services__title { font-size: clamp(25px,2.9vw,32px); }
}
@media (max-width:760px) {
.page-home .home-services { padding: 36px 0 44px; }
.page-home .home-services__intro { grid-template-columns: minmax(0,1fr); gap: 14px; }
.page-home .home-services__intro h2 { max-width: 18ch; font-size: clamp(36px,9.3vw,56px); }
.page-home .home-services__intro p { margin: 0; font-size: 15px; }
.page-home .home-services__grid { grid-template-columns: minmax(0,1fr); grid-template-rows: none; }
/* Let translated/zoomed copy grow naturally; fixed card heights could clip it. */
.page-home .home-services__card { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); align-items: center; gap: 18px; min-height: 180px; padding-bottom: 18px; }
.page-home .home-services__media { height: 180px; }
.page-home .home-services__media img { height: 100%; }
.page-home .home-services__copy {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 0 0 26px;
}
.page-home .home-services__arrow { right: 0; bottom: 0; }
.page-home .home-services__title { font-size: clamp(27px,6vw,36px); }
.page-home .home-services__detail { font-size: 14px; margin-top: 8px; }
.page-home .home-services__kicker { margin-bottom: 8px; font-size: 10px; letter-spacing: .08em; }
}
@media (max-width:360px) {
.page-home .home-services__card:not(.home-services__card--field) { min-height: 166px; }
.page-home .home-services__card:not(.home-services__card--field) .home-services__title { font-size: 26px; }
.page-home .home-services__detail { max-width: 31ch; }
}
/* Featured projects: manual carousel with the existing first-project fallback. */
.page-home .home-spotlight .home-mavh__proof[hidden],.page-home .home-spotlight .home-mavh__bridge[hidden] {display:none!important}
.page-home .home-spotlight__top {display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.page-home .home-spotlight__nav {display:flex;align-items:center;gap:10px;color:#1c452e}
.page-home .home-spotlight__nav[hidden],.page-home .home-spotlight__facts[hidden] {display:none!important}
.page-home .home-spotlight__nav button {width:44px;height:44px;display:grid;place-items:center;border-radius:50%;border:1px solid #57745e;background:transparent;color:inherit;font:400 24px/1 var(--sans);cursor:pointer}
.page-home .home-spotlight__nav button:disabled {opacity:.28;cursor:default}
.page-home .home-spotlight__nav button:focus-visible {outline:2px solid #1d6742;outline-offset:3px}
.page-home .home-spotlight__nav [data-spotlight-count] {min-width:53px;text-align:center;font:600 11px/1 var(--mono);white-space:nowrap}
.page-home .home-spotlight .home-mavh__copy {min-width:0}
.page-home .home-spotlight .home-mavh__copy .display-title {font-size:clamp(39px,4.25vw,65px);max-width:17ch}
.page-home .home-spotlight__facts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;border-top:1px solid rgba(30,60,41,.2);margin-top:24px;padding-top:21px}
.page-home .home-spotlight__facts>div {min-width:0}
.page-home .home-spotlight__facts span {display:block;font:600 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#536357;margin-bottom:7px}
.page-home .home-spotlight__facts p {margin:0;color:#283a30;font:400 clamp(14px,1.15vw,16px)/1.5 var(--sans)}
.page-home .home-spotlight .home-mavh__media img {transition:none}
@media(max-width:1100px){.page-home .home-spotlight__facts{grid-template-columns:1fr;gap:15px}}
@media(max-width:760px){
.page-home .home-spotlight .home-mavh__media{touch-action:pan-y}
.page-home .home-spotlight .home-mavh__copy .display-title{font-size:clamp(35px,9.4vw,48px);max-width:16ch;line-height:1.02}
.page-home .home-spotlight__nav {margin-left:auto;gap:6px}
}
.page-home .home-spotlight__all {display:inline-flex;align-self:flex-start;width:max-content;max-width:100%;margin-top:8px;padding:4px 0;font:600 11px/1.5 var(--mono);text-decoration:underline;text-underline-offset:4px}
.page-home .home-spotlight__all:focus-visible {outline:2px solid #174831;outline-offset:3px}
/* Featured project status controls and integrity-preserving completed state. */
.page-home .home-spotlight__filters {
display:flex;align-items:center;flex-wrap:wrap;gap:8px;
padding:32px 0 24px;border-top:1px solid rgba(30,60,41,.12);
}
.page-home .home-spotlight__filters[hidden],
.page-home .home-spotlight__empty[hidden],
.page-home .home-spotlight [data-spotlight-panel][hidden],
.page-home .home-spotlight__signals[hidden] {display:none!important}
.page-home .home-spotlight__filters button {
min-height:44px;padding:9px 15px;border:1px solid rgba(22,54,35,.23);
border-radius:999px;background:transparent;color:#365543;
font:600 11px/1.4 var(--mono);cursor:pointer;
}
.page-home .home-spotlight__filters button[aria-pressed="true"] {
color:#fffdf5;background:#183b29;border-color:#183b29;
}
.page-home .home-spotlight__filters button span {padding-left:7px;font-variant-numeric:tabular-nums}
.page-home .home-spotlight__filters button:focus-visible {outline:2px solid #216b49;outline-offset:3px}
.page-home .home-spotlight__signals {
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:0;margin:20px 0 0;border-top:1px solid rgba(30,60,41,.2);
border-bottom:1px solid rgba(30,60,41,.2);
}
.page-home .home-spotlight__signals>div {min-width:0;padding:14px 12px 16px 0}
.page-home .home-spotlight__signals>div+div {padding-left:12px;border-left:1px solid rgba(30,60,41,.2)}
.page-home .home-spotlight__signals span {display:block;margin-bottom:6px;color:#526557;font:600 9px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.05em}
.page-home .home-spotlight__signals strong {display:block;color:#1b3928;font:400 clamp(15px,1.8vw,27px)/1.12 var(--serif);overflow-wrap:anywhere}
.page-home .home-spotlight__empty {padding:clamp(38px,6vw,92px) clamp(20px,5vw,64px);min-height:310px;background:#eeece3}
.page-home .home-spotlight__empty h2 {max-width:21ch;margin:16px 0;font:400 clamp(34px,4.2vw,60px)/1.03 var(--serif);letter-spacing:-.045em}
.page-home .home-spotlight__empty p {max-width:58ch;margin:0 0 22px;color:#405247;font:400 16px/1.55 var(--sans)}
.page-home .home-spotlight__empty a {color:#245036;font:600 12px/1.4 var(--mono);text-underline-offset:4px}
.page-home .home-spotlight__empty a:focus-visible {outline:2px solid #174831;outline-offset:3px}
@media(max-width:760px){
.page-home .home-spotlight__filters {gap:7px;padding:24px 0 16px}
.page-home .home-spotlight__filters button {font-size:10px;padding:8px 11px}
.page-home .home-spotlight__signals strong {font-size:clamp(15px,4.6vw,22px)}
}
@media(max-width:360px){
.page-home .home-spotlight__signals {grid-template-columns:minmax(0,1fr)}
.page-home .home-spotlight__signals>div {padding:10px 0}
.page-home .home-spotlight__signals>div+div {padding-left:0;border-top:1px solid rgba(30,60,41,.2);border-left:0}
}
/* Latest Home art pass keeps the first-site project title inside the proof grid. */
.page-home .home-spotlight__project[hidden] {display:none!important}
/* Mobile/DTP finish after the Atlas portfolio merge — scoped, no desktop redesign. */
@media (max-width:600px) {
/* Show all three states without requiring a sideways scroll or a second row. */
.page-home .home-spotlight__filters {
display:grid;
gap:6px;
}
.page-home .home-spotlight__filters button {
min-width:0;
width:100%;
min-height:48px;
padding:7px 5px;
font-size:clamp(9px,2.7vw,10px);
line-height:1.28;
text-align:center;
}
.page-home .home-spotlight__filters button span {padding-left:3px}
.page-home .home-spotlight .home-mavh__copy .display-title {
text-wrap:balance;
overflow-wrap:break-word;
}
/* Empty completed state should not take the space of another hero. */
.page-home .home-spotlight__empty {min-height:0;padding:32px 22px}
.page-home .home-spotlight__empty h2 {
font-size:clamp(30px,8.4vw,42px);
line-height:1.04;
}
}
@media (max-width:760px) {
.page-home .home-services {padding-block:32px 38px}
.page-home .home-services__intro {margin-bottom:19px}
.page-home .home-services__grid {gap:10px}
}
/* Home polish 2026-10-27: shell edge, credit wrapping, card and carousel motion. */
/* The filter row sits on the full-bleed MAVH band; give it the shell edge the
sections above and below start on. */
.page-home .home-spotlight__filters {
padding-inline: max(22px,calc((100% - var(--cv-shell-max,1280px)) / 2));
}
@media (max-width:720px) {
.page-home .home-spotlight__filters { padding-inline: 20px; }
}
@media (max-width:600px) {
/* Inside the gutter the longest label needs the wider column; when a very narrow
phone still wraps it, balance the lines so the count never sits alone. */
.page-home .home-spotlight__filters {
grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);
}
.page-home .home-spotlight__filters button { text-wrap: balance; }
}
@media (min-width:761px) {
/* Retained Capital masthead starts on the same edge as every other section. */
body.page-home .home-publication__masthead {
padding-inline: max(22px,calc((100% - var(--cv-shell-max,1280px)) / 2));
}
/* One-line credit on desktop instead of a stranded licence line. */
body.page-home .home-publication__media figcaption { max-width: min(76ch,60vw); }
}
.page-home .home-publication__media figcaption .home-nowrap { white-space: nowrap; }
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
.page-home .home-services__card .home-services__media img {
transition: transform 420ms var(--cv-ease-move,ease);
}
.page-home .home-services__arrow { transition: transform 220ms var(--cv-ease-move,ease); }
.page-home .home-services__card:is(:hover,:focus-visible) .home-services__arrow {
transform: translate(2px,-2px);
}
}
/* Project carousel: a short settle instead of a hard cut when a slide changes. */
@keyframes homeSpotlightCopyIn {
from { opacity: 0; transform: translateX(calc(var(--spotlight-turn,1) * 14px)); }
to { opacity: 1; transform: none; }
}
@keyframes homeSpotlightImageIn {
from { opacity: .35; }
to { opacity: 1; }
}
@media (prefers-reduced-motion:no-preference) {
.page-home .home-spotlight.is-turning .home-mavh__copy > :not(.home-spotlight__top) {
animation: homeSpotlightCopyIn 380ms var(--cv-ease-enter,ease-out) both;
}
.page-home .home-spotlight.is-turning .home-mavh__copy > .display-title { animation-delay: 30ms; }
.page-home .home-spotlight.is-turning .home-mavh__copy > .display-title ~ * { animation-delay: 70ms; }
.page-home .home-spotlight.is-image-turning .home-mavh__media img {
animation: homeSpotlightImageIn 420ms var(--cv-ease-move,ease) both;
}
}
/* Featured projects: align the empty Completed state with the section's shell edge,
tighten the secondary Atlas link gap, and unify interactive control transitions. */
.page-home .home-spotlight__empty {
padding-inline: max(22px,calc((100% - var(--cv-shell-max,1280px)) / 2));
}
@media (max-width:720px) {
.page-home .home-spotlight__empty { padding-inline: 20px; }
}
.page-home .home-spotlight__empty .editorial-link {
color: #1c452e;
}
.page-home .home-spotlight__all {
gap: 5px;
color: #2b4c39;
text-decoration-color: rgba(43,76,57,.38);
transition: color 180ms ease,text-decoration-color 180ms ease;
}
.page-home .home-spotlight__all:is(:hover,:focus-visible) {
color: #143322;
text-decoration-color: currentColor;
}
.page-home .home-spotlight__all > span {
display: inline-block;
transition: transform 200ms var(--cv-ease-move,ease);
}
.page-home .home-spotlight__filters button {
transition: background-color 180ms ease,color 180ms ease,border-color 180ms ease;
}
.page-home .home-spotlight__filters button[aria-pressed="false"]:hover {
border-color: rgba(22,54,35,.48);
background: rgba(24,59,41,.055);
color: #183b29;
}
.page-home .home-spotlight__nav button {
transition: background-color 180ms ease,color 180ms ease,border-color 180ms ease,opacity 180ms ease;
}
.page-home .home-spotlight__nav button:not(:disabled):hover {
border-color: #183b29;
background: #183b29;
color: #fffdf5;
}
/* Non-first spotlight slides: keep facts, signals and project provenance in one
disciplined editorial ledger above the action links. */
.page-home .home-spotlight__signals {
margin-top: 24px;
}
.page-home .home-spotlight__signals strong {
font-variant-numeric: lining-nums;
letter-spacing: -.03em;
}
.page-home .home-spotlight__facts {
padding-bottom: 18px;
border-bottom: 1px solid rgba(30,60,41,.16);
}
.page-home .home-spotlight__signals:not([hidden]) + .home-spotlight__facts {
margin-top: 0;
border-top: 0;
}
.page-home .home-spotlight__project {
margin: 16px 0 22px;
color: #354c3c;
font: 500 13.5px/1.45 var(--sans);
}
/* Keep the right column's outer measure within the 1280px shell on wide screens. */
@media (min-width:901px) {
body.page-home .home-mavh__copy {
padding-right: max(clamp(34px,5.2vw,92px),calc((100vw - var(--cv-shell-max,1280px)) / 2));
}
}
/* Portrait tablets (761-900px): keep the full-bleed photo's caption and copy column
aligned with the shell edge, and restore the two-column facts ledger. */
@media (min-width:761px) and (max-width:900px) {
body.page-home .home-mavh__media figcaption {
left: 22px;
}
body.page-home .home-mavh__copy {
max-width: none;
padding-inline: 22px;
}
.page-home .home-spotlight__facts {
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 22px;
}
}
/* Phones: keep the 01 · Featured projects label and 01 / 08 controls on one baseline. */
@media (max-width:760px) {
.page-home .home-spotlight__top {
flex-wrap: nowrap;
gap: 10px;
margin-bottom: 16px;
}
.page-home .home-spotlight__top .home-method-step {
min-width: 0;
margin: 0;
font-size: 10px;
letter-spacing: .075em;
}
.page-home .home-spotlight__nav {
flex: 0 0 auto;
}
.page-home .home-spotlight__nav button {
font-size: 20px;
}
.page-home .home-spotlight__nav [data-spotlight-count] {
min-width: 46px;
font-size: 10.5px;
}
}
@media (max-width:359px) {
.page-home .home-spotlight__top {
flex-wrap: wrap;
}
}
/* Subtle directional motion on secondary links and scroll-down cue. */
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
.page-home .home-spotlight__all:is(:hover,:focus-visible) > span {
transform: translate(2px,-2px);
}
.page-home .home-mavh__bridge a span {
transition: transform 200ms var(--cv-ease-move,ease);
}
.page-home .home-mavh__bridge a:is(:hover,:focus-visible) span {
transform: translateY(2px);
}
.page-home .cv-homehero__destination-link span[aria-hidden="true"] {
display: inline-block;
transition: transform 200ms var(--cv-ease-move,ease);
}
.page-home .cv-homehero__destination-link:is(:hover,:focus-visible) span[aria-hidden="true"] {
transform: translateX(3px);
}
}
@keyframes homeSpotlightEmptyIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion:no-preference) {
.page-home .home-spotlight.is-turning .home-spotlight__empty:not([hidden]) {
animation: homeSpotlightEmptyIn 340ms var(--cv-ease-enter,ease-out) both;
}
}
/* Home review 2026-10-29. Retained Capital: the question, its answer and the link read as
one block, anchored low on the plate, instead of splitting to the top and bottom edges.
Portrait screens keep the split: the tall crop centres the farmer, and a low block would sit on her. */
@media (min-width:761px) and (orientation:landscape) {
body.page-home .home-publication__masthead { justify-content: flex-end; gap: 0; }
body.page-home .home-publication__copy { margin-top: 0; }
body.page-home .home-publication__intro { margin-top: clamp(22px,2.6vw,34px); }
}
/* Featured projects: the status chips sit close to the slide they filter. */
.page-home .home-spotlight__filters { padding-block: 20px 18px; }
@media (max-width:760px) {
.page-home .home-spotlight__filters { padding-block: 18px 14px; }
}
/* Slides lead with each project's hero line, which runs longer than a project name: one
desktop title size for every slide (no size jump between slides), and from 1600px the copy
column keeps about 580px of measure while its right edge stays on the 1280 grid. */
@media (min-width:761px) {
.page-home .home-spotlight .home-mavh__copy .display-title {
font-size: calc(var(--home-type-section) * .8) !important;
}
}
@media (min-width:1600px) {
body.page-home .home-spotlight .home-mavh__grid {
grid-template-columns: minmax(0,1fr) calc(672px + (100% - 1280px) / 2);
}
}
/* One control bar above the slide: status filters left, pager right (stacked on phones).
It takes over the band the filters used to carry on their own. Phones of 390px and narrower
keep the pager beside the project label (the script moves it there). */
.page-home .home-spotlight__bar {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px 20px;
padding: 20px max(22px,calc((100% - var(--cv-shell-max,1280px)) / 2)) 18px;
border-top: 1px solid rgba(30,60,41,.12);
}
.page-home .home-spotlight__bar:not(:has(> :not([hidden]))) { display: none; }
.page-home .home-spotlight__bar .home-spotlight__filters { padding: 0; border-top: 0; }
.page-home .home-spotlight__bar .home-spotlight__nav { margin: 0; }
@media (max-width:720px) {
.page-home .home-spotlight__bar { padding-inline: 20px; }
}
@media (max-width:600px) {
.page-home .home-spotlight__bar { display: grid; grid-template-columns: minmax(0,1fr); gap: 10px; padding-block: 16px 12px; }
.page-home .home-spotlight__bar .home-spotlight__nav { justify-self: end; }
}
/* Home closing signature: page-owned approved refinement, folded before canonical shell motion/footer; MAVH remains in closing-signature-prototype.css. */
body[data-cv-closing-prototype="living-signature-r1"] {
--cv-closing-forest:#10291c;
--cv-closing-ink:#080f0b;
--cv-closing-paper:#f4efe4;
--cv-closing-sage:#b4cba9;
/* Whole-pixel 416:120 steps (52n × 15n): fractional sizes make the
snapped <img> and the live SVG anti-alias differently at rest. */
--cv-footer-mark-w:208px;
}
@media(min-width:761px){
body[data-cv-closing-prototype] {--cv-footer-mark-w:260px;}
}
/* The footer is a quiet editorial sign-off, not another hero. */
body[data-cv-closing-prototype] .cv-footer-v3 {
background:var(--cv-closing-ink);
/* Clean forest-to-ink cut: no separator rule or gradient band. */
border-top:0;
}
body[data-cv-closing-prototype] .cv-footer-v3__inner {
width:min(calc(100% - 64px),1280px);
grid-template-columns:minmax(250px,.88fr) minmax(0,1.12fr);
gap:clamp(28px,3vw,42px) clamp(48px,7vw,112px);
padding:clamp(64px,6.2vw,90px) 0 34px;
}
/* The SVG viewBox already carries air below the leaves; keep the tagline close. */
body[data-cv-closing-prototype] .cv-footer-v3__mast {gap:7px;}
body[data-cv-closing-prototype] .cv-footer-v3__brand {
width:var(--cv-footer-mark-w);
min-height:0;
align-items:center;
}
body[data-cv-closing-prototype] .cv-footer-v3__brand :is(img,svg) {
display:block;
width:100%;
height:auto;
max-width:100%;
overflow:visible;
object-fit:contain;
}
body[data-cv-closing-prototype] .cv-footer-v3__brand img[hidden] {
display:none!important;
}
body[data-cv-closing-prototype] .cv-footer-v3__mast p {
font:400 clamp(14px,1.2vw,16px)/1.5 var(--sans,Inter,system-ui,sans-serif);
color:rgba(244,239,228,.71);
}
body[data-cv-closing-prototype] .cv-footer-v3__nav {
justify-content:flex-end;
gap:0 clamp(18px,2.35vw,34px);
align-content:start;
/* Centre the link row on the wordmark (mark height = .2885 × width). */
padding-top:max(0px,calc(var(--cv-footer-mark-w) * .1442 - 23px));
}
body[data-cv-closing-prototype] .cv-footer-v3__nav a {
position:relative;
min-height:46px;
color:rgba(244,239,228,.79);
font:500 13px/1.3 var(--sans,Inter,system-ui,sans-serif);
letter-spacing:0;
text-transform:none;
}
body[data-cv-closing-prototype] .cv-footer-v3__nav a::after {
content:"";
position:absolute;
left:0;
right:0;
bottom:8px;
border-bottom:1px solid currentColor;
transform:scaleX(0);
transform-origin:left;
transition:transform 200ms ease;
}
body[data-cv-closing-prototype] .cv-footer-v3__nav a:is(:hover,:focus-visible)::after {
transform:scaleX(1);
}
body[data-cv-closing-prototype] .cv-footer-v3__contact {
padding-top:22px;
border-top:1px solid rgba(244,239,228,.17);
gap:10px 24px;
}
body[data-cv-closing-prototype] .cv-footer-v3__contact > a:first-child {
font:500 clamp(13px,1.14vw,15px)/1.5 var(--sans,Inter,system-ui,sans-serif);
color:var(--cv-closing-paper);
}
body[data-cv-closing-prototype] .cv-footer-v3__credit {
font:400 12px/1.5 var(--sans,Inter,system-ui,sans-serif)!important;
color:rgba(244,239,228,.55)!important;
letter-spacing:0!important;
}
body[data-cv-closing-prototype] .cv-footer-v3__brand:focus-visible {
outline:2px solid var(--cv-closing-paper);
outline-offset:7px;
border-radius:2px;
}
/* Home: larger typographic measure; no floating panel or secondary ornament. */
body.page-home[data-cv-closing-prototype] .global-closing.global-closing {
background:var(--cv-closing-forest);
padding:clamp(94px,10vw,150px) 0 clamp(84px,9vw,130px);
border-top:0;
}
body.page-home[data-cv-closing-prototype] .global-cta-band.global-cta-band {
grid-template-columns:minmax(0,1.05fr) minmax(280px,.58fr);
gap:clamp(38px,8vw,118px);
align-items:end;
}
body.page-home[data-cv-closing-prototype] .global-cta-kicker.global-cta-kicker {
margin-bottom:18px;
color:var(--cv-closing-sage);
font-size:12px;
letter-spacing:.075em;
}
body.page-home[data-cv-closing-prototype] .global-cta-title.global-cta-title {
max-width:13ch;
font-size:clamp(3.4rem,6.25vw,6.7rem);
line-height:.97;
letter-spacing:-.052em;
color:var(--cv-closing-paper);
}
body.page-home[data-cv-closing-prototype] .global-cta-copy.global-cta-copy {
max-width:31ch;
font-size:clamp(16px,1.35vw,19px);
line-height:1.55;
color:rgba(244,239,228,.78);
}
body.page-home[data-cv-closing-prototype] .global-cta-actions.global-cta-actions {margin-top:28px;}
/* Buttons: controlled arrow travel, no scale/lift or delayed navigation. */
body[data-cv-closing-prototype] :is(.global-closing .shell-primary-button,.global-closing .cv-primary-cta) {
display:inline-flex;
justify-content:center;
align-items:center;
gap:24px;
min-height:52px;
padding:0 24px;
border-radius:999px;
text-decoration:none;
transition:background-color 200ms ease,border-color 200ms ease,color 200ms ease;
}
body[data-cv-closing-prototype] :is(.global-closing .shell-primary-button,.global-closing .cv-primary-cta)::after {
content:"↗";
display:inline-block;
font:500 20px/1 var(--sans,Inter,system-ui,sans-serif);
transition:transform 200ms cubic-bezier(.2,.72,.2,1);
}
body[data-cv-closing-prototype] :is(.global-closing .shell-primary-button,.global-closing .cv-primary-cta):is(:hover,:focus-visible)::after {
transform:translate(3px,-3px);
}
/* Below 900px: preserve reading order and allow nav to breathe. */
@media(max-width:900px) {
body[data-cv-closing-prototype] .cv-footer-v3__inner {
grid-template-columns:1fr;
grid-template-areas:"mast" "nav" "contact";
gap:25px;
}
body[data-cv-closing-prototype] .cv-footer-v3__nav {justify-content:flex-start;padding-top:0;}
body.page-home[data-cv-closing-prototype] .global-cta-band.global-cta-band {
grid-template-columns:1fr!important;
gap:28px!important;
}
}
@media(max-width:620px) {
body[data-cv-closing-prototype] .cv-footer-v3__inner {
width:calc(100% - 40px);
padding:50px 0 30px;
gap:20px;
}
body[data-cv-closing-prototype] .cv-footer-v3__nav {
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:0 16px;
}
body[data-cv-closing-prototype] .cv-footer-v3__nav a {min-height:44px;font-size:13px;}
body[data-cv-closing-prototype] .cv-footer-v3__contact {display:grid;gap:14px;}
body.page-home[data-cv-closing-prototype] .global-closing.global-closing {
padding:74px 0 78px;
}
body.page-home[data-cv-closing-prototype] .global-cta-title.global-cta-title {
font-size:clamp(2.85rem,11.1vw,4.15rem);
max-width:13ch;
line-height:.98;
}
}
@media(prefers-reduced-motion:reduce) {
body[data-cv-closing-prototype] .cv-footer-v3__nav a::after,
body[data-cv-closing-prototype] :is(.global-closing .shell-primary-button,.global-closing .cv-primary-cta)::after {
transition:none;
}
}
/* ==== Shell motion and footer signature ====
Home keeps its CP05 delivery model: this bundle delivers the shell (Home does not link
shell.css). These two sections are kept identical to the matching sections of
assets/shell.css, in the order Home used to link them, until the Home step of
docs/cleanup/PHASE3_CSS_PLAN.md moves Home onto shell.css. */
/* Cultivera global navigation · directional scroll reveal.
Behaviour is owned by cultivera-shell.js. This file only handles motion and
keeps shared secondary navigation attached to the viewport when the main nav leaves. */
/* Shared motion curves. Every page loads this sheet, so it owns the tokens.
   enter: arrivals and reveals (long, soft settle)
   move:  state and position changes (quicker start, same settle)
   quiet: small fades and colour changes */
:root {
  --cv-ease-enter: cubic-bezier(.16,1,.3,1);
  --cv-ease-move: cubic-bezier(.2,.7,.2,1);
  --cv-ease-quiet: cubic-bezier(.22,.61,.36,1);
}

html.cv-nav-scroll-reveal .cv-global-nav {
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition:
    transform .32s var(--cv-shell-ease, var(--cv-ease-enter)),
    background .28s var(--cv-shell-ease, var(--cv-ease-enter)),
    color .28s var(--cv-shell-ease, var(--cv-ease-enter)),
    border-color .28s var(--cv-shell-ease, var(--cv-ease-enter)),
    backdrop-filter .28s var(--cv-shell-ease, var(--cv-ease-enter));
}

html.cv-nav-scroll-reveal.cv-global-nav-hidden .cv-global-nav {
  transform: translate3d(0, calc(-100% - 2px), 0);
  pointer-events: none;
}

/* Project pages keep their project rail useful while the global shell recedes. */
html.cv-nav-scroll-reveal .r42-project-nav,
html.cv-nav-scroll-reveal .hr-project-rail {
  transition: top .32s var(--cv-shell-ease, var(--cv-ease-enter));
}

html.cv-nav-scroll-reveal.cv-global-nav-hidden .r42-project-nav,
html.cv-nav-scroll-reveal.cv-global-nav-hidden .hr-project-rail {
  top: 0;
}

/* Insights keeps its local navigation attached to the viewport too. All local
   rails dock flush to the top while the global shell recedes. */
html.cv-nav-scroll-reveal .page-insights-r2 .ir-insights-nav,
html.cv-nav-scroll-reveal .paper-subnav,
html.cv-nav-scroll-reveal .story-subnav {
  transition: top .32s var(--cv-shell-ease, var(--cv-ease-enter));
}

html.cv-nav-scroll-reveal.cv-global-nav-hidden .page-insights-r2 .ir-insights-nav,
html.cv-nav-scroll-reveal.cv-global-nav-hidden .paper-subnav,
html.cv-nav-scroll-reveal.cv-global-nav-hidden .story-subnav {
  top: 0;
}

/* Long-view evidence instruments own the sticky inner plane above 900px.
   Mobile keeps the page-local compact atlas architecture unchanged. */
@media (min-width: 901px) {
  html.cv-nav-scroll-reveal.has-potato-longview-js body.page-insights-long-view .atlas-sticky {
    top: var(--cv-nav-height,64px);
    height: calc(100svh - var(--cv-nav-height,64px));
    transition:
      top .32s var(--cv-shell-ease, var(--cv-ease-enter)),
      height .32s var(--cv-shell-ease, var(--cv-ease-enter));
  }

  html.cv-nav-scroll-reveal.cv-global-nav-hidden.has-potato-longview-js body.page-insights-long-view .atlas-sticky {
    top: 0;
    height: 100svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cv-nav-scroll-reveal .cv-global-nav,
  html.cv-nav-scroll-reveal .r42-project-nav,
  html.cv-nav-scroll-reveal .hr-project-rail,
  html.cv-nav-scroll-reveal .page-insights-r2 .ir-insights-nav,
  html.cv-nav-scroll-reveal .paper-subnav,
  html.cv-nav-scroll-reveal .story-subnav,
  html.cv-nav-scroll-reveal.has-potato-longview-js body.page-insights-long-view .atlas-sticky {
    transition: none !important;
  }
}

/* Convergence: sticky secondary rails move through `top` only. Older project and
   Insights styles used transform as a second offset and could produce a visible jump
   when the global shell hid or returned. The r48 project rail is the one exception on
   phones: there it deliberately yields to the returning bar with translateY(-100%)
   (project-navigation-r48), which this guard used to cancel, leaving the rail hidden
   only because the bar happened to cover it. */
html.cv-nav-scroll-reveal .r42-project-nav:not(.r48-project-nav),
html.cv-nav-scroll-reveal .hr-project-rail,
html.cv-nav-scroll-reveal .page-insights-r2 .ir-insights-nav,
html.cv-nav-scroll-reveal.cv-global-nav-hidden .r42-project-nav:not(.r48-project-nav),
html.cv-nav-scroll-reveal.cv-global-nav-hidden .hr-project-rail,
html.cv-nav-scroll-reveal.cv-global-nav-hidden .page-insights-r2 .ir-insights-nav {
  transform:none !important;
}

@media (min-width: 761px) {
  html.cv-nav-scroll-reveal .r48-project-nav,
  html.cv-nav-scroll-reveal.cv-global-nav-hidden .r48-project-nav {
    transform:none !important;
  }
}

/* PR D · drawer choreography. The ivory sheet unrolls down from the header as one
   opaque surface (no page showing through mid-fade) while the header turns ivory
   (.28s above); its rows follow in an 18ms stagger, all settled by ~.45s. Closing
   rolls the sheet back up in one piece, quicker and with no stagger. The negative
   bottom inset keeps the sheet's shadow outside the clip. */
html.cv-nav-scroll-reveal .cv-global-mobile {
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path .22s cubic-bezier(.4,0,.6,1),
    display .22s allow-discrete;
}

html.cv-nav-scroll-reveal .cv-global-mobile.is-open {
  clip-path: inset(0 0 -64px 0);
  transition:
    clip-path .36s var(--cv-shell-ease, var(--cv-ease-enter)),
    display 0s allow-discrete;
}

html.cv-nav-scroll-reveal .cv-global-mobile.is-open > * {
  transition:
    opacity .24s ease calc(60ms + var(--cv-row-delay, 0ms)),
    transform .3s var(--cv-shell-ease, var(--cv-ease-enter)) calc(60ms + var(--cv-row-delay, 0ms));
}

html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(2) { --cv-row-delay: 18ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(3) { --cv-row-delay: 36ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(4) { --cv-row-delay: 54ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(5) { --cv-row-delay: 72ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(6) { --cv-row-delay: 90ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(7) { --cv-row-delay: 108ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(8) { --cv-row-delay: 126ms; }
html.cv-nav-scroll-reveal .cv-global-mobile.is-open > :nth-child(n+9) { --cv-row-delay: 144ms; }

@starting-style {
  html.cv-nav-scroll-reveal .cv-global-mobile.is-open {
    clip-path: inset(0 0 100% 0);
  }

  html.cv-nav-scroll-reveal .cv-global-mobile.is-open > * {
    opacity: 0;
    transform: translate3d(0, -4px, 0);
  }
}

/* The MENU pill changes surface with the header instead of snapping. */
html.cv-nav-scroll-reveal .cv-global-menu {
  transition:
    color .28s ease,
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    filter .28s ease;
}

/* Scrim: the page below the open drawer recedes under a light ink veil. It is
   body's own pseudo-element, so a tap on it reaches body and the shell closes. */
html.cv-nav-scroll-reveal body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 998;
  background: rgba(9, 18, 12, .32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility 0s linear .2s;
}

html.cv-nav-scroll-reveal body:is(.mobile-menu-open, .global-menu-open)::after {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity .28s ease;
}

/* Desktop links: the rule draws in from the left on intent and leaves to the
   right, the same grammar as the hero's secondary link. */
html.cv-nav-scroll-reveal .cv-global-links a::after {
  opacity: .72;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .24s var(--cv-shell-ease, var(--cv-ease-enter));
}

html.cv-nav-scroll-reveal .cv-global-links a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  html.cv-nav-scroll-reveal .cv-global-mobile,
  html.cv-nav-scroll-reveal .cv-global-mobile.is-open,
  html.cv-nav-scroll-reveal .cv-global-mobile.is-open > *,
  html.cv-nav-scroll-reveal .cv-global-menu,
  html.cv-nav-scroll-reveal body::after,
  html.cv-nav-scroll-reveal body:is(.mobile-menu-open, .global-menu-open)::after,
  html.cv-nav-scroll-reveal .cv-global-links a::after {
    transition: none !important;
  }

  html.cv-nav-scroll-reveal .cv-global-mobile,
  html.cv-nav-scroll-reveal .cv-global-mobile.is-open {
    clip-path: none;
  }
}

/* Project rails · one call to action. When a project's rail docks under the bar, its own
   action ("Request brief", "Discuss partnership") already carries the project context,
   so the bar's generic "Start a brief" steps aside instead of stacking a second CTA
   50px above it. Rail actions speak the shell's CTA grammar: a pill, deep green when they
   lead to Contact, outlined when they only move within the page (and then the bar keeps
   its CTA). */
html.cv-nav-scroll-reveal .r48-project-nav__action {
  border-radius: 999px;
  letter-spacing: .065em;
}

html.cv-nav-scroll-reveal .r48-project-nav__action[href*="contact.html"] {
  background: #16382a;
  border-color: #16382a;
  color: #fff;
}

html.cv-nav-scroll-reveal .r48-project-nav__action[href*="contact.html"]:is(:hover, :focus-visible) {
  background: #0f2a1f;
  border-color: #0f2a1f;
  color: #fff;
}

html.cv-nav-scroll-reveal .r48-project-nav__action[href^="#"] {
  background: transparent;
  border-color: rgba(22, 56, 42, .45);
  color: #16382a;
}

html.cv-nav-scroll-reveal .r48-project-nav__action[href^="#"]:is(:hover, :focus-visible) {
  background: rgba(22, 56, 42, .08);
  border-color: #16382a;
  color: #16382a;
}

html.cv-nav-scroll-reveal #mainNav .cv-global-cta {
  transition: opacity .2s ease, visibility 0s linear 0s, background-color .18s ease, border-color .18s ease, color .18s ease;
}

@media (min-width: 761px) {
  html.cv-nav-scroll-reveal.cv-project-rail-docked body:has(.r48-project-nav__action[href*="contact.html"]) #mainNav .cv-global-cta {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s, background-color .18s ease, border-color .18s ease, color .18s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.cv-nav-scroll-reveal #mainNav .cv-global-cta {
    transition: none !important;
  }
}

/* ==== Static navigation if shared-shell JavaScript is blocked ==== */
/* Canonical fallback is inactive once the runtime signals readiness.
   Doubled ID outranks previous Home hero and ink-strip presentation rules. */
@media(scripting:enabled) {
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav {
    position:relative!important;inset:auto!important;height:auto!important;
    min-height:var(--cv-nav-height,64px);opacity:1!important;visibility:visible!important;
    pointer-events:auto!important;transform:none!important;
    color:var(--cv-shell-ink,#171b17)!important;background:#f9f9f5!important;
    border-bottom:1px solid var(--cv-shell-line,rgba(23,27,23,.12))!important;
    box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav::before {content:none!important;opacity:0!important}
  html:not([data-cultivera-shell-ready="true"]) body:has(#mainNav[data-cv-backdrop="ink"])::before {content:none!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-logo {clip-path:none!important;visibility:visible!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-logo--primary {opacity:1!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-logo--reverse {opacity:0!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-leaf {display:none!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links,
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links a {color:var(--cv-shell-muted,#5a605a)!important;text-shadow:none!important}
  html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links a:is(:hover,:focus-visible,[aria-current="page"]) {color:var(--cv-shell-ink,#171b17)!important}
  @media(max-width:1180px) {
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-nav__inner {
      box-sizing:border-box;height:auto!important;display:grid!important;
      grid-template-columns:minmax(0,1fr)!important;gap:0!important;padding:8px 0 12px!important;
    }
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-brand {grid-column:1/-1;opacity:1!important;visibility:visible!important}
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links {
      display:grid!important;grid-column:1/-1!important;grid-template-columns:repeat(4,minmax(0,1fr));
      gap:0 14px;justify-self:stretch!important;width:100%;opacity:1!important;visibility:visible!important;
    }
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links a {min-height:44px;white-space:normal;line-height:1.35;font-size:12px}
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-menu,
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-cta {display:none!important}
    html:not([data-cultivera-shell-ready="true"]) body #mobilePanel.cv-global-mobile {display:none!important}
  }
  @media(max-width:760px) {
    html:not([data-cultivera-shell-ready="true"]) body #mainNav#mainNav.cv-global-nav .cv-global-links {grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
  }
}

/* Cultivera Living Signature · Colour Transfer R3 · every footer page.
   Official full-logo SVG remains the static authority and no-JS fallback.
   A mouse or pen engages it (.cv-footer-signature-engaged, from pointer events,
   not (hover:hover), which touch laptops report as none), keyboards on
   focus-visible; devices with no hover input play it once per page view
   (.cv-footer-signature-playing). Both classes are set by cultivera-shell.js.
   Home folds its closing refinements into home.css; MAVH loads closing-signature-prototype.css. */
.cv-footer-v3 .cv-footer-v3__brand {
  /* Colour Transfer R3 end state: the official colour-logo leaf fills
     (cultivera-logo-primary-nav.svg). The wordmark is never coloured. */
  --cv-leaf-top:#a7e75a;
  --cv-leaf-left:#218653;
  --cv-leaf-right:#78c95c;
  --cv-footer-ease-out:cubic-bezier(.22,.61,.36,1);
  /* Growth front travels at a near-steady pace so it reads at real speed. */
  --cv-grow-ease:cubic-bezier(.3,.15,.45,1);
  /* Whole-pixel 416:120 step (52n × 15n, n=3): fractional sizes make the
     snapped <img> and the live SVG anti-alias differently. */
  width:156px;
  position:relative;
  isolation:isolate;
}
.cv-footer-v3 .cv-footer-v3__brand :is(img,svg) {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  overflow:visible;
  object-fit:contain;
}
.cv-footer-v3 .cv-footer-v3__brand img[hidden] {
  display:none!important;
}

/* At rest the mark is the exact official reverse SVG; a soft botanical field
   sits behind the three leaves only. Engaging recedes the field while the
   official leaf colours grow up through each leaf from its stem, lower leaves
   first, ending on the actual colour logo; exit draws the colour back to the
   stem. CSS transitions reverse from mid-flight, so a half-way exit resolves
   cleanly to white without a second engine. */
/* A square field centred on the leaf cluster (12.3% / 50% of the mark).
   closest-side reaches transparent at the inscribed circle and the mask
   feathers it again, so no rectangular boundary can ever paint. */
.cv-footer-v3 .cv-footer-v3__brand::before {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:12.3%;
  top:50%;
  width:72%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(74,138,88,.30),rgba(58,112,72,.15) 45%,rgba(46,92,60,.05) 72%,rgba(46,92,60,0));
  -webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);
  mask-image:radial-gradient(closest-side,#000 55%,transparent);
  opacity:1;
  transition:opacity 400ms var(--cv-footer-ease-out);
}
/* Rest is the official <img> itself, stacked over the live SVG. Chrome
   re-rasterises repainted inline-SVG edges slightly differently from first
   paint, so the SVG is shown only while the transfer is engaged and handed
   back to the image once the leaves are white again (exit completes <=400ms). */
.cv-footer-v3 .cv-footer-v3__brand.cv-footer-signature-ready img {
  position:absolute;
  left:0;
  top:0;
  transition:visibility 0s linear 420ms;
}
.cv-footer-v3 .cv-footer-v3__brand.cv-footer-signature-ready .cv-footer-signature-svg {
  visibility:hidden;
  transition:visibility 0s linear 420ms;
}
/* Leaf numbers follow source order: 1 = top, 2 = left, 3 = right.
   Each leaf keeps its white source path (base) and gains a colour copy
   masked by a feathered disc centred on the stem (.cv-footer-grow, built in
   cultivera-shell.js). Growing the disc's r is the organic start: colour
   rises from the stem to the tip. The base path takes the same colour the
   instant the disc is fully solid, so the end state has no white fringe.
   On exit the copy fades while it drains, so no speck is left at the stem.
   Enter: 450ms growth, 75ms stagger (left, right, top) = 600ms.
   Exit: 280ms recession (200ms fade), 60ms reverse stagger (top, right, left) = 400ms. */
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="1"] {--cv-leaf:var(--cv-leaf-top)}
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="2"] {--cv-leaf:var(--cv-leaf-left)}
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="3"] {--cv-leaf:var(--cv-leaf-right)}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-leaf-colour path {fill:var(--cv-leaf)}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-leaf-colour {
  opacity:0;
  /* Fades out within 200ms of the 280ms drain: gone before the disc is small. */
  transition:opacity 200ms linear;
}
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="1"] .cv-footer-leaf-colour {transition-delay:0ms}
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="3"] .cv-footer-leaf-colour {transition-delay:60ms}
.cv-footer-v3__brand .cv-footer-signature-svg [data-cv-footer-leaf="2"] .cv-footer-leaf-colour {transition-delay:120ms}
/* Base path: white at rest; whitens at once on exit, under the still-full colour copy. */
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-leaf-base path {
  fill:#ffffff;
  transition:fill 120ms linear;
}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-grow {
  r:0px;
  transition:r 280ms cubic-bezier(.45,.05,.55,.95);
}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-grow[data-cv-footer-grow="1"] {transition-delay:0ms}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-grow[data-cv-footer-grow="3"] {transition-delay:60ms}
.cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-grow[data-cv-footer-grow="2"] {transition-delay:120ms}
/* Engaged: mouse/pen hover, keyboard focus-visible, and the one touch play-through. */
.cv-footer-v3 .cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) img {visibility:hidden;transition-delay:0s}
.cv-footer-v3 .cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-signature-svg {visibility:visible;transition-delay:0s}
.cv-footer-v3 .cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing)::before {
  opacity:.12;
  transition-duration:600ms;
}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-grow {
  r:var(--cv-grow-r);
  transition-duration:450ms;
  transition-timing-function:var(--cv-grow-ease);
}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-leaf-colour {opacity:1;transition-duration:0s;transition-delay:0s}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-grow[data-cv-footer-grow="2"] {transition-delay:0ms}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-grow[data-cv-footer-grow="3"] {transition-delay:75ms}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-grow[data-cv-footer-grow="1"] {transition-delay:150ms}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) .cv-footer-leaf-base path {
  fill:var(--cv-leaf);
  transition-duration:0s;
}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) [data-cv-footer-leaf="2"] .cv-footer-leaf-base path {transition-delay:450ms}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) [data-cv-footer-leaf="3"] .cv-footer-leaf-base path {transition-delay:525ms}
.cv-footer-v3__brand.cv-footer-signature-ready:is(:focus-visible,.cv-footer-signature-engaged,.cv-footer-signature-playing) [data-cv-footer-leaf="1"] .cv-footer-leaf-base path {transition-delay:600ms}
@media(prefers-reduced-motion:reduce){
  .cv-footer-v3 .cv-footer-v3__brand::before {transition:none;opacity:1!important}
  .cv-footer-v3 .cv-footer-v3__brand img {visibility:visible!important}
  .cv-footer-v3 .cv-footer-v3__brand .cv-footer-signature-svg {visibility:hidden!important}
  .cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-leaf-base path {transition:none!important;fill:#fff!important}
  .cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-grow {transition:none!important;r:0px!important}
  .cv-footer-v3__brand .cv-footer-signature-svg .cv-footer-leaf-colour {transition:none!important;opacity:0!important}
}