/* 02 · Quem ensina (fo-) */
.fo-m1{right:-8%;top:6%;width:56vw;height:78vh;max-width:820px}
.fo-m2{left:-18%;bottom:-25%;width:60vw;height:60vh;max-width:800px}

.fo-palco{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,430px);column-gap:clamp(2.5rem,6vw,6rem);grid-template-areas:"texto retrato" "caminho retrato" "hoje hoje"}
.fo-fios{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.fo-fio{stroke:var(--wf-marfim);stroke-opacity:.35;stroke-width:1;fill:none;transition:stroke-dashoffset .6s var(--wf-curva)}
.fo-texto,.fo-caminho,.fo-retrato,.fo-hoje{position:relative;z-index:1}

.fo-texto{grid-area:texto}
.fo-texto .wf-t1{margin-bottom:1.4rem;max-width:14ch}
.fo-texto .wf-texto{max-width:58ch}

/* o caminho: 2007 → 2013 → 2015–2018, rótulo acima do ponto, subindo em direção ao retrato */
.fo-caminho{grid-area:caminho;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;align-items:end;margin-top:clamp(4.5rem,10vh,6.5rem);padding-bottom:5rem}
.fo-no{position:relative;padding-bottom:1.5rem}
.fo-no--a{transform:translateY(2.2rem)}
.fo-no--b{transform:none}
.fo-no--c{transform:translateY(-2.6rem)}
.fo-ponto{position:absolute;left:0;bottom:0;width:7px;height:7px;border-radius:50%;background:var(--wf-marfim);opacity:.45;transition:opacity .9s var(--wf-curva)}
.fo-ponto::after{content:"";position:absolute;inset:-11px;border-radius:50%;background:radial-gradient(closest-side,var(--wf-marfim-35),transparent);opacity:0;transition:opacity .9s var(--wf-curva)}
.fo-aceso .fo-ponto,.fo-aceso .fo-ponto::after{opacity:1}
.fo-no__ano{font-family:var(--wf-fonte-mono);font-weight:500;font-size:clamp(1.15rem,.9rem + .7vw,1.5rem);letter-spacing:-.01em;line-height:1.1;color:var(--wf-marfim-80);transition:color .7s var(--wf-curva)}
.fo-no__ano .wf-no__n{display:block;margin-bottom:.45rem;letter-spacing:.04em}
.fo-aceso .fo-no__ano{color:var(--wf-marfim)}
.fo-no__lugar{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:1.02rem;line-height:1.25;margin:.5rem 0 .3rem}
.fo-no__txt{font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);line-height:1.6;color:var(--wf-marfim-80);max-width:24ch}

/* o retrato é o destino do caminho: a parede se desfaz na noite do lado por onde o fio chega,
   e a foto acende junto com o nó 04 */
.fo-retrato{grid-area:retrato;align-self:end;margin-bottom:3rem;position:relative}
.fo-retrato__caixa{position:relative}
.fo-retrato__moldura{position:relative;aspect-ratio:4/5;border-radius:var(--wf-raio-caixa);overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,var(--wf-tinta) 30%);mask-image:linear-gradient(to right,transparent 0%,var(--wf-tinta) 30%);
  filter:brightness(.72) saturate(.8);transition:filter 1.4s var(--wf-curva)}
.fo-retrato--aceso .fo-retrato__moldura{filter:none}
.fo-retrato__img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.fo-retrato__moldura::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(to top,color-mix(in oklab,var(--wf-noite-3) 70%,transparent) 0%,transparent 26%),
  color-mix(in oklab,var(--wf-taupe) 14%,transparent)}
.fo-chegada{position:absolute;left:-3.5px;bottom:-1.7rem;width:7px;height:7px}
.fo-chegada .fo-ponto{left:0;bottom:0;background:color-mix(in oklab,var(--wf-luz) 45%,var(--wf-marfim))}
.fo-chegada .fo-ponto::after{inset:-15px;background:radial-gradient(closest-side,color-mix(in oklab,var(--wf-luz) 75%,transparent),transparent)}
.fo-chegada__txt{position:absolute;left:1.5rem;bottom:-.5em;line-height:1;font-family:var(--wf-fonte-mono);font-size:var(--wf-apoio);letter-spacing:.02em;white-space:nowrap;color:var(--wf-marfim)}
.fo-chegada__n{font-size:var(--wf-mono-xs);color:color-mix(in oklab,var(--wf-luz) 55%,var(--wf-marfim));margin-right:.3em}
.fo-retrato__leg{position:absolute;right:0;top:calc(100% + 1.7rem - 3.5px);line-height:1;transform:translateY(-50%);color:var(--wf-marfim-80)}

/* hoje, em Maringá: as quatro funções, em leque a partir do nó 04, em alturas desencontradas */
.fo-hoje{grid-area:hoje;margin-top:clamp(2.5rem,6vh,4rem);padding-bottom:3rem}
.fo-papeis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem}
.fo-papel{position:relative;padding-top:1.5rem}
.fo-papel--f{transform:translateY(2.4rem)}
.fo-papel--g{transform:translateY(.7rem)}
.fo-papel--h{transform:translateY(3rem)}
.fo-papel .fo-ponto{bottom:auto;top:0}
.fo-papel__nome{font-family:var(--wf-fonte-titulo);font-weight:600;font-size:var(--wf-t2);line-height:1.18;letter-spacing:-.01em;text-wrap:balance}
.fo-papel__onde{margin-top:.6rem;font-family:var(--wf-fonte-mono);font-size:var(--wf-mono);line-height:1.6;color:var(--wf-marfim-80)}

@media (max-width:899px){
  .fo-palco{grid-template-columns:minmax(0,1fr);grid-template-areas:"texto" "caminho" "retrato" "hoje"}
  .fo-caminho{grid-template-columns:1fr;gap:1.8rem;margin-top:2.6rem;padding-bottom:1.2rem}
  .fo-no,.fo-no--a,.fo-no--b,.fo-no--c{transform:none;padding:0 0 0 1.6rem}
  .fo-no .fo-ponto{bottom:auto;top:.5rem}
  .fo-no__ano .wf-no__n{display:inline;margin:0 .5em 0 0}
  .fo-no__txt{max-width:none}
  .fo-retrato{margin-bottom:0}
  .fo-retrato__moldura{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,var(--wf-tinta) 16%);mask-image:linear-gradient(to bottom,transparent 0%,var(--wf-tinta) 16%)}
  .fo-chegada{left:0}
  .fo-chegada__txt{left:1.6rem}
  .fo-retrato__leg{position:static;transform:none;margin-top:3rem;padding-left:1.6rem;line-height:1.6}
  .fo-hoje{margin-top:1.8rem;padding-bottom:0}
  .fo-papeis{grid-template-columns:1fr;gap:1.6rem}
  .fo-papel,.fo-papel--f,.fo-papel--g,.fo-papel--h{transform:none;padding:0 0 0 1.6rem}
  .fo-papel .fo-ponto{top:.6rem}
}