/* Como ele trabalha (prefixo me-) — "Cor, forma, medida". Fundo de ardósia; a mão com o disco sob um foco de luz morna, pousada sobre o trilho dos passos. */
.me-metodo{overflow:hidden; background:var(--tinta)}
.me-foco{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.me-foco i{position:absolute; border-radius:50%}
.me-foco i:nth-child(1){right:-8%; top:-18%; width:70vmax; height:70vmax;
  background:radial-gradient(closest-side, rgb(216 183 128 / .2), rgb(216 183 128 / 0));
  background:radial-gradient(closest-side in oklch, oklch(.78 .08 80 / .22), oklch(.78 .08 80 / 0))}
.me-foco i:nth-child(2){left:-14%; bottom:-30%; width:60vmax; height:60vmax;
  background:radial-gradient(closest-side, rgb(205 216 223 / .09), rgb(205 216 223 / 0));
  background:radial-gradient(closest-side in oklch, oklch(.86 .02 236 / .09), oklch(.86 .02 236 / 0))}

/* bloco de cima: texto à esquerda, a mão à direita, descendo até o trilho */
.me-alto{display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(2rem, 5vw, 5rem); align-items:end}
.me-texto h2{max-width:12em}
.me-apoio{margin-top:var(--e4)}

/* as três palavras dele, cada uma no seu tom da escala */
.me-tres{margin-top:var(--e5)}
.me-palavras{list-style:none; margin:var(--e2) 0 0; padding:0; display:flex; flex-direction:column; gap:.1rem}
.me-palavras li{display:flex; align-items:center; gap:1.1rem; font-family:var(--f-titulo); font-size:clamp(2rem, 1.4rem + 2vw, 3.3rem); line-height:1.1; letter-spacing:-.012em; color:var(--me-tom)}
.me-palavras .me-dente{width:1.9rem; height:2.1rem; flex:none; filter:drop-shadow(0 5px 5px rgb(0 0 0 / .45))}
.me-fala{margin:var(--e4) 0 0; max-width:30em; padding-left:1.4rem; border-left:1px solid var(--mel)}
.me-fala p{font-family:var(--f-titulo); font-size:1.2rem; line-height:1.35; text-wrap:pretty}
.me-fala footer{margin-top:.6rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--apoio-escuro)}

/* a mão com o disco: sobre o escuro, a manga se dissolve no fundo e desce até a fileira de objetos do trilho */
.me-mao{margin:0 0 -9.5rem; position:relative; justify-self:end; width:min(100%, 29rem)}
.me-mao::before{content:""; position:absolute; left:6%; right:-14%; top:-8%; height:72%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, rgb(220 197 160 / .22), rgb(220 197 160 / 0))}
.me-mao img{position:relative; width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 96%); mask-image:linear-gradient(to bottom, #000 78%, transparent 96%)}

/* o caminho da peça: seis passos num trilho; cada passo sobe de um pino, numa lâmina de tom crescente; os objetos da bancada pousam na linha acima */
.me-caminho{list-style:none; margin:var(--e4) 0 0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-template-rows:minmax(9rem, auto) 5.6rem auto; position:relative}
.me-passo{display:contents}
.me-passo:nth-child(1)>*{grid-column:1} .me-passo:nth-child(2)>*{grid-column:2} .me-passo:nth-child(3)>*{grid-column:3}
.me-passo:nth-child(4)>*{grid-column:4} .me-passo:nth-child(5)>*{grid-column:5} .me-passo:nth-child(6)>*{grid-column:6}
.me-caminho__rotulo{grid-row:1; align-self:end; margin:0 0 1.4rem}
.me-foto{grid-row:1; align-self:end; margin:0 0 1.2rem; border-radius:var(--raio); overflow:hidden; background:var(--tinta-3);
  box-shadow:0 0 0 1px var(--fio-escuro), 0 26px 34px -24px rgb(0 0 0 / .85)}
.me-foto img{width:100%; height:100%; object-fit:cover; filter:saturate(.68) brightness(.92)}
/* véu de ardósia: a foto de vídeo entra na paleta */
.me-foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(37 47 60 / .08), rgb(37 47 60 / .28)); pointer-events:none}
.me-foto{position:relative}
.me-passo:nth-child(2) .me-foto{width:62%; aspect-ratio:1; background:none; box-shadow:none; border-radius:0; overflow:visible}
.me-passo:nth-child(2) .me-foto::after{display:none}
.me-passo:nth-child(2) .me-foto img{object-fit:contain; filter:drop-shadow(0 16px 14px rgb(0 0 0 / .6))}
.me-passo:nth-child(3) .me-foto{width:calc(100% - var(--e3)); aspect-ratio:4/3}
.me-passo:nth-child(4) .me-foto{width:60%; aspect-ratio:3/4}
.me-liga{grid-row:1; align-self:stretch; justify-self:start; margin-left:1.2rem; width:1.5px; min-height:3rem; background:linear-gradient(to top, var(--aco), rgb(154 163 171 / 0) 90%)}
.me-marca{grid-row:2; position:relative; display:block; border-bottom:1px solid var(--fio-escuro)}
.me-haste{position:absolute; left:1.2rem; bottom:0; width:1.5px; height:1.6rem; background:linear-gradient(180deg, #c9d0d5, var(--aco))}
.me-haste::after{content:""; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; border-radius:50%; transform:translateX(-50%);
  background:radial-gradient(circle at 35% 30%, #d6dce0, var(--aco) 60%, #6f7881); box-shadow:0 1px 3px rgb(0 0 0 / .6)}
.me-marca .me-dente{position:absolute; left:-.2rem; bottom:calc(1.6rem - 2px); width:2.8rem; height:3.1rem; filter:drop-shadow(0 6px 6px rgb(0 0 0 / .5)); transition:transform .5s var(--curva), filter .5s var(--curva)}
.me-passo--prova .me-haste{height:2.8rem}
.me-passo--prova .me-marca .me-dente{bottom:calc(2.8rem - 2px); width:3.1rem; height:3.4rem; left:-.35rem; filter:drop-shadow(0 12px 10px rgb(0 0 0 / .6))}
.me-passo:hover .me-marca .me-dente{transform:translateY(-5px); filter:drop-shadow(0 12px 10px rgb(0 0 0 / .6))}
.me-passo__texto{grid-row:3; padding:1.2rem var(--e3) 0 0}
.me-num{display:block; font-size:var(--t-pequeno); letter-spacing:.14em; color:var(--me-tom); margin-bottom:.4rem}
.me-passo__texto h3{font-size:1.25rem; line-height:1.2}
.me-passo__texto p{margin-top:.5rem; font-size:.92rem; line-height:1.5; color:var(--apoio-escuro); max-width:15em}
.me-passo__texto q{quotes:"“" "”"; font-style:italic}

/* fecho: a frase dele e a ação */
.me-fecho{margin-top:var(--e6); padding-top:var(--e4); border-top:1px solid var(--fio-escuro); display:flex; justify-content:space-between; align-items:center; gap:var(--e4); flex-wrap:wrap}
.me-fecho__fala{margin:0; max-width:34em}
.me-fecho__fala p{font-family:var(--f-titulo); font-size:clamp(1.2rem, 1rem + .7vw, 1.5rem); line-height:1.3; text-wrap:balance}
.me-fecho__fala footer{margin-top:.5rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--apoio-escuro)}

@media (max-width:1100px){
  .me-alto{grid-template-columns:minmax(0, 6fr) minmax(0, 5fr)}
  .me-mao{margin-bottom:0}
  .me-caminho{grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:auto; margin-top:var(--e5)}
  .me-passo{display:grid; grid-template-rows:auto 5.6rem auto; grid-template-columns:1fr; padding-bottom:var(--e4)}
  .me-passo>*, .me-passo:nth-child(n)>*{grid-column:1}
  .me-caminho__rotulo{grid-row:1}
  .me-passo .me-foto{grid-row:1; width:60%; aspect-ratio:4/3; background:var(--tinta-3); box-shadow:0 0 0 1px var(--fio-escuro), 0 26px 34px -24px rgb(0 0 0 / .85); border-radius:var(--raio); overflow:hidden}
  .me-passo:nth-child(2) .me-foto img{object-fit:contain; padding:8%}
  .me-liga{display:none}
}
@media (max-width:860px){
  .me-alto{grid-template-columns:1fr; gap:var(--e4)}
  .me-mao{justify-self:center; width:min(84%, 22rem); margin:0 0 -2rem}
  .me-mao img{-webkit-mask-image:linear-gradient(to bottom, #000 70%, transparent 92%); mask-image:linear-gradient(to bottom, #000 70%, transparent 92%)}
  .me-apoio{margin-top:var(--e3)}
  .me-tres{margin-top:var(--e4)}
  .me-palavras li{font-size:clamp(1.8rem, 9vw, 2.6rem)}
  /* o trilho vira uma escala em pé: fio vertical, hastes horizontais, dentes deitados; foto embaixo do texto */
  .me-caminho{display:block; margin-top:var(--e5); position:relative; padding-left:0}
  .me-caminho::before{content:""; position:absolute; left:0; top:.4rem; bottom:.4rem; width:1px; background:var(--fio-escuro)}
  .me-caminho__rotulo{display:none}
  .me-passo{display:grid; grid-template-columns:5.6rem 1fr; grid-template-rows:auto auto; column-gap:.6rem; padding:0 0 var(--e4)}
  .me-passo .me-marca{grid-column:1; grid-row:1; height:3rem; border:0; align-self:start}
  .me-haste, .me-passo--prova .me-haste{left:0; top:1.4rem; bottom:auto; width:2rem; height:1.5px; background:linear-gradient(90deg, var(--aco), #c9d0d5)}
  .me-haste::after{left:-4px; top:50%; bottom:auto; transform:translateY(-50%)}
  .me-marca .me-dente, .me-passo--prova .me-marca .me-dente, .me-passo:hover .me-marca .me-dente{left:calc(2rem - 2px + .1rem); bottom:auto; top:.05rem; width:2.4rem; height:2.7rem; transform:rotate(90deg); filter:drop-shadow(4px 5px 6px rgb(0 0 0 / .5))}
  .me-passo .me-passo__texto{grid-column:2; grid-row:1; padding:.2rem 0 0}
  .me-passo__texto p{max-width:none}
  .me-passo .me-foto{grid-column:2; grid-row:2; margin:var(--e2) 0 0; width:min(100%, 15rem); aspect-ratio:3/2}
  .me-liga{display:none}
  .me-fecho{flex-direction:column; align-items:flex-start; gap:var(--e3)}
}