/*
 * public/assets/v7-home-brands.css — Word Of Clout agency, Direction v7
 * (home + /brands, Astra V135). Loaded by / and /brands, after
 * v4-arrival.css + v5-living-layer.css + v6-creator-offer.css.
 * Binding spec: inbox/woc-agency/Word-Of-Clout-V135-Creator-Acceptance-Home-and-Brands-Spec-2026-11-03.md
 * (sha256 20aa78308eb587a7…, VERIFIED) + copy source
 * Word-Of-Clout-V135-Page-Copy-2026-11-03.json (sha256 8a84b2b7aaaa536e…, VERIFIED).
 *
 * V135-02: white-first Plex Mono foundation, reusable grid, 18px reading
 * text, zero radius, 1px #E5E5E5 hairlines, ordinary text, stable focus.
 * No counters, no logos, no examples, no forms, no new JS (the pages load
 * the existing v5-living-layer.js only). No new palette, no new type sizes.
 */

/* --- HOME: two audience path panels (V135-03) ---
 * One hairline surface (same box as the /creators campaign-formats object:
 * 1px #E5E5E5 border, 32px padding, white), holding the availability status
 * line and the two equal path rows. Each path = one route label link +
 * one explanatory paragraph. One link per path; no repeated button+title.
 * Black emphasis stays reserved for interaction: the labels are ordinary
 * underlined text links, neither route looks selected or disabled. */
.fork {
  border: 1px solid var(--hairline);
  padding: 32px;
  background: var(--white);
}
.fork .avail { margin: 0 0 16px; }
.path { border-top: 1px solid var(--hairline); padding: 16px 0 0; }
.path-link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--black);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.path-link:hover { color: var(--ink); }
.path-link:focus-visible { outline: 2px solid var(--black); outline-offset: 3px; }
.path-link .arrow {
  display: inline-block;
  margin-left: 4px;
}
.path-desc {
  margin: 8px 0 16px;
  max-width: 62ch;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--black);
}

/* --- HOME 1440: the existing 1200px two-region grid (V135-03) ---
 * Proposition (eyebrow/H1/intro) left; availability + both paths right.
 * Grid placement only — the DOM keeps the source order; no duplicate
 * controls. The fork mirrors the .formats divider geometry (v4/v5). */
@media (min-width: 1440px) {
  .fork {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
    padding-left: 64px;
    border-left: 1px solid var(--hairline);
  }
}

/* --- HOME rule-draw: RETIRED AT THE C7 RE-CUT (Tani msg 15:33Z 2026-11-12,
 * Claude screen verdict F3): the draw animation dropped one static border
 * side (top at 390, left at 1440) from .fork and drew it via ::before —
 * the captured card showed a broken top-left corner; the law is a
 * continuous four-sided border. The static `border: 1px solid
 * var(--hairline)` from the .fork base rule above stands alone; the
 * woc-fork-draw keyframes are removed with it. Path-link contact
 * interactions below are untouched. --- */
@media (prefers-reduced-motion: no-preference) {
  /* path link interaction: the existing restrained contact interaction
     (arrow translateX(2px), color #000→#171717, 160ms canon easing) */
  .path-link { transition: color 160ms cubic-bezier(0.25, 0.10, 0.25, 1); }
  .path-link .arrow { transition: transform 160ms cubic-bezier(0.25, 0.10, 0.25, 1); }
  .path-link:hover .arrow,
  .path-link:focus-visible .arrow { transform: translateX(2px); }
}

/* --- /BRANDS supporting sections (V135-04): ordinary visible content,
 * same rhythm as the reading pages; no fixed-height hero, no compression
 * of 18px body copy. --- */
.supporting { padding-top: 64px; }
.supporting + .supporting { padding-top: 48px; }
.supporting h2 { margin: 0 0 12px; }
.supporting p {
  max-width: 62ch;
  margin: 12px 0 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: var(--black);
}
.supporting p:first-of-type { margin-top: 0; }