/* =========================================================================
   mojogui — folha única.
   Ordem: tokens · base · atmosfera · layout · tipografia · topo · fluxo ·
          texto · lateral · rodapé · blocos · animações · utilidades.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --mj-papel:      #f2ede6;
  --mj-papel-fundo:#e7dfd3;
  --mj-tinta:      #17140f;
  --mj-tinta-fraca:#5c5347;
  --mj-vinho:      #5b242f;
  --mj-musgo:      #263324;
  --mj-ameixa:     #433239;
  --mj-argila:     #99826c;

  --mj-bg:        var(--mj-papel);
  --mj-sunk:      var(--mj-papel-fundo);
  --mj-fg:        var(--mj-tinta);
  --mj-fg-dim:    var(--mj-tinta-fraca);
  --mj-accent:    var(--mj-accent-custom, var(--mj-vinho));
  --mj-rule:      #c4b5a2;
  --mj-rule-forte:var(--mj-argila);
  --mj-band:      var(--mj-vinho);
  --mj-band-fg:   #f0e6dd;
  --mj-band-rule: #a97f86;
  --mj-band-dim:  #d9c3c4;
  /* Realce de hover: clareia o papel sem virar outra cor. */
  --mj-realce:    rgba(255, 255, 255, .62);
  --mj-realce-grao: .10;
  /* Grão das superfícies (carta, caixas da lateral). */
  --mj-grao-caixa: .13;
  /* Superfície de campo: um degrau acima do papel, sem virar outra cor. */
  --mj-campo: rgba(23, 20, 15, .055);

  --f-titulo: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --f-corpo:  "Source Serif 4", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --f-mono:   "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --passo-1: .5rem;
  --passo-2: .875rem;
  --passo-3: 1.5rem;
  --passo-4: 2.5rem;
  --passo-5: 4rem;
  --passo-6: 6rem;

  --largura-texto: 42rem;
  --largura-total: 72rem;
  --largura-lateral: 15rem;

  /* Caneta: acelera devagar, encosta com um leve excesso. */
  --pena:  cubic-bezier(.2, 1.22, .32, 1);
  --calmo: cubic-bezier(.22, 1, .36, 1);

  /* Um grão só, reaproveitado pelo fundo da página e pelo realce de hover. */
  --mj-grao: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%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(%23g)'/%3E%3C/svg%3E");

  --sublinhado: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C20 3.1 34 6.4 52 4.5 70 2.6 86 6.1 119 3.9' fill='none' stroke='%235b242f' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  --sublinhado-claro: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5.2C20 3.1 34 6.4 52 4.5 70 2.6 86 6.1 119 3.9' fill='none' stroke='%23f0e6dd' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Os tons de hora vêm antes do modo escuro de propósito: o escuro precisa
   ganhar deles, e aqui quem vem depois ganha. */

/* O papel muda de tom com a hora local de quem lê. Dois por cento de
   diferença: você não vê acontecer, mas a página de madrugada não é a
   mesma página do meio da tarde. */
:root[data-hora="madrugada"] { --mj-bg: #ece8e4; --mj-sunk: #e0dad2; }
:root[data-hora="manha"]     { --mj-bg: #f4f0e8; --mj-sunk: #e9e2d6; }
:root[data-hora="entardecer"]{ --mj-bg: #f4ebdf; --mj-sunk: #e9decd; }
:root[data-hora="noite"]     { --mj-bg: #ece6de; --mj-sunk: #e0d8cb; }

/* Escuro por preferência do sistema — a menos que o leitor tenha escolhido claro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) {
    --mj-bg:        #16130f;
    --mj-sunk:      #221d19;
    --mj-fg:        #e9e1d6;
    --mj-fg-dim:    #a2968a;
    --mj-accent:    var(--mj-accent-custom, #d8a1ab);
    --mj-rule:      #3b332e;
    --mj-rule-forte:#6d5f53;
    --mj-band:      var(--mj-ameixa);
    --mj-band-fg:   #f0e6dd;
    --mj-band-rule: #7a6069;
    --mj-band-dim:  #c9b4b8;
    --mj-realce:    rgba(255, 255, 255, .055);
    --mj-realce-grao: .07;
    --mj-grao-caixa: .09;
    --mj-campo: rgba(255, 255, 255, .05);
    --sublinhado:   var(--sublinhado-claro);
  }

  :root:not([data-modo="claro"])[data-hora="madrugada"] { --mj-bg: #131211; --mj-sunk: #1f1c1a; }
  :root:not([data-modo="claro"])[data-hora="manha"]     { --mj-bg: #171410; --mj-sunk: #231e19; }
  :root:not([data-modo="claro"])[data-hora="entardecer"]{ --mj-bg: #18130f; --mj-sunk: #251d17; }
  :root:not([data-modo="claro"])[data-hora="noite"]     { --mj-bg: #141210; --mj-sunk: #201c19; }
}

/* Escuro por escolha explícita — precisa ganhar de tudo acima. */
:root[data-modo="escuro"],
:root[data-modo="escuro"][data-hora] {
  --mj-bg:        #16130f;
  --mj-sunk:      #221d19;
  --mj-fg:        #e9e1d6;
  --mj-fg-dim:    #a2968a;
  --mj-accent:    var(--mj-accent-custom, #d8a1ab);
  --mj-rule:      #3b332e;
  --mj-rule-forte:#6d5f53;
  --mj-band:      var(--mj-ameixa);
  --mj-band-fg:   #f0e6dd;
  --mj-band-rule: #7a6069;
  --mj-band-dim:  #c9b4b8;
  --mj-realce:    rgba(255, 255, 255, .055);
  --mj-realce-grao: .07;
  --mj-grao-caixa: .09;
  --mj-campo: rgba(255, 255, 255, .05);
  --sublinhado:   var(--sublinhado-claro);
  color-scheme: dark;
}

:root[data-modo="escuro"][data-hora="madrugada"] { --mj-bg: #131211; --mj-sunk: #1f1c1a; }
:root[data-modo="escuro"][data-hora="entardecer"]{ --mj-bg: #18130f; --mj-sunk: #251d17; }

/* Claro por escolha explícita, mesmo com o sistema no escuro. */
:root[data-modo="claro"] { color-scheme: light; }

/* -------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--mj-bg);
  color: var(--mj-fg);
  font: 400 1.0625rem/1.65 var(--f-corpo);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  /*
   * Nada de transição no fundo aqui. O Chrome não anima uma propriedade
   * cujo valor vem de uma custom property que acabou de mudar: em vez de
   * interpolar, ele congela o valor antigo, e o site ficava com o papel
   * escuro depois de trocar para o modo claro. A troca de tema é
   * instantânea de propósito.
   */
}

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
img { background-color: var(--mj-sunk); }

hr { border: 0; }

/* Um `display` declarado por nós ganha do `[hidden]` do navegador — e aí
   um elemento escondido pelo HTML ou pelo JS aparece assim mesmo. Esta
   linha devolve ao atributo a autoridade que ele deveria ter. */
[hidden] { display: none !important; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a) { color: var(--mj-accent); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--mj-accent);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--mj-accent); color: var(--mj-bg); }

.mj-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.mj-icone { display: inline-block; vertical-align: -.18em; flex: none; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular-para {
  position: absolute;
  top: -4rem; left: var(--passo-3);
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--mj-accent);
  color: #fff;
  font: 600 .875rem/1 var(--f-mono);
  transition: top .2s var(--calmo);
}
.pular-para:focus { top: .5rem; }

/* -------------------------------------------------------------------------
   3. Atmosfera — o grão
   ------------------------------------------------------------------------- */
body::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background-image: var(--mj-grao);
  will-change: transform;
}

body.sem-grao::before { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) body::before { opacity: .07; mix-blend-mode: screen; }
}
:root[data-modo="escuro"] body::before { opacity: .07; mix-blend-mode: screen; }

/* -------------------------------------------------------------------------
   4. Layout
   ------------------------------------------------------------------------- */
.pagina {
  position: relative;
  z-index: 1;
  max-width: var(--largura-total);
  margin-inline: auto;
  padding: var(--passo-5) clamp(1.1rem, 4vw, 2.5rem) var(--passo-5);
  display: grid;
  gap: var(--passo-5) var(--passo-5);
  grid-template-columns: minmax(0, 1fr);
}

.conteudo { min-width: 0; max-width: var(--largura-texto); }

/* Páginas largas usam a coluna inteira — mas dentro da mesma caixa do
   cabeçalho e do rodapé (mesmo teto de 72rem, mesmo respiro lateral).
   Assim a primeira letra do conteúdo nasce exatamente sob a primeira
   letra de "antes de tudo". */
body.largo .conteudo { max-width: none; }

@media (min-width: 62rem) {
  body.tem-lateral .pagina {
    grid-template-columns: minmax(0, 1fr) var(--largura-lateral);
    align-items: start;
  }
  body.tem-lateral .lateral { position: sticky; top: var(--passo-3); }
}

/* -------------------------------------------------------------------------
   5. Tipografia
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: lowercase;
  text-wrap: balance;
  margin: 0;
}

p, ul, ol, blockquote, figure, pre, table { margin: 0 0 var(--passo-3); }

.filete {
  height: 0;
  margin: 0;
  border-top: 1px solid var(--mj-rule-forte);
  transform-origin: left center;
}

/* -------------------------------------------------------------------------
   6. Topo
   ------------------------------------------------------------------------- */
.topo {
  position: relative;
  z-index: 2;
  background: var(--mj-band);
  color: var(--mj-band-fg);
}

.topo__interno {
  max-width: var(--largura-total);
  margin-inline: auto;
  padding: clamp(.5rem, 1.4vw, .9rem) clamp(1.1rem, 4vw, 2.5rem) 0;
}

.topo .filete { border-top-color: var(--mj-band-rule); }

.marca { display: grid; gap: clamp(.35rem, 1vw, .7rem); }

.marca__frase,
.marca__nome {
  font-family: var(--f-titulo);
  font-weight: 700;
  text-transform: lowercase;
  line-height: .92;
  letter-spacing: -.055em;
  font-size: clamp(2.1rem, 10vw, 5.75rem);
  margin: 0;
}

/* Na home o nome do blog é um <h1>, e o theme.json pinta todo heading com
   a cor de texto do corpo. Dentro da faixa vinho isso ficava tinta sobre
   tinta — aqui a faixa manda na cor. */
.topo :is(h1, h2, h3, p) { color: var(--mj-band-fg); }

.marca__frase { text-align: left; }
.marca__nome  { text-align: right; }
.marca__nome a { position: relative; color: inherit; }

/*
 * O retrato espia quando o ponteiro passa pelo nome. Fica em posição
 * absoluta à esquerda do link: aparece e some sem mover uma letra.
 */
.marca__retrato {
  position: absolute;
  top: 50%;
  right: calc(100% + .7rem);
  width: clamp(2.4rem, 6vw, 3.6rem);
  height: clamp(2.4rem, 6vw, 3.6rem);
  border-radius: 50%;
  object-fit: cover;
  background: var(--mj-band-rule);
  box-shadow: 0 0 0 1px var(--mj-band-rule);
  opacity: 0;
  transform: translateY(-50%) scale(.55) rotate(-8deg);
  transform-origin: 70% 50%;
  pointer-events: none;
  transition: opacity .3s var(--calmo), transform .42s var(--pena);
}

.marca__nome a:hover .marca__retrato,
.marca__nome a:focus-visible .marca__retrato {
  opacity: 1;
  transform: translateY(-50%) scale(1) rotate(0deg);
}

/* Onde não há ponteiro, não há espiada. */
@media (hover: none) { .marca__retrato { display: none; } }

.marca__descricao {
  margin: .2rem 0 0;
  font: 400 .8125rem/1.5 var(--f-mono);
  letter-spacing: .04em;
  color: var(--mj-band-dim);
}

.marca__logo img { max-height: 4.5rem; width: auto; }

/* Nas páginas internas o cabeçalho encolhe: o assunto é o texto, não a capa. */
body:not(.home) .marca__frase,
body:not(.home) .marca__nome { font-size: clamp(1.1rem, 3.2vw, 1.7rem); }
body:not(.home) .marca__descricao { display: none; }

/*
 * A barra vem antes do título: menu à esquerda, modo de cor e busca à
 * direita. Sem borda no topo — ela é a primeira coisa do cabeçalho, e o
 * filete que abre a marca já faz a separação de baixo.
 */
.topo__barra {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--passo-2) var(--passo-3);
  padding-block: .55rem clamp(.7rem, 1.8vw, 1.1rem);
}

.menu__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--passo-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- O botão do menu ------------------------------------------------------ */

/* Em tela larga a barra cabe inteira: o botão não existe. */
.menu__abrir { display: none; }

.menu__barras {
  display: grid;
  gap: 4px;
  width: 18px;
}

.menu__barras span {
  display: block;
  height: 1.5px;
  background: currentColor;
  transition: transform .32s var(--pena), opacity .2s var(--calmo);
}

.menu__rotulo {
  font: 400 .8125rem/1.4 var(--f-mono);
  letter-spacing: .1em;
}

/* Aberto: a barra do meio some e as outras duas se cruzam. */
[data-aberto] .menu__barras span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
[data-aberto] .menu__barras span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
[data-aberto] .menu__barras span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }


.menu__lista a,
.menu__lista li > span {
  display: inline-block;
  padding: .25rem 0;
  color: var(--mj-band-fg);
  font: 400 .8125rem/1.4 var(--f-mono);
  letter-spacing: .1em;
  text-transform: lowercase;
}

.menu__lista .current-menu-item > a,
.menu__lista .current_page_item > a { color: #fff; }

/* --- Onde a barra não cabe: sanfona ---------------------------------------
   Vem depois das regras base de propósito: mesma especificidade, e quem
   vem depois ganha. Antes, o `display: block` do link móvel perdia para o
   `inline-block` de cima e a área de toque ficava menor do que devia.    */
@media (max-width: 44rem) {
  /* Uma linha só: o botão do menu à esquerda, modo e busca à direita.
     O <nav> vira flex também — como bloco, ele ganhava o espaço de
     descida da linha de texto e empurrava o botão alguns pixels para
     baixo do resto da barra. */
  .menu { flex: none; display: flex; align-items: center; }
  .topo__barra { flex-wrap: nowrap; gap: var(--passo-2); }
  .topo__acoes { flex: 0 1 auto; min-width: 0; justify-content: flex-end; }
  .busca__campo { width: clamp(4.5rem, 30vw, 9rem); }

  .menu__abrir {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem 0;
    color: var(--mj-band-fg);
  }

  /*
   * O painel flutua por cima do título em vez de empurrá-lo: abrir o
   * menu não pode mexer na altura do cabeçalho, senão a página inteira
   * pula sob o dedo de quem só queria ver os links.
   *
   * grid-template-rows de 0fr para 1fr é o jeito de animar altura
   * automática sem inventar um max-height chutado.
   */
  .menu__caixa {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    display: grid;
    grid-template-rows: 0fr;
    background: var(--mj-band);
    transition: grid-template-rows .34s var(--calmo);
  }

  .menu[data-aberto] .menu__caixa {
    grid-template-rows: 1fr;
    box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .55);
  }

  .menu__lista {
    overflow: hidden;
    min-height: 0;
    flex-direction: column;
    gap: 0;
  }

  .menu__lista li { opacity: 0; transition: opacity .2s var(--calmo); }
  .menu[data-aberto] .menu__lista li { opacity: 1; transition-delay: .12s; }

  .menu__lista a,
  .menu__lista li > span {
    display: block;
    padding: .7rem 0;
    font-size: .875rem;
  }

  .menu__lista li + li a { border-top: 1px solid var(--mj-band-rule); }

  /* Fecha o painel com um filete, para ele terminar e não escorrer. */
  .menu[data-aberto] .menu__lista { border-bottom: 1px solid var(--mj-band-rule); }
}

@media (prefers-reduced-motion: reduce) {
  .menu__caixa { transition: none; }
}

.topo__acoes { display: flex; align-items: center; gap: var(--passo-2); }

.acao {
  display: inline-grid;
  place-items: center;
  width: 2rem; height: 2rem;
  color: var(--mj-band-fg);
  border: 1px solid transparent;
  transition: border-color .25s var(--calmo), transform .35s var(--pena);
}
.acao:hover { border-color: var(--mj-band-rule); transform: translateY(-1px); }

.acao--modo .so-escuro { display: none; }
:root[data-modo="escuro"] .acao--modo .so-claro  { display: none; }
:root[data-modo="escuro"] .acao--modo .so-escuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-modo="claro"]) .acao--modo .so-claro  { display: none; }
  :root:not([data-modo="claro"]) .acao--modo .so-escuro { display: block; }
}

/* Busca */
.busca { display: flex; align-items: center; gap: .35rem; }

.busca__campo {
  width: clamp(7rem, 18vw, 11rem);
  padding: .3rem .1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mj-band-rule);
  color: var(--mj-band-fg);
  font: 400 .8125rem/1.4 var(--f-mono);
  letter-spacing: .05em;
  transition: border-color .3s var(--calmo);
}
.busca__campo::placeholder { color: var(--mj-band-dim); opacity: .75; }
.busca__campo:focus { outline: 0; border-bottom-color: currentColor; }
.busca__botao { display: grid; place-items: center; color: var(--mj-band-fg); padding: .2rem; }

/* No corpo da página a busca é a ação principal, não um detalhe da barra. */
.conteudo .busca { max-width: 22rem; }
.conteudo .busca__campo,
.conteudo .busca__botao { color: var(--mj-fg); }
.conteudo .busca__campo {
  width: 100%;
  padding: .5rem .1rem;
  font-size: .9375rem;
  border-bottom-color: var(--mj-rule-forte);
}
.conteudo .busca__campo::placeholder { color: var(--mj-fg-dim); }

/* Barra de leitura */
.progresso {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 50;
  pointer-events: none;
}
.progresso__linha {
  display: block;
  height: 100%;
  background: var(--mj-accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* -------------------------------------------------------------------------
   7. Fluxo — listagens
   ------------------------------------------------------------------------- */
.fluxo { display: grid; gap: var(--passo-5); }

.entrada__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .45rem;
  margin: 0 0 .5rem;
  font: 400 .75rem/1.4 var(--f-mono);
  letter-spacing: .1em;
  text-transform: lowercase;
  color: var(--mj-fg-dim);
}
.entrada__sep { opacity: .5; }

.entrada__titulo {
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  margin: 0 0 .6rem;
}
.entrada__titulo a { color: var(--mj-fg); }

.entrada__resumo p { margin: 0 0 var(--passo-2); }
.entrada__resumo { color: var(--mj-fg); }

.entrada__leia { margin: 0; }

.leia {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: lowercase;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--mj-rule);
  transition: border-color .3s var(--calmo);
}
.leia .mj-icone { transition: transform .4s var(--pena); }
.leia:hover { border-bottom-color: var(--mj-accent); }
.leia:hover .mj-icone { transform: translateX(4px); }

.capa { margin: 0 0 var(--passo-3); overflow: hidden; }
.capa__img { width: 100%; }
.capa__legenda {
  margin-top: .5rem;
  font: 400 .75rem/1.5 var(--f-mono);
  color: var(--mj-fg-dim);
}

/* Formatos curtos */
.entrada--nota,
.entrada--recado,
.entrada--citacao,
.entrada--link {
  padding-left: var(--passo-3);
  border-left: 2px solid var(--mj-rule);
}
.entrada--citacao { font-style: italic; font-size: 1.1875rem; }
.entrada--recado  { font-family: var(--f-mono); font-size: .9375rem; }
.entrada__ancora { margin: 0; }
.entrada__titulo--link a { display: inline-flex; gap: .4rem; align-items: baseline; }

/* Paginação */
.paginacao { margin-top: var(--passo-5); }
.paginacao .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--passo-2);
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .1em;
  text-transform: lowercase;
}
.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  border: 1px solid var(--mj-rule);
  color: var(--mj-fg-dim);
  transition: border-color .3s var(--calmo), color .3s var(--calmo);
}
.paginacao .page-numbers:hover { border-color: var(--mj-accent); color: var(--mj-accent); }
.paginacao .page-numbers.current { border-color: var(--mj-accent); color: var(--mj-accent); }
.paginacao .dots { border: 0; }

/* Cabeçalhos de arquivo, busca e 404 */
.cabecalho-arquivo { display: grid; gap: .6rem; margin-bottom: var(--passo-5); }
.cabecalho-arquivo__tipo {
  margin: 0;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--mj-fg-dim);
}
.cabecalho-arquivo__titulo { font-size: clamp(1.75rem, 6vw, 2.75rem); }
.cabecalho-arquivo__desc { color: var(--mj-fg-dim); font-size: .9375rem; }

.vazio { display: grid; gap: var(--passo-3); }
.vazio__titulo { font-size: clamp(1.75rem, 6vw, 2.5rem); }

.quatrocentos { display: grid; gap: var(--passo-3); }
.quatrocentos__codigo {
  margin: 0;
  font: 700 clamp(4rem, 20vw, 9rem)/.85 var(--f-titulo);
  color: var(--mj-rule);
  letter-spacing: -.02em;
}
.quatrocentos__titulo { font-size: clamp(1.5rem, 5vw, 2.25rem); }
.quatrocentos__sub {
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--mj-fg-dim);
  margin-bottom: .6rem;
}
.quatrocentos__lista ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.quatrocentos__lista a { display: flex; gap: .8rem; color: var(--mj-fg); }
.quatrocentos__data,
.relacionados__data {
  font: 400 .75rem/1.7 var(--f-mono);
  color: var(--mj-fg-dim);
  flex: none;
}

/* -------------------------------------------------------------------------
   8. Texto — single e page
   ------------------------------------------------------------------------- */
.texto__cabecalho { display: grid; gap: var(--passo-2); margin-bottom: var(--passo-4); }
.texto__titulo { font-size: clamp(2rem, 7vw, 3.25rem); }

/*
 * flow-root: o corpo do texto passa a conter os próprios floats. Uma
 * imagem alinhada à esquerda mais alta que o texto ao lado escapava da
 * caixa e ia parar por cima do que vinha depois — a assinatura da
 * newsletter, os termos, o rodapé do texto.
 */
.texto__corpo,
.entrada__corpo,
.entrada__resumo,
.carta__corpo { display: flow-root; }

.texto__corpo { font-size: 1.0625rem; }
.texto__corpo > * + * { margin-top: var(--passo-3); }
.texto__corpo h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-top: var(--passo-4); }
.texto__corpo h3 { font-size: 1.1875rem; margin-top: var(--passo-4); }
.texto__corpo ul, .texto__corpo ol { padding-left: 1.3rem; }
.texto__corpo li + li { margin-top: .35rem; }
.texto__corpo a { background-image: var(--sublinhado); }

.entrada__termos {
  clear: both;
  margin-top: var(--passo-4);
  padding-top: var(--passo-2);
  border-top: 1px solid var(--mj-rule);
  display: grid;
  gap: .3rem;
}
.termos__linha {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  font: 400 .75rem/1.6 var(--f-mono);
  letter-spacing: .06em;
  color: var(--mj-fg-dim);
}
.termos__linha a { color: var(--mj-fg-dim); }
.termos__linha a:hover { color: var(--mj-accent); }

.vizinhos {
  clear: both;
  display: grid;
  gap: var(--passo-3);
  margin-top: var(--passo-5);
  padding-top: var(--passo-3);
  border-top: 1px solid var(--mj-rule);
}
@media (min-width: 40rem) { .vizinhos { grid-template-columns: 1fr 1fr; } }
.vizinhos__item { display: grid; gap: .3rem; color: var(--mj-fg); }
.vizinhos__item--prox { text-align: right; }
.vizinhos__rotulo {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font: 400 .7rem/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: lowercase;
  color: var(--mj-fg-dim);
}
.vizinhos__item--prox .vizinhos__rotulo { justify-content: flex-end; }
.vizinhos__nome { font-family: var(--f-titulo); font-size: 1.0625rem; text-transform: lowercase; letter-spacing: -.025em; line-height: 1.15; }
.vizinhos__item:hover .vizinhos__nome { color: var(--mj-accent); }

.responder {
  clear: both;
  margin-top: var(--passo-5);
  padding: var(--passo-3);
  background: var(--mj-sunk);
  border-left: 2px solid var(--mj-accent);
}
.responder__titulo {
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--mj-fg-dim);
  margin-bottom: .5rem;
}
.responder__texto { margin: 0 0 var(--passo-2); font-size: .9375rem; }
.responder__acao { margin: 0; }

.mj-email {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 400 .8125rem/1 var(--f-mono);
  letter-spacing: .08em;
  text-transform: lowercase;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--mj-accent);
}
.mj-email .mj-icone { transition: transform .4s var(--pena); }
.mj-email:hover .mj-icone { transform: translateX(3px) translateY(-1px); }

.relacionados { clear: both; margin-top: var(--passo-5); }
.relacionados__titulo {
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--mj-fg-dim);
  margin-bottom: var(--passo-2);
}
.relacionados__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.relacionados__lista a { display: flex; gap: .8rem; color: var(--mj-fg); }
.relacionados__nome { font-family: var(--f-titulo); text-transform: lowercase; letter-spacing: -.025em; }
.relacionados__lista a:hover .relacionados__nome { color: var(--mj-accent); }

.paginas-internas {
  margin-top: var(--passo-3);
  font: 400 .8125rem/1 var(--f-mono);
  display: flex;
  gap: .5rem;
  color: var(--mj-fg-dim);
}

/* -------------------------------------------------------------------------
   9. Lateral — as caixinhas
   ------------------------------------------------------------------------- */
.lateral { display: grid; gap: var(--passo-3); align-content: start; }

.caixa {
  position: relative;
  isolation: isolate;
  background: var(--mj-sunk);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: clip-path .4s var(--pena);
}

/* Sem contorno: o que separa a caixa do papel é a textura, não a linha. */
.caixa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--mj-grao);
  opacity: var(--mj-grao-caixa);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.caixa__barra {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .45rem .65rem;
  background: var(--mj-band);
  color: var(--mj-band-fg);
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: lowercase;
}

.caixa__corpo { padding: .7rem .7rem .8rem; font-size: .8125rem; line-height: 1.6; }
.caixa__corpo p:last-child,
.caixa__corpo ul:last-child { margin-bottom: 0; }

.caixa__corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.caixa__corpo a { color: var(--mj-fg); }
.caixa__corpo a:hover { color: var(--mj-accent); }

.sobre__foto { width: 100%; margin-bottom: .6rem; filter: grayscale(1) contrast(1.05); transition: filter .6s var(--calmo); }
.caixa--sobre:hover .sobre__foto { filter: grayscale(0) contrast(1); }
.sobre__texto p { margin: 0 0 .5rem; }

.status__texto { margin: 0; font-family: var(--f-mono); font-size: .78125rem; }

.arquivo__lista li { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--f-mono); font-size: .75rem; }

.nuvem { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.nuvem ul { display: contents; }
.nuvem li { display: inline; }
.nuvem a {
  font-family: var(--f-mono);
  letter-spacing: .02em;
  color: var(--mj-fg-dim) !important;
  border-bottom: 1px solid transparent;
}
.nuvem a:hover { color: var(--mj-accent) !important; border-bottom-color: currentColor; }

.blogroll__lista li { font-family: var(--f-mono); font-size: .75rem; }

.contador {
  display: flex;
  gap: 2px;
  margin: 0 0 .35rem;
  overflow: hidden;
}
.contador__digito {
  flex: 1;
  display: grid;
  place-items: center;
  padding: .3rem 0;
  background: var(--mj-fg);
  color: var(--mj-bg);
  font: 400 .9375rem/1 var(--f-mono);
  font-variant-numeric: tabular-nums;
}
.contador__nota { margin: 0; font: 400 .625rem/1.4 var(--f-mono); color: var(--mj-fg-dim); letter-spacing: .04em; }

.botoes { display: flex; flex-wrap: wrap; gap: .3rem; }
.botao88 { display: block; line-height: 0; filter: saturate(.85); transition: filter .3s var(--calmo), transform .3s var(--pena); }
.botao88:hover { filter: saturate(1.1); transform: translateY(-2px); }
.botao88 img { image-rendering: pixelated; }

.webring { display: flex; justify-content: space-between; gap: .5rem; margin: 0; font-family: var(--f-mono); }
.webring a { padding: .1rem .5rem; border: 1px solid var(--mj-rule); }

/* -------------------------------------------------------------------------
   10. Rodapé
   ------------------------------------------------------------------------- */
.rodape {
  position: relative;
  z-index: 1;
  background: var(--mj-musgo);
  color: #e4e0d5;
  margin-top: var(--passo-6);
}
:root[data-modo="escuro"] .rodape { background: #10130f; }

.rodape__interno {
  max-width: var(--largura-total);
  margin-inline: auto;
  padding: var(--passo-4) clamp(1.1rem, 4vw, 2.5rem);
  display: grid;
  gap: var(--passo-2);
}
.rodape .filete { border-top-color: #4a5847; }
.rodape a { color: #e4e0d5; }
.rodape a:hover { color: #fff; }

.rodape__recado { font-size: .9375rem; max-width: 40rem; }
.rodape__lista { display: flex; flex-wrap: wrap; gap: 0 var(--passo-3); margin: 0; padding: 0; list-style: none; }
.rodape__lista a,
.rodape__linha {
  font: 400 .75rem/1.8 var(--f-mono);
  letter-spacing: .08em;
  text-transform: lowercase;
}
.rodape__linha { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
.rodape__feed { display: inline-flex; align-items: center; gap: .35rem; }
.rodape__sep { opacity: .45; }
.rodape__nota { margin: 0; font: 400 .6875rem/1.6 var(--f-mono); color: #a3ab9e; letter-spacing: .06em; }
.rodape .mj-email { border-bottom-color: #6d7a69; }

/* -------------------------------------------------------------------------
   11. Blocos do editor
   ------------------------------------------------------------------------- */
blockquote {
  margin-inline: 0;
  padding-left: var(--passo-3);
  border-left: 2px solid var(--mj-accent);
  font-style: italic;
}
blockquote cite {
  display: block;
  margin-top: .5rem;
  font: 400 .75rem/1.5 var(--f-mono);
  font-style: normal;
  letter-spacing: .08em;
  color: var(--mj-fg-dim);
}

.wp-block-pullquote {
  padding: var(--passo-3) 0;
  border-block: 1px solid var(--mj-rule-forte);
  text-align: center;
}
.wp-block-pullquote p { font-size: clamp(1.25rem, 4vw, 1.75rem); line-height: 1.15; margin: 0; }

.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--mj-rule-forte);
  max-width: 6rem;
  margin-inline: auto;
}
.wp-block-separator.is-style-wide { max-width: none; }

code, kbd, samp { font-family: var(--f-mono); font-size: .875em; background: var(--mj-sunk); padding: .1em .3em; }
pre { background: var(--mj-sunk); padding: var(--passo-2); overflow-x: auto; border-left: 2px solid var(--mj-rule-forte); }
pre code { background: none; padding: 0; }

figure { margin-inline: 0; }
figcaption { margin-top: .4rem; font: 400 .75rem/1.5 var(--f-mono); color: var(--mj-fg-dim); }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { padding: .45rem .6rem; border-bottom: 1px solid var(--mj-rule); text-align: left; }
th { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: lowercase; font-weight: 400; }

.wp-block-image img { width: 100%; }
.alignwide { width: min(100%, 60rem); margin-inline: auto; }
.alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }
.alignleft  { float: left;  margin: .3rem var(--passo-3) var(--passo-2) 0; }
.alignright { float: right; margin: .3rem 0 var(--passo-2) var(--passo-3); }
.aligncenter { margin-inline: auto; }

/*
 * No celular não há espaço para texto ao lado de imagem: sobrava uma
 * tira de duas palavras por linha. Abaixo desta largura a imagem ocupa
 * a coluna inteira e o texto segue embaixo.
 */
@media (max-width: 34rem) {
  .alignleft,
  .alignright {
    float: none;
    width: 100%;
    margin-inline: 0;
    margin-block: var(--passo-2);
  }
}

/* Padrões do tema */
.mj-nota {
  padding: var(--passo-3);
  background: var(--mj-sunk);
  border: 1px solid var(--mj-rule);
}
.mj-fita {
  position: relative;
  padding: var(--passo-3) var(--passo-3) var(--passo-3) var(--passo-4);
  background: var(--mj-sunk);
}
.mj-fita::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: repeating-linear-gradient(180deg, var(--mj-accent) 0 8px, transparent 8px 14px);
}

/* -------------------------------------------------------------------------
   11b. Agora ouvindo (Last.fm) e assinatura
   ------------------------------------------------------------------------- */
.scrobble { display: flex; gap: .55rem; align-items: flex-start; }

.scrobble__capa {
  width: 44px; height: 44px;
  flex: none;
  object-fit: cover;
  filter: grayscale(.35) contrast(1.05);
  transition: filter .5s var(--calmo);
}
.caixa--status:hover .scrobble__capa { filter: grayscale(0) contrast(1); }

.scrobble__texto { min-width: 0; display: grid; gap: .1rem; font-family: var(--f-mono); font-size: .75rem; }
.scrobble__texto a { display: grid; gap: .1rem; }
.scrobble__faixa { display: block; color: var(--mj-fg); line-height: 1.35; }
.scrobble__artista,
.scrobble__quando { display: block; color: var(--mj-fg-dim); font-size: .6875rem; }
.scrobble__texto a:hover .scrobble__faixa { color: var(--mj-accent); }

/* Tocando agora: um ponto que respira. Sem piscar, sem chamar atenção. */
.scrobble__ponto {
  display: inline-block;
  width: 6px; height: 6px;
  margin-bottom: .2rem;
  border-radius: 50%;
  background: var(--mj-accent);
}
@media (prefers-reduced-motion: no-preference) {
  .scrobble__ponto { animation: respira 2.6s ease-in-out infinite; }
  @keyframes respira {
    0%, 100% { opacity: .35; transform: scale(.82); }
    50%      { opacity: 1;   transform: scale(1); }
  }
}

/* --- Assinatura ----------------------------------------------------------- */
.assinar { display: grid; gap: .5rem; margin: 0; }

.assinar__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.035em;
  text-transform: lowercase;
  color: var(--mj-fg);
}

.assinar__texto {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--mj-fg-dim);
}

.assinar__linha { display: flex; gap: .4rem; align-items: stretch; }

.assinar__campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: .45rem .1rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--mj-rule-forte);
  color: var(--mj-fg);
  font: 400 .8125rem/1.4 var(--f-mono);
  transition: border-color .3s var(--calmo);
}
.assinar__campo::placeholder { color: var(--mj-fg-dim); opacity: .8; }
.assinar__campo:focus { outline: 0; border-bottom-color: var(--mj-accent); }

.assinar__botao {
  flex: none;
  padding: .35rem .75rem;
  background: var(--mj-accent);
  color: var(--mj-bg);
  font: 400 .6875rem/1 var(--f-mono);
  letter-spacing: .1em;
  border: 1px solid var(--mj-accent);
  transition: background-color .25s var(--calmo), transform .35s var(--pena);
}
.assinar__botao:hover { background: transparent; color: var(--mj-accent); transform: translateY(-1px); }

.assinar__consentimento {
  margin: 0;
  font: 400 .625rem/1.5 var(--f-mono);
  letter-spacing: .02em;
  color: var(--mj-fg-dim);
}
.assinar__consentimento a { color: var(--mj-fg-dim); border-bottom: 1px solid var(--mj-rule); }
.assinar__consentimento a:hover { color: var(--mj-accent); }

.assinar__aviso {
  margin: 0;
  padding: .45rem .6rem;
  background: var(--mj-bg);
  border-left: 2px solid var(--mj-accent);
  font: 400 .75rem/1.5 var(--f-mono);
  color: var(--mj-fg);
}
.assinar__aviso--confirmada { border-left-color: var(--mj-musgo); }
.assinar__aviso--invalida,
.assinar__aviso--expirada,
.assinar__aviso--devagar,
.assinar__aviso--erro { border-left-color: var(--mj-rule-forte); }

/* O campo-isca precisa existir no DOM e sumir de todo mundo — inclusive
   de quem navega por leitor de tela e de quem usa Tab. */
.assinar__isca {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.assinar-fim {
  clear: both;
  margin-top: var(--passo-5);
  padding: var(--passo-3);
  border: 1px solid var(--mj-rule);
}
.assinar-fim .assinar__linha { max-width: 26rem; }

/* -------------------------------------------------------------------------
   11c. Índice com busca rápida
   ------------------------------------------------------------------------- */
.indice-cabecalho { display: grid; gap: .6rem; margin-bottom: var(--passo-4); }
.indice-cabecalho__titulo { font-size: clamp(2rem, 7vw, 3.25rem); }
.indice-cabecalho__conta {
  margin: 0;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--mj-fg-dim);
}

.indice-intro { margin-bottom: var(--passo-4); }

/* --- O campo -------------------------------------------------------------- */
.indice-busca {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  gap: .5rem;
  padding: var(--passo-2) 0;
  margin-bottom: var(--passo-3);

  /*
   * Translúcida com desfoque em vez de um bloco opaco: o papel tem grão
   * fixo atrás de tudo, e qualquer fundo chapado por cima dele virava um
   * retângulo de tom diferente — muito visível no modo escuro. Assim a
   * barra mostra o que está atrás dela, e some no fundo.
   */
  background: color-mix(in srgb, var(--mj-bg) 84%, transparent);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .indice-busca { background: var(--mj-bg); }
}

/* O campo não precisa da largura toda: 44rem é o que a mão alcança. */
.indice-busca > * { max-width: 44rem; }

.indice-busca__campo {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem .8rem;
  background: var(--mj-campo);
  box-shadow: inset 0 0 0 0 var(--mj-accent);
  transition: box-shadow .25s var(--calmo);
}

/* Sem contorno: quem separa o campo do papel é a textura. O foco
   aparece como um filete que cresce por dentro, não como uma moldura
   que surge do nada. */
.indice-busca__campo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--mj-grao);
  opacity: var(--mj-grao-caixa);
  mix-blend-mode: overlay;
  pointer-events: none;
}

.indice-busca__campo:focus-within { box-shadow: inset 0 -2px 0 0 var(--mj-accent); }
.indice-busca__campo .mj-icone { color: var(--mj-fg-dim); flex: none; }

.indice-busca__campo input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--mj-fg);
  font: 400 1rem/1.3 var(--f-mono);
}
.indice-busca__campo input:focus { outline: 0; }
.indice-busca__campo input::placeholder { color: var(--mj-fg-dim); opacity: .8; }
.indice-busca__campo input::-webkit-search-cancel-button { display: none; }

.indice-busca__limpar {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.4rem; height: 1.4rem;
  color: var(--mj-fg-dim);
  font-size: 1.1rem;
  line-height: 1;
  transition: color .2s var(--calmo);
}
.indice-busca__limpar:hover { color: var(--mj-accent); }

.indice-busca__dica,
.indice-busca__resultado {
  margin: 0;
  font: 400 .6875rem/1.4 var(--f-mono);
  color: var(--mj-fg-dim);
  letter-spacing: .04em;
}
.indice-busca__resultado:empty { display: none; }

.indice-busca__dica kbd {
  display: inline-block;
  min-width: 1.1em;
  padding: .1em .35em;
  background: var(--mj-campo);
  color: var(--mj-fg);
  font: inherit;
  text-align: center;
}

/* Numa tela de toque não existe tecla "/": a dica só atrapalharia. */
@media (hover: none) { .indice-busca__dica { display: none; } }

/* --- A lista -------------------------------------------------------------- */
.indice__ano + .indice__ano { margin-top: var(--passo-4); }

/* Com a largura toda, os assuntos ganham coluna própria à direita em vez
   de ficarem pendurados embaixo do título. */
@media (min-width: 52rem) {
  .indice__link {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: baseline;
    padding-block: .6rem;
  }
  .indice__termos { grid-column: 2; text-align: right; }
  .indice__nome { font-size: 1.1875rem; }
}

.indice__rotulo-ano {
  position: sticky;
  top: 5.4rem;
  z-index: 2;
  padding: .35rem 0;
  margin-bottom: .3rem;
  background: color-mix(in srgb, var(--mj-bg) 84%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--mj-rule-forte);
  font-size: .875rem;
  letter-spacing: .02em;
  color: var(--mj-fg-dim);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .indice__rotulo-ano { background: var(--mj-bg); }
}

.indice__lista { list-style: none; margin: 0; padding: 0; }

.indice__item + .indice__item { border-top: 1px solid var(--mj-rule); }

.indice__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem .8rem;
  align-items: baseline;
  padding: .55rem .4rem .55rem 0;
  color: var(--mj-fg);
  transition: padding-left .28s var(--pena);
}
.indice__link:hover,
.indice__link:focus-visible {
  padding-left: .4rem;
  outline-offset: -2px;
}

.indice__nome {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.25;
  letter-spacing: -.03em;
  text-transform: lowercase;
}
.indice__link:hover .indice__nome { color: var(--mj-accent); }

.indice__termos {
  font: 400 .8125rem/1.5 var(--f-mono);
  letter-spacing: .02em;
  color: var(--mj-fg-dim);
}

/* O trecho que casou com a busca: grifo, não fundo berrante. */
.indice__nome mark {
  background: none;
  color: var(--mj-accent);
  box-shadow: inset 0 -.32em 0 color-mix(in srgb, var(--mj-accent) 18%, transparent);
}

.indice__nada,
.indice__vazio {
  margin: var(--passo-4) 0;
  font-family: var(--f-mono);
  font-size: .8125rem;
  color: var(--mj-fg-dim);
}

@media (max-width: 30rem) {
  /* Uma coluna só: a de 2.9rem era da data, que saiu da lista, e estava
     espremendo o título em cinco letras por linha. */
  .indice__link { grid-template-columns: minmax(0, 1fr); }
  .indice__nome { font-size: 1.0625rem; }
  .indice__termos { font-size: .75rem; }
}

/* -------------------------------------------------------------------------
   11d. Galeria de fotos
   ------------------------------------------------------------------------- */
.galeria-cabecalho { display: grid; gap: .6rem; margin-bottom: var(--passo-4); }
.galeria-cabecalho__titulo { font-size: clamp(2rem, 7vw, 3.25rem); }
.galeria-cabecalho__conta {
  margin: 0;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--mj-fg-dim);
}

.galeria-intro { max-width: 42rem; margin-bottom: var(--passo-4); }

.galeria { display: grid; gap: var(--passo-5); }

.galeria__origem {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem var(--passo-3);
  padding-bottom: .4rem;
  margin-bottom: var(--passo-2);
  border-bottom: 1px solid var(--mj-rule-forte);
}

.galeria__link-post {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .2rem .8rem;
  color: var(--mj-fg);
}

.galeria__data,
.galeria__quantas {
  font: 400 .6875rem/1.6 var(--f-mono);
  letter-spacing: .06em;
  color: var(--mj-fg-dim);
  font-variant-numeric: tabular-nums;
}

.galeria__titulo { font-size: 1.25rem; }
.galeria__link-post:hover .galeria__titulo { color: var(--mj-accent); }

.galeria__grade {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Miniaturas grandes o bastante para a foto contar alguma coisa: na
     largura toda dão cinco colunas, não sete selinhos. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 2px;
}

.galeria__item { margin: 0; }

.galeria__foto {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--mj-sunk);
  aspect-ratio: 1;
}

.galeria__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Cinza em repouso, cor ao chegar perto: a página inteira não vira um
     mosaico gritando, e a foto que você olha acende. */
  filter: grayscale(.55) contrast(1.03);
  transition: filter .5s var(--calmo), transform .7s var(--calmo);
}

.galeria__foto:hover .galeria__img,
.galeria__foto:focus-visible .galeria__img {
  filter: grayscale(0) contrast(1);
  transform: scale(1.035);
}

.galeria__legenda {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .5rem .4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
  color: #f4efe8;
  font: 400 .6875rem/1.35 var(--f-mono);
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity .3s var(--calmo), transform .35s var(--pena);
}

.galeria__foto:hover .galeria__legenda,
.galeria__foto:focus-visible .galeria__legenda { opacity: 1; transform: none; }

.galeria__vazio {
  margin: var(--passo-4) 0;
  max-width: 34rem;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--mj-fg-dim);
}

/* --- O bloco de galeria dentro de um texto -------------------------------- */
.texto__corpo .wp-block-gallery {
  gap: 2px;
  margin-block: var(--passo-3);
}
.texto__corpo .wp-block-gallery .wp-block-image { background: var(--mj-sunk); }
.texto__corpo .wp-block-gallery img {
  filter: grayscale(.35) contrast(1.03);
  transition: filter .5s var(--calmo);
}
.texto__corpo .wp-block-gallery:hover img,
.texto__corpo .wp-block-gallery img:hover { filter: grayscale(0) contrast(1); }

.texto__corpo .wp-block-gallery > .blocks-gallery-caption,
.texto__corpo .wp-block-gallery > figcaption {
  width: 100%;
  margin-top: .5rem;
  font: 400 .75rem/1.5 var(--f-mono);
  color: var(--mj-fg-dim);
  text-align: left;
}

/* O bloco de galeria pode sangrar para fora da coluna de leitura quando o
   texto pede: é uma imagem, não uma nota de rodapé. */
.texto__corpo .wp-block-gallery.alignwide { width: min(100%, 60rem); }

/* -------------------------------------------------------------------------
   11e. Lupa — o zoom das fotos
   ------------------------------------------------------------------------- */
html.com-lupa { overflow: hidden; }

.lupa {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mj-band-fg);
  overflow: hidden;
}

.lupa::backdrop { background: rgba(12, 10, 8, .93); }

.lupa[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(.25rem, 2vw, 1.5rem);
  padding: clamp(2.6rem, 6vw, 3.5rem) clamp(.5rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}

.lupa__quadro {
  grid-column: 2;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: .8rem;
  justify-items: center;
  margin: 0;
  min-height: 0;
}

.lupa__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #0c0a08;
}

.lupa__pe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .3rem 1rem;
  max-width: 46rem;
  font: 400 .75rem/1.5 var(--f-mono);
  color: #cbbfb2;
  text-align: center;
}

.lupa__legenda { color: #efe6dc; }
.lupa__legenda:empty { display: none; }

.lupa__origem { color: #cbbfb2; border-bottom: 1px solid #6b5f55; }
.lupa__origem:hover { color: #fff; border-bottom-color: currentColor; }

.lupa__conta { font-variant-numeric: tabular-nums; opacity: .7; }

.lupa__fechar,
.lupa__nav {
  display: grid;
  place-items: center;
  color: #cbbfb2;
  border: 1px solid transparent;
  transition: color .2s var(--calmo), border-color .2s var(--calmo), transform .3s var(--pena);
}
.lupa__fechar:hover,
.lupa__nav:hover { color: #fff; border-color: #6b5f55; }

.lupa__fechar {
  position: absolute;
  top: clamp(.5rem, 2vw, 1rem);
  right: clamp(.5rem, 2vw, 1rem);
  width: 2.4rem; height: 2.4rem;
  font-size: 1.6rem;
  line-height: 1;
}

.lupa__nav {
  width: clamp(2rem, 5vw, 3rem);
  height: clamp(3rem, 12vh, 5rem);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1;
}
.lupa__nav--ant { grid-column: 1; }
.lupa__nav--prox { grid-column: 3; }
.lupa__nav--ant:hover { transform: translateX(-2px); }
.lupa__nav--prox:hover { transform: translateX(2px); }

/* A miniatura vira a foto ampliada em vez de trocar num corte seco. */
@media (prefers-reduced-motion: no-preference) {
  .lupa[open] { animation: lupa-entra .22s var(--calmo); }
  @keyframes lupa-entra { from { opacity: 0; } }

  .lupa__img { view-transition-name: lupa-foto; }
}

/* O ponteiro conta a história antes do clique. */
.galeria__foto,
.foto-zoom { cursor: zoom-in; }
.lupa__img { cursor: zoom-out; }

.foto-zoom { display: block; }

@media (max-width: 34rem) {
  .lupa__nav {
    position: absolute;
    bottom: clamp(1rem, 4vh, 2rem);
    z-index: 1;
  }
  .lupa__nav--ant { left: clamp(.5rem, 4vw, 1.5rem); }
  .lupa__nav--prox { right: clamp(.5rem, 4vw, 1.5rem); }
  .lupa[open] { grid-template-columns: minmax(0, 1fr); }
  .lupa__quadro { grid-column: 1; }
  .lupa__pe { padding-inline: 3.5rem; }
}

/* -------------------------------------------------------------------------
   11f. Ruído marrom
   ------------------------------------------------------------------------- */
.ruido { position: relative; display: inline-flex; align-items: center; gap: .4rem; }

/*
 * No celular o ruído de fundo disputa com o que a pessoa já está
 * ouvindo, e a barra de volume é fina demais para o dedo. A regra mora
 * aqui, e não junto do cabeçalho, porque precisa vir depois da que
 * declara o display — mesma especificidade, quem vem depois ganha.
 */
@media (max-width: 44rem) {
  .ruido { display: none; }
}

/* O convite ao ruído */
.convite {
  position: absolute;
  top: calc(100% + .7rem);
  left: 50%;
  z-index: 20;
  width: max-content;
  max-width: min(13rem, 60vw);
  padding: .4rem .6rem;
  background: var(--mj-band-fg);
  color: var(--mj-band);
  font: 400 .6875rem/1.35 var(--f-mono);
  letter-spacing: .04em;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity .35s var(--calmo), transform .35s var(--pena);
}

/* A setinha apontando para o botão. */
.convite::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: var(--mj-band-fg);
}

.convite--visivel { opacity: 1; transform: translate(-50%, 0); }

/* Flutua de leve enquanto está lá — dois pixels e meio, o suficiente
   para o olho perceber sem que a página pareça inquieta. */
@media (prefers-reduced-motion: no-preference) {
  .convite--visivel { animation: flutua 2.8s ease-in-out .35s infinite; }

  @keyframes flutua {
    0%, 100% { transform: translate(-50%, 0); }
    50%      { transform: translate(-50%, -2.5px); }
  }
}

/* No celular o botão fica na metade esquerda da barra: ancorar o balão
   pela direita jogava metade dele para fora da tela. */
@media (max-width: 30rem) {
  .convite { left: -0.5rem; right: auto; transform: translate(0, -4px); }
  .convite::before { left: 1.6rem; margin-left: 0; }
  .convite--visivel { transform: translate(0, 0); }

  @media (prefers-reduced-motion: no-preference) {
    .convite--visivel { animation-name: flutua-canto; }
    @keyframes flutua-canto {
      0%, 100% { transform: translate(0, 0); }
      50%      { transform: translate(0, -2.5px); }
    }
  }
}


.acao--ruido .so-som { display: none; }
.acao--ruido[data-estado="ligado"] .so-mudo,
.acao--ruido[data-estado="pausado"] .so-mudo { display: none; }
.acao--ruido[data-estado="ligado"] .so-som,
.acao--ruido[data-estado="pausado"] .so-som { display: block; }

.acao--ruido[data-estado="ligado"] { color: #fff; border-color: var(--mj-band-rule); }
.acao--ruido[data-estado="pausado"] { opacity: .55; }

/* Tocando: o ícone respira no compasso do próprio som. */
@media (prefers-reduced-motion: no-preference) {
  .acao--ruido[data-estado="ligado"] .so-som { animation: respira 3.4s ease-in-out infinite; }
}

.ruido__volume { display: inline-flex; align-items: center; }

.ruido__volume input[type="range"] {
  width: 4.5rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--mj-band-fg);
  background: none;
  cursor: pointer;
}

/* -------------------------------------------------------------------------
   11g. Tarot
   ------------------------------------------------------------------------- */
.tarot-cabecalho { display: grid; gap: .6rem; margin-bottom: var(--passo-4); }
.tarot-cabecalho__titulo { font-size: clamp(2rem, 7vw, 3.25rem); }
.tarot-cabecalho__conta {
  margin: 0;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .1em;
  color: var(--mj-fg-dim);
}
.tarot-intro { max-width: 42rem; margin-bottom: var(--passo-4); }

.tarot { display: grid; justify-items: center; gap: var(--passo-3); }

.tarot__mesa { perspective: 1800px; width: min(100%, 44rem); }

/*
 * A carta guarda um texto inteiro, então tem largura de leitura, não de
 * baralho. O que faz dela carta é a moldura: filete duplo, papel de outro
 * tom e o selo no alto.
 */
.carta {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--passo-2);
  padding: clamp(1.4rem, 5vw, 2.6rem);
  background: var(--mj-sunk);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform .34s var(--calmo);
}

/* Sem moldura: a carta se destaca pela textura do papel, não por linha. */
.carta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--mj-grao);
  opacity: var(--mj-grao-caixa);
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Meio giro: a carta some de perfil, o texto troca escondido, e ela volta. */
.esta-virando .carta { transform: rotateY(90deg); }

.tarot--tirando .tarot__acoes { opacity: .45; pointer-events: none; }
.tarot__acoes { transition: opacity .2s var(--calmo); }

/* Larga e baixa: o m minúsculo ocupa espaço na horizontal e quase nada
   na vertical. */
.marca-tarot {
  width: clamp(5.5rem, 16vw, 7.5rem);
  height: auto;
  color: var(--mj-accent);
  overflow: visible;
}

.marca-tarot__m {
  fill: currentColor;
  font-family: var(--f-titulo);
  font-weight: 700;
  letter-spacing: -.04em;
}

.carta__topo {
  display: grid;
  gap: var(--passo-2);
  justify-items: center;
  text-align: center;
  padding-block: var(--passo-3) var(--passo-2);
}
.carta__nome {
  font-size: clamp(1.5rem, 5vw, 2.125rem);
  max-width: 22ch;
  line-height: 1.08;
}
.carta__numeros {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: .3rem .6rem;
  margin: .35rem 0 0;
  font-family: var(--f-titulo);
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--mj-fg-dim);
}
.carta__numeros time { display: inline-flex; gap: .55rem; }
.carta__numero {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--mj-accent);
}

.carta .filete { width: 3rem; justify-self: center; border-top-color: var(--mj-rule-forte); }

.carta__assinatura {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .1rem .45rem;
  margin: var(--passo-2) 0 0;
  font: 400 .6875rem/1.4 var(--f-mono);
  letter-spacing: .14em;
  color: var(--mj-fg-dim);
  text-align: center;
}
.carta__assinatura-nome { color: var(--mj-accent); }

/* O texto da leitura é texto: alinhado à esquerda, na medida de leitura. */
.carta__corpo { max-width: 34rem; margin-inline: auto; }
.carta__corpo > *:first-child { margin-top: 0; }
.carta__corpo > *:last-child { margin-bottom: 0; }

.tarot__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--passo-3);
}

.tarot__tirar,
.tarot__ler,
.tarot__acao {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font: 400 .75rem/1 var(--f-mono);
  letter-spacing: .12em;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--mj-rule);
  transition: border-color .3s var(--calmo);
}
.tarot__tirar { color: var(--mj-fg); border-bottom-color: var(--mj-accent); }
.tarot__tirar:hover { border-bottom-color: var(--mj-fg); }
.tarot__tirar .mj-icone { transition: transform .8s var(--calmo); }
.tarot__tirar:hover .mj-icone { transform: rotate(180deg); }
.tarot__ler:hover,
.tarot__acao:hover { border-bottom-color: var(--mj-accent); }

.tarot__acao { color: var(--mj-fg-dim); cursor: pointer; }
.tarot__acao:hover { color: var(--mj-fg); }
.tarot__acao .mj-icone { transition: transform .35s var(--pena); }
.tarot__acao:hover .mj-icone { transform: translateY(-1px); }

/* Depois de copiar ou salvar, o próprio botão dá a notícia. */
.tarot__acao--feito { color: var(--mj-accent); border-bottom-color: var(--mj-accent); }

.tarot__vazio {
  display: grid;
  gap: .8rem;
  max-width: 38rem;
  font-family: var(--f-mono);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--mj-fg-dim);
}
.tarot__vazio p { margin: 0; }

/* A caixa da lateral */
.caixa--tarot .caixa__corpo { text-align: center; }
.tarot-mini { display: grid; gap: .5rem; justify-items: center; }
.tarot-mini .marca-tarot { width: 4.4rem; }
.tarot-mini__link {
  font: 400 .6875rem/1.3 var(--f-mono);
  letter-spacing: .08em;
  color: var(--mj-fg);
  border-bottom: 1px solid var(--mj-accent);
  padding-bottom: .2rem;
}
.tarot-mini__link:hover { color: var(--mj-accent); }

/* -------------------------------------------------------------------------
   11h. Realce de hover
   ------------------------------------------------------------------------- */

/*
 * Duas camadas separadas, e não uma só com background-blend-mode: a
 * mistura dentro de uma camada única deixava o grão em força total
 * (cinza cheio de chuvisco) e o texto miúdo virava sopa. Aqui a lavagem
 * de luz tem a opacidade dela e o grão tem a sua, bem menor.
 *
 * Ambas moram em pseudo-elementos com recuo negativo: pintam para fora
 * da caixa do texto sem empurrar nada, então o layout não se mexe um
 * pixel quando o ponteiro passa.
 */
.entrada,
.indice__item,
.relacionados__item,
.quatrocentos__lista li {
  position: relative;
  isolation: isolate;
}

.entrada::before,
.entrada::after,
.indice__item::before,
.indice__item::after,
.relacionados__item::before,
.relacionados__item::after,
.quatrocentos__lista li::before,
.quatrocentos__lista li::after {
  content: "";
  position: absolute;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s var(--calmo);
}

/* A lavagem de luz. */
.entrada::before,
.indice__item::before,
.relacionados__item::before,
.quatrocentos__lista li::before { background-color: var(--mj-realce); }

/* O grão, discreto o bastante para o texto continuar texto. */
.entrada::after,
.indice__item::after,
.relacionados__item::after,
.quatrocentos__lista li::after {
  background-image: var(--mj-grao);
  mix-blend-mode: overlay;
}

.entrada::before,
.entrada::after { inset: calc(var(--passo-3) * -1) calc(var(--passo-2) * -1); }

.indice__item::before,
.indice__item::after,
.relacionados__item::before,
.relacionados__item::after,
.quatrocentos__lista li::before,
.quatrocentos__lista li::after { inset: 0 calc(var(--passo-2) * -1); }

.entrada:hover::before,
.entrada:focus-within::before,
.indice__item:hover::before,
.indice__item:focus-within::before,
.relacionados__item:hover::before,
.relacionados__item:focus-within::before,
.quatrocentos__lista li:hover::before,
.quatrocentos__lista li:focus-within::before { opacity: 1; }

.entrada:hover::after,
.entrada:focus-within::after,
.indice__item:hover::after,
.indice__item:focus-within::after,
.relacionados__item:hover::after,
.relacionados__item:focus-within::after,
.quatrocentos__lista li:hover::after,
.quatrocentos__lista li:focus-within::after { opacity: var(--mj-realce-grao); }

/*
 * A caixa inteira é o link. O título estica um alvo invisível por cima
 * de todo o cartão; os outros links do cartão sobem acima dele para
 * continuarem clicáveis por conta própria.
 */
.entrada__titulo a::after,
.entrada__ancora a::after {
  content: "";
  position: absolute;
  inset: calc(var(--passo-3) * -1) calc(var(--passo-2) * -1);
  z-index: 1;
}

.entrada .leia,
.entrada__termos a,
.entrada__corpo a,
.entrada__resumo a { position: relative; z-index: 2; }

/* Numa tela de toque não existe "passar por cima": o realce só aparece
   onde o hover é real. */
@media (hover: none) {
  .entrada::before, .entrada::after,
  .indice__item::before, .indice__item::after,
  .relacionados__item::before, .relacionados__item::after,
  .quatrocentos__lista li::before, .quatrocentos__lista li::after { display: none; }
}

/* -------------------------------------------------------------------------
   11i. Grão vivo nas imagens
   ------------------------------------------------------------------------- */

/*
 * Toda imagem carrega uma camada de ruído que treme de leve, como grão de
 * filme, e some quando o ponteiro chega perto: o ruído é o repouso, a
 * nitidez é a atenção.
 *
 * O tremor é feito com transform, não com background-position — assim ele
 * roda no compositor e não repinta a imagem a cada quadro. A camada é 15%
 * maior que a caixa em cada lado para que o deslocamento nunca mostre
 * borda vazia.
 */
.capa,
.galeria__foto,
.foto-zoom,
.foto-grao,
.marca__foto {
  position: relative;
  overflow: hidden;
}

.foto-grao { display: block; }
.foto-grao img { display: block; width: 100%; }

.capa::after,
.galeria__foto::after,
.foto-zoom::after,
.foto-grao::after,
.marca__foto::after {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 1;
  background-image: var(--mj-grao);
  opacity: .17;
  mix-blend-mode: overlay;
  pointer-events: none;
  transition: opacity .45s var(--calmo);
}

/* Numa galeria, a imagem fica dentro de dois invólucros — o do grão e o
   do zoom. Sem isto, o ruído entrava em dobro justo ali. Vale o de fora. */
.foto-grao .foto-zoom::after,
.foto-zoom .foto-grao::after,
.galeria__foto .foto-grao::after { content: none; }

.capa:hover::after,
.entrada:hover .capa::after,
.galeria__foto:hover::after,
.galeria__foto:focus-visible::after,
.foto-zoom:hover::after,
.foto-zoom:focus-visible::after,
.foto-grao:hover::after,
.foto-grao:focus-within::after,
.marca__foto:hover::after,
.marca__foto:focus-within::after { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .capa::after,
  .galeria__foto::after,
  .foto-zoom::after,
  .foto-grao::after,
  .marca__foto::after {
    animation: grao-vivo 1.15s steps(1) infinite;
  }

  /* Oito posições sorteadas à mão: o suficiente para o olho não achar o
     padrão, poucas o bastante para não pesar. */
  @keyframes grao-vivo {
    0%    { transform: translate3d(0, 0, 0); }
    12.5% { transform: translate3d(-5%, 3%, 0); }
    25%   { transform: translate3d(4%, -6%, 0); }
    37.5% { transform: translate3d(-3%, -4%, 0); }
    50%   { transform: translate3d(6%, 2%, 0); }
    62.5% { transform: translate3d(-6%, 5%, 0); }
    75%   { transform: translate3d(2%, -3%, 0); }
    87.5% { transform: translate3d(-4%, -2%, 0); }
  }

  /* Parado no hover: sem tremor rodando atrás de uma camada invisível. */
  .capa:hover::after,
  .entrada:hover .capa::after,
  .galeria__foto:hover::after,
  .foto-zoom:hover::after,
  .foto-grao:hover::after { animation-play-state: paused; }
}

/* Dentro da lupa a foto é o assunto: nenhuma camada por cima. */
.lupa__img { filter: none; }

/* -------------------------------------------------------------------------
   11j. A faixa do nome: fotos e eco
   ------------------------------------------------------------------------- */

/*
 * A linha do nome vira uma faixa alta: quatro fotos esticadas ocupando
 * tudo o que existe antes do nome, e o nome repetido de cima para baixo,
 * cada vez mais forte, até chegar inteiro embaixo.
 *
 * min-width: 0 nos dois níveis. Sem isso o conteúdo define a largura
 * mínima do bloco e a faixa estoura para fora da tela — item de grid e
 * item de flex nascem com min-width: auto, e auto quer dizer "o tamanho
 * do conteúdo".
 */
.marca__nome--rica {
  display: flex;
  align-items: stretch;
  gap: clamp(.5rem, 1.6vw, 1.1rem);
  min-width: 0;
  min-height: clamp(5rem, 13vw, 9.5rem);
}

.marca > * { min-width: 0; }

.marca__fotos {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  min-width: 0;
}

/* Cada foto toma um quarto do que sobrou, na altura inteira da faixa. */
.marca__foto {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--mj-band-rule);
  transition: transform .4s var(--pena);
}

/*
 * A foto é posicionada por cima da caixa, não dentro dela. Com
 * height: 100% num contêiner de altura indefinida, o navegador cai no
 * tamanho natural da imagem — no celular isso virava um quadrado de 230
 * pixels que esticava a faixa inteira. Fora do fluxo, a foto não opina
 * sobre a altura: quem manda é a linha do nome.
 */
.marca__foto a,
.marca__foto-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.marca__foto-img {
  object-fit: cover;
  filter: grayscale(.55) contrast(1.05);
  transition: filter .45s var(--calmo);
}

.marca__foto:hover { transform: translateY(-3px); z-index: 2; }
.marca__foto:hover .marca__foto-img { filter: grayscale(0) contrast(1); }

/* A pilha: os ecos em cima, o nome de verdade embaixo. */
.marca__pilha {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  line-height: .95;
}

.marca__eco {
  display: block;
  font-size: .34em;
  line-height: 1.12;
  letter-spacing: -.045em;
  color: var(--mj-band-fg);
  user-select: none;
  /* Cada eco um pouco mais forte que o de cima: o nome chegando. */
  opacity: calc(.1 + var(--e, 0) * .09);
}

/* A entrada: as fotos pipocam uma depois da outra, os ecos acendem. */
@media (prefers-reduced-motion: no-preference) {
  .marca__foto {
    animation: pipoca .55s var(--pena) backwards;
    animation-delay: calc(var(--i) * 75ms + 140ms);
  }

  .marca__eco {
    animation: eco .7s var(--calmo) backwards;
    animation-delay: calc(var(--e) * 130ms + 480ms);
  }

  @keyframes pipoca {
    from {
      opacity: 0;
      transform: scaleY(.35) translateY(10px) rotate(var(--r, 0deg));
    }
  }

  @keyframes eco {
    from { opacity: 0; transform: translateY(6px); }
  }
}

/* Telas estreitas: a faixa encolhe, ficam duas fotos e some o eco. */
@media (max-width: 44rem) {
  .marca__nome--rica { min-height: clamp(3.4rem, 16vw, 5rem); }
  .marca__foto:nth-child(n+3) { display: none; }
  .marca__eco { display: none; }
}

@media (max-width: 26rem) {
  .marca__foto:nth-child(n+2) { display: none; }
}

/* -------------------------------------------------------------------------
   12. Animações
   ------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {

  ::view-transition-old(root) { animation: sai .18s var(--calmo) both; }
  ::view-transition-new(root) { animation: entra .28s var(--calmo) both; }

  @keyframes sai   { to   { opacity: 0; } }
  @keyframes entra { from { opacity: 0; transform: translateY(6px); } }

  /* Filetes que se desenham, com um leve excesso na chegada. */
  .filete--desenha { animation: filete .85s var(--pena) backwards; }
  .topo .filete--desenha:nth-of-type(2) { animation-delay: .07s; }
  .topo .filete--desenha:nth-of-type(3) { animation-delay: .14s; }

  @keyframes filete { from { transform: scaleX(0); } }

  /* A tinta assentando: o peso variável fecha e o espaçamento recolhe. */
  .marca__frase,
  .marca__nome {
    animation: tinta .7s var(--calmo) backwards;
  }
  .texto__titulo,
  .cabecalho-arquivo__titulo {
    animation: tinta-titulo .6s var(--calmo) backwards;
  }
  @keyframes tinta-titulo {
    from { letter-spacing: .01em; opacity: 0; filter: blur(.35px); }
    55%  { opacity: 1; }
    to   { letter-spacing: -.03em; opacity: 1; filter: blur(0); }
  }
  .marca__nome { animation-delay: .1s; }

  @keyframes tinta {
    from { letter-spacing: .02em; opacity: 0; filter: blur(.4px); }
    55%  { opacity: 1; }
    to   { letter-spacing: -.055em; opacity: 1; filter: blur(0); }
  }

  /* Sublinhado desenhado à mão, só onde o link mora dentro do texto. */
  .texto__corpo a,
  .entrada__resumo a,
  .rodape__recado a {
    background-image: var(--sublinhado);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 .35em;
    padding-bottom: .06em;
    transition: background-size .34s var(--pena);
  }
  .texto__corpo a:hover,
  .texto__corpo a:focus-visible,
  .entrada__resumo a:hover,
  .rodape__recado a:hover { background-size: 100% .35em; }

  /* Orelha de página: a caixa dobra o canto quando você chega perto. */
  .caixa:hover {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  }

  /* O contador rola os dígitos ao aparecer. */
  .contador__digito {
    animation: rolar .55s var(--pena) backwards;
    animation-delay: calc(var(--i) * .07s + .2s);
  }
  @keyframes rolar { from { transform: translateY(-90%); opacity: 0; } }

  /* Títulos da listagem entram conforme sobem na tela. */
  @supports (animation-timeline: view()) {
    /* Sem opacidade aqui: o título nunca fica ilegível no meio do scroll.
       O que muda é o peso da letra e o espaçamento — a tinta assentando. */
    .entrada__titulo {
      animation: assentar linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
    @keyframes assentar {
      from { letter-spacing: .008em; }
      to   { letter-spacing: -.03em; }
    }

    .conteudo .filete--desenha {
      animation: filete linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 18%;
    }

    /* A capa se revela por baixo. A imagem do LCP fica de fora: nada
       atrasa o maior elemento da primeira tela. */
    .fluxo .capa:not(.capa--lcp) {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 20%;
    }
    @keyframes revelar {
      from { clip-path: inset(0 0 22% 0); transform: scale(1.012); }
      to   { clip-path: inset(0 0 0 0);   transform: scale(1); }
    }
  }

  /* Barra de leitura e grão: presos ao scroll, não ao tempo. */
  @supports (animation-timeline: scroll()) {
    .progresso__linha {
      animation: progresso linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes progresso { to { transform: scaleX(1); } }

    body::before {
      animation: grao linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes grao { to { transform: translate3d(0, -2.5%, 0); } }
  }
}

/* Rastro de cursor: o segredo, desligado por padrão. */
.rastro {
  position: fixed;
  z-index: 60;
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--mj-accent);
  pointer-events: none;
  animation: apagar .9s linear forwards;
}
@keyframes apagar { to { opacity: 0; transform: scale(.2); } }

/* -------------------------------------------------------------------------
   13. Preferências e impressão
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  @view-transition { navigation: none; }
}

@media print {
  .topo__barra, .lateral, .progresso, .responder, .relacionados, .vizinhos, .paginacao, .pular-para { display: none !important; }
  body::before { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .topo { background: none; color: #000; }
  .texto__corpo a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}