/* =====================================================================
   JULIAN CHO SOCIETY — design system (Phase 2)
   Colour: use the tokens only. Allowed text/background pairs (WCAG AA):
     cream/canopy 9.1 · maize/canopy 5.9 · canopy/maize 5.9 · cream/milpa 5.1
     canopy/leaf 5.1 · ink/amber 6.7 · ink/cream 14.9
   Never maize, leaf or amber text on cream.
   Type: Newsreader (headings, figures, quotes) + DM Sans (everything else).
   Newsreader replaced Fraunces at Ryan's request (Fraunces' J and fi read as distorted).
   ===================================================================== */

:root {
  --jcs-canopy: #0B4F2C;   /* Header, hero, figures band, footer */
  --jcs-milpa:  #187A3E;   /* Second buttons, section bands (cream text only) */
  --jcs-leaf:   #9BCB3C;   /* Tags, icons, small highlights (dark green text only) */
  --jcs-maize:  #F6C324;   /* Big numbers on canopy; main buttons (canopy text) */
  --jcs-amber:  #E09A1A;   /* Warm accents, sparingly (ink text only) */
  --jcs-cream:  #FBF8EA;   /* Page background, cards */
  --jcs-ink:    #13261B;   /* Body text and headings on light backgrounds */

  --rule:        color-mix(in srgb, var(--jcs-ink) 16%, transparent);
  --rule-light:  color-mix(in srgb, var(--jcs-cream) 28%, transparent);
  --shadow:      0 18px 40px -24px color-mix(in srgb, var(--jcs-ink) 55%, transparent);
  --scrim:       linear-gradient(to top, color-mix(in srgb, var(--jcs-canopy) 96%, transparent) 0%, color-mix(in srgb, var(--jcs-canopy) 70%, transparent) 42%, color-mix(in srgb, var(--jcs-canopy) 0%, transparent) 78%);

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:   clamp(46px, 6.2vw, 82px);
  --fs-h2:     clamp(34px, 4.1vw, 50px);
  --fs-h3:     clamp(22px, 2vw, 27px);
  --fs-figure: clamp(64px, 7.2vw, 94px);
  --fs-body:   clamp(17px, 1.05vw + 4px, 18px);
  --fs-lead:   clamp(19px, 1.4vw, 22px);

  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --space: clamp(64px, 8vw, 120px);
  --radius: 20px;
  --radius-leaf: 28px 28px 28px 120px;   /* leaf-shaped photo corners (organic biophilic style) */
  --shadow-soft: 0 10px 32px -12px color-mix(in srgb, var(--jcs-ink) 22%, transparent);
  --tint: color-mix(in srgb, var(--jcs-cream) 90%, var(--jcs-leaf));   /* ink on tint stays above 13:1 */
  --header-h: 84px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--jcs-cream);
  color: var(--jcs-ink);
  font: 400 var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; margin: 0; letter-spacing: -0.01em; font-optical-sizing: auto; }
p, ul, ol, figure, blockquote { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
main:focus { outline: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--jcs-maize);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--jcs-ink);
  border-radius: 4px;
}

.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 1000; background: var(--jcs-maize); color: var(--jcs-canopy); padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

.staging-bar { margin: 0; background: var(--jcs-amber); color: var(--jcs-ink); text-align: center; font-size: 14px; font-weight: 500; padding: 8px var(--gutter); }
.draft-flag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 999px; background: var(--jcs-amber); color: var(--jcs-ink); font-size: 13px; font-weight: 700; }

/* ---------- Type helpers ---------- */
.section-title { font-size: var(--fs-h2); margin-bottom: clamp(24px, 3vw, 40px); }
.section-title--sm { font-size: clamp(26px, 2.6vw, 34px); max-width: none; }
.section-intro { font-size: var(--fs-lead); line-height: 1.55; margin: -8px 0 clamp(28px, 3.5vw, 44px); }
.lead { font-size: var(--fs-lead); line-height: 1.55; }
.prose > * + * { margin-top: 1em; }
/* Subtext and body copy use the full width available (Ryan: subtext under a header should stretch the screen) */
.prose { max-width: none; }
.kicker { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 1.8vw, 24px); margin-bottom: 14px; }
.source { margin-top: 14px; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.text-link::after { content: "\2192"; text-decoration: none; display: inline-block; transition: transform .2s; }
.text-link:hover::after { transform: translateX(4px); }
.text-link--light { color: var(--jcs-cream); }
.breadcrumb { font-size: 15px; margin-bottom: 18px; }
.breadcrumb a { text-underline-offset: 4px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 26px; border-radius: 999px; font: 700 16px/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .15s ease, filter .15s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn--primary { background: var(--jcs-maize); color: var(--jcs-canopy); }
.btn--outline { background: transparent; color: var(--jcs-cream); border-color: var(--jcs-cream); }
.btn--outline:hover { background: color-mix(in srgb, var(--jcs-cream) 12%, transparent); }
.btn--milpa { background: var(--jcs-milpa); color: var(--jcs-cream); }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(26px, 3vw, 38px); }

/* ---------- Sections ---------- */
.section { padding-block: var(--space); }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--canopy { background: var(--jcs-canopy); color: var(--jcs-cream); }
.section--milpa  { background: var(--jcs-milpa);  color: var(--jcs-cream); }
/* Two plain cream sections in a row share one gap */
.section:not(.section--canopy):not(.section--milpa):not(.photo-band):not(.voice):not(.section--tint) + .section:not(.section--canopy):not(.section--milpa):not(.photo-band):not(.section--tint) { padding-top: 0; }
.section--canopy .text-link, .section--milpa .text-link { color: var(--jcs-cream); }

/* ---------- Greca pattern (the live site's pattern.png, as an alpha mask) ----------
   Used as the live site uses it: a faint texture behind whole sections, drifting slowly
   on scroll (jcs.js). Cream on dark bands; green on the cream sections marked data-greca="light".
   The source image doesn't tile seamlessly, so it is scaled to cover rather than repeated. */
.has-greca { position: relative; isolation: isolate; overflow: hidden; }
.greca-layer {
  position: absolute; inset: -18% 0; z-index: -1; pointer-events: none;
  background: var(--jcs-cream);
  -webkit-mask: url("../images/greca-mask.png") center / cover no-repeat;
          mask: url("../images/greca-mask.png") center / cover no-repeat;
  opacity: .05;            /* same strength as the live site */
  will-change: transform;
}
.section--milpa .greca-layer { opacity: .07; }
.has-greca--light .greca-layer { background: var(--jcs-milpa); opacity: .07; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: var(--jcs-canopy); color: var(--jcs-cream); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; flex-shrink: 0; margin-right: auto; }
.site-header .container { max-width: calc(1360px + 2 * var(--gutter)); }
.brand__mark { width: auto; height: 40px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font: 600 21px/1.1 var(--serif); }
.brand__tag { font: italic 400 15px/1.3 var(--serif); }

.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.site-nav__link, .sub-menu a { color: var(--jcs-cream); text-decoration: none; font-weight: 500; font-size: 16px; }
.site-nav__link { display: inline-block; padding: 9px 11px; border-radius: 999px; white-space: nowrap; transition: background .2s ease, color .2s ease; }
/* Hover and current page: a colour highlight (no underline) */
.site-nav__link:hover, .has-sub:hover > .site-nav__link { background: color-mix(in srgb, var(--jcs-cream) 12%, transparent); color: var(--jcs-maize); }
.site-nav__link[aria-current="page"] { background: color-mix(in srgb, var(--jcs-cream) 16%, transparent); color: var(--jcs-maize); }
.site-nav__cta { margin-left: 10px; }
.site-nav__cta .btn { min-height: 44px; padding: 10px 20px; white-space: nowrap; }
.has-sub { position: relative; display: flex; align-items: center; }
.sub-toggle { background: none; border: 0; padding: 8px 6px 8px 0; cursor: pointer; color: var(--jcs-cream); display: inline-flex; }
.sub-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Dropdowns: orange (amber) panel with dark-green (ink) text — 6.7:1; canopy green on amber is only 4.1:1 */
.sub-menu { list-style: none; margin: 0; padding: 10px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 340px; background: var(--jcs-amber); border: 0; border-radius: var(--radius); box-shadow: var(--shadow); display: none; }
.site-nav .sub-menu a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--jcs-ink); font-weight: 600; transition: background .2s ease, color .2s ease; }
.site-nav .sub-menu a:hover, .site-nav .sub-menu a[aria-current="page"] { background: var(--jcs-canopy); color: var(--jcs-cream); }
.has-sub.is-open .sub-menu { display: block; }
@media (hover: hover) and (min-width: 1260px) {
  .has-sub:hover .sub-menu, .has-sub:focus-within .sub-menu { display: block; }
  .has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
}
.nav-toggle { display: none; align-items: center; gap: 10px; background: none; border: 1.5px solid var(--jcs-cream); color: var(--jcs-cream); border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: transform .2s, opacity .2s; }
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1259px) {
  :root { --header-h: 72px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { position: fixed; inset: var(--nav-top, var(--header-h)) 0 0 0; background: var(--jcs-canopy); overflow-y: auto; padding: 12px var(--gutter) 40px; display: none; border-top: 1px solid var(--rule-light); }
  .site-nav.is-open { display: block; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list > li { border-bottom: 1px solid var(--rule-light); }
  .site-nav__link { display: block; padding: 16px 4px; font-size: 19px; }
  .has-sub { flex-wrap: wrap; }
  .has-sub .site-nav__link { flex: 1; }
  .sub-toggle { padding: 12px; }
  .sub-menu { position: static; min-width: 0; width: 100%; box-shadow: none; border: 0; padding: 8px; margin: 0 0 14px; border-radius: 14px; }
  .site-nav__cta { margin: 24px 0 0; border-bottom: 0 !important; }
  .site-nav__cta .btn { width: 100%; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 480px) {
  .brand__mark { height: 32px; }
  .brand__name { font-size: 18px; }
  .brand__tag { font-size: 13px; }
  .nav-toggle__label { display: none; }
  .nav-toggle { padding: 12px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: var(--jcs-cream); background: var(--jcs-canopy); min-height: min(86vh, 820px); display: flex; align-items: flex-end; }
.hero__media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--jcs-canopy) 94%, transparent) 0%, color-mix(in srgb, var(--jcs-canopy) 62%, transparent) 55%, color-mix(in srgb, var(--jcs-canopy) 35%, transparent) 100%); }
.hero__inner { padding-block: clamp(120px, 16vw, 200px) clamp(56px, 7vw, 96px); }
.hero__kicker { color: var(--jcs-maize); font: italic 400 clamp(22px, 2.2vw, 30px)/1.2 var(--serif); margin-bottom: 18px; }
.hero h1 { font-size: var(--fs-hero); }
.hero__sub { font-size: var(--fs-lead); line-height: 1.55; margin-top: 24px; }
.hero--page { min-height: 0; }
.hero--page .hero__inner { padding-block: clamp(96px, 11vw, 150px) clamp(48px, 6vw, 80px); }
.hero--page h1 { font-size: clamp(42px, 5.4vw, 72px); }
.hero--page .breadcrumb a, .hero--page .breadcrumb { color: var(--jcs-cream); }
.hero--plain { background: var(--jcs-canopy); }
.hero--plain::before { display: none; }
.hero .source { color: var(--jcs-cream); }

/* ---------- Figures band ---------- */
.figures-band { background: var(--jcs-canopy); color: var(--jcs-cream); padding-block: clamp(56px, 7vw, 100px); }
.figures-band__title { font-size: clamp(28px, 3vw, 40px); margin-bottom: clamp(32px, 4vw, 56px); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(28px, 3vw, 48px); }
.figure { border-top: 1px solid var(--rule-light); padding-top: 22px; }
.figure__value { font: 500 var(--fs-figure)/0.95 var(--serif); color: var(--jcs-maize); letter-spacing: -0.02em; }
.figure__label { margin-top: 14px; font-weight: 700; font-size: 19px; }
.figure__context { margin-top: 6px; font-size: 16px; line-height: 1.5; }
.figures-band__note { margin-top: clamp(32px, 4vw, 48px); font-size: 15px; }
.figures--inline .figure__value { font-size: clamp(52px, 5vw, 72px); }

/* ---------- Split (text + photo) ---------- */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(36px, 5vw, 80px); align-items: center; }
.split__photo img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 5; object-fit: cover; }
.split__photo--wide img { aspect-ratio: 4 / 3; }
.split__photo figcaption { font-size: 14px; margin-top: 10px; }
/* About › Julian Cho: a narrower portrait + player so the column matches the text height */
.split--bio { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); align-items: stretch; gap: clamp(32px, 4vw, 64px); }
.split--bio .split__photo { height: 100%; }
.split--bio .split__photo img { height: 100%; min-height: 280px; aspect-ratio: auto; object-fit: cover; object-position: 50% 22%; }
.split--bio .audio-player { max-width: 520px; margin-top: 22px; }
.split--bio .audio-player { padding: 10px 14px; gap: 12px; }
.split--bio .ap-play { width: 44px; height: 44px; }
@media (max-width: 760px) { .split--bio { grid-template-columns: minmax(0, 1fr); } .split--bio .split__photo { max-width: 320px; } .split--bio .split__photo img { aspect-ratio: 4 / 5; height: auto; } }
/* Compact two-column band (About › Governance and accountability) */
.section--compact { padding-block: clamp(48px, 6vw, 80px); }
.split--compact { align-items: center; }
.section-title--tight { margin-bottom: 16px; }
.split__photo--short img { aspect-ratio: 16 / 10; }
.quote { margin-top: clamp(28px, 3vw, 40px); padding-left: 24px; border-left: 4px solid var(--jcs-milpa); }
.quote p { font: italic 400 clamp(20px, 1.7vw, 24px)/1.5 var(--serif); }
.quote footer { margin-top: 10px; font-size: 15px; }
.identity { margin-top: 8px; }
.identity .lead + .lead { margin-top: 1em; }
.identity + .prose { margin-top: 1.2em; }

/* ---------- Theme tiles ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.theme-grid > .theme-tile { grid-column: span 2; }
.theme-grid > .theme-tile:nth-child(-n+2) { grid-column: span 3; min-height: 480px; }
@media (max-width: 980px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-grid > .theme-tile, .theme-grid > .theme-tile:nth-child(-n+2) { grid-column: span 1; min-height: 400px; }
  .theme-grid > .theme-tile:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .theme-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-grid > .theme-tile, .theme-grid > .theme-tile:nth-child(-n+2) { min-height: 360px; }
}
.theme-tile { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: 440px; border-radius: var(--radius); overflow: hidden; color: var(--jcs-cream); text-decoration: none; background: var(--jcs-canopy); }
.theme-tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; }
.theme-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim); }
.theme-tile:hover .theme-tile__img { transform: scale(1.04); }
.theme-tile__body { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; }
.theme-tile__title { font: 500 clamp(22px, 1.9vw, 26px)/1.12 var(--serif); }
.theme-tile__summary { font-size: 16px; line-height: 1.5; }
.theme-tile__program { font-size: 14px; line-height: 1.45; padding-top: 10px; border-top: 1px solid var(--rule-light); }
.theme-tile__title::after { content: " \2192"; font-family: var(--sans); }
.theme-grid--hub > .theme-tile { min-height: 520px; }

/* ---------- Homepage: five areas as "pillars" around a flower ----------
   Petals and numbered entries share each area's brand colour. Numbers are canopy text inside a coloured
   ring (brand rule: no maize/leaf/amber text on cream). Pointing at a petal or an entry highlights both. */
.section--center-head .section-title, .section--center-head .section-intro { text-align: center; margin-inline: auto; }
.section--center-head .draft-flag { display: table; margin-inline: auto; }
.pillars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); margin-top: clamp(16px, 2vw, 32px); }
.pillars__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 3vw, 40px); }
.pillar__link { display: flex; align-items: flex-start; gap: 18px; text-decoration: none; color: var(--jcs-ink); border-radius: var(--radius); padding: 6px; transition: opacity .3s ease; }
.pillars__list--left .pillar__link { flex-direction: row-reverse; text-align: right; }
.pillar__num { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; border: 4px solid var(--c); background: var(--jcs-cream); color: var(--jcs-canopy); font: 600 22px/1 var(--sans); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--jcs-ink) 60%, transparent); transition: transform .35s cubic-bezier(.3,1.5,.5,1), background .3s; }
.pillar__text { display: flex; flex-direction: column; gap: 6px; }
.pillar__title { font: 600 clamp(20px, 1.6vw, 24px)/1.18 var(--serif); color: var(--jcs-canopy); }
.pillar__summary { font-size: 16px; line-height: 1.5; }
.pillar__more { font-weight: 700; font-size: 15px; color: var(--jcs-canopy); }
.pillar__more::after { content: " \2192"; display: inline-block; transition: transform .25s; }
.pillar__link:hover .pillar__more::after, .pillar__link:focus-visible .pillar__more::after { transform: translateX(4px); }
.pillars__list--right { align-self: center; }

.pillars__flower svg { width: 100%; height: auto; overflow: visible; }
/* tree (same drawing language as the climate-page tree) */
.tree-soil { fill: color-mix(in srgb, var(--jcs-ink) 10%, var(--jcs-cream)); }
.tree-ground { fill: none; stroke: color-mix(in srgb, var(--jcs-ink) 35%, transparent); stroke-width: 2; }
.tree-root { fill: none; stroke: color-mix(in srgb, var(--jcs-ink) 45%, var(--jcs-amber)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; }
.tree-trunk { fill: none; stroke: color-mix(in srgb, var(--jcs-canopy) 70%, var(--jcs-ink)); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; }
.tree-branch { fill: none; stroke: color-mix(in srgb, var(--jcs-canopy) 70%, var(--jcs-ink)); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; transition: stroke .3s ease, stroke-width .3s ease; }
.tree-crown { cursor: pointer; }
.tree-crown__leaves { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .3s ease; }
.tree-crown__leaves circle { fill: var(--c); }
.tree-crown__leaves circle:not(.tree-crown__main) { opacity: .75; }
.tree-crown__main { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--jcs-ink) 22%, transparent)); }
.tree-crown__icon path, .tree-crown__icon circle { fill: none !important; opacity: 1 !important; stroke: var(--jcs-canopy); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: none; }
.tree-crown__icon.is-light path, .tree-crown__icon.is-light circle { stroke: var(--jcs-cream); }
.tree-crown:focus-visible { outline: none; }
.tree-crown:focus-visible .tree-crown__main { stroke: var(--jcs-ink); stroke-width: 3; }
.pillars__hub-ring { fill: none; stroke: color-mix(in srgb, var(--jcs-canopy) 25%, transparent); stroke-width: 2; }
.pillars__hub { fill: var(--jcs-cream); stroke: color-mix(in srgb, var(--jcs-canopy) 55%, transparent); stroke-width: 3; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--jcs-ink) 18%, transparent)); }
.pillars__hub-text { font: 600 19px var(--serif); fill: var(--jcs-canopy); }

/* linked highlight: crown lifts, its branch takes the area colour, everything else steps back */
.pillars.has-active .tree-crown:not(.is-active) .tree-crown__leaves { opacity: .3; }
.tree-crown.is-active .tree-crown__leaves { transform: scale(1.12); }
.tree-branch.is-active { stroke: var(--c); stroke-width: 9; }
.pillars.has-active .pillar:not(.is-active) .pillar__link { opacity: .45; }
.pillar.is-active .pillar__num { transform: scale(1.12); background: color-mix(in srgb, var(--c) 22%, var(--jcs-cream)); }

/* entrance: the tree grows — roots and trunk draw, branches reach out, crowns leaf in, entries follow */
.tree-root, .tree-trunk, .tree-branch { stroke-dashoffset: 0; }
.js .pillars:not(.in-view) .tree-root, .js .pillars:not(.in-view) .tree-trunk, .js .pillars:not(.in-view) .tree-branch { stroke-dashoffset: 1; }
.js .pillars .tree-root  { transition: stroke-dashoffset .6s ease; }
.js .pillars .tree-trunk { transition: stroke-dashoffset .9s cubic-bezier(.4,0,.2,1) .25s; }
.js .pillars .tree-branch { transition: stroke-dashoffset .6s ease var(--d, 0ms), stroke .3s ease, stroke-width .3s ease; }
.js .pillars.settled .tree-branch { transition: stroke .3s ease, stroke-width .3s ease; }
.js .pillars:not(.in-view) .tree-crown__leaves { transform: scale(0); opacity: 0; }
.js .pillars:not(.in-view) .tree-hub { opacity: 0; }
.js .pillars .tree-hub { transition: opacity .6s ease .9s; }
.js .pillars.in-view:not(.settled) .tree-crown__leaves { transition-delay: var(--d, 0ms); }
.js .pillars:not(.in-view) .pillar { opacity: 0; translate: 0 16px; }
.js .pillars .pillar { transition: opacity .6s ease, translate .6s ease; }
.js .pillars.in-view:not(.settled) .pillar { transition-delay: calc(var(--k, 0) * 120ms + 1200ms); }

@media (max-width: 980px) {
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars__flower { order: -1; width: min(360px, 80vw); margin: 0 auto; }
  .pillars__list--left .pillar__link { flex-direction: row; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pillars .tree-crown__leaves, .js .pillars .pillar, .js .pillars .tree-hub { transform: none !important; opacity: 1 !important; translate: none !important; }
  .js .pillars .tree-root, .js .pillars .tree-trunk, .js .pillars .tree-branch { stroke-dashoffset: 0 !important; }
}

/* ---------- Timeline (horizontal desktop, vertical phones) ---------- */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 28px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; right: 0; top: 13px; height: 2px; background: var(--jcs-milpa); }
.timeline__item { position: relative; padding-top: 44px; }
.timeline__item::before { content: ""; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--jcs-cream); border: 4px solid var(--jcs-milpa); }
.timeline__year { font: 500 clamp(30px, 2.8vw, 40px)/1 var(--serif); }
.timeline__title { font: 700 18px/1.3 var(--sans); margin-top: 12px; letter-spacing: 0; }
.timeline__text { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.section--canopy .timeline::before { background: var(--jcs-maize); }
.section--canopy .timeline__item::before { background: var(--jcs-canopy); border-color: var(--jcs-maize); }
.section--canopy .timeline__year { color: var(--jcs-maize); }
.timeline-era + .timeline-era { margin-top: clamp(48px, 6vw, 72px); }
.timeline-era__name { font: 700 15px/1 var(--sans); letter-spacing: 0; margin-bottom: 22px; display: inline-block; background: var(--jcs-leaf); color: var(--jcs-canopy); padding: 7px 14px; border-radius: 999px; }
.timeline-era .text-link { margin-top: 26px; }
@media (max-width: 860px) {
  .timeline { grid-auto-flow: row; grid-auto-columns: auto; gap: 26px; padding-left: 36px; }
  .timeline::before { left: 9px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .timeline__item { padding-top: 0; }
  .timeline__item::before { left: -36px; top: 6px; }
}

/* ---------- Partner columns ---------- */
.partners { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.partner { padding: 8px clamp(20px, 3vw, 40px) 8px; }
.partner + .partner { border-left: 1px solid var(--rule); }
.partner__mark { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: var(--jcs-cream); border: 1px solid var(--rule); margin-bottom: 22px; overflow: hidden; }
.partner__mark img { width: 78%; height: 78%; object-fit: contain; }
.partner__name { font-size: var(--fs-h3); margin-bottom: 12px; }
.partner p { font-size: 17px; }
.partner .text-link { margin-top: 18px; }
@media (max-width: 860px) {
  .partner { padding: 28px 0; }
  .partner + .partner { border-left: 0; border-top: 1px solid var(--rule); }
}
/* Three-organisation diagram: each logo grows when you point at it (and on keyboard focus) — it is also the link to that organisation. */
.org-diagram { list-style: none; padding: 0; margin: clamp(20px, 3vw, 36px) auto clamp(32px, 4vw, 48px); max-width: 760px; display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 24px); }
.org-diagram__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-decoration: none; transform-origin: 50% 60%; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.org-diagram__item img { height: clamp(64px, 8vw, 104px); width: auto; transition: filter .4s ease; }
.org-diagram__item--wide img { height: clamp(56px, 7vw, 92px); }
.org-diagram__name { font-weight: 700; font-size: 14px; text-align: center; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .3s; }
.org-diagram__item:hover, .org-diagram__item:focus-visible { transform: scale(1.14); }
.org-diagram__item:hover img, .org-diagram__item:focus-visible img { filter: drop-shadow(0 14px 20px color-mix(in srgb, var(--jcs-ink) 22%, transparent)); }
.org-diagram__item:hover .org-diagram__name { text-decoration-color: currentColor; }
.org-diagram__arrows svg { width: clamp(32px, 4vw, 48px); height: auto; fill: none; stroke: var(--jcs-milpa); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s ease; }
.org-diagram:has(li:first-child .org-diagram__item:hover) li:nth-child(2) svg { transform: translateX(-6px); }
.org-diagram:has(li:last-child .org-diagram__item:hover) li:nth-child(4) svg { transform: translateX(6px); }
@media (max-width: 720px) {
  .org-diagram { flex-direction: column; gap: 10px; }
  .org-diagram__arrows svg { transform: rotate(90deg); width: 44px; }
  .org-diagram:has(li .org-diagram__item:hover) .org-diagram__arrows svg { transform: rotate(90deg); }
}
.allies { margin-top: clamp(48px, 6vw, 72px); padding-top: 32px; border-top: 1px solid var(--rule); }
.allies__title { font: 700 17px/1.3 var(--sans); letter-spacing: 0; margin-bottom: 18px; }
.allies__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.ally { display: block; background: var(--jcs-cream); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 26px; }
.ally img { height: 54px; width: auto; }

/* ---------- Photo band (full-width image, canopy scrim) ---------- */
.photo-band { position: relative; isolation: isolate; overflow: hidden; color: var(--jcs-cream); background: var(--jcs-canopy); padding-block: var(--space); }
.photo-band__img { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; z-index: -2; will-change: transform; }
/* Light scrim so the photo shows (avg ~53% vs 83% before): a soft fade from the text side, plus a band
   across the top so the heading stays readable over bright sky. Measured: ≥4.2:1 over 99% of the text area. */
.photo-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, color-mix(in srgb, var(--jcs-canopy) 72%, transparent) 0%, color-mix(in srgb, var(--jcs-canopy) 45%, transparent) 28%, color-mix(in srgb, var(--jcs-canopy) 0%, transparent) 45%),
  linear-gradient(90deg, color-mix(in srgb, var(--jcs-canopy) 66%, transparent) 0%, color-mix(in srgb, var(--jcs-canopy) 55%, transparent) 45%, color-mix(in srgb, var(--jcs-canopy) 18%, transparent) 75%, color-mix(in srgb, var(--jcs-canopy) 0%, transparent) 100%); }
/* Lighter scrim lets the photo show; a soft shadow keeps text crisp over brighter patches */
.photo-band h2, .photo-band__inner > p, .photo-band .figure { text-shadow: 0 1px 14px color-mix(in srgb, var(--jcs-ink) 55%, transparent); }
.photo-band__inner > :not(h2) { max-width: 760px; }
.photo-band h2 { font-size: var(--fs-h2); margin-bottom: 24px; }
.photo-band__inner > p { font-size: var(--fs-lead); line-height: 1.55; }
.photo-band p + p { margin-top: 1em; }
.photo-band .figures { margin-top: clamp(32px, 4vw, 48px); max-width: 640px; }

/* ---------- Climate page background: a seed grows into a tree as you scroll the page ----------
   Fixed behind all content (z-index -1 paints under the sections and their bands, above the page
   colour), so it shows through the cream sections and the dark bands pass over it. Faint enough
   that text on top keeps its contrast. */
.growth-bg { position: fixed; right: clamp(-40px, -2vw, 0px); bottom: 0; z-index: -1; width: min(46vw, 620px); height: min(88vh, 820px); pointer-events: none; opacity: .2; }
.growth-bg .growth__svg { width: 100%; height: 100%; }
@media (max-width: 860px) { .growth-bg { width: 90vw; height: 70vh; right: -10vw; opacity: .12; } }
.g-soil { fill: color-mix(in srgb, var(--jcs-ink) 10%, var(--jcs-cream)); }
.g-ground { fill: none; stroke: color-mix(in srgb, var(--jcs-ink) 35%, transparent); stroke-width: 2; }
.g-root { fill: none; stroke: color-mix(in srgb, var(--jcs-ink) 45%, var(--jcs-amber)); stroke-width: 3; stroke-linecap: round; }
.g-seed ellipse { fill: var(--jcs-amber); stroke: var(--jcs-ink); stroke-width: 1.5; }
.g-seed-crack { fill: none; stroke: var(--jcs-ink); stroke-width: 1.5; stroke-linecap: round; }
.g-trunk { fill: none; stroke: color-mix(in srgb, var(--jcs-canopy) 70%, var(--jcs-ink)); stroke-width: 12; stroke-linecap: round; }
.g-branch { fill: none; stroke: color-mix(in srgb, var(--jcs-canopy) 70%, var(--jcs-ink)); stroke-width: 6; stroke-linecap: round; }
.g-leaf { fill: var(--jcs-leaf); stroke: var(--jcs-milpa); stroke-width: 1.5; }
.g-crown { fill: var(--jcs-milpa); opacity: .92; }
.g-crown--b { fill: var(--jcs-canopy); }
.g-crown--l { fill: var(--jcs-leaf); opacity: .95; }
.g-fruit circle { fill: var(--jcs-maize); stroke: var(--jcs-canopy); stroke-width: 1.5; }
.g-grow { transform-box: fill-box; transform-origin: center; }

/* ---------- Climate leadership (homepage block 5 + climate page) ---------- */
.band-kicker { color: var(--jcs-maize); font: italic 400 clamp(20px, 1.8vw, 26px)/1.2 var(--serif); margin-bottom: 12px; }
.climate-pillars__grid { list-style: none; margin: clamp(8px, 1vw, 16px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(16px, 2vw, 24px); }
.climate-pillar { position: relative; padding: 26px 24px 28px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--jcs-cream); border-top: 6px solid var(--c); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.climate-pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.climate-pillar .pillar__num { width: 52px; height: 52px; font-size: 18px; border-width: 3px; margin-bottom: 16px; }
.climate-pillar__title { font-size: clamp(21px, 1.7vw, 25px); color: var(--jcs-canopy); margin-bottom: 10px; }
.climate-pillar__message { font-weight: 700; font-size: 16.5px; line-height: 1.45; margin-bottom: 10px; }
.climate-pillar__proof { font-size: 16px; line-height: 1.55; }
.climate-pillars__call { margin: clamp(32px, 4vw, 52px) 0; text-align: center; font: italic 500 clamp(22px, 2.2vw, 30px)/1.3 var(--serif); color: var(--jcs-canopy); }
.climate-initiative { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius); background: var(--jcs-canopy); color: var(--jcs-cream); }
.climate-initiative__kicker { display: inline-block; background: var(--jcs-maize); color: var(--jcs-canopy); font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.climate-initiative__title { font-size: var(--fs-h3); margin-bottom: 10px; }
@media (max-width: 760px) { .climate-initiative { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Status box / initiative ---------- */
.initiative { margin-top: 28px; }
.initiative__name { font-size: var(--fs-h3); margin-bottom: 12px; }
.initiative p + p, .initiative p + .status-box { margin-top: 1em; }
.status-box { border: 2px solid var(--jcs-maize); border-radius: var(--radius); padding: 18px 22px; }
.status-box__label { color: var(--jcs-maize); font-weight: 700; }
.section:not(.section--canopy):not(.photo-band) .status-box { border-color: var(--jcs-milpa); }
.section:not(.section--canopy):not(.photo-band) .status-box__label { color: var(--jcs-ink); }

/* ---------- Story cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 32px); }
.story-card__link { display: block; text-decoration: none; height: 100%; }
.story-card__media { position: relative; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--jcs-canopy); }
.story-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.story-card__link:hover img { transform: scale(1.04); }
.story-card__meta { margin-top: 16px; font-size: 15px; font-weight: 500; }
.story-card__title { margin-top: 6px; font-size: clamp(21px, 1.7vw, 24px); line-height: 1.22; }
.story-card__link:hover .story-card__title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.story-card__summary { margin-top: 8px; font-size: 16px; line-height: 1.55; }
.play-button { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 68px; height: 68px; border-radius: 50%; background: var(--jcs-maize); color: var(--jcs-canopy); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .2s; }
.play-button svg { width: 28px; height: 28px; fill: currentColor; margin-left: 4px; }
.story-card__link:hover .play-button { transform: scale(1.08); }

.filter-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(28px, 3vw, 40px); }
.filter-tab { border: 1.5px solid var(--jcs-ink); background: transparent; border-radius: 999px; padding: 9px 18px; font-weight: 500; cursor: pointer; }
.filter-tab[aria-pressed="true"] { background: var(--jcs-milpa); border-color: var(--jcs-milpa); color: var(--jcs-cream); }
.filter-empty { margin-top: 12px; }

/* ---------- Resource rows ---------- */
.resource-group + .resource-group { margin-top: clamp(48px, 6vw, 72px); }
.resource-list { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
.resource-row { display: grid; grid-template-columns: minmax(150px, 220px) 1fr auto; gap: 8px 28px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.resource-row__meta { font-size: 15px; }
.resource-row__title { font: 500 clamp(19px, 1.5vw, 22px)/1.35 var(--serif); }
.resource-row__link { font-weight: 700; white-space: nowrap; text-underline-offset: 4px; }
@media (max-width: 720px) { .resource-row { grid-template-columns: 1fr; } }

/* ---------- Community voice ---------- */
.voice__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.voice__quote { font: italic 400 clamp(26px, 2.8vw, 38px)/1.3 var(--serif); }
.voice__by { margin-top: 18px; font-weight: 700; }
.voice__video { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.voice__video img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Two-column body copy (Our Work overview) ---------- */
.prose-columns { columns: 2 340px; column-gap: clamp(32px, 4vw, 64px); margin-top: clamp(28px, 3vw, 44px); }
.prose-columns p { break-inside: avoid; margin: 0 0 1.2em; }
.prose-columns strong { font-family: var(--serif); font-size: 1.15em; font-weight: 600; display: block; margin-bottom: 4px; }

/* ---------- Pills ---------- */
.pills { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pill { display: inline-block; padding: 12px 20px; border-radius: 999px; background: var(--jcs-leaf); color: var(--jcs-canopy); font-weight: 700; text-decoration: none; }
.pill:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Vision (The Future We Dream) ---------- */
.vision { text-align: center; }
.vision__quote { font: italic 400 clamp(26px, 3vw, 42px)/1.3 var(--serif); margin: 0 auto; }
.vision__by { margin-top: 20px; }
.vision .btn-row { justify-content: center; }
.vision h2 { font-size: var(--fs-h2); color: var(--jcs-maize); margin-bottom: 28px; }
/* The Future We Dream over a photo of the land (river, canoe, harvest) under a canopy scrim */
.vision--photo { position: relative; isolation: isolate; overflow: hidden; }
.vision__bg { position: absolute; top: -15%; left: 0; width: 100%; height: 130%; object-fit: cover; z-index: -2; will-change: transform; }
.vision--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--jcs-canopy) 90%, transparent) 0%, color-mix(in srgb, var(--jcs-canopy) 78%, transparent) 70%, color-mix(in srgb, var(--jcs-canopy) 70%, transparent) 100%); }

/* ---------- Card list (mission/vision/goal, feature notes) ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.card { border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(24px, 2.6vw, 34px); background: var(--jcs-cream); }
.card h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.card--canopy { background: var(--jcs-canopy); color: var(--jcs-cream); border-color: transparent; }
.tag { display: inline-block; background: var(--jcs-leaf); color: var(--jcs-canopy); font-size: 14px; font-weight: 700; padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; }
.checklist li { padding-left: 34px; position: relative; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--jcs-leaf); box-shadow: inset 0 0 0 5px var(--jcs-canopy); }
.section--canopy .checklist li::before { box-shadow: inset 0 0 0 5px var(--jcs-canopy); }

/* ---------- Read more ---------- */
.readmore-body { overflow: hidden; max-height: 0; transition: max-height .45s ease; }
.readmore-body.open { max-height: none; }
.readmore-body > p { margin-top: 1em; }
.readmore-btn { margin-top: 18px; background: none; border: 0; padding: 0; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }

/* ---------- Audio tribute (kept) ---------- */
.audio-player { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 14px 18px; border-radius: var(--radius); background: var(--jcs-canopy); color: var(--jcs-cream); }
.ap-play { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--jcs-maize); color: var(--jcs-canopy); display: grid; place-items: center; cursor: pointer; }
.ap-icon { width: 22px; height: 22px; }
.ap-main { flex: 1; min-width: 0; }
.ap-label { font-weight: 700; font-size: 16px; }
.ap-progress { position: relative; height: 6px; margin: 10px 0 6px; background: var(--rule-light); border-radius: 3px; cursor: pointer; touch-action: none; }
.ap-progress-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--jcs-maize); border-radius: 3px; }
.ap-progress-knob { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--jcs-maize); translate: -50% -50%; }
.ap-time { display: flex; justify-content: space-between; font-size: 13px; }

/* ---------- Court cases timeline (kept: drag-scroll) ---------- */
.cases-scroll { overflow-x: auto; cursor: grab; scrollbar-width: thin; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.cases-scroll.dragging { cursor: grabbing; user-select: none; }
.cases-track { list-style: none; margin: 0; display: flex; gap: 20px; padding-inline: var(--gutter); width: max-content; position: relative; }
.case-card { width: 300px; flex: 0 0 auto; border-radius: var(--radius); padding: 24px; background: var(--jcs-canopy); color: var(--jcs-cream); border: 1px solid var(--rule-light); }
.case-card .tl-year { font: 500 34px/1 var(--serif); color: var(--jcs-maize); }
.case-card h3 { font: 700 18px/1.35 var(--sans); letter-spacing: 0; margin-top: 14px; }
.case-card .tl-court { margin-top: 8px; font-size: 15px; font-style: italic; }
.js .tl-reveal { opacity: 0; translate: 0 16px; transition: opacity .5s ease, translate .5s ease; }
.js .tl-reveal.in { opacity: 1; translate: 0 0; }
.cases-hint { font-size: 15px; margin-top: -16px; margin-bottom: 24px; }

/* ---------- Consent Order carousel (kept) ---------- */
.journey-carousel { margin-top: 8px; }
.jc-viewport { overflow: hidden; padding-block: 12px; }
.jc-track { display: flex; gap: 16px; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.jc-slide { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; padding: 20px; border-radius: var(--radius); border: 1.5px solid var(--rule); background: var(--jcs-cream); color: var(--jcs-ink); cursor: pointer; opacity: .7; transition: opacity .3s, background .3s, border-color .3s; }
.jc-slide.active { opacity: 1; background: var(--jcs-canopy); color: var(--jcs-cream); border-color: var(--jcs-canopy); }
.jc-num { font: 500 15px/1 var(--sans); }
.jc-icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.jc-date { font-size: 14px; font-weight: 500; }
.jc-title { font: 500 18px/1.25 var(--serif); }
.jc-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 22px; }
.jc-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--jcs-ink); background: transparent; display: grid; place-items: center; cursor: pointer; }
.jc-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jc-counter { font-weight: 500; }
.jc-progress { height: 4px; background: var(--rule); border-radius: 2px; margin: 18px auto 0; max-width: 480px; overflow: hidden; }
.jc-progress-bar { display: block; height: 100%; width: 0; background: var(--jcs-milpa); transition: width .5s; }
.jc-detail { max-width: 760px; margin: 28px auto 0; }
.jc-detail-card { border: 1px solid var(--rule); border-left: 6px solid var(--jcs-milpa); border-radius: var(--radius); padding: 26px 28px; transition: opacity .22s; }
.jc-detail-card.switching { opacity: 0; }
.jc-detail-date { font-weight: 700; font-size: 15px; }
.jc-detail-card h3 { font-size: var(--fs-h3); margin: 6px 0 10px; }
.jc-detail-body ul { margin: 10px 0 0; padding-left: 20px; }

/* ---------- Village map (kept) ---------- */
.map-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(32px, 4vw, 56px); align-items: start; }
.village-label { display: block; font-weight: 700; margin: 24px 0 10px; }
.village-dropdown { width: 100%; max-width: 420px; min-height: 50px; padding: 10px 16px; border-radius: 12px; border: 1.5px solid var(--jcs-ink); background: var(--jcs-cream); color: var(--jcs-ink); font: inherit; }
#village-map { width: 100%; height: clamp(380px, 52vw, 560px); border-radius: var(--radius); border: 1px solid var(--rule); z-index: 0; }
.maya-village-marker .dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--jcs-maize); border: 3px solid var(--jcs-canopy); box-shadow: 0 0 0 2px var(--jcs-cream); }
.maya-village-popup .leaflet-popup-content-wrapper { border-radius: 12px; background: var(--jcs-cream); color: var(--jcs-ink); }
.maya-village-popup .leaflet-popup-tip { background: var(--jcs-cream); }
.village-popup .vp-name { font: 600 20px/1.2 var(--serif); margin: 0 0 8px; }
.village-popup .vp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.village-popup .vp-tag { background: var(--jcs-leaf); color: var(--jcs-canopy); border-radius: 999px; padding: 2px 10px; font: 700 12px/1.6 var(--sans); }
.village-popup .vp-blurb { margin: 0; font: 400 14px/1.5 var(--sans); }

/* ---------- People (TAA executive, kept) ---------- */
.people { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 20px; margin-top: 28px; }
.person { text-align: center; }
.person__photo { position: relative; width: 104px; height: 104px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; background: var(--jcs-leaf); color: var(--jcs-canopy); display: grid; place-items: center; font: 600 28px/1 var(--serif); }
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person__role { font-size: 14px; font-weight: 700; }
.person__name { font: 500 19px/1.25 var(--serif); margin-top: 4px; }
.person__village { font-size: 14px; margin-top: 2px; }

/* ---------- Staff chart (kept) ---------- */
.staff-scroll { overflow-x: auto; margin-top: 28px; padding-bottom: 8px; }
.staff-orgchart { min-width: 1000px; width: 100%; height: auto; }
.staff-orgchart path { fill: none; stroke: var(--jcs-ink); stroke-width: 2; }
.staff-orgchart rect.g { fill: var(--jcs-leaf); stroke: var(--jcs-canopy); stroke-width: 1.5; }
.staff-orgchart rect.o { fill: var(--jcs-amber); stroke: var(--jcs-ink); stroke-width: 1.5; }
.staff-orgchart text { font: 500 17px var(--sans); fill: var(--jcs-ink); text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.staff-key { display: flex; flex-wrap: wrap; gap: 18px; font-size: 15px; margin-top: 14px; }
.staff-key span::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 8px; vertical-align: -2px; }
.staff-key .k-g::before { background: var(--jcs-leaf); border: 1.5px solid var(--jcs-canopy); }
.staff-key .k-o::before { background: var(--jcs-amber); border: 1.5px solid var(--jcs-ink); }

/* ---------- Gallery + lightbox (kept) ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); grid-auto-rows: 220px; gap: 12px; }
.gallery-item { position: relative; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--jcs-canopy); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item--tall { grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }
@media (max-width: 520px) { .gallery-item--wide { grid-column: auto; } }
.lightbox { position: fixed; inset: 0; z-index: 500; background: color-mix(in srgb, var(--jcs-ink) 94%, transparent); display: none; align-items: center; justify-content: center; padding: 60px 16px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; border-radius: 8px; }
.lightbox button { position: absolute; width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--jcs-maize); color: var(--jcs-canopy); display: grid; place-items: center; cursor: pointer; }
.lightbox button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.lightbox-close { top: 16px; right: 16px; }
.lightbox-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lightbox-next { right: 16px; top: 50%; translate: 0 -50%; }

/* ---------- Contact ---------- */
.contact-block { display: grid; gap: 18px; }
.contact-block__row { display: grid; gap: 4px; }
.contact-block__label { font-weight: 700; font-size: 15px; }
/* Social links: icon + name pills (44px targets). Canopy on light sections, cream in the footer. */
.social-links { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.social-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 8px 18px 8px 14px; border: 1.5px solid currentColor; border-radius: 999px; color: var(--jcs-canopy); font-weight: 600; font-size: 15px; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.social-link svg { flex: none; }
.social-link:hover { background: var(--jcs-canopy); border-color: var(--jcs-canopy); color: var(--jcs-cream); }
.site-footer .social-links { margin-top: 18px; }
.site-footer .social-link { color: var(--jcs-cream); border-color: color-mix(in srgb, var(--jcs-cream) 45%, transparent); }
.site-footer .social-link:hover { background: var(--jcs-maize); border-color: var(--jcs-maize); color: var(--jcs-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--jcs-canopy); color: var(--jcs-cream); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); padding-block: clamp(56px, 7vw, 88px); }
.site-footer__brand img { width: 200px; height: auto; }
.site-footer__tag { margin-top: 18px; font-size: 16px; max-width: 30ch; }
.site-footer__tag em { font-family: var(--serif); display: block; font-size: 19px; }
.site-footer__heading { font: 700 16px/1.3 var(--sans); letter-spacing: 0; margin-bottom: 16px; color: var(--jcs-maize); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--jcs-cream); text-decoration: none; transition: color .2s; }
.site-footer a:hover { color: var(--jcs-maize); }
.site-footer .text-link { text-decoration: none; }
.site-footer__col p + p { margin-top: 12px; }
.site-footer__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 28px; border-top: 1px solid var(--rule-light); font-size: 15px; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }

/* =====================================================================
   ORGANIC LAYER (UI/UX Pro Max: "organic biophilic" — flowing edges, leaf shapes,
   natural shadows, subtle texture). Brand colours and contrast pairs unchanged.
   ===================================================================== */

/* Flowing edges between sections that change colour. jcs.js reads each pair of neighbours and adds a
   wave filled with the upper section's colour (or, under a photo, a wave of the next colour rising in). */
.has-wave { position: relative; }
.wave { position: absolute; left: 0; right: 0; height: clamp(26px, 3.4vw, 58px); background: var(--wave, var(--jcs-cream)); pointer-events: none; z-index: 3;
  -webkit-mask: url("../images/wave.svg") center / 100% 100% no-repeat; mask: url("../images/wave.svg") center / 100% 100% no-repeat; }
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; transform: scaleY(-1); }
.wave--flip.wave--top { transform: scaleX(-1); }
.wave--flip.wave--bottom { transform: scale(-1, -1); }

/* A soft green-tinted section breaks up long runs of cream */
.section--tint { background: var(--tint); }
.section--tint .climate-pillar, .section--tint .card { background: var(--jcs-cream); }

/* Paper-like grain on the page: barely there, adds warmth to flat cream */
body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* Leaf-cornered photos with an organic shape behind them */
.split__photo { position: relative; isolation: isolate; }
.split__photo > img { border-radius: var(--radius-leaf); box-shadow: var(--shadow-soft); }
.split__photo::before { content: ""; position: absolute; z-index: -1; inset: 12% -5% -5% 12%; border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%; background: color-mix(in srgb, var(--jcs-leaf) 45%, var(--jcs-cream)); }
.section--canopy .split__photo::before, .section--milpa .split__photo::before { background: color-mix(in srgb, var(--jcs-leaf) 35%, var(--jcs-canopy)); }
.split--bio .split__photo::before { inset: 8% -6% -4% 10%; }
/* Photos with a caption printed along the bottom: put the leaf curve top-right so the caption isn't clipped */
.split__photo--captioned > img { border-radius: 28px 120px 28px 28px; }
.split__photo--short::before, .split__photo--wide::before { inset: 14% -4% -6% 18%; }

/* Natural shadows and gentle lift on cards */
.climate-pillar, .card:not(.card--canopy), .ally, .jc-detail-card { box-shadow: var(--shadow-soft); }
.story-card__media { box-shadow: var(--shadow-soft); }
.btn--primary { box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--jcs-ink) 55%, transparent); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--jcs-ink) 60%, transparent); }

/* =====================================================================
   MOTION — every effect has a job, all of it is JS-gated (html.js)
   and switched off for prefers-reduced-motion.
   ===================================================================== */

/* Page-to-page: the header stays put while the page underneath cross-fades (continuity). */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: jcs-fade-out .22s ease both; }
::view-transition-new(root) { animation: jcs-fade-up .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes jcs-fade-out { to { opacity: 0; } }
@keyframes jcs-fade-up { from { opacity: 0; transform: translateY(16px); } }

/* Header slims down once you start reading (more room for content, nav still in reach). */
.site-header { transition: box-shadow .3s ease; }
.site-header__inner { transition: min-height .3s ease; }
.brand__mark { transition: height .3s ease; }
.site-header.is-condensed { box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--jcs-ink) 80%, transparent); }
.site-header.is-condensed .site-header__inner { min-height: 62px; }
.site-header.is-condensed .brand__mark { height: 32px; }

/* Reading progress on long pages (where am I?). */
.read-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--jcs-maize); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); pointer-events: none; }

/* Sticky section menu on long pages (jump straight to what you need). */
.page-nav { position: sticky; top: var(--header-now, var(--header-h)); z-index: 90; background: var(--jcs-cream); border-bottom: 1px solid var(--rule); transition: top .3s ease; }
.page-nav__list { list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.page-nav__list::-webkit-scrollbar { display: none; }
.page-nav a { display: inline-block; white-space: nowrap; padding: 8px 16px; border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; border: 1.5px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.page-nav a:hover { border-color: var(--jcs-ink); }
.page-nav a[aria-current="true"] { background: var(--jcs-milpa); color: var(--jcs-cream); }

/* Hero: the message arrives in reading order. */
@keyframes jcs-rise { from { opacity: 0; transform: translateY(24px); } }
.js .hero__inner > * { animation: jcs-rise .9s cubic-bezier(.2,.7,.2,1) both; }
.js .hero__inner > :nth-child(2) { animation-delay: .1s; }
.js .hero__inner > :nth-child(3) { animation-delay: .2s; }
.js .hero__inner > :nth-child(4) { animation-delay: .3s; }
.js .hero__inner > :nth-child(5) { animation-delay: .4s; }
/* Page heroes: a slow settle brings the still photo to life. */
@keyframes jcs-settle { from { transform: scale(1.08); } }
.js .hero--page .hero__media img { animation: jcs-settle 14s cubic-bezier(.2,.7,.2,1) both; }

/* Reveal on scroll: single blocks, and groups that arrive one after another. */
.js .reveal { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.visible { opacity: 1; translate: 0 0; }
.js .stagger > * { opacity: 0; translate: 0 20px; transition: opacity .6s ease, translate .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(min(var(--i, 0), 8) * 80ms); }
.js .stagger.in-view > * { opacity: 1; translate: 0 0; }

/* Timelines draw along time: the line runs out, then each moment lands in order. */
.js .timeline::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.4,0,.2,1); }
.js .timeline.in-view::before { transform: none; }
.js .timeline__item { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s ease; transition-delay: calc(.25s + var(--i, 0) * 180ms); }
.js .timeline.in-view .timeline__item { opacity: 1; translate: 0 0; }
.js .timeline__item::before { transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.25s + var(--i, 0) * 180ms); }
.js .timeline.in-view .timeline__item::before { transform: none; }
@media (max-width: 860px) { .js .timeline::before { transform: scaleY(0); transform-origin: 50% 0; } }

/* Court cases: buttons for people who don't drag. */
.cases-controls { display: flex; gap: 12px; margin-top: 22px; padding-inline: var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
.cases-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--jcs-cream); background: transparent; color: var(--jcs-cream); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; }
.cases-btn:hover { background: color-mix(in srgb, var(--jcs-cream) 14%, transparent); }
.cases-btn[disabled] { opacity: .35; cursor: default; }
.cases-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cases-scroll { scroll-snap-type: x proximity; }
.case-card { scroll-snap-align: start; scroll-margin-left: var(--gutter); }

/* Tiles and cards answer the pointer (this is a link, and where it goes). */
.theme-tile { transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.theme-tile:hover, .theme-tile:focus-visible { transform: translateY(-6px); box-shadow: var(--shadow); }
.theme-tile__title::after { display: inline-block; transition: transform .3s ease; }
.theme-tile:hover .theme-tile__title::after { transform: translateX(6px); }
.text-link::after { transition: transform .25s ease; }

/* Headings on one line (desktop and tablet): jcs.js steps the size down until the heading fits;
   if it can't fit at 55% it is allowed to wrap. Phones wrap naturally. */
@media (min-width: 700px) {
  .js [data-fit] { white-space: nowrap; }
  .js [data-fit].fit-wrap { white-space: normal; text-wrap: balance; }
}

/* Map: village names on hover. */
.leaflet-tooltip.village-tip { background: var(--jcs-canopy); color: var(--jcs-cream); border: 0; border-radius: 8px; font: 600 14px/1.3 var(--sans); padding: 6px 10px; box-shadow: var(--shadow); }
.leaflet-tooltip.village-tip::before { border-top-color: var(--jcs-canopy); }

/* Figures settle on their final value; tabular digits stop the count-up from jittering. */
.figure__value { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .stagger > *, .js .timeline__item, .tl-reveal { opacity: 1 !important; translate: none !important; }
  .js .timeline::before, .js .timeline__item::before { transform: none !important; }
  .hero__media, .photo-band__img, .vision__bg, .greca-layer { transform: none !important; }
}