/* Home (/) 3.0.0: placements only. Components live in commercial.css, base rules in the foundation.
   Spec: DIRECTION-v3 4.2-4.7, 4.13, 15-17; REWORK-PLAN 4.2; pass 2, the film hero (Reed 2026-10-18) and the homepage
   rhythm revised by Reed (2026-10-23, S-37; 2026-10-24, S-79): film -> Why + stability evidence (stone) -> Markets (paper)
   -> Research (stone) -> charcoal pathways band -> Ecosystem strip -> Close. No sizes or weights here; the one tint is the
   light stone (paper-2 with 4 % charcoal; --muted on it 4.7 : 1). */

/* ---- 1 Film hero (.fhero, commercial.css): the lead's clause after the colon starts its own line from 760; on phones it wraps */
@media (max-width: 759px) { .home-hero__lead .line { display: inline; } }

/* ---- 2 Why + evidence: one reading sequence, side by side on wide screens, copy then chart below 1100; on the light stone
   (S-79), like the research band, so the page alternates film / stone / paper / stone / charcoal / paper. */
.home-stability, .home-research { background: color-mix(in srgb, var(--paper-2), var(--ink-deep) 4%); }
.home-stability { padding-block: var(--section-y); }
/* each tinted ground keeps the next chapter's top space (as .pband) */
:is(.home-stability, .home-research) + .section { padding-top: var(--section-y); }

/* S-57 / S-79: Markets follows the Why section, without a decorative photo or extra rule. */
.home-markets { padding-top: var(--s-8); padding-bottom: var(--s-10); }
@media (max-width: 759px) { .home-markets { padding-top: var(--s-7); } }

/* ---- 5 Markets: four markets in a 2x2 image grid (S-47); then research as its own chapter (S-77): a full-width light-stone
   band (paper-2 with 4 % charcoal; --muted on it 4.7 : 1), a heading and the link left, two titled 4 : 3 stills right
   (stacked under 960; the stills two-up at every width). The programs themselves live on Markets. */
.section.home-research { padding-block: var(--s-9); }
.rband { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
.rband__copy .label { margin-bottom: var(--s-3); }
.rband__h { max-width: 18ch; margin: 0 0 var(--s-5); }
.rband__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.rband__list a { display: block; color: var(--ink); text-decoration: none; }
.rband__img.photo { aspect-ratio: 4 / 3; border-radius: 6px; }
.rband__img img { transition: transform .6s var(--ease-out); }
.rband__t { display: block; margin-top: var(--s-3); font-size: var(--fs-5); font-weight: 500; line-height: 1.4; }
.rband__list a:is(:hover, :focus-visible) .rband__t { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .rband__list a:hover .rband__img img { transform: scale(1.03); } }
@media (min-width: 960px) { .rband { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--s-8); } }
@media (max-width: 759px) { .home-markets { padding-bottom: var(--s-8); } .section.home-research { padding-block: var(--s-8); } }
@media (max-width: 559px) { .rband__list { gap: var(--s-4); } }

/* ---- 6 Company roles: a compact strip before the inquiry invitation (S-48). */
.home-eco { padding-bottom: var(--s-8); } /* Reed 2026-10-24: more room between the company strip and the closing invitation */
.home-paths + .home-eco { padding-top: calc(var(--section-y) + var(--s-6)); } /* Reed 2026-10-24: ~30px more above the cream ending; final */
.home-eco h2 { max-width: none; }

/* S-55: each chapter lifts into place during its first quarter of viewport entry.
   The section owns the timeline, so transformed content cannot change its trigger.
   All copy stays fully opaque. Unsupported browsers, no JS and reduced motion stay static. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js main > .section {
      view-timeline-name: --home-entry;
      view-timeline-axis: block;
    }
    html.js main > .section > .wrap {
      animation: home-enter linear both;
      animation-timeline: --home-entry;
      animation-range: entry 0% entry 25%;
    }
    /* The whole chapter now rises together; avoid the former second heading animation. */
    html.js main > .section :is(.label, h2) { animation: none; }
    html.js main > .section:focus-within > .wrap { animation: none; }
  }
}
@keyframes home-enter {
  from { transform: translateY(40px); }
  to { transform: translateY(0); }
}
@media (max-width: 759px) {
  @keyframes home-enter {
    from { transform: translateY(24px); }
    to { transform: translateY(0); }
  }
}

/* S-56: these three chapters reveal their contents as individual groups, not one early lift. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.js main > :is(.home-markets, .home-research, .home-eco) > .wrap { animation: none; }
    html.js main > :is(.home-markets, .home-research, .home-eco) :is(.label, h2) {
      animation: home-item-enter linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    html.js :is(.market-list > li, .company-strip > li) {
      view-timeline-name: --home-item;
      view-timeline-axis: block;
    }
    html.js :is(.market-list > li > a, .company-strip > li > *) {
      animation: home-item-enter linear both;
      animation-timeline: --home-item;
      animation-range: entry 0% cover 25%;
    }
    html.js .company-strip { --home-item-rise: 20px; }
    html.js :is(.market-list > li, .company-strip > li):focus-within * { animation: none; }
  }
}
@keyframes home-item-enter {
  from { transform: translateY(var(--home-item-rise, 36px)); }
  to { transform: translateY(0); }
}
@media (max-width: 759px) {
  :is(.home-markets, .home-research, .home-eco) { --home-item-rise: 24px; }
  html.js .company-strip { --home-item-rise: 16px; }
}