/* ───────────────────────────────────────────────────────────
   YDKM — protótipo da plataforma. Folha compartilhada.
   Tokens e componentes que valem em todas as telas do /nova.
   Cada página traz só o que é dela num <style> próprio.
   ─────────────────────────────────────────────────────────── */

@font-face{font-family:'Inter Tight';src:url('/fonts/InterTight-latin.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter Tight';src:url('/fonts/InterTight-latin-ext.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'YDKM Times Now';src:url('/fonts/TimesNow-SemiLight.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-400-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';src:url('/fonts/IBMPlexMono-400-latin-ext.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --papel:#F2F0ED; --ink:#000; --grey:#CCCAC6; --carvao:#1F2421; --accent:#FF5400; --mute:#7d7a76;
  --grot:'Inter Tight','Helvetica Neue',Arial,sans-serif;
  --serif:'YDKM Times Now','Times New Roman',Georgia,serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --pad:clamp(22px,5vw,64px); --col:1180px;
  /* Três tempos e uma curva no site inteiro. Antes cada componente
     inventava o seu (0.15 / 0.18 / 0.2 / 0.25 / 0.3 / 0.35 / 0.5s) — é o
     que tirava a sensação de sistema único. */
  --t-estado:120ms;   /* cor, fio, foco */
  --t-hover:240ms;    /* deslocamento, seta, escala */
  --t-entra:520ms;    /* entrada em tela */
  --curva:cubic-bezier(.22,.61,.36,1);
  --leitura:clamp(15px,1.25vw,17px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Sem scroll-snap. Mesmo em "proximity" ele puxava a página pra encaixar
   o bloco e tirava o controle do dedo — revista não corrige o leitor.
   As telas continuam existindo como altura; o scroll é livre. */
@media (min-width:761px) and (min-height:620px){
  .tela{min-height:100svh;scroll-margin-top:var(--topo-h,68px)}
}
body{margin:0;background:var(--papel);color:var(--ink);font-family:var(--grot);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--accent);color:#12100E}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
img{max-width:100%}

/* ── o grão ─────────────────────────────────────────────────
   Multiply a 30% sobre o papel, screen a 16% sobre o carvão, overlay a
   22% sobre foto. No claro ele suja de leve e dá temperatura de papel;
   no escuro precisa clarear, porque multiply sobre preto não aparece;
   sobre foto entra baixo, que a imagem já tem grão próprio.
   Sempre pointer-events:none — é pele, não camada. */
:root{
  /* Dessaturado (feColorMatrix saturate 0) e em ladrilho de 220px, igual
     ao da home no ar. O ruído colorido do /join-us salpica cor no papel
     e aparece como sujeira digital; sem croma, lê como fibra. */
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  /* baseFrequency baixa = manchas grandes; o grão fino fica por conta
     da camada de cima. Ladrilho grande pra não virar padrão visível. */
  --mancha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='620' height='620' filter='url(%23m)' opacity='.6'/%3E%3C/svg%3E");
}
.capa,.capa-issue{position:relative;isolation:isolate}
.capa::before,.capa-issue::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;background-image:var(--grao);mix-blend-mode:multiply;opacity:.52}
.bloco,.fim,.abre,.cartaz-cheio{position:relative;isolation:isolate}
.bloco::after,.fim::after,.abre::after,.cartaz-cheio::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background-image:var(--grao);mix-blend-mode:multiply;opacity:.52}
.escuro.bloco::after{mix-blend-mode:screen;opacity:.28}
/* Segunda camada, de baixa frequência: o ruído fino sozinho lê como
   granulado de foto. A mancha grande é o que faz parecer papel — fibra
   irregular, não poeira uniforme. Só no claro; no carvão empastela. */
.bloco::before,.fim::before,.abre::before,.cartaz-cheio::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--mancha);background-size:620px 620px;
  mix-blend-mode:multiply;opacity:.3}
.escuro.bloco::before{display:none}
/* Capa clara (home A e B) recebe a mancha também. Nas capas com foto o
   ::after já é o degradê que segura o contraste — lá a mancha não entra. */
.capa.claro::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:var(--mancha);background-size:620px 620px;
  mix-blend-mode:multiply;opacity:.3}
/* Sobre foto o grão entra mais discreto: a imagem já tem textura própria
   e o ruído em cima vira sujeira se pesar a mão. */
.faixa::after,.figura::after{content:"";position:absolute;inset:0;z-index:2;
  pointer-events:none;background-image:var(--grao);mix-blend-mode:overlay;opacity:.38}
.figura{position:relative;isolation:isolate}

/* ── as fotinhas da capa: presença visual atrás da marca ── */
/* O campo da capa. Cada foto carrega o próprio plano nas variáveis:
   --bl (desfoque) e --o (opacidade) dizem a que distância ela está, e
   --px/--py são o deslocamento que o fotos.js recalcula a cada quadro.
   O desfoque é FIXO por plano — desfoque animado repinta a imagem
   inteira a cada quadro e derruba o quadro no desktop também. */
#fotos{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#fotos figure{position:absolute;margin:0;opacity:0;will-change:transform;
  transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0)
            rotate(var(--r,0deg));
  transition:opacity var(--t-entra) var(--curva) var(--atraso,0ms)}
#fotos figure.dentro{opacity:var(--o,1)}
/* Quem sai leva mais tempo que quem entra e sai um pouco pra trás: a
   saída some por baixo da chegada, então a troca nunca tem um quadro de
   papel vazio no meio. */
#fotos figure.saindo{opacity:0;
  transform:translate(-50%,-50%) translate3d(var(--px,0px),var(--py,0px),0)
            rotate(var(--r,0deg)) scale(.97);
  transition:opacity 600ms var(--curva),transform 600ms var(--curva)}
#fotos img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.04) blur(var(--bl,0px))}

/* Sem movimento pedido: o campo continua existindo, parado e nítido.
   A profundidade some, a composição fica. */
@media (prefers-reduced-motion:reduce){
  #fotos figure{transition:none;opacity:var(--o,1)}
  #fotos img{filter:grayscale(1) contrast(1.04)}
}

/* ── etiqueta mono: a voz de serviço da marca ── */
.data{font-family:var(--mono);font-size:clamp(9px,1.05vw,10px);letter-spacing:.18em;
  text-transform:uppercase;color:var(--mute)}

/* ── topo ───────────────────────────────────────────────────
   Fica sempre disponível. A versão anterior vivia dentro da capa e
   sumia no primeiro scroll: no desktop a pessoa ia buscar o menu e não
   achava mais. Aqui ele gruda no topo e só ganha fundo depois que a
   página rola — nunca foge do cursor. */
.topo-site{position:sticky;top:0;z-index:60;
  transition:border-color var(--t-estado) var(--curva)}
.topo-site::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--grey);opacity:0;transition:opacity var(--t-estado) var(--curva)}
/* Transparente sempre, e sempre presente. Testamos esconder no scroll:
   sai do caminho, mas tira o menu de perto — e o menu perto é o que faz
   pular de território sem ter que voltar ao alto. Fica o desfoque do que
   passa por baixo e o fio; tampa de papel opaca cortava a superfície em
   duas e criava emenda logo acima da capa. O texto continua legível
   porque a área do .top está na lista de vetos do campo de fotos. */
.topo-site.preso{backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1)}
.topo-site.preso::after{opacity:1}
.topo-site.sobre-escuro.preso::after{background:rgba(242,240,237,.22)}
/* Barra transparente sobre superfície escura: o texto tem que virar
   papel, senão o menu preto some dentro do carvão. Quem liga e desliga é
   o ui.js, olhando o que está de fato embaixo da barra — assim isto vale
   pra capa do /join-us, pra do /issue-01 e pra qualquer bloco escuro que
   passe por baixo dela, sem cada página ter que se declarar. */
.topo-site.sobre-escuro .marca{color:var(--papel)}
.topo-site.sobre-escuro .marca:hover{color:var(--accent)}
.topo-site.sobre-escuro .nav a{color:rgba(242,240,237,.62)}
.topo-site.sobre-escuro .nav a:hover,
.topo-site.sobre-escuro .nav a[aria-current]{color:var(--papel)}

/* ── barra de leitura ──────────────────────────────────────
   Fica na borda de baixo do topo e enche conforme a matéria anda.
   Não é enfeite: é a única coisa na página que responde "falta
   muito?" antes de a pessoa rolar pra descobrir. Só aparece onde
   existe [data-lido] — o ui.js insere a barra e nada mais. */
.barra-lida{position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:0 50%;
  will-change:transform;z-index:1}
.top{display:flex;justify-content:space-between;align-items:baseline;
  gap:clamp(24px,8vw,80px);padding:clamp(18px,2.2vw,26px) var(--pad)}
.top .nav{display:flex;gap:clamp(18px,2.6vw,34px)}
.top a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;
  color:var(--mute);white-space:nowrap}
.top a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.top a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
/* A assinatura extensa, em contornos. O arquivo da Monga é texto vivo em
   Neue Haas — fonte licenciada, que não vai pro navegador — então os
   glifos foram convertidos em curvas: pesa 5,6kB e não depende de fonte.

   Entra como máscara e não como <img> pra herdar currentColor: assim a
   mesma assinatura serve no papel e no carvão sem um segundo arquivo. O
   texto continua no HTML para leitor de tela e para quem não tem máscara. */
/* A assinatura é a marca, não um item de serviço: vai em --ink cheio.
   O cinza --mute é a voz dos metadados, e a marca não é metadado. */
.top .marca{text-decoration:none;color:var(--ink)}
.top .marca:hover{color:var(--accent)}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .top .marca{display:block;width:clamp(122px,12.4vw,176px);aspect-ratio:1034/92.4;
    background:currentColor;
    -webkit-mask:url("/marks/ydkm-extensa.svg") no-repeat left center/contain;
            mask:url("/marks/ydkm-extensa.svg") no-repeat left center/contain;
    transition:color var(--t-estado) var(--curva)}
  .top .marca span{position:absolute;width:1px;height:1px;overflow:hidden;
    clip-path:inset(50%);white-space:nowrap}
}
/* A assinatura não tem linha de base de texto: com align-items:baseline o
   flex encosta a borda de baixo dela na base do menu e ela desce demais. */
.top{align-items:center}
@media (max-width:760px){.top{gap:10px 18px;flex-wrap:wrap}.top .nav{gap:16px}}

/* ── território genérico ── */
.bloco{display:flex;align-items:center;padding:clamp(60px,9vw,110px) var(--pad);
  border-top:1px solid var(--grey)}
.bloco-in{max-width:var(--col);margin:0 auto;width:100%}
.bloco .data.selo{display:block;margin-bottom:clamp(30px,5vw,56px)}
/* No celular os blocos precisam de mais ar entre si: sem a tela cheia
   do desktop separando um do outro, um território encosta no seguinte
   e a leitura vira uma coisa só. */
@media (max-width:760px){.bloco{padding-block:clamp(76px,21vw,116px)}}

/* ── títulos ── */
.display{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.038em;
  line-height:.88;font-size:clamp(34px,7vw,86px);text-wrap:balance}
.display em{display:block;font-family:var(--serif);font-style:italic;font-weight:300;
  text-transform:none;letter-spacing:-.005em;color:var(--mute);
  font-size:clamp(20px,3.1vw,34px);margin-top:12px}
/* line-height .95 em caixa alta acentuada não cabe: a caixa da linha
   andava 47px enquanto o glifo Ó ocupa 56px, então as duas linhas se
   sobrepunham 8px — e era ali que o agudo de PRÓPRIA caía, virando uma
   vírgula solta em cima de PLATAFORMA. 1.22 é a razão real do glifo
   (56/46) — abaixo disso as caixas se cruzam e o acento cai na linha de
   cima. Em caixa alta não parece solto, porque não há descendente
   nenhuma ocupando o espaço debaixo. Medido, não estimado. */
.medio{margin:0;font-weight:800;text-transform:uppercase;letter-spacing:-.032em;
  line-height:1.22;font-size:clamp(26px,4.2vw,46px);text-wrap:balance}
.corrido{margin:0;max-width:44ch;font-size:clamp(16px,1.7vw,20px);line-height:1.5;color:var(--mute)}
/* texto de leitura: a faixa que faltava entre o mono de 10px e o display */
.leitura{margin:0;max-width:62ch;font-size:var(--leitura);line-height:1.6;color:var(--mute)}
.leitura b{color:var(--ink);font-weight:500}
.corrido b{color:var(--ink);font-weight:600}
.corrido .grifo{font-family:var(--serif);font-style:italic;color:var(--ink)}

/* ── entradas (links de ação) ── */
.entradas{display:flex;flex-wrap:wrap;gap:14px 30px}
.entradas a{font-family:var(--mono);font-size:clamp(10px,1.15vw,11px);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--grey);padding-bottom:5px}
.entradas a:hover{border-bottom-color:var(--accent);color:var(--accent)}

/* ── lista numerada (serviços, peças da edição) ── */
.lista{border-top:1px solid var(--grey)}
/* Três filhos numa grade de duas colunas: sem posição definida, o
   parágrafo cai na coluna do número e quebra uma palavra por linha. */
.linha{display:grid;grid-template-columns:2.4rem 1fr;gap:6px 14px;padding:22px 0;
  border-bottom:1px solid var(--grey);align-items:start}
.linha .n{grid-column:1;grid-row:1;font-family:var(--mono);font-size:10.5px;
  color:var(--accent);padding-top:5px}
.linha h3{grid-column:2;grid-row:1;margin:0;font-weight:800;text-transform:uppercase;
  letter-spacing:-.02em;font-size:clamp(16px,1.9vw,21px);line-height:1.12}
.linha p{grid-column:2;grid-row:2;margin:0;color:var(--mute);
  font-size:clamp(14px,1.45vw,15.5px);line-height:1.45;max-width:44ch}
.linha p b{color:var(--ink);font-weight:500}
.linha .ir{grid-column:2;grid-row:3;justify-self:start;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mute);
  border-bottom:1px solid var(--grey);padding-bottom:4px;margin-top:8px}
.linha a.ir:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (min-width:820px){
  .linha{grid-template-columns:2.4rem minmax(0,14rem) 1fr;gap:0 26px;align-items:baseline}
  .linha p{grid-column:3;grid-row:1}
  .linha .ir{grid-column:3;grid-row:2;margin-top:10px}
}

/* ── peça anunciada, ainda não publicada ──
   Fica visível de propósito: mostra que o formato faz parte da edição e
   que ela se preenche ao longo do mês. Cinza, sem link, sem hover. */
.linha.espera h3,.linha.espera p{color:var(--grey)}
.linha.espera p b{color:var(--grey);font-weight:500}
.linha.espera .n{color:var(--grey)}
.linha.espera .ir{grid-column:2;grid-row:3;justify-self:start;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  border:1px solid var(--grey);padding:4px 8px;margin-top:10px}
@media (min-width:820px){.linha.espera .ir{grid-column:3;grid-row:2}}

/* ── lista viva: a pílula que viaja ───────────────────────
   Uma marca escura só, que desliza da linha que você deixou pra
   linha onde você está — em vez de cada linha acender sozinha.
   É uma coisa se movendo junto com o cursor, não seis luzes
   piscando. O raio é quase reto de propósito: pílula redonda é
   botão de aplicativo, e aqui é barra de tinta.

   A lista recua 14px e as linhas ganham o mesmo de dentro: assim
   a pílula sobra em volta do texto sem desalinhar a coluna com o
   resto da página. */
.lista.viva{position:relative;isolation:isolate;margin-inline:-14px}
.lista.viva .linha{padding-inline:14px}
.lista.viva a.linha{text-decoration:none;color:inherit}
.lista.viva .pilula{position:absolute;left:0;top:0;width:100%;height:0;
  border-radius:3px;background:var(--carvao);opacity:0;z-index:-1;pointer-events:none;
  box-shadow:0 18px 40px rgba(31,36,33,.17);
  transition:transform var(--t-hover) var(--curva),height var(--t-hover) var(--curva),
             opacity var(--t-estado) var(--curva)}

/* Quem não está sob o cursor recua. O atraso de 60ms é o que faz o
   texto virar quando a pílula chega, e não antes dela sair. */
.lista.viva .linha .n,.lista.viva .linha h3,.lista.viva .linha p,
.lista.viva .linha p b,.lista.viva .linha .ir{
  transition:color var(--t-estado) var(--curva) 60ms,
             border-color var(--t-estado) var(--curva)}
/* As irmãs recuam pro --mute, não pro --grey: --grey sobre papel dá
   1,2:1 e some. Recuar é tirar o foco, não apagar a linha. */
.lista.viva.mirando .linha h3,.lista.viva.mirando .linha p b{color:var(--mute)}
.lista.viva.mirando .linha p,.lista.viva.mirando .linha .n,
.lista.viva.mirando .linha .ir{color:var(--grey)}
.lista.viva .linha.alvo{border-bottom-color:transparent}
.lista.viva .linha.alvo h3,.lista.viva .linha.alvo p b{color:#F2F0ED}
.lista.viva .linha.alvo p{color:rgba(242,240,237,.72)}
.lista.viva .linha.alvo .n{color:var(--accent)}
.lista.viva .linha.alvo .ir{color:#F2F0ED;border-bottom-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .lista.viva .pilula{transition:opacity var(--t-estado) linear}
}

/* título que leva pra edição */
.palavra-link{text-decoration:none;border-bottom:3px solid transparent;display:inline-block}
.palavra-link:hover{border-bottom-color:var(--accent)}

/* ── linha de ação: o gesto de sistema ───────────────────────
   Uma linha clicável desliza e a seta acende. Transform em vez de
   padding: padding em transição repinta a linha a cada quadro. */
.linha-acao{display:block;text-decoration:none;
  transition:transform var(--t-hover) var(--curva)}
.linha-acao:hover{transform:translateX(10px)}
.linha-acao .seta{font-family:var(--mono);color:var(--mute);
  transition:color var(--t-estado) var(--curva)}
.linha-acao:hover .seta{color:var(--accent)}
@media (prefers-reduced-motion:reduce){.linha-acao:hover{transform:none}}

/* ── superfície escura ── */
.escuro{background:var(--carvao);color:#F2F0ED;border-top:0}
.escuro .data{color:rgba(242,240,237,.55)}
.escuro .display em{color:rgba(242,240,237,.6)}
.escuro .corrido{color:rgba(242,240,237,.88)}
.escuro .corrido b,.escuro .corrido .grifo{color:#F2F0ED}
.escuro .entradas a{border-bottom-color:rgba(242,240,237,.35);color:#F2F0ED}
.escuro .entradas a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.escuro .lista,.escuro .linha{border-color:rgba(242,240,237,.22)}
.escuro .linha p{color:rgba(242,240,237,.7)}
.escuro .linha p b{color:#F2F0ED}

/* ── imagem editorial ── */
.figura{margin:0;display:flex;flex-direction:column;gap:10px}
.figura img{display:block;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);background:var(--grey)}
.figura figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}
/* margin:0 é obrigatório — o navegador dá 40px de margem lateral a todo
   <figure>, e sem zerar isso a faixa de largura total estoura a página. */
.faixa{position:relative;margin:0;width:100%;aspect-ratio:24/9;overflow:hidden;background:var(--carvao)}
.faixa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.12) brightness(.85)}
.faixa figcaption{position:absolute;left:var(--pad);bottom:16px;z-index:2;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(242,240,237,.75)}
@media (max-width:760px){.faixa{aspect-ratio:16/10}}

/* ── vaga de imagem, quando o material ainda não existe ── */
.vaga{display:flex;align-items:center;justify-content:center;background:#E6E3DF;
  border:1px dashed var(--grey);aspect-ratio:3/2;width:100%}
.vaga span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);text-align:center;padding:12px}
.escuro .vaga{background:rgba(242,240,237,.06);border-color:rgba(242,240,237,.25)}
.escuro .vaga span{color:rgba(242,240,237,.55)}

/* ── rodapé ── */
/* ── o fim ──────────────────────────────────────────────────
   Com o topo saindo de cena no scroll, o rodapé virou a segunda porta de
   navegação da página — e não um crédito. Por isso os três destinos vêm
   grandes, em serifa, antes da linha de serviço: quem chegou até aqui
   leu tudo e está decidindo pra onde ir, não procurando um link miúdo. */
.fim{padding:clamp(52px,8vw,110px) var(--pad) clamp(32px,4.5vw,52px);
  border-top:1px solid var(--grey)}
.fim-nav{max-width:var(--col);margin:0 auto clamp(40px,6vw,76px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(2px,.6vw,8px)}
.fim-nav a{font-family:var(--serif);font-weight:300;text-decoration:none;
  color:var(--ink);font-size:clamp(30px,5.4vw,62px);line-height:1.08;
  letter-spacing:-.02em;
  transition:color var(--t-hover) var(--curva),opacity var(--t-hover) var(--curva)}
/* Uma escolhe, as outras recuam — o mesmo gesto da lista viva. */
.fim-nav:hover a{opacity:.32}
.fim-nav a:hover,.fim-nav a:focus-visible{opacity:1;color:var(--accent)}
.escuro .fim-nav a,.fim .fim-nav a{color:inherit}

.fim-in{max-width:var(--col);margin:0 auto;display:flex;flex-wrap:wrap;gap:12px 24px;
  justify-content:space-between;align-items:baseline}
.agora{font-size:clamp(15px,2vw,22px);font-weight:800;letter-spacing:-.025em}

/* ── a lista: o único acento em área da página ── */
.lista-mail{padding:clamp(40px,6vw,72px) var(--pad);border-top:1px solid var(--grey)}
.lista-in{max-width:var(--col);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:clamp(22px,4vw,48px);justify-content:space-between;align-items:flex-end}
.convite{margin:0;font-size:clamp(19px,2.6vw,28px);font-weight:500;letter-spacing:-.02em;
  line-height:1.15;text-wrap:balance;max-width:22ch}
.assinar{display:flex;flex-direction:column;gap:10px;flex:0 1 430px;min-width:min(100%,280px)}
.assinar form{display:flex;align-items:stretch;border-bottom:1px solid var(--ink)}
.assinar input[type=email]{flex:1;min-width:0;font-family:var(--grot);font-size:16px;
  background:transparent;border:0;outline:0;color:var(--ink);padding:6px 8px 7px 0}
.assinar input[type=email]::placeholder{color:#8f8b85}
.assinar form:focus-within{border-bottom-color:var(--accent);box-shadow:0 1px 0 0 var(--accent)}
.assinar button{flex:0 0 auto;width:34px;height:34px;display:grid;place-items:center;
  background:var(--accent);color:#12100E;border:0;cursor:pointer;align-self:center;
  font-family:var(--mono);font-size:14px;line-height:1;
  transition:opacity var(--t-estado) var(--curva),transform var(--t-estado) var(--curva)}
.assinar button:hover{opacity:.82}
.assinar button:active{transform:scale(.96)}
.assinar button:disabled{opacity:.4;cursor:default}
.msg{font-family:var(--mono);font-size:clamp(8px,1.5vw,10px);letter-spacing:.14em;
  text-transform:uppercase;min-height:12px;color:var(--mute)}
.msg[data-state="erro"]{color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--accent);text-underline-offset:3px}
/* armadilha de robô: fora da tela, nunca preenchida por gente */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:640px){.assinar button{width:44px;height:44px;font-size:16px}}

/* ── aviso de protótipo ── */
.aviso{background:var(--accent);color:#12100E;padding:7px var(--pad);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}
.aviso a{color:inherit}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto;scroll-snap-type:none}
}