/* ==========================================================================
   HOME — page-specific layout only. Everything visual still comes from
   design-system/{tokens,base,components}.css + pages.css — nothing shared
   with other pages is redefined here, only composed.

   MD18 — reconstrução integral. A Home passa de 9 seções empilhadas para
   5 movimentos contínuos. O princípio de fluidez: consecutive movements
   share the EXACT SAME background token (dossie #17130F for movimentos
   01–03, autoridade #0E0C0A for 04–06) so there is zero visible color seam
   between them — the only tonal shift in the whole page happens once, at
   the boundary between 03 and 04, and is bridged with a soft gradient
   instead of a hard cut. Rhythm now comes from spacing weight and photo
   placement (alternating sides, bleeding past the container edge), not
   from alternating block colors. ========================================================================== */

/* ---- Movimento 01 — Impacto: capa editorial, foto à direita ----
   MD21: a referência da Fernanda (site.pdf) não dissolve esta foto — ela
   sangra inteira, nítida, e integra com o fundo porque o AMBIENTE da
   própria foto já é escuro/quente, não porque existe um efeito por cima
   dela. Reduzido ao mínimo: o brilho de fundo (herdado do MD20) continua,
   mas a máscara e a vinheta foram suavizadas quase a zero — só o
   suficiente para tirar a aresta de pixel, sem ler como "fade". */
.hero-editorial{
  position: relative;
  padding-block: var(--space-9);
  overflow: hidden;
  background:
    radial-gradient(ellipse 46% 58% at 76% 42%, rgba(84,66,50,0.38), transparent 72%),
    var(--color-bg);
}
.hero-editorial .container{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-9);
  align-items: center;
}
.hero-editorial .hero-copy{ text-align: left; }
.hero-editorial .hero-copy h1{ color: #F4EEE2; }
.hero-editorial .hero-subhead{ color: #C9BEB0; margin-top: var(--space-4); max-width: 34ch; }
.hero-editorial .hero-statement{ font-family: var(--font-display); font-size: var(--text-h3); color: #F4EEE2; margin-top: var(--space-5); }
.hero-editorial .hero-statement-support{ color: #9C9184; margin-top: var(--space-2); max-width: 36ch; }
.hero-editorial .hero-photo-wrap{
  width: min(42vw, 600px);
  aspect-ratio: 4 / 5;
  justify-self: end;
  margin-right: calc(-1 * var(--gutter) * 0.5);
  position: relative;
}
.hero-editorial .hero-photo-wrap img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 18%;
  filter: grayscale(0.15) sepia(0.05) contrast(1.02) brightness(1.02);
  /* MD21-fix2: com raio horizontal de 94%, a distância normalizada da
     borda esquerda/direita ao centro (50%/94%≈0.53) nunca entrava na faixa
     de transição (78–100%) fora dos cantos — a borda lateral ficava 100%
     opaca do topo à base, lida como uma linha reta. Raio vertical (100%,
     protege rosto e mãos) não muda; só o horizontal foi reduzido para 50%,
     o suficiente para a borda lateral tocar 0% de opacidade exatamente no
     limite físico da imagem, com a transição começando apenas nos últimos
     ~22% da largura — nada muda no miolo/rosto da foto. */
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 32%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 32%, #000 78%, transparent 100%);
}
/* Vinheta bem leve — só evita a aresta, não um fade perceptível. Raio
   horizontal reduzido na mesma proporção do mask acima, para a transição de
   luminância acompanhar a de transparência em vez de descasar dela. */
.hero-editorial .hero-photo-wrap::after{
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 54% 100% at 50% 32%, transparent 60%, rgba(23,19,15,0.55) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  /* MD21-fix2: sem mask própria, o radial-gradient acima estende a última
     cor (rgba 0.55) infinitamente além do seu raio, preenchendo todo o
     retângulo da wrap — isso sozinho já desenhava uma aresta reta na borda
     da foto, independente da máscara da <img>. Replicar a mesma máscara
     elíptica aqui faz a vinheta desaparecer de verdade no mesmo ponto em
     que a foto desaparece, em vez de continuar até o limite físico da caixa. */
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 50% 32%, #000 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 100% at 50% 32%, #000 78%, transparent 100%);
}
@media (max-width: 900px){
  .hero-editorial{ padding-block: var(--space-8); background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(84,66,50,0.32), transparent 74%), var(--color-bg); }
  .hero-editorial .container{ grid-template-columns: 1fr; text-align: center; gap: var(--space-6); }
  .hero-editorial .hero-copy{ text-align: center; order: 2; }
  .hero-editorial .hero-subhead{ margin-inline: auto; }
  .hero-editorial .hero-statement-support{ margin-inline: auto; }
  .hero-editorial .hero-photo-wrap{ order: 1; width: min(78vw, 460px); margin-inline: auto; margin-right:auto; justify-self: center; }
  .hero-editorial .hero-copy .btn-primary{
    white-space: nowrap;
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    padding: var(--space-3) var(--space-4);
  }
}

/* ---- Movimento 02 — Para quem é a consultoria Lapide-se (conteúdo da
   referência PDF — MD21). Foto sangra até a borda esquerda do container
   (quebra o grid de propósito — MD18 §7.2/§30), texto column à direita.
   Sem título de seção: a citação e a frase de abertura já cumprem esse
   papel, uma ideia levando à próxima sem "parede" de H2. ---- */
.movimento-posicionamento{
  position: relative;
  background:
    radial-gradient(ellipse 42% 62% at 18% 46%, rgba(74,58,44,0.34), transparent 70%),
    var(--color-bg);
}
/* AJUSTE FINAL §1: a sobreposição deliberada (foto cols 1–7, texto cols
   5–12) prejudicava a leitura — eyebrow/título caíam fisicamente sobre a
   foto. Trocado por duas colunas lado a lado, sem nenhuma coluna
   compartilhada: IMAGEM | CONTEÚDO, com espaço real entre as duas. O scrim
   que protegia o texto sobre a foto deixou de ser necessário e foi
   removido junto (nada mais fica sobre a fotografia). */
.posicionamento-grid{
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  column-gap: var(--space-8);
  align-items: center;
  padding-block: var(--space-9);
}
.posicionamento-copy{
  position: relative;
  padding-left: 0;
}
.posicionamento-photo{
  position: relative;
  aspect-ratio: 3 / 4;
  margin-left: calc(-1 * var(--gutter));
  overflow: hidden;
}
.posicionamento-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  object-position: center 22%;
  /* PROTÓTIPO ATMOSFERA — testado e revertido: esta foto tem fundo claro
     (parede e blazer brancos), bem diferente das fotos escuras de
     Empresas/Sobre onde a técnica (sépia + escurecimento radial) funcionou.
     Aqui, qualquer escurecimento suficiente para integrar as bordas criava
     uma vinheta oval nitidamente perceptível — exatamente o que o brief
     proíbe. Mantido o tratamento já aprovado (fade só nas laterais, ry
     100% protege topo/rosto; a borda inferior é resolvida pelo overlay
     sólido abaixo, não pela máscara). Ver relatório: limitação reportada,
     não resolvida nesta rodada. */
  -webkit-mask-image: radial-gradient(ellipse 48% 100% at 56% 30%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 48% 100% at 56% 30%, #000 62%, transparent 100%);
}
/* AJUSTE FINAL (2ª rodada): a tentativa anterior só afinava a máscara de
   transparência da própria foto — na borda exata da caixa, a transição de
   alfa ainda podia ler como uma aresta (o degradê terminava matematicamente
   em 0% bem no limite do retângulo, sem nenhuma margem). Substituído por um
   overlay sólido e opaco, pintado por cima da foto, que desenha o próprio
   degradê até a cor exata do fundo da seção — garante visualmente que não
   sobra nenhuma aresta, independente de precisão de máscara. Não depende
   de transparência: é cor contra cor. */
.posicionamento-photo::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, transparent 0%, transparent 82%, var(--color-bg) 100%);
  pointer-events: none;
}
.posicionamento-photo::after{
  content: "";
  position: absolute; inset: 0;
  z-index: 2;
  background: radial-gradient(ellipse 46% 98% at 56% 30%, transparent 42%, rgba(23,19,15,0.5) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  /* mesma correção do Hero: sem mask própria este gradiente preenchia o
     retângulo inteiro além do seu raio, desenhando uma aresta reta
     independente da máscara da <img>. */
  -webkit-mask-image: radial-gradient(ellipse 48% 98% at 56% 30%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 48% 98% at 56% 30%, #000 62%, transparent 100%);
}
.posicionamento-copy .lead-copy{ font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.35; margin-top: var(--space-3); max-width: 30ch; }
.posicionamento-copy .type-body{ margin-top: var(--space-5); color: var(--color-muted); max-width: 44ch; }
.manifesto-pull{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.375rem, 1.1vw + 1.05rem, 1.875rem);
  line-height: var(--leading-snug);
  color: var(--color-accent);
  max-width: 26ch;
  margin: var(--space-7) 0 0;
  padding-left: var(--space-5);
  border-left: 1px solid rgba(244,238,226,0.2);
}
.manifesto-pull cite{ display: block; margin-top: var(--space-4); font-style: normal; font-family: var(--font-body); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: #9C9184; }
.posicionamento-copy .btn{ margin-top: var(--space-6); }
@media (max-width: 900px){
  .posicionamento-grid{ grid-template-columns: 1fr; padding-block: var(--space-8); gap: var(--space-7); }
  .posicionamento-photo{ margin-left: auto; margin-right: auto; max-width: 420px; width: 100%; }
  .manifesto-pull{ margin-inline: auto; text-align: left; }
}

/* ---- Movimento 03 — Universo de atuação: composição tipográfica/
   navegacional, não três cards. Uma pergunta editorial, três palavras em
   escala grande separadas por hairlines, uma linha de saída discreta. ---- */
/* MD-refino: padding-block simétrico (space-9/space-9) somado ao padding
   igual do Movimento 02 somava ~192px de vão — lia como página longa, não
   como respiro intencional. Topo apertado (segue direto do Movimento 02),
   base um pouco mais folgada (antes da ponte tonal do Método). */
.movimento-universo{ padding-top: var(--space-7); padding-bottom: var(--space-8); text-align: center; }
/* MD-recomposição: o teto do clamp (2.25rem/3.25rem) já era atingido a
   partir de ~1100px — em telas de 1440px+ o bloco inteiro ficava pequeno
   diante do espaço negativo ao redor, lendo como "conteúdo perdido", não
   como respiro deliberado. Tetos elevados para a composição ocupar sua
   própria escala em telas grandes; mínimo e curva de crescimento mantidos. */
.universo-question{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.75rem);
  line-height: 1.35;
  max-width: 27ch;
  margin-inline: auto;
}
.universo-trio{
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  margin-top: var(--space-9);
}
.universo-item{
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw + 1rem, 4rem);
  color: var(--color-text);
  text-decoration: none;
  position: relative;
  padding-bottom: var(--space-2);
  transition: color var(--duration-base) var(--ease-standard);
}
.universo-item::after{
  content: "";
  position: absolute; left: 0; right: 100%; bottom: 0;
  height: 1px; background: var(--color-accent);
  transition: right var(--duration-slow) var(--ease-decisive);
}
.universo-item:hover, .universo-item:focus-visible{ color: var(--color-accent); }
.universo-item:hover::after, .universo-item:focus-visible::after{ right: 0; }
.universo-outro{ margin-top: var(--space-8); max-width: 52ch; margin-inline: auto; }
@media (max-width: 640px){
  .universo-trio{ flex-direction: column; gap: var(--space-5); margin-top: var(--space-8); }
}

/* ---- Movimento 04 — Método + autoridade: métodos, mídia e prova
   integrados numa composição única (não três seções separadas). Foto sangra
   até a borda direita — alterna o lado em relação ao Movimento 02, criando
   um ziguezague sutil ao longo da rolagem em vez de repetir o mesmo layout
   duas vezes seguidas. ---- */
/* MD-refino: topo apertado para var(--space-7) — a ponte tonal abaixo já
   faz o trabalho de marcar a transição, não precisa de 96px de vão vazio
   além dela. Base também reduzida (Métodos Autorais ganha o mesmo ajuste
   no próprio topo), mantendo a pausa grande só antes do Convite. */
.movimento-autoridade{
  position: relative;
  padding-top: var(--space-7);
  padding-bottom: var(--space-8);
}
/* Ponte de transição: única mudança de tom da página (dossie → autoridade),
   suavizada em vez de cortada — MD18 §10. Altura acompanha o novo
   padding-top da seção. */
.movimento-autoridade::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: var(--space-7);
  background: linear-gradient(to bottom, #17130F, var(--color-bg));
  pointer-events: none;
}
.metodo-autoridade-grid{
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: var(--space-9);
  position: relative;
}
/* MD19: fernanda-tv-eres.jpg é uma captura de tela de TV (logotipo da
   emissora, legenda embutida, magenta vívido) — é prova de mídia, não
   fotografia editorial. Tratada com escala contida e legenda, como o resto
   do site já faz com este mesmo arquivo (Resultados, Sobre), em vez de
   forçá-la a um tratamento de retrato em grande escala que só evidenciaria
   que é uma tela, não uma foto. */
.ma-photo{ grid-column: 2; width: 100%; max-width: 300px; justify-self: end; }
/* MD19: é uma captura de tela (prova), não retrato — dissolver como as
   fotos editoriais apagaria a legenda/logotipo que dá credibilidade à
   prova. Vinheta leve nos cantos apenas, miolo (legenda incluída) nítido.
   Especificidade igual a `.mask-open` (herdada do HTML) — como home.css
   carrega depois, esta regra prevalece só aqui. */
.portrait.ma-photo .portrait-img{
  filter: grayscale(0.6) brightness(0.72) contrast(1.05) saturate(0.75);
  -webkit-mask-image: radial-gradient(ellipse 96% 96% at 50% 42%, #000 62%, transparent 100%);
          mask-image: radial-gradient(ellipse 96% 96% at 50% 42%, #000 62%, transparent 100%);
}
.ma-copy{ grid-column: 1; grid-row: 1; }
/* .type-h2 (compartilhado com outras páginas) já atinge seu teto
   (2.5rem/40px) a partir de ~1100px — nesta seção especificamente, numa
   tela de 1440px+, isso lia pequeno. Sobrescrita só aqui, token global
   intocado (outras páginas continuam usando .type-h2 como está). */
.ma-copy h2{ margin-top: var(--space-3); max-width: 17ch; font-size: clamp(1.75rem, 1.8vw + 1.4rem, 3.25rem); }
.ma-copy .type-body{ margin-top: var(--space-5); max-width: 46ch; }
.ma-media{ display: flex; gap: var(--space-6); margin-top: var(--space-7); flex-wrap: wrap; }
.ma-media .outlet{ font-family: var(--font-body); font-weight: 600; font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); padding-bottom: var(--space-2); border-bottom: 1px solid rgba(244,238,226,0.16); }
.ma-quote{
  font-family: var(--font-display); font-style: italic; font-size: var(--text-h3);
  margin-top: var(--space-7); max-width: 26ch; color: var(--color-text);
}
.ma-quote cite{ display: block; margin-top: var(--space-3); font-style: normal; font-family: var(--font-body); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--color-muted); }
.movimento-autoridade .link-arrow{ margin-top: var(--space-6); display: inline-flex; }
@media (max-width: 900px){
  .metodo-autoridade-grid{ grid-template-columns: 1fr; gap: var(--space-7); }
  .ma-photo{ grid-column: 1; grid-row: 1; margin-inline: auto; max-width: 240px; width: 100%; justify-self: center; }
  .ma-copy{ grid-column: 1; grid-row: 2; }
}

/* ---- Movimento 05 — Métodos autorais (conteúdo e composição da
   referência PDF — MD21). Texto sobreposto diretamente sobre a fotografia
   (não ao lado dela), como a referência mostra para esta seção
   especificamente — diferente do resto da Home, onde texto e foto ficam
   em colunas. Painéis usam fernanda-sobre-hero-v2.jpg e
   fernanda-lapide-se-closet.jpg (já aprovadas) em vez das imagens de
   still-life/ambiente da referência, que não existem em assets/img/. */
/* MD-refino: topo apertado (segue direto do Método+autoridade); base mantém
   space-9 — esse, sim, é um respiro intencional antes do Convite, a pausa
   narrativa da página, não "espaço que só deixa a página comprida". */
.movimento-metodos-autorais{ padding-top: var(--space-7); padding-bottom: var(--space-9); }
/* AJUSTE FINAL §2: o bloco de intro inteiro (eyebrow+título+apoio) ficava
   preso a max-width:46ch, concentrado à esquerda, com um vazio grande à
   direita no resto da largura do .container. Redistribuído em duas
   colunas — título à esquerda, texto de apoio à direita, alinhado à base
   do título — em vez de aumentar a fonte para preencher o espaço. */
.metodos-intro{
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1fr);
  column-gap: var(--space-8);
  max-width: none;
}
.metodos-intro .eyebrow{ grid-column: 1; grid-row: 1; }
.metodos-intro h2{ grid-column: 1; grid-row: 2; margin-top: var(--space-3); line-height: 1.15; }
.metodos-intro .type-body{ grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; max-width: 40ch; }
@media (max-width: 760px){
  .metodos-intro{ grid-template-columns: 1fr; }
  .metodos-intro .type-body{ grid-column: 1; grid-row: 3; align-self: auto; margin-top: var(--space-5); max-width: 42ch; }
}
/* AJUSTE FINAL §3: a colagem assimétrica (VisageVision 68%/560px vs.
   Lapide-se 42%/400px sobreposto) deixava os dois métodos com peso visual
   desigual. Trocado por duas colunas lado a lado, mesma largura e mesma
   altura — composição equilibrada, sem sobreposição entre os painéis. */
.metodos-panels{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}
.metodo-panel{
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  width: 100%;
  min-height: 560px;
}
.metodo-panel:first-child .metodo-panel-content,
.metodo-panel:last-child .metodo-panel-content{ max-width: none; }
/* Mesma família tonal nas duas fotos — uma é um retrato já em P&B, a outra
   uma cena de closet em cor; sem um tratamento compartilhado, a diferença
   de cor por si só já lia como "duas coisas diferentes" em vez de duas
   expressões do mesmo método. */
.metodo-panel-bg{
  position: absolute; inset: 0;
  z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) sepia(0.08) contrast(1.04);
  transition: filter var(--duration-slow) var(--ease-standard);
}
.metodo-panel:hover .metodo-panel-bg{ filter: grayscale(0.2) sepia(0.08) contrast(1.05) brightness(1.03); }
.metodo-panel::before{
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  /* MD21 fix: ::before nasce antes do <img> real no DOM, então sem um
     z-index explícito o navegador pintava a foto POR CIMA do degradê,
     anulando-o — o painel do Lapide-se (roupas claras bem atrás do texto)
     ficava quase ilegível. z-index força o degradê acima da foto e abaixo
     do texto, nessa ordem. */
  /* AJUSTE FINAL §3: estágios intermediários escurecidos (0.6→0.72 aos 80%,
     0.2→0.4 no topo) para o texto ficar legível nos dois painéis — incluindo
     o VisageVision®, cuja foto tem áreas mais claras no terço superior —
     sem depender da imagem ou cobrir o quadro inteiro. */
  background: linear-gradient(to top, rgba(14,12,10,0.97) 0%, rgba(14,12,10,0.94) 55%, rgba(14,12,10,0.72) 80%, rgba(14,12,10,0.4) 100%);
}
.metodo-panel-content{
  position: relative; z-index: 2;
  height: 100%;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.metodo-panel-content .method-name{ margin-top: var(--space-2); color: #F4EEE2; }
.metodo-tagline{ font-family: var(--font-display); font-style: italic; color: var(--color-accent); margin-top: var(--space-2); }
.metodo-desc{ color: #C9BEB0; margin-top: var(--space-3); max-width: 38ch; }
/* Círculo com borda lia como ícone de componente de UI (botão "play"), não
   como marca editorial — substituído por um sinal tipográfico que já
   existe na página (serifa itálica em accent, mesma família do
   manifesto-pull do Movimento 02), que só se desloca no hover em vez de
   ganhar um preenchimento. */
.metodo-arrow{
  display: inline-block;
  margin-top: var(--space-5);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.375rem;
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-decisive);
}
.metodo-panel:hover .metodo-arrow{ transform: translateX(5px); }
.metodos-closing{ text-align: center; margin-top: var(--space-9); }
.metodos-closing-quote{ font-family: var(--font-display); font-size: var(--text-h3); line-height: 1.3; }
.metodos-closing .btn-secondary{ margin-top: var(--space-6); border-color: rgba(244,238,226,0.4); color: #F4EEE2; }
.metodos-closing .btn-secondary:hover{ background: #F4EEE2; color: var(--color-bg); }
@media (max-width: 760px){
  .metodos-panels{ grid-template-columns: 1fr; gap: var(--space-5); }
  .metodo-panel{ min-height: 420px; }
}

/* ---- Footer editorial (Home only — other pages keep the standard
   .site-footer from components.css untouched) ----
   AJUSTE FINAL §4: Movimento 06 (Convite) e o bloco de marca/tagline/CTA do
   footer foram removidos — o encerramento da Home passa a ser só o
   fechamento de Métodos Autorais ("Não são regras. É leitura de imagem." +
   "Conhecer os métodos →"). Padding-top do footer reduzido (não precisa
   mais acomodar um título+parágrafo+botão acima) e a margem que separava
   .footer-links desse bloco removida, já que agora é o primeiro elemento. */
.footer-editorial{ background: #0E0C0A; color: #F4EEE2; border-top: none; padding-block: var(--space-7) var(--space-6); text-align: center; }
.footer-editorial .footer-links{ margin-top: 0; padding-top: var(--space-6); border-top: 1px solid rgba(244,238,226,0.14); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-6); }
.footer-editorial .footer-links a{ font-family: var(--font-body); font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-label); color: #9C9184; text-decoration: none; }
.footer-editorial .footer-links a:hover{ color: #F4EEE2; }
.footer-editorial .legal{ margin-top: var(--space-6); font-family: var(--font-body); font-size: var(--text-caption); color: #9C9184; }