/* INTEGRITY EARTH — shared visual language, all public pages.
   Layout remains in the lower layer. Tokens and component roles here are
   authoritative, including over historical page-ID selectors. */
@layer layout, design;
@layer design {
:root {
  --nav-h: 76px;
  --ink: #26332B;
  --ink-soft: #33423A;
  --forest: #3C5A48;
  --bone: #FDFCF9;
  --bone-deep: #F7F3EB;
  --mist: #EFF2ED;
  --mist-deep: #E6ECE5;
  --sage-wash: #DEE7DF;
  --gold: #B08E58;
  --gold-bright: #C9A46F;
  --gold-ink: #7E5C26;
  --deep: #1E2A22;
  --gold-pale: #EEDCB8;
  --blush: #D8BCA9;
  --sage: #7E9585;
  --stone: #5C6A58;
  --white: #FFFFFF;
  --lift-1: 0 1px 2px rgba(38,51,43,0.04),0 8px 24px -14px rgba(38,51,43,0.10);
  --lift-2: 0 1px 3px rgba(38,51,43,0.05),0 14px 36px -18px rgba(38,51,43,0.13),0 40px 80px -44px rgba(38,51,43,0.14);
  --hair: rgba(60,90,72,0.12);
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 26px;
  --r-pill: 100px;
  --lede-gap: clamp(34px,3.6vw,58px);
  --gap-half: clamp(70px,10vh,130px);
  --gap-full: clamp(140px,20vh,260px);
  --section-y: var(--gap-half);
  --section-gap: clamp(48px,7vh,84px);
  --on-photo-label: var(--gold-pale);
  --on-photo-body: var(--bone);
  --font-display: "Fraunces",Georgia,serif;
  --font-body: "Instrument Sans",-apple-system,Helvetica,Arial,sans-serif;
  --w-content: 1280px;
  --w-media: 1340px;
  --w-statement: 940px;
  --eyebrow-gap: clamp(16px,1.5vw,22px);
  --w-prose: 760px;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-soft: cubic-bezier(0.22,0.61,0.36,1);
  --bezel: 6px;
  --r-inner-lg: calc(var(--r-lg) - var(--bezel));
  --r-inner-md: calc(var(--r-md) - var(--bezel));
  --shell: rgba(60,90,72,0.045);
  --shell-ring: rgba(60,90,72,0.10);
  --core-highlight: inset 0 1px 0 rgba(255,255,255,0.9);
  --ease-press: cubic-bezier(0.32,0.72,0,1);
  --r-media: clamp(18px,2.2vw,34px);
  --gutter: clamp(16px,3.2vw,44px);
  --shade: 18,26,21;
  /* Match the FarmEye reference: its viewport-based height or the rendered
     16:9 photograph, whichever is taller. All story panels use this token. */
  --photo-section-height: max(clamp(460px,82svh,860px),min(calc(var(--w-media)*9/16),calc((100vw - var(--gutter)*2)*9/16)));

  --type-title: clamp(2.9rem,6.6vw,6rem);
  --type-display: clamp(2.8rem,6.2vw,5.3rem);
  --type-section: clamp(2.3rem,4.6vw,3.85rem);
  --type-support: clamp(1.85rem,3.4vw,3.05rem);
  --type-prose-heading: clamp(1.9rem,3.2vw,2.7rem);
  --type-card: clamp(1.35rem,1.8vw,1.6rem);
  --type-body: 1.0625rem;
  --type-lede: clamp(1rem,1.5vw,1.3rem);
  --type-small: 1rem;
  --type-note: .875rem;
  --type-label: .72rem;
  --leading-body: 1.7;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --content-inset: clamp(20px,4vw,48px);
  --card-padding: clamp(24px,2.6vw,36px);
  --grid-gap: clamp(24px,2.6vw,36px);
  --leaf: #507144;
  --leaf-pale: #D4E6A4;
  --leaf-bar: #A8C777;
  --scrim-caption: linear-gradient(0deg,rgba(var(--shade),.78),rgba(var(--shade),.68) 50%,rgba(var(--shade),.52) 78%,rgba(var(--shade),0));
  --photo-shadow: 0 1px 3px rgba(var(--shade),.65);
  --card-shadow: 0 0 0 1px var(--hair),var(--lift-1);
}

/* Typography: one scale, with explicit roles rather than page exceptions. */
body { font-family:var(--font-body);font-size:var(--type-body);line-height:var(--leading-body);color:var(--ink);background:var(--bone); }
.display-xl, .hero h1, .page-hero h1 {
  font-family:var(--font-display);font-size:var(--type-title);font-weight:300;
  line-height:1.08;letter-spacing:-.02em;font-variation-settings:"opsz" 144;text-wrap:balance;
}
.display-l { font-family:var(--font-display);font-size:var(--type-display);font-weight:300;line-height:1.1;letter-spacing:-.015em;font-variation-settings:"opsz" 136; }
.display-m { font-family:var(--font-display);font-size:var(--type-support);font-weight:300;line-height:1.15;letter-spacing:-.012em;font-variation-settings:"opsz" 96; }
.editorial .ed-head h2, .thesis h2, .close-section h2 { font-size:var(--type-section);font-weight:300;line-height:1.1;letter-spacing:-.014em; }
.prose h2 { font-size:var(--type-prose-heading);line-height:1.25;font-weight:400;letter-spacing:-.01em; }
.prose h3, .sf-item h3, .team-card h3, .contact-card h2, .hero-card h3,
.access-card h3, .product h3, .idea h3, .participation-flow h3, .walk-card h3,
.steps .step h3, .tile-text strong, .thesis-points h3, .faq-list summary {
  font-family:var(--font-display);font-size:var(--type-card);font-weight:500;
  font-variation-settings:"opsz" 44;line-height:1.25;letter-spacing:0;color:var(--forest);
}
.lede, .hero-sub, .page-hero .ph-sub, .statement .support, .cinema .caption .support,
.cinema .caption .founders, .split-copy > p, .thesis .thesis-lede {
  font-size:var(--type-lede);line-height:1.65;font-weight:400;
}
.prose p:not(.pull), .prose ul, .letter p, .not-card p, .editorial .ed-body p,
.sf-item p, .faq-list details p { font-size:var(--type-body);line-height:var(--leading-body);color:var(--stone); }
.team-card p:not(.t-role), .contact-card p, .hero-card p, .access-card p,
.product .p-copy p, .idea p, .participation-flow p, .walk-card p,
.steps .step p, .tile-text span, .thesis-points .tp p {
  font-size:var(--type-small);line-height:var(--leading-body);color:var(--stone);
}
.eyebrow, .payoff .pf-label, .foot-grid h3 {
  font-family:var(--font-body);font-size:var(--type-label);font-weight:600;
  line-height:1.6;letter-spacing:.14em;text-transform:uppercase;
}
.eyebrow { color:var(--gold-ink);margin-bottom:var(--eyebrow-gap); }
.report-note, .thesis-note, .page-note, .not-card .page-note,
.walk-card .illustration-note, .farm-films figcaption, .moora-portrait figcaption,
.legal-meta, .legal-note { font-size:var(--type-note);line-height:1.55;color:var(--stone); }
.h2-turn { font-size:.58em;line-height:1.16;font-style:italic;margin-top:clamp(14px,1.5vw,24px); }
.team-card .t-role { color:var(--gold-ink);font-size:var(--type-small);line-height:1.4; }
.farm-films figcaption strong { font-size:var(--type-body);font-weight:600;line-height:1.5; }

/* Shared spacing and surfaces. Intentional compositions retain their grids. */
.prose-section { padding:var(--pad-top) var(--content-inset) var(--pad-bottom); }
.team-grid, .contact-grid, .participation-flow, .farm-films { gap:var(--grid-gap); }
.team-card .t-copy, .contact-card, .hero-card { padding:var(--card-padding); }
.walk-card, .not-card, .steps-cards .step, .payoff p, .payoff.trio .pf { box-shadow:var(--card-shadow);border-radius:var(--r-lg); }
.participation-flow li { border-color:var(--hair); }
.participation-number { color:var(--gold-ink); }
.share-seg-major { background:var(--leaf-bar); }
.share-fig-major .share-figure { color:var(--leaf-pale); }
.on-deep .eyebrow, .on-deep .step-num, footer .foot-grid h3 { color:var(--gold-pale); }
.on-deep .step h3, .on-deep .step p { color:var(--bone); }

/* Photo captions use one content-relative ramp. The upper photograph is clear.
   Scrims follow the caption's real height and share the media's grid track. */
.cinema { display:grid;grid-template-rows:minmax(var(--photo-section-height),auto); }
.cinema > .media { height:100%;min-height:0;aspect-ratio:auto; }
.cinema > .media img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.hero-media::before, .hero-media::after, .cinema .media::after, .page-hero .ph-media::after { background:none; }
.hero-copy, .cinema .caption, .page-hero:not(.compact) .ph-copy { isolation:isolate;text-shadow:var(--photo-shadow); }
/* Keep centred captions in the same grid cell as their photograph. A legacy
   absolute-position rule otherwise extends the scrim into the outer gutter. */
.cinema > .caption { position:relative;inset:auto;align-self:end;min-width:0; }
.hero-copy::before, .cinema .caption::before, .page-hero:not(.compact) .ph-copy::before {
  content:"";position:absolute;inset:-100px 0 0;z-index:-1;pointer-events:none;
  border-radius:0 0 var(--r-media) var(--r-media);background:var(--scrim-caption);
}
.hero-copy h1, .cinema .caption h2, .page-hero:not(.compact) h1 { color:var(--bone); }
.hero-copy .eyebrow, .cinema .caption .eyebrow, .page-hero:not(.compact) .eyebrow,
.hero-copy .pays, .cinema .caption .h2-turn, .cinema .caption .founders strong { color:var(--gold-pale); }
.hero-sub, .cinema .caption .support, .cinema .caption .founders, .page-hero:not(.compact) .ph-sub { color:var(--bone); }
.hero-copy .btn, .cinema .caption .btn, .ph-copy .btn { text-shadow:none; }

/* Broad, open-sky compositions use a feathered pool of shade, clipped to the
   image itself. The curved falloff avoids a horizontal stripe in the sky. */
.cinema.scrim-soft .caption::before { display:none; }
.cinema.scrim-soft .media::after {
  background:radial-gradient(ellipse 105% 130% at 34% 100%,
    rgba(var(--shade),.82) 0%,rgba(var(--shade),.72) 25%,
    rgba(var(--shade),.54) 50%,rgba(var(--shade),.31) 70%,
    rgba(var(--shade),.12) 85%,rgba(var(--shade),0) 100%);
}

/* Primary on paper is forest/white. Its inverse on photographs is bone/forest. */
.btn { font-family:var(--font-body);font-size:.94rem;font-weight:600;line-height:1.2;min-height:48px;border-radius:var(--r-pill);text-decoration:none;text-align:center; }
.btn-primary, .btn-solid { background:var(--forest);color:var(--white);padding:9px 9px 9px 22px; }
.btn-primary .btn-ico, .btn-solid .btn-ico { color:inherit;background:rgba(253,252,249,.16); }
.btn-primary:hover, .btn-solid:hover { background:var(--ink);color:var(--white); }
.btn-primary:hover .btn-ico, .btn-solid:hover .btn-ico { background:rgba(253,252,249,.26); }
:is(.hero-copy,.caption,.ph-copy,.on-deep) .btn-primary { background:var(--bone);color:var(--forest); }
:is(.hero-copy,.caption,.ph-copy,.on-deep) .btn-primary .btn-ico { background:rgba(60,90,72,.1); }
:is(.hero-copy,.caption,.ph-copy,.on-deep) .btn-primary:hover { background:var(--white);color:var(--forest); }
:is(.hero-copy,.caption,.ph-copy,.on-deep) .btn-primary:hover .btn-ico { background:rgba(60,90,72,.18); }
.btn-ghost { color:var(--bone);border:1px solid rgba(253,252,249,.6);background:rgba(var(--shade),.12); }
.btn-ghost:hover { color:var(--white);background:rgba(253,252,249,.16);border-color:var(--bone); }
.btn-outline { color:var(--forest);border:1px solid rgba(60,90,72,.38);background:transparent; }
.btn-outline:hover { color:var(--forest);border-color:var(--forest);background:var(--mist); }
a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible { outline:3px solid var(--gold-ink);outline-offset:4px; }
:is(.hero-copy,.caption,.on-deep,footer) :is(a,button,video):focus-visible { outline-color:var(--gold-pale); }

@media (max-width:700px) {
  :root {
    --type-title:clamp(2.4rem,8.6vw,2.85rem);
    --type-display:clamp(2.2rem,7.8vw,3.4rem);
    --type-section:clamp(2rem,6.6vw,2.8rem);
    --type-body:1rem;
    --type-lede:1rem;
    --grid-gap:24px;
    /* One mobile size, with enough room for the longest existing caption. */
    --photo-section-height:max(720px,82svh);
  }
  /* Keep group portraits clear of the copy while retaining the same total
     panel height. The photograph takes the space above the caption. */
  .cinema.media-stack-mobile {
    grid-template-rows:minmax(160px,1fr) auto;min-height:var(--photo-section-height);
    margin-inline:var(--gutter);padding:0;background:var(--deep);
    border-radius:var(--r-media);overflow:hidden;
  }
  .cinema.media-stack-mobile > .media { grid-area:1/1;border-radius:0; }
  .cinema.media-stack-mobile > .caption { grid-area:2/1;text-shadow:none; }
  .cinema.media-stack-mobile .caption .inner { padding:32px 28px 40px; }
  .cinema.media-stack-mobile .caption::before { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media (forced-colors:active) {
  .btn { border:1px solid ButtonText; }
  a:focus-visible,button:focus-visible,summary:focus-visible,video:focus-visible { outline-color:Highlight; }
}
@media print {
  .cinema { grid-template-rows:auto; }
  .hero-copy::before, .cinema .caption::before, .page-hero:not(.compact) .ph-copy::before { display:none; }
  .hero-copy, .cinema .caption, .page-hero:not(.compact) .ph-copy { text-shadow:none; }
  .hero-copy h1, .cinema .caption h2, .page-hero:not(.compact) h1,
  .hero-copy .eyebrow, .cinema .caption .eyebrow, .page-hero:not(.compact) .eyebrow,
  .hero-copy .pays, .cinema .caption .h2-turn, .hero-sub, .cinema .caption .support,
  .cinema .caption .founders, .page-hero:not(.compact) .ph-sub { color:var(--ink); }
}
}