/* temas — a base dela (quatro pilares na ordem do dia) e para quem ela trabalha */
.te{--te-gap:clamp(36px,5vw,96px);--te-prog:0}
.te-topo{margin-bottom:clamp(56px,9vh,120px)}
.te-topo .wf-titulo{max-width:14em}

/* os pilares: o fio do dia vira o eixo vertical da tarde, desenhado com a rolagem */
.te-pilares{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(90px,13vh,170px)}
.te-pilares::before,.te-pilares::after{content:"";position:absolute;left:50%;top:0;width:1px;translate:-.5px 0;pointer-events:none}
.te-pilares::before{bottom:0;background:repeating-linear-gradient(180deg, rgb(var(--tinta-rgb) / .4) 0 5px, transparent 5px 9px)}
.te-pilares::after{height:100%;background:rgb(var(--tinta-rgb) / .8);transform-origin:top;scale:1 var(--te-prog)}
.te-pilar{display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative}
.te-foto{margin:0;position:relative;overflow:hidden;background:var(--c2)}
.te-foto img{width:100%;height:100%;object-fit:cover}
.te-texto{max-width:31rem;position:relative;z-index:2}
.te-pilar:nth-child(odd) .te-foto{grid-column:1;grid-row:1;justify-self:end;margin-right:var(--te-gap)}
.te-pilar:nth-child(odd) .te-texto{grid-column:2;grid-row:1;padding-left:var(--te-gap)}
.te-pilar:nth-child(even) .te-foto{grid-column:2;grid-row:1;justify-self:start;margin-left:var(--te-gap)}
.te-pilar:nth-child(even) .te-texto{grid-column:1;grid-row:1;justify-self:end;padding-right:var(--te-gap)}

/* tamanhos diferentes: o dia não tem quatro horas iguais */
.te-p1 .te-foto{width:min(19vw,270px);aspect-ratio:3/4}
.te-p1 .te-foto img{filter:saturate(.72) brightness(1.04)}
.te-p2 .te-foto{width:calc(50vw - var(--te-gap));aspect-ratio:4/3;border-radius:999px 0 0 4px}
.te-p4 .te-foto{width:min(30vw,440px);aspect-ratio:540/594}
.te-p4 .te-foto img{filter:sepia(.18) saturate(.9)}

/* a palavra gigante atravessa o eixo e encosta na foto */
.te-palavra{display:block;font-family:var(--serifa);font-weight:400;font-size:clamp(3.6rem,1rem + 9vw,10.5rem);line-height:.9;letter-spacing:-.03em;margin:0 0 .16em;padding-top:.12em}
.te-pilar:nth-child(odd) .te-palavra{margin-left:calc(-1 * var(--te-gap) - .28em)}
.te-pilar:nth-child(even) .te-texto{text-align:right}
.te-pilar:nth-child(even) .te-hora{justify-content:flex-end}
.te-pilar:nth-child(even) .te-palavra{margin-right:calc(-1 * var(--te-gap) - .28em)}
.te-pilar:nth-child(even) .te-texto .wf-corpo{margin-left:auto}

/* o marco fica no eixo */
.te-hora{display:flex;align-items:center;gap:12px;margin:0 0 1em;font-size:var(--t-rot);letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;font-variant-numeric:tabular-nums;color:rgb(var(--suave-rgb))}
.te-marca{position:absolute;width:11px;height:11px;border-radius:50%;border:1px solid rgb(var(--tinta-rgb) / .7);background:var(--c0);
  top:.35em;transition:background .8s var(--ease), box-shadow .8s var(--ease)}
.te-pilar:nth-child(odd) .te-marca{left:-5.5px}
.te-pilar:nth-child(even) .te-marca{right:-5.5px}
.te-pilar.te-on .te-marca{background:rgb(var(--tinta-rgb));box-shadow:0 0 0 6px color-mix(in oklab, var(--c2) 70%, transparent)}
.te-nome{margin:0 0 .9rem;font-family:var(--sans);font-weight:500;font-size:1.05rem;letter-spacing:.02em;color:rgb(var(--tinta-rgb))}
.te-dela{font-family:var(--serifa);font-size:clamp(1.3rem,1rem + .8vw,1.75rem);line-height:1.3;margin:0;text-wrap:balance;color:rgb(var(--tinta-rgb))}

/* força: a faixa escura do meio da tarde (foto sangrando, a conta por cima) */
.te-p3{grid-template-columns:1fr;z-index:1;min-height:clamp(560px,86vh,860px);align-items:end}
.te-p3 .te-foto,.te-pilar.te-p3 .te-foto{grid-column:1;grid-row:1;justify-self:stretch;margin:0;width:100%;height:100%;position:absolute;inset:0;background:#1e1412}
.te-p3 .te-foto::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg, rgb(30 20 18 / .9) 0%, rgb(30 20 18 / .72) 38%, rgb(30 20 18 / .12) 72%),
             linear-gradient(0deg, rgb(30 20 18 / .55), transparent 45%)}
.te-p3 .te-texto,.te-pilar.te-p3 .te-texto{grid-column:1;grid-row:1;justify-self:start;padding:0 0 clamp(48px,9vh,96px) var(--margem);max-width:min(46rem,92vw);
  color:#fbefe9;--tinta-rgb:251 239 233;--suave-rgb:236 214 208}
.te-p3 .te-palavra{margin-left:-.05em!important;font-size:clamp(4.4rem,1rem + 13vw,15rem);line-height:.82}
.te-p3 .te-marca{display:none}
.te-p3 .te-hora::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}

/* a conta */
.te-conta{display:grid;gap:.55rem;margin-top:1.4rem}
.te-conta p{display:grid;grid-template-columns:11.5em 1.2em 1fr;align-items:baseline;margin:0;font-size:var(--t-corpo)}
.te-conta em{font-style:normal;color:var(--cereja-noite)}
.te-conta b{font-weight:400;color:var(--cereja-noite);text-align:center}
.te-conta .te-junto{font-family:var(--serifa);font-size:clamp(1.5rem,1rem + 1.4vw,2.4rem);grid-template-columns:auto 1.2em 1fr;gap:0 .3em;margin-top:.5rem;line-height:1.15}

/* para quem */
.te-quem{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,110px);margin-top:clamp(110px,16vh,200px);align-items:start}
.te-quem-cab{position:sticky;top:18vh}
.te-quem-titulo{font-family:var(--serifa);font-weight:400;font-size:var(--t-sec);line-height:1.04;margin:.35em 0 .9em;text-wrap:balance}
.te-lista{list-style:none;margin:0;padding:0}
.te-lista li{padding:clamp(22px,3vh,34px) 0;border-top:1px solid rgb(var(--tinta-rgb) / .22)}
.te-lista li:last-child{border-bottom:1px solid rgb(var(--tinta-rgb) / .22)}
.te-alvo{font-family:var(--serifa);font-size:clamp(1.6rem,1rem + 1.7vw,2.7rem);line-height:1.12;margin:0 0 .55em;text-wrap:balance;position:relative}
.te-n{display:block;font-family:var(--sans);font-size:var(--t-rot);letter-spacing:.18em;font-weight:500;color:var(--acento);margin-bottom:.9em;font-variant-numeric:tabular-nums}
.te-cit{margin:0;color:rgb(var(--suave-rgb));max-width:34em}

/* gesto: cada foto nasce de baixo, como o sol subindo, e o marco do eixo enche */
.js .te-foto img{clip-path:inset(100% 0 0 0);scale:1.08;transition:clip-path 1.4s var(--ease), scale 2.4s var(--ease)}
.js .te-pilar.te-on .te-foto img{clip-path:inset(0);scale:1}
.js .te-pilar .te-texto > *{opacity:0;translate:0 12px;transition:opacity 1s var(--ease), translate 1.1s var(--ease)}
.js .te-pilar.te-on .te-texto > *{opacity:1;translate:none}
.js .te-pilar.te-on .te-texto > :nth-child(2){transition-delay:.35s}
.js .te-pilar.te-on .te-texto > :nth-child(3){transition-delay:.55s}
.js .te-pilar.te-on .te-texto > :nth-child(4){transition-delay:.75s}

@media (max-width:760px){
  .te-pilares::before,.te-pilares::after{left:calc(var(--margem) / 2)}
  .te-pilares{gap:72px}
  .te-pilar{grid-template-columns:1fr;row-gap:26px}
  .te-pilar:nth-child(n) .te-foto{grid-column:1;grid-row:1;justify-self:center;margin:0}
  .te-pilar:nth-child(n) .te-texto{grid-column:1;grid-row:2;justify-self:stretch;padding:0 var(--margem) 0 calc(var(--margem) + 8px)}
  .te-pilar:nth-child(n) .te-palavra{margin:0 0 .12em;text-align:left}
  .te-pilar:nth-child(n) .te-marca{left:calc(var(--margem) / 2 - 5.5px);right:auto}
  .te-p1 .te-foto{width:56vw}
  .te-p2 .te-foto{width:calc(100vw - var(--margem));justify-self:end!important}
  .te-p4 .te-foto{width:70vw}
  .te-p3{min-height:0;grid-template-rows:auto auto}
  .te-pilar.te-p3 .te-foto{position:relative;inset:auto;height:auto;aspect-ratio:4/3}
  .te-p3 .te-foto img{object-position:30% 50%}
  .te-p3 .te-foto::after{background:linear-gradient(0deg, #1e1412 0%, rgb(30 20 18 / 0) 55%)}
  .te-pilar.te-p3 .te-texto{grid-row:2;background:#1e1412;padding:0 var(--margem) 56px;max-width:none;margin-top:-26px}
  .te-p3 .te-hora{margin-top:-.2em}
  .te-conta p{grid-template-columns:auto 1.2em 1fr;gap:0 .2em}
  .te-quem{grid-template-columns:1fr}
  .te-quem-cab{position:static}
  .te-pilar:nth-child(n) .te-texto{text-align:left}
  .te-pilar:nth-child(n) .te-hora{justify-content:flex-start}
  .te-hora{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .js .te-foto img,.js .te-pilar .te-texto > *{clip-path:none;scale:none;opacity:1;translate:none;transition:none}
  .te{--te-prog:1!important}
}