/* About — the gathered line: purpose sheet over the workshop, the six-knot spool of roles, the MILOMI Way chain */

/* ---------- Purpose: a mist sheet laid over the bottom of a wide panel ---------- */
.purpose__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.purpose__panel { grid-column: 1 / -1; grid-row: 1; }
.purpose__panel .panel__media { aspect-ratio: 21 / 9; }
/* the strand runs down the panel's open right edge, beside the sheet */
.purpose__panel::before { left: auto; right: -1px; top: 10%; bottom: -1px; }
html.motion .purpose__panel:not(.is-in) .panel__media { clip-path: inset(0 0 0 100%); }

.purpose__sheet {
  --pad: clamp(1.5rem, 3.5vw, 3.5rem);
  position: relative; z-index: 2;
  grid-column: 1 / span 10; grid-row: 2;
  margin-top: clamp(-11rem, -10vw, -4rem);
  padding: var(--pad) var(--pad) 0 var(--pad);
  background: var(--mist);
  box-shadow: -2px 0 0 var(--mist); /* hide the photo's antialiased edge under the sheet */
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem;
  align-items: start;
}
/* keep the eyebrow knot on the spine, out past the sheet's padding */
.purpose__sheet .eyebrow > .knot:first-child { left: calc(-1 * var(--rail) / 2 - 14px - var(--pad)); }
.purpose__head { grid-column: 1 / -1; }
.purpose__copy { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 1.5rem; align-items: start; }
.purpose__copy .lead { grid-column: 1 / span 5; max-width: 34ch; }
.purpose__copy .muted { grid-column: 6 / span 5; margin-top: 0; max-width: 44ch; padding-top: .35rem; }

@media (max-width: 899px) {
  .purpose__grid { grid-template-columns: minmax(0, 1fr); }
  .purpose__panel .panel__media { aspect-ratio: 4 / 3; }
  .purpose__sheet { --pad: 1.25rem; grid-column: 1; margin-top: -3rem; margin-right: 1.5rem; padding-right: 0; grid-template-columns: minmax(0, 1fr); }
  .purpose__head, .purpose__copy, .purpose__copy .lead, .purpose__copy .muted { grid-column: 1; }
  .purpose__copy .muted { padding-top: 0; }
}

/* ---------- Roles: one strand, six knots, names hung alternately above and below ---------- */
.roles__aside { font-size: var(--fs-lead); line-height: 1.45; max-width: 28ch; color: var(--ink); }

.spool { --arm: clamp(5.5rem, 7vw, 6.75rem); position: relative; margin-top: clamp(3.5rem, 7vw, 6rem); }
/* the resting hairline runs on past the last knot, toward the page edge */
.spool::before {
  content: ""; position: absolute; left: 0; right: calc(-1 * var(--margin));
  top: calc(var(--arm) + 13.5px); height: 1px; background: var(--rule);
}
.spool__strand {
  position: absolute; left: 0; right: calc(-1 * var(--margin));
  top: calc(var(--arm) + 13px); height: 2px;
  background: var(--green-600);
  transform-origin: left center;
}
html.motion .spool__strand { transition: transform 1.6s var(--ease-strand); }
.spool__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--gutter); }
.spool__list li { position: relative; display: grid; grid-template-rows: var(--arm) 28px var(--arm); }
.spool__list li:nth-child(2) { --k: 1; }
.spool__list li:nth-child(3) { --k: 2; }
.spool__list li:nth-child(4) { --k: 3; }
.spool__list li:nth-child(5) { --k: 4; }
.spool__list li:nth-child(6) { --k: 5; }
.spool .knot { grid-row: 2; align-self: center; justify-self: start; }
.spool .knot::before { background: var(--mist-2); }
.spool.is-in .knot::before { background-color: var(--forest); }
.spool.is-in .knot__n { color: var(--lime); }
.spool .knot__n { position: relative; z-index: 1; transition: color .4s ease calc(.6s + var(--k, 0) * .18s); }

.spool h3 {
  grid-row: 1; align-self: end;
  position: relative;
  width: max-content; max-width: calc(200% + var(--gutter));
  padding-bottom: 1.5rem;
  font-size: clamp(1.25rem, 1.9vw, 1.875rem);
}
.spool li:nth-child(even) h3 { grid-row: 3; align-self: start; padding-bottom: 0; padding-top: 1.5rem; }
.spool li:last-child h3 { width: auto; max-width: none; }
/* a short thread ties each name to its knot */
.spool h3::before { content: ""; position: absolute; left: 13.5px; bottom: .3rem; width: 1px; height: .8rem; background: var(--green-600); }
.spool li:nth-child(even) h3::before { bottom: auto; top: .3rem; }

/* drawn, then snapped in sequence: strand → knot → fill → name */
html.motion .spool li .knot::before {
  transition: transform .55s var(--ease-snap) calc(.2s + var(--k, 0) * .18s),
              background-color .5s ease calc(.6s + var(--k, 0) * .18s);
}
html.motion .spool li .knot__n { transition: opacity .3s ease calc(.35s + var(--k, 0) * .18s), color .4s ease calc(.6s + var(--k, 0) * .18s); }
html.motion .spool li h3 { transition: transform .8s var(--ease-strand), opacity .6s ease; transition-delay: calc(.4s + var(--k, 0) * .18s); }
html.motion .spool:not(.is-in) li h3 { opacity: 0; transform: translateY(14px); }
html.motion .spool:not(.is-in) li:nth-child(even) h3 { transform: translateY(-14px); }

@media (max-width: 899px) {
  .spool::before, .spool__strand { left: 13.5px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; }
  .spool__strand { left: 13px; width: 2px; transform-origin: center top; }
  html.motion .spool__strand:not(.is-in) { transform: scaleY(0); }
  .spool__list { grid-template-columns: minmax(0, 1fr); row-gap: 1.6rem; }
  .spool__list li { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto; column-gap: 1.25rem; align-items: center; }
  .spool .knot { grid-row: 1; grid-column: 1; }
  .spool h3, .spool li:nth-child(even) h3 { grid-row: 1; grid-column: 2; align-self: center; width: auto; max-width: none; padding: 0; }
  .spool h3::before { display: none; }
  html.motion .spool:not(.is-in) li h3, html.motion .spool:not(.is-in) li:nth-child(even) h3 { transform: translateX(-12px); }
}

/* ---------- The MILOMI Way: the chain tightens as you read it ---------- */
.way { padding-block: clamp(6rem, 12vw, 11rem); }
.way .spined::before { top: -100vh; bottom: -100vh; }
.way-chain {
  font-size: var(--fs-chain);
  line-height: 1.02;
  letter-spacing: 0;
  text-wrap: wrap;
  margin-top: .75rem;
}
.way-row { display: block; }
.way-row:nth-child(2) { padding-left: calc(100% / 12); }
.way-row:nth-child(3) { padding-left: calc(200% / 12); }
.way-pair { white-space: nowrap; }
.way-step { display: inline-block; letter-spacing: -.03em; }
.way-arrow {
  display: inline-block;
  font-weight: 200; font-stretch: 75%;
  color: var(--green-600);
  margin-inline: .06em .04em;
  transform-origin: center;
}
.way-chain em { display: inline-block; font-weight: 800; font-stretch: 100%; color: var(--forest); letter-spacing: -.03em; }
.way__more { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 899px) {
  .way-row, .way-row:nth-child(2), .way-row:nth-child(3) { padding-left: 0; }
  .way-pair, .way-chain em { display: block; }
}