/* metodo — "O resultado está na ordem." (prefixo me-) */
.me-topo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,96px);align-items:end;
  margin-bottom:clamp(56px,9vh,110px)}
.me-topo .wf-titulo{margin:0}
.me-intro{margin:0;max-width:26em}

/* a ordem: um parágrafo só, que se acende na ordem */
.me-ordem{font-family:var(--serifa);font-weight:400;font-size:clamp(2rem,1rem + 3.5vw,4.6rem);line-height:1.22;letter-spacing:-.015em;
  margin:0}
.me-um,.me-dep{white-space:nowrap;transition:color 1s var(--ease)}
.me-um sup,.me-dep small{font-family:var(--sans);font-size:max(14px,.27em);letter-spacing:.16em;text-transform:uppercase;font-weight:500;line-height:1}
.me-um sup{vertical-align:1.1em;margin-right:.2em;letter-spacing:.06em}
.me-dep small{vertical-align:.5em;margin:0 .1em 0 .15em}
.me-dep{color:rgb(var(--suave-rgb))}
.me-doce .me-dep{color:var(--acento)}
/* o marco entre um par e o próximo: um trecho do fio com o ponto do dia */
.me-marco{display:inline-block;position:relative;width:1.25em;height:.6em;margin:0 .18em 0 .3em;vertical-align:.05em;
  color:rgb(var(--tinta-rgb) / .55)}
.me-marco::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px)}
.me-marco::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;translate:-50% -50%;border-radius:50%;
  border:1px solid currentColor;background:var(--c0);transition:background .8s var(--ease), border-color .8s var(--ease)}
.me-aceso .me-marco::after,.no-js .me-marco::after{background:currentColor;transition-delay:calc(var(--d,0s) + .45s)}
.me-marco-doce{color:var(--acento)}

.js .me-um,.js .me-dep{color:rgb(var(--tinta-rgb) / .16)}
.js .me-um.me-aceso{color:rgb(var(--tinta-rgb))}
.js .me-dep.me-aceso{color:rgb(var(--suave-rgb))}
.js .me-doce .me-dep.me-aceso{color:var(--acento)}
.me-fonte{margin:clamp(22px,3vh,34px) 0 0}

/* fecho: a frase dela em dois tempos (um, depois o outro) */
.me-fecho{margin-top:clamp(96px,16vh,190px)}
.me-fecho-frase{margin:0}
.me-fecho .wf-gigante{font-size:clamp(3.2rem,1rem + 8vw,9.4rem);line-height:.96}
.me-l1,.me-l2{display:block}
.me-l2{padding-left:clamp(0px,18vw,300px)}
.me-fecho .wf-gigante em{font-style:normal;color:var(--acento)}
.me-fecho-lado{max-width:30em;margin:clamp(36px,6vh,64px) 0 0 auto}
.me-nao{font-family:var(--serifa);font-size:var(--t-voz);line-height:1.1;margin:0 0 .6em}
.me-fecho-lado .wf-corpo{margin:0}
.me-fecho-lado .wf-quem{margin:.9em 0 1.4em}

@media (min-width:900px){ .me-ordem{padding-right:clamp(0px,9vw,170px)} }
@media (max-width:899px){
  .me-topo{grid-template-columns:1fr}
  .me-l1,.me-l2{display:inline}
  .me-l2{padding-left:0}
  .me-fecho-lado{margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  .me-um,.me-dep,.me-marco::after{transition:none}
}