/* ============================================================
   entreMultiversos · camada das dobras
   Estende editorial.css com as páginas novas (vestígios, matéria,
   máquina, ruído) e com camadas reveal/portal mais ambiciosas.
   ============================================================ */

/* ============================================================
   Reveal — refinamento (a base mora em editorial.css).
   Aqui acrescentamos um modo "ascend" que sobe a partir de baixo
   e revela com uma micro-borda fina, e um modo "soletra" que
   anima cada palavra em sequência.
   ============================================================ */

.revelar-borda {
  position: relative;
}
.revelar-borda::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--acento), transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1) 200ms;
  opacity: 0.7;
}
.revelar.pre-revelado.revelar-borda::before { transform: scaleX(0); }
.revelar-borda:not(.pre-revelado)::before { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .revelar-borda::before { transition: none; transform: scaleX(1); }
}

/* ============================================================
   VESTÍGIOS — fotografia como ruína afetiva
   Layout livre, asymmetric. Cada foto tem peso próprio.
   Click → portal dimensional (overlay com aros concêntricos).
   ============================================================ */

.vestigios {
  padding: var(--gap-l) 0 var(--gap-xl);
  position: relative;
}

.vestigios-cabec {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--gap-l);
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid var(--bruma);
  margin-bottom: clamp(56px, 8vh, 96px);
}

.vestigios-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
  display: block;
}

.vestigios-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 8.4vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: var(--papel);
  margin: 0 0 22px;
}

.vestigios-subtitulo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.55;
  color: var(--papel-2);
  max-width: 48ch;
  margin: 0;
}

.vestigios-meta {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  text-align: right;
  line-height: 1.7;
  white-space: nowrap;
}

.vestigios-meta strong {
  color: var(--acento);
  font-weight: 400;
}

/* === Caderno: layout livre em coluna larga, fotos com personalidade === */

.vestigios-caderno {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(28px, 4vw, 60px) clamp(20px, 2.4vw, 36px);
  align-items: start;
}

.vestigio {
  position: relative;
  display: block;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.vestigio-moldura {
  position: relative;
  overflow: hidden;
  background: var(--tinta-2);
  border: 1px solid var(--bruma);
  transition:
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 400ms ease,
    box-shadow 400ms ease;
  will-change: transform;
}

.vestigio-moldura::before {
  /* viés cromático sutil, como gelatina de prata */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(214,162,74,0.05), transparent 35%, rgba(0,0,0,0.18) 100%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
  transition: opacity 600ms ease;
}

.vestigio-moldura::after {
  /* contorno interno que respira no hover */
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(239, 236, 228, 0.0);
  z-index: 3;
  pointer-events: none;
  transition: border-color 400ms ease, inset 400ms ease;
}

.vestigio-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
  transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms ease;
  will-change: transform;
}

.vestigio:hover .vestigio-moldura {
  transform: translateY(-6px);
  border-color: var(--acento);
  box-shadow:
    0 24px 60px -28px rgba(0, 0, 0, 0.6),
    0 8px 22px -14px rgba(214, 162, 74, 0.4);
}

.vestigio:hover .vestigio-moldura::before { opacity: 0.35; }
.vestigio:hover .vestigio-moldura::after { border-color: rgba(214, 162, 74, 0.25); inset: 12px; }
.vestigio:hover .vestigio-img { transform: scale(1.06); filter: saturate(1.05) contrast(1.08); }

.vestigio-meta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--bruma);
}

.vestigio-codigo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.vestigio-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.1;
  color: var(--papel);
  text-transform: lowercase;
  letter-spacing: -0.005em;
}

.vestigio:hover .vestigio-titulo { color: var(--acento); }
.vestigio:hover .vestigio-codigo { color: var(--papel-2); }

.vestigio-ano {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  text-align: right;
}

/* === Posições editoriais individuais (12 colunas) === */

.v-pos-1 { grid-column: 1 / span 7; }
.v-pos-1 .vestigio-moldura { aspect-ratio: 5 / 4; }

.v-pos-2 { grid-column: 9 / span 4; margin-top: clamp(20px, 6vw, 80px); }
.v-pos-2 .vestigio-moldura { aspect-ratio: 3 / 4; }

.v-pos-3 { grid-column: 2 / span 4; margin-top: -40px; }
.v-pos-3 .vestigio-moldura { aspect-ratio: 1 / 1; }

.v-pos-4 { grid-column: 7 / span 5; }
.v-pos-4 .vestigio-moldura { aspect-ratio: 4 / 3; }

.v-pos-5 { grid-column: 1 / span 5; margin-top: 24px; }
.v-pos-5 .vestigio-moldura { aspect-ratio: 5 / 7; }

.v-pos-6 { grid-column: 7 / span 5; margin-top: clamp(40px, 7vw, 110px); }
.v-pos-6 .vestigio-moldura { aspect-ratio: 4 / 5; }

.v-pos-7 { grid-column: 2 / span 6; }
.v-pos-7 .vestigio-moldura { aspect-ratio: 16 / 11; }

.v-pos-8 { grid-column: 9 / span 4; margin-top: -28px; }
.v-pos-8 .vestigio-moldura { aspect-ratio: 3 / 4; }

@media (max-width: 980px) {
  .vestigios-caderno { gap: 32px 18px; }
  .v-pos-1 { grid-column: 1 / -1; }
  .v-pos-2 { grid-column: 1 / span 6; margin-top: 0; }
  .v-pos-3 { grid-column: 7 / span 6; margin-top: 0; }
  .v-pos-4 { grid-column: 1 / -1; }
  .v-pos-5 { grid-column: 1 / span 6; margin-top: 0; }
  .v-pos-6 { grid-column: 7 / span 6; margin-top: 0; }
  .v-pos-7 { grid-column: 1 / -1; }
  .v-pos-8 { grid-column: 1 / -1; margin-top: 0; }
}

/* ====================================================================
   TRAÇOS — mural torto (caderno de desenhos)
   Os desenhos não entram numa grade certinha: viram um mural de peças
   pregadas na parede, cada uma com leve giro, recuo e largura próprios.
   Reusa a estrutura .vestigio (logo o lightbox de fotografias funciona
   sem JS novo) — aqui só trocamos o LAYOUT: de grade editorial para
   colunas masonry desalinhadas. O scatter de cada peça vem de variáveis
   inline (--giro / --desloca / --larg) na marcação.
   ==================================================================== */
/* palco posicionado só para ancorar a marca d'água atrás do mural */
.tracos-palco {
  position: relative;
}

/* assinatura como marca d'água — grande, em serifa itálica, bem apagada,
   levemente inclinada. Fica ATRÁS das peças (z-index 0): aparece nos vãos
   "no meio dos desenhos". Como a peça em hover sobe para z-index 6, passar o
   cursor faz o desenho subir por cima da assinatura. */
.tracos-marca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-5deg);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(48px, 11vw, 168px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--brasa);
  opacity: 0.14;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.tracos-mural {
  position: relative;
  z-index: 1;
  columns: 3;
  column-gap: clamp(22px, 3vw, 54px);
  margin-top: clamp(40px, 6vw, 96px);
  padding: clamp(10px, 2vw, 36px) clamp(0px, 2vw, 30px) 0;
}

.tracos-mural .traco {
  /* peça não pode ser cortada entre colunas */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: block;
  width: var(--larg, 100%);
  margin: 0 0 clamp(30px, 4.5vw, 72px);
  /* o desalinho proposital: gira e desloca cada peça */
  transform: rotate(var(--giro, 0deg)) translateY(var(--desloca, 0px));
  transform-origin: 50% 0;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
  position: relative;
  z-index: 1;
}
/* peças marcadas .traco-dir encostam à direita da coluna; o resto à
   esquerda — assim as larguras menores não ficam centradas e simétricas */
.tracos-mural .traco-dir { margin-left: auto; }

/* a moldura vira um "passe-partout": mat de creme + sombra, como desenho
   montado na parede escura (sem o aspect-ratio fixo das fotos) */
.tracos-mural .traco .vestigio-moldura {
  aspect-ratio: auto;
  background: var(--papel);
  padding: clamp(10px, 1.4vw, 20px);
  border-color: color-mix(in oklab, var(--papel) 70%, var(--tinta-base));
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.7);
}
/* mostra o desenho inteiro (contain), não recortado; altura natural para
   o masonry medir cada peça */
.tracos-mural .traco .vestigio-img {
  height: auto;
  object-fit: contain;
  filter: none;
  background: var(--papel);
}

/* pino/percevejo no topo, reforçando o "pregado na parede" */
.tracos-mural .traco::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--brasa), #5e2417 75%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  z-index: 4;
  opacity: 0.85;
  transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* hover: a peça se endireita, sobe e ganha frente; o pino fica firme */
.tracos-mural .traco:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.025);
  z-index: 6;
}
.tracos-mural .traco:hover::before { transform: translateY(-2px) scale(1.12); }
/* a moldura base já acende borda/sombra no hover; só evitamos o duplo
   deslocamento (a translação agora é da peça inteira) */
.tracos-mural .traco:hover .vestigio-moldura {
  transform: none;
  border-color: var(--brasa);
  box-shadow: 0 30px 64px -28px rgba(0, 0, 0, 0.72);
}
.tracos-mural .traco:hover .vestigio-img { transform: none; }

/* legenda enxuta: só código + título (sem ficha-técnica inventada) */
.tracos-mural .traco .vestigio-meta {
  grid-template-columns: auto 1fr;
  border-top-color: color-mix(in oklab, var(--papel) 28%, transparent);
}
.tracos-mural .traco:hover .vestigio-titulo { color: var(--brasa); }

@media (max-width: 900px) {
  .tracos-mural { columns: 2; column-gap: clamp(18px, 3vw, 34px); }
}
@media (max-width: 560px) {
  /* no celular o mural se endireita: largura cheia e sem giro, pela leitura */
  .tracos-mural { columns: 1; padding-top: 8px; }
  .tracos-mural .traco {
    width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tracos-mural .traco { transform: none !important; transition: none; }
  .tracos-mural .traco::before { display: none; }
}

/* === Portal dimensional — overlay ao clicar uma foto === */

.portal-vestigio {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--tinta-deep) 92%, transparent);
  backdrop-filter: blur(22px) saturate(110%);
  -webkit-backdrop-filter: blur(22px) saturate(110%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms ease, backdrop-filter 520ms ease;
}

.portal-vestigio.aberto {
  opacity: 1;
  pointer-events: auto;
}

.portal-vestigio-fundo-grao {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  opacity: 0.085;
  mix-blend-mode: overlay;
}

.portal-vestigio-aros {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 1;
}

.portal-vestigio-aros span {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid var(--acento);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
  --tam: 60vmin;
  width: var(--tam);
  height: var(--tam);
}

.portal-vestigio.aberto .portal-vestigio-aros span {
  animation: aroExpansao 2400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.portal-vestigio.aberto .portal-vestigio-aros span:nth-child(1) { animation-delay: 60ms;  --tam: 30vmin; opacity: 0.6; }
.portal-vestigio.aberto .portal-vestigio-aros span:nth-child(2) { animation-delay: 220ms; --tam: 55vmin; opacity: 0.4; }
.portal-vestigio.aberto .portal-vestigio-aros span:nth-child(3) { animation-delay: 380ms; --tam: 85vmin; opacity: 0.25; }
.portal-vestigio.aberto .portal-vestigio-aros span:nth-child(4) { animation-delay: 540ms; --tam: 130vmin; opacity: 0.15; }

@keyframes aroExpansao {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.18);
    border-color: var(--acento);
  }
  20% {
    opacity: var(--op-pico, 0.55);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.0);
    border-color: rgba(214, 162, 74, 0.0);
  }
}

.portal-vestigio-palco {
  position: relative;
  width: min(82vw, 1100px);
  max-height: min(82vh, 900px);
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  z-index: 3;
  transform: scale(0.92);
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-vestigio.aberto .portal-vestigio-palco { transform: scale(1); }

.portal-vestigio-quadro {
  position: relative;
  border: 1px solid var(--acento);
  padding: 14px;
  background:
    linear-gradient(to bottom, rgba(214,162,74,0.04), rgba(0,0,0,0.0)),
    var(--tinta-base);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.portal-vestigio-quadro::before,
.portal-vestigio-quadro::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--acento);
}
.portal-vestigio-quadro::before {
  top: -7px; left: -7px;
  border-right: 0; border-bottom: 0;
}
.portal-vestigio-quadro::after {
  bottom: -7px; right: -7px;
  border-left: 0; border-top: 0;
}

.portal-vestigio-quadro img {
  max-width: 100%;
  max-height: min(70vh, 760px);
  display: block;
  filter: saturate(1.03) contrast(1.06);
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform 200ms ease-out;
  will-change: transform;
  -webkit-user-drag: none;
  user-select: none;
}

/* Marca d'água sobre o desenho ampliado (só quando o overlay tem .com-marca,
   isto é, abriu a partir de um traço). Centralizada e sutil — proteção contra
   apropriação. O mix-blend difference garante que ela apareça tanto nas áreas
   claras quanto escuras do desenho, sem virar uma tarja opaca. */
.portal-vestigio-marca {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-22deg);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(26px, 4.6vw, 60px);
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  mix-blend-mode: difference;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity 600ms ease 200ms;
  z-index: 4;
}
.portal-vestigio.com-marca .portal-vestigio-marca { opacity: 1; }

.portal-vestigio-legenda {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 22px;
  color: var(--papel-2);
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.portal-vestigio-legenda .titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: 0;
  text-transform: lowercase;
  color: var(--papel);
}

.portal-vestigio-fechar {
  position: absolute;
  top: clamp(20px, 4vh, 40px);
  right: clamp(20px, 4vw, 56px);
  background: transparent;
  border: 1px solid var(--bruma);
  color: var(--papel-2);
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 200ms, border-color 200ms, background 200ms;
  z-index: 4;
}

.portal-vestigio-fechar:hover {
  color: var(--acento);
  border-color: var(--acento);
  background: rgba(214,162,74,0.05);
}

.portal-vestigio-fechar::before {
  content: "✕";
  font-size: 12px;
}

.portal-vestigio-dica {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 12px;
  color: var(--grafite);
  letter-spacing: 0;
  z-index: 4;
  white-space: nowrap;
}
.portal-vestigio-dica em { color: var(--papel-2); font-style: normal; font-family: var(--mono-met); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--bruma); margin: 0 3px; }

@media (prefers-reduced-motion: reduce) {
  .portal-vestigio { transition: opacity 200ms ease; backdrop-filter: blur(12px); }
  .portal-vestigio-palco { transform: scale(1); transition: none; }
  .portal-vestigio.aberto .portal-vestigio-aros span { animation: none; opacity: 0; }
}

/* ============================================================
   MATÉRIA — quem assina (perfil editorial)
   ============================================================ */

.materia {
  padding: var(--gap-l) 0 var(--gap-xl);
}

.materia-cabec {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  padding-bottom: clamp(48px, 7vh, 96px);
  border-bottom: 1px solid var(--bruma);
  margin-bottom: clamp(56px, 8vh, 96px);
  align-items: end;
}

.materia-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 24px;
  display: block;
}

.materia-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(42px, 5.4vw, 86px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0 0 28px;
}

.materia-titulo em {
  font-family: var(--serif-corpo);
  font-weight: 300;
  font-size: 0.34em;
  color: var(--papel-2);
  display: block;
  margin-top: 18px;
  letter-spacing: 0;
}

.materia-lede {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--papel-2);
  max-width: 38ch;
  margin: 0;
}

.materia-lede em { color: var(--papel); }

/* Ficha técnica — colado na coluna direita */
.materia-ficha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--bruma);
  font-family: var(--mono-met);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
}

.materia-ficha .linha {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--bruma);
  align-items: baseline;
}

.materia-ficha .linha:last-child { border-bottom: 1px solid var(--bruma); }

.materia-ficha dt { color: var(--grafite); margin: 0; }
.materia-ficha dd {
  margin: 0;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--papel);
}

.materia-ficha dd em {
  color: var(--acento);
  font-style: normal;
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-right: 8px;
  display: inline-block;
}

/* Corpo da matéria — duas colunas com marginália */

.materia-corpo {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 2fr);
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(60px, 8vh, 100px);
  position: relative;
}

.materia-prosa {
  font-family: var(--serif-corpo);
  font-size: 19px;
  line-height: 1.78;
  color: var(--papel);
  max-width: 64ch;
  /* Fio condutor: um filete vertical à esquerda costura as seções (§) numa
     coluna editorial contínua, em vez de blocos soltos competindo. */
  position: relative;
  padding-left: clamp(20px, 3vw, 40px);
}

.materia-prosa::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  bottom: 0.4em;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--bruma) 8%,
    var(--bruma) 92%,
    transparent
  );
}

.materia-prosa h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1;
  color: var(--papel);
  margin: 72px 0 24px;
  letter-spacing: -0.01em;
}

.materia-prosa h3:first-child { margin-top: 0; }

.materia-prosa h3 .numero {
  font-family: var(--mono-met);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--acento);
  vertical-align: middle;
  padding-right: 16px;
  border-right: 1px solid var(--bruma);
  margin-right: 16px;
}

.materia-prosa p {
  margin: 0 0 1.5em;
  text-wrap: pretty;
}

.materia-prosa p em { color: var(--papel-2); font-style: italic; }

/* O <strong> da prosa fica no HTML pela semântica, mas sem realce visual:
   num perfil editorial sóbrio, a ênfase é carregada pelo itálico (<em>), não
   pelo negrito decorativo. Herda peso/cor/estilo do parágrafo — leitura corrida. */
.materia-prosa p strong {
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}

.materia-prosa p:first-of-type::first-letter,
.materia-prosa .capitular::first-letter {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 4.6em;
  line-height: 0.85;
  float: left;
  padding: 0.08em 0.14em 0 0;
  color: var(--acento);
}

/* §01 abertura — capitular clássica: o parágrafo de abertura era a classe
   .capitular global aplicada no <p> inteiro, então herdava 5em + cor âmbar
   e virava um bloco monumental todo amarelo (grito tipográfico). Aqui o
   corpo volta a ser parágrafo normal de leitura (creme, mesmo tamanho dos
   vizinhos) e o âmbar fica só na letra inicial (drop-cap, regra ::first-letter
   acima). Sobrescreve a classe global por especificidade. */
.materia-prosa .capitular {
  font-family: var(--serif-corpo);
  font-size: 19px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.72;
  color: var(--papel);
  max-width: none;
  float: none;
  text-wrap: pretty;
}

.materia-aside {
  position: sticky;
  top: 130px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Aside mais quieto: as caixas com borda cheia competiam com a prosa. Um filete
   curto e discreto marca o início do bloco sem peso de "caixa". */
.materia-aside-bloco {
  padding-top: 22px;
  position: relative;
}

.materia-aside-bloco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--acento);
  opacity: 0.55;
}

.materia-aside-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 16px;
  display: block;
}

.materia-aside-bloco h4 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 24px;
  font-weight: 400;
  color: var(--papel);
  margin: 0 0 16px;
  letter-spacing: -0.005em;
}

.materia-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--papel-2);
}

.materia-aside li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: baseline;
}

.materia-aside li .marca {
  font-family: var(--mono-met);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  text-transform: uppercase;
  padding-top: 2px;
}

/* Idem nas listas do aside: cada item abria com uma palavra em destaque, e o
   empilhamento virava ruído. Sem realce, a lista lê como texto corrido e quieto. */
.materia-aside li strong {
  font-style: inherit;
  font-weight: inherit;
  color: inherit;
}

/* Coordenadas — uma assinatura editorial no fim da matéria */
.materia-coordenadas {
  margin-top: clamp(48px, 7vh, 96px);
  padding: clamp(40px, 5vw, 64px);
  border: 1px solid var(--bruma);
  background:
    linear-gradient(to bottom right, rgba(214,162,74,0.03), transparent 50%),
    var(--tinta-base);
  position: relative;
}

.materia-coordenadas::before {
  content: "COORDENADAS · 19°55′S 43°56′W";
  position: absolute;
  top: -8px; left: 24px;
  background: var(--tinta-base);
  padding: 0 12px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--acento);
}

.materia-coordenadas p {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.3;
  color: var(--papel);
  margin: 0;
  text-wrap: balance;
}

.materia-coordenadas p em { color: var(--acento); font-style: italic; }

.materia-coordenadas .assinatura {
  margin-top: 32px;
  font-family: var(--serif-corpo);
  font-style: italic;
  font-size: 13px;
  color: var(--grafite);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px dashed var(--bruma);
}

@media (max-width: 980px) {
  .materia-cabec { grid-template-columns: 1fr; }
  .materia-corpo { grid-template-columns: 1fr; }
  .materia-aside { position: static; }
}

/* === Retrato em multiversos — efeito marcante do perfil ===
   me.jpg renderizado com ecos cromáticos deslocados que respondem
   ao cursor e ao scroll: a cada movimento o retrato se desdobra
   em outras versões de si. É a filosofia "minhas versões, meus
   mundos interiores" feita imagem. */

.materia-retrato {
  position: relative;
  margin: clamp(20px, 4vh, 56px) 0 clamp(56px, 8vh, 100px);
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  --rx: 0;
  --ry: 0;
}

.materia-retrato-palco {
  position: relative;
  aspect-ratio: 4 / 5;
  isolation: isolate;
  /* retrato um pouco menor — não domina mais a coluna */
  width: 100%;
  max-width: 340px;
  justify-self: start;
}

/* camadas-eco — três cópias da mesma imagem, deslocadas e tingidas */
.materia-retrato-eco {
  position: absolute;
  inset: 0;
  background-image: var(--retrato-src);
  background-size: cover;
  background-position: center 28%;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform;
}

.materia-retrato-eco.a {
  filter: grayscale(1) brightness(0.9) sepia(1) hue-rotate(-18deg) saturate(2.4);
  transform: translate3d(calc(var(--rx) * -22px), calc(var(--ry) * -16px), 0);
  opacity: 0.55;
}
.materia-retrato-eco.b {
  filter: grayscale(1) brightness(0.85) sepia(1) hue-rotate(150deg) saturate(2.0);
  transform: translate3d(calc(var(--rx) * 20px), calc(var(--ry) * 14px), 0);
  opacity: 0.42;
}

/* imagem-mestre nítida por cima */
.materia-retrato-mestre {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  z-index: 2;
  transition: filter 700ms ease;
}

.materia-retrato:hover .materia-retrato-mestre {
  filter: grayscale(0.2) contrast(1.06) brightness(1.02) sepia(0.18);
}

/* moldura técnica */
.materia-retrato-palco::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--bruma);
  z-index: 3;
  pointer-events: none;
}
.materia-retrato-palco::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(214,162,74,0.22);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease, inset 500ms ease;
}
.materia-retrato:hover .materia-retrato-palco::after { opacity: 1; inset: 14px; }

/* scanline + grão sobre o retrato */
.materia-retrato-velo {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0.0) 0,
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.16) 3px,
      rgba(0,0,0,0.0) 4px
    );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

.materia-retrato-codigo {
  position: absolute;
  bottom: -1px;
  left: -1px;
  z-index: 5;
  background: var(--tinta-base);
  border: 1px solid var(--bruma);
  border-left: 0;
  border-bottom: 0;
  padding: 8px 14px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
}

/* lado direito — texto kinético */
.materia-retrato-texto {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.materia-retrato-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
}

.materia-retrato-frase {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--papel);
  margin: 0;
  text-wrap: balance;
}

.materia-retrato-frase em {
  /* âmbar amaciado só nesta frase grande (mel/bronze quente) — vira brilho,
     não grito, e harmoniza com o creme do corpo. O --acento do resto do
     site segue cheio. */
  color: color-mix(in oklab, var(--acento) 74%, var(--papel) 26%);
  font-style: italic;
}

.materia-retrato-legenda {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: var(--papel-2);
  margin: 0;
  max-width: 40ch;
  padding-top: 22px;
  border-top: 1px dashed var(--bruma);
}

.materia-retrato-contador {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.materia-retrato-contador strong { color: var(--acento); font-weight: 400; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .materia-retrato { grid-template-columns: 1fr; gap: 36px; }
  .materia-retrato-palco { max-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  .materia-retrato-eco { transform: none !important; }
}

/* ============================================================
   MÁQUINA — terminal autoral, projetos + cadernos técnicos
   Aqui o sistema visual quebra de propósito: a tipografia
   monoespaçada toma a frente, mas o tom continua editorial.
   ============================================================ */

.maquina {
  padding: 0 0 var(--gap-xl);
  position: relative;
  font-family: var(--mono-met);
}

/* Linha de status no topo — terminal vivo */

.maquina-status {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-top: 1px solid var(--bruma);
  border-bottom: 1px solid var(--bruma);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: clamp(48px, 6vh, 80px);
}

.maquina-status .id {
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.maquina-status .id::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--acento);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(214,162,74,0.5);
  animation: chama 4.2s ease-in-out infinite;
}

.maquina-status .bar {
  height: 1px;
  background: linear-gradient(to right, var(--bruma) 0%, var(--bruma) 60%, transparent 100%);
}

.maquina-status .ts {
  color: var(--papel-2);
  font-variant-numeric: tabular-nums;
}

.maquina-status .ts strong {
  color: var(--acento);
  font-weight: 500;
  margin-right: 6px;
}

/* Hero — tipografia massiva, parte mono parte serif */

.maquina-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(56px, 8vh, 96px);
  border-bottom: 1px solid var(--bruma);
  margin-bottom: clamp(64px, 9vh, 120px);
}

.maquina-hero-esq h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(60px, 8.4vw, 132px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0 0 20px;
}

.maquina-hero-esq h2 .esquerdo {
  font-family: var(--mono-met);
  font-style: normal;
  font-weight: 500;
  font-size: 0.34em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  display: block;
  margin-bottom: 24px;
}

.maquina-hero-esq p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  color: var(--papel-2);
  margin: 0;
  max-width: 44ch;
}

.maquina-hero-dir {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: clamp(20px, 3vw, 40px);
  border-left: 1px solid var(--bruma);
  align-self: stretch;
  justify-content: flex-end;
}

.maquina-spec {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 18px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  padding: 12px 0;
  border-bottom: 1px dashed var(--bruma);
}

.maquina-spec:last-child { border-bottom: 0; }

.maquina-spec .k { color: var(--grafite); }
.maquina-spec .v {
  color: var(--papel);
  font-family: var(--mono-met);
  letter-spacing: 0.06em;
  text-transform: none;
  font-size: 12px;
}

.maquina-spec .v em {
  color: var(--acento);
  font-style: normal;
  margin-right: 6px;
}

/* Divisão: projetos | blog */

.maquina-corpo {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 4vw, 72px);
  align-items: start;
}

.maquina-coluna-rotulo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 16px;
  margin-bottom: var(--gap-l);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--bruma);
}

.maquina-coluna-rotulo .lbl {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
}

.maquina-coluna-rotulo h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.92;
  color: var(--papel);
  margin: 0;
  letter-spacing: -0.005em;
}

.maquina-coluna-rotulo .meta {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  text-align: right;
  line-height: 1.6;
}

.maquina-coluna-rotulo .meta strong { color: var(--acento); font-weight: 400; }

/* Projetos: cards "instrument panel" */

.maquina-projetos {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bruma);
  border: 1px solid var(--bruma);
}

.maq-projeto {
  background: var(--tinta-base);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 22px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background 280ms ease;
  position: relative;
}

.maq-projeto:hover { background: var(--tinta-2); }
.maq-projeto:hover .maq-projeto-nome { color: var(--acento); }
.maq-projeto:hover .maq-projeto-seta { color: var(--acento); transform: translateX(6px); }

.maq-projeto-id {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-top: 4px;
  font-variant-numeric: tabular-nums;
}

.maq-projeto-corpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.maq-projeto-classe {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--acento);
}

.maq-projeto-nome {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  color: var(--papel);
  letter-spacing: -0.005em;
  transition: color 240ms ease;
  margin: 0;
}

.maq-projeto-tese {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
  color: var(--papel-2);
  margin: 4px 0 8px;
  max-width: 56ch;
}

.maq-projeto-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.maq-projeto-stack span {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  padding: 3px 8px;
  border: 1px solid var(--bruma);
}

.maq-projeto-meta {
  text-align: right;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  line-height: 1.7;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.maq-projeto-meta .estado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--acento);
}

.maq-projeto-meta .estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
}

.maq-projeto-meta .estado.frio { color: var(--grafite); }
.maq-projeto-meta .estado.frio::before { background: var(--grafite); }

.maq-projeto-seta {
  position: absolute;
  right: 28px;
  bottom: 22px;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 20px;
  color: var(--papel-2);
  transition: transform 280ms ease, color 280ms ease;
}

/* Blog (cadernos técnicos) — feed monoespaçado */

.maquina-blog {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--bruma);
}

.maq-post {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 24px 0;
  border-bottom: 1px dashed var(--bruma);
  cursor: pointer;
  transition: padding 280ms ease;
}

.maq-post:hover { padding-left: 12px; }
.maq-post:hover .maq-post-titulo { color: var(--acento); }

.maq-post-cabec {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.maq-post-cabec .tag {
  color: var(--acento);
}

.maq-post-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--papel);
  margin: 4px 0 0;
  letter-spacing: -0.005em;
  transition: color 240ms ease;
}

.maq-post-resumo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--papel-2);
  margin: 0;
  max-width: 56ch;
}

/* Bloco terminal — pequeno destaque de comando atual */

.maquina-terminal {
  margin-top: clamp(72px, 10vh, 140px);
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3vw, 48px);
  border: 1px solid var(--bruma);
  background:
    radial-gradient(circle at 18% 30%, rgba(110, 140, 90, 0.05), transparent 50%),
    var(--tinta-base);
  position: relative;
  overflow: hidden;
}

.maquina-terminal::before {
  content: "PROMPT · ATELIER//MAQUINA";
  position: absolute;
  top: -8px;
  left: 24px;
  background: var(--tinta-base);
  padding: 0 12px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--acento);
}

.maquina-terminal-linha {
  font-family: var(--mono-met);
  font-size: 14px;
  line-height: 1.6;
  color: var(--papel-2);
  margin: 0 0 10px;
  display: flex;
  gap: 14px;
}

.maquina-terminal-linha:last-child { margin-bottom: 0; }
.maquina-terminal-linha .p { color: var(--acento); white-space: nowrap; }
.maquina-terminal-linha .o { color: var(--grafite); font-style: italic; }
.maquina-terminal-linha .c { color: var(--papel); }

.maquina-terminal-frase {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--bruma);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.4;
  color: var(--papel);
  max-width: 56ch;
}

.maquina-terminal-frase em { color: var(--acento); }

@media (max-width: 960px) {
  .maquina-hero { grid-template-columns: 1fr; }
  .maquina-hero-dir { border-left: 0; padding-left: 0; border-top: 1px dashed var(--bruma); padding-top: 24px; }
  .maquina-corpo { grid-template-columns: 1fr; gap: 60px; }
  .maq-projeto { grid-template-columns: 50px 1fr; }
  .maq-projeto-meta { grid-column: 2; align-items: flex-start; text-align: left; }
  .maq-projeto-seta { display: none; }
}

/* === MÁQUINA · ousadia — malha reativa, blueprint, glitch === */

.maquina { isolation: isolate; }

/* malha de pontos que reage ao cursor (canvas atrás de tudo) */
.maquina-malha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}
.maquina > *:not(.maquina-malha) { position: relative; z-index: 1; }

/* título com eco glitch sutil */
.maquina-hero-esq h2 {
  position: relative;
}
.maquina-hero-esq h2::after {
  content: attr(data-glitch);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--acento);
  opacity: 0;
  mix-blend-mode: screen;
  clip-path: inset(0 0 60% 0);
  pointer-events: none;
}
.maquina-hero-esq:hover h2::after {
  animation: glitchEco 900ms steps(2) 1;
}
@keyframes glitchEco {
  0%   { opacity: 0; transform: translate(0,0); }
  20%  { opacity: 0.6; transform: translate(-3px, 1px); clip-path: inset(0 0 62% 0); }
  40%  { opacity: 0.4; transform: translate(2px, -1px); clip-path: inset(40% 0 20% 0); }
  60%  { opacity: 0.5; transform: translate(-2px, 0); clip-path: inset(70% 0 8% 0); }
  100% { opacity: 0; transform: translate(0,0); }
}

/* blueprint hover nos cards de projeto — cantos que "desenham" */
.maq-projeto { overflow: hidden; }
.maq-projeto-bp {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  color: var(--acento);
  opacity: 0;
  transition: opacity 360ms ease;
}
.maq-projeto:hover .maq-projeto-bp { opacity: 0.5; }
.maq-projeto-bp line, .maq-projeto-bp rect, .maq-projeto-bp circle {
  stroke: currentColor;
  fill: none;
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pathLength: 1;
  transition: stroke-dashoffset 700ms ease;
}
.maq-projeto:hover .maq-projeto-bp line,
.maq-projeto:hover .maq-projeto-bp rect,
.maq-projeto:hover .maq-projeto-bp circle {
  stroke-dashoffset: 0;
}
.maq-projeto > * { position: relative; z-index: 1; }

/* faixa de varredura que cruza o card no hover */
.maq-projeto::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(214,162,74,0.5), transparent);
  opacity: 0;
  z-index: 0;
}
.maq-projeto:hover::after {
  animation: varredura 1100ms cubic-bezier(0.16,1,0.3,1) 1;
}
@keyframes varredura {
  from { opacity: 0.8; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(min(100%, 900px)); }
}

/* terminal — cursor piscando na última linha enquanto digita */
.maquina-terminal-linha.digitando::after {
  content: "▋";
  color: var(--acento);
  animation: piscaCursor 900ms steps(1) infinite;
  margin-left: 2px;
}
@keyframes piscaCursor { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .maquina-malha { display: none; }
  .maq-projeto::after, .maquina-hero-esq:hover h2::after { animation: none; }
}

/* ============================================================
   RUÍDO — caderno aberto, parede de fragmentos heterogêneos.
   Cada peça com sua própria forma. Não há grade rígida.
   ============================================================ */

#pagina-ruido {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(rgba(0, 0, 0, 0.075), rgba(0, 0, 0, 0.075)),
    var(--tinta-base);
}

#pagina-ruido > .container {
  position: relative;
  z-index: 2;
}

#pagina-ruido::before,
#pagina-ruido::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#pagina-ruido::before {
  z-index: 0;
  opacity: 0.16;
  mix-blend-mode: screen;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='19'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom, rgba(239, 236, 228, 0.04) 0 1px, transparent 1px 7px);
  background-size: 180px 180px, 100% 8px;
}

#pagina-ruido::after {
  z-index: 1;
  opacity: 0.42;
  background:
    linear-gradient(to bottom, transparent 11%, rgba(239, 236, 228, 0.035) 11.2%, transparent 11.7%, transparent 38%, rgba(214, 162, 74, 0.045) 38.2%, transparent 38.6%, transparent 67%, rgba(239, 236, 228, 0.03) 67.2%, transparent 67.7%),
    repeating-linear-gradient(92deg, transparent 0 118px, rgba(239, 236, 228, 0.018) 119px, transparent 121px),
    repeating-linear-gradient(to bottom, transparent 0 54px, rgba(214, 162, 74, 0.018) 55px, transparent 57px);
  mix-blend-mode: screen;
  animation: ruidoDeriva 16s steps(6, end) infinite;
}

@keyframes ruidoDeriva {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.36; }
  34% { transform: translate3d(-8px, 3px, 0); opacity: 0.46; }
  68% { transform: translate3d(6px, -2px, 0); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
  #pagina-ruido::after { animation: none; }
}

.ruido {
  padding: var(--gap-l) 0 var(--gap-xl);
  position: relative;
  isolation: isolate;
}

/* campo de grão + fios que conectam as ideias (atrás das peças) */
/* O ruído volta a compartilhar o mesmo fundo de todas as páginas — o grão
   e o véu quente são globais (position:fixed), então o fundo fica idêntico
   em qualquer rota. O campo abriga apenas os fios que ligam as ideias —
   nada de superfície/bloco próprio. */
.ruido-campo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* O grão local virava um retângulo na largura do .container (a coluna
   central descendo a página). Como o grão global já cobre tudo de forma
   uniforme, o local sai de cena — o fundo do ruído fica limpo. */
.ruido-grao { display: none; }
.ruido-fios {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ruido-fios line {
  stroke: var(--bruma);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke 320ms ease, stroke-opacity 320ms ease;
  stroke-opacity: 0.5;
}
.ruido-fios line.aceso {
  stroke: var(--acento);
  stroke-opacity: 0.9;
}
.ruido-fios circle { fill: var(--grafite); transition: fill 320ms ease; }
.ruido-fios circle.aceso { fill: var(--acento); }

.ruido > .container > *,
.ruido-cabec, .ruido-parede { position: relative; z-index: 1; }

.ruido-cabec {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: end;
  padding-bottom: clamp(40px, 6vh, 72px);
  border-bottom: 1px solid var(--bruma);
  margin-bottom: clamp(48px, 7vh, 88px);
}

.ruido-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 22px;
  display: block;
}

.ruido-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(64px, 9vw, 144px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0;
}

.ruido-subtitulo {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  color: var(--papel-2);
  max-width: 40ch;
  margin: 0;
}

.ruido-medidor {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}

.ruido-medidor .barra {
  flex: 1;
  max-width: 220px;
  height: 1px;
  background: var(--bruma);
  position: relative;
}

.ruido-medidor .barra::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 42%;
  background: var(--acento);
}

/* Parede heterogênea — masonry leve via grid-auto-rows + spans */

/* Parede de recados — caos levemente organizado: as peças fluem em colunas
   (estilo mural) e recebem inclinações e deslizes variados (ver .ruido-peca). */
.ruido-parede {
  column-count: 3;
  column-gap: clamp(44px, 5vw, 96px);
}

.ruido-peca {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--bruma);
  background: var(--tinta-base);
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  margin: 0 0 clamp(44px, 4.5vw, 84px);
  break-inside: avoid;
  transition: border-color 280ms ease, background 280ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 320ms ease;
  overflow: hidden;
  transform: rotate(var(--rot, 0deg)) translate(var(--nx, 0px), var(--ny, 0px));
  z-index: 1;
}

/* o "espalhado" do mural — deslizes e larguras variados por peça
   (a inclinação --rot é semeada pelo JS por índice; aqui entra o deslize) */
.ruido-peca:nth-child(4n+1) { --nx: -22px; --ny: 4px;  margin-top: 18px; }
.ruido-peca:nth-child(4n+2) { --nx: 26px;  --ny: 30px; }
.ruido-peca:nth-child(4n+3) { --nx: -14px; --ny: 14px; margin-top: 34px; }
.ruido-peca:nth-child(4n)   { --nx: 18px;  --ny: 40px; }
.ruido-peca:nth-child(3n+2) { width: 84%; }
.ruido-peca:nth-child(5n+3) { width: 76%; margin-left: auto; }
.ruido-peca:nth-child(7n)   { width: 96%; margin-left: 8%; }
.ruido-peca:nth-child(5n+1) { width: 90%; margin-left: 4%; margin-top: 26px; }
.ruido-peca:nth-child(6n)   { margin-top: -12px; }

.ruido-peca:hover {
  border-color: var(--acento);
  background: var(--tinta-2);
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow: 0 26px 60px -30px rgba(0,0,0,0.7);
  z-index: 5;
}

.ruido-peca .data {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}

.ruido-peca .tipo {
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ruido-peca .tipo::before {
  content: "";
  width: 6px; height: 6px;
  background: currentColor;
}

/* — tipos de peça — */

.ruido-peca.fragmento {
  grid-column: span 5;
  grid-row: span 18;
}
.ruido-peca.fragmento p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  color: var(--papel);
  margin: 0;
  text-wrap: pretty;
}

.ruido-peca.citacao {
  grid-column: span 4;
  grid-row: span 22;
  border: 1px solid var(--acento);
  background:
    linear-gradient(to bottom right, rgba(214,162,74,0.05), transparent 60%),
    var(--tinta-base);
}
.ruido-peca.citacao blockquote {
  margin: 0;
  padding: 0;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.18;
  color: var(--papel);
}
.ruido-peca.citacao blockquote::before {
  content: "«";
  color: var(--acento);
  font-size: 1.4em;
  display: block;
  line-height: 0.5;
  margin-bottom: 8px;
}
.ruido-peca.citacao cite {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--grafite);
  margin-top: auto;
  display: block;
}

.ruido-peca.nota {
  grid-column: span 3;
  grid-row: span 14;
}
.ruido-peca.nota p {
  font-family: var(--mono-met);
  font-size: 13px;
  line-height: 1.55;
  color: var(--papel-2);
  margin: 0;
}
.ruido-peca.nota p strong { color: var(--papel); font-weight: 500; }

.ruido-peca.link {
  grid-column: span 4;
  grid-row: span 12;
}
.ruido-peca.link a {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 22px;
  color: var(--papel);
  text-decoration: none;
  line-height: 1.15;
  border-bottom: 1px solid var(--bruma);
  padding-bottom: 6px;
  transition: color 240ms, border-color 240ms;
}
.ruido-peca.link:hover a {
  color: var(--acento);
  border-bottom-color: var(--acento);
}
.ruido-peca.link .url {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--grafite);
  text-transform: lowercase;
  margin-top: auto;
}

.ruido-peca.pergunta {
  grid-column: span 5;
  grid-row: span 14;
}
.ruido-peca.pergunta p {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 32px;
  line-height: 1.1;
  color: var(--papel);
  margin: 0;
}
.ruido-peca.pergunta p::after {
  content: "?";
  color: var(--acento);
  margin-left: 0.06em;
}

.ruido-peca.lista {
  grid-column: span 3;
  grid-row: span 22;
}
.ruido-peca.lista ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ruido-peca.lista li {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.55;
  color: var(--papel-2);
  padding-left: 18px;
  position: relative;
}
.ruido-peca.lista li::before {
  content: "—";
  color: var(--acento);
  position: absolute;
  left: 0;
  font-style: normal;
}

/* §vi "não quero fazer páginas" — quebra deliberada do mural: em vez de
   mais uma coluna estreita e inclinada, esta peça atravessa as três colunas
   como uma faixa horizontal reta (column-span: all), rompendo o padrão.
   --rot vem inline do JS, por isso o !important para deixá-la sem inclinação. */
.ruido-peca.barulho {
  column-span: all;
  width: 100%;
  margin: clamp(28px, 5vw, 60px) 0;
  --nx: 0px;
  --ny: 0px;
  --rot: 0deg !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
  padding: clamp(30px, 4vw, 48px) clamp(30px, 5vw, 64px);
  background:
    repeating-linear-gradient(
      90deg,
      rgba(214, 162, 74, 0.06) 0,
      rgba(214, 162, 74, 0.06) 1px,
      transparent 1px,
      transparent 12px
    ),
    var(--tinta-base);
}
.ruido-peca.barulho p {
  flex: 1;
  min-width: 16ch;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  color: var(--papel);
  margin: 0;
  text-wrap: balance;
}
.ruido-peca.barulho p em { color: var(--acento); }

/* §vii xadrez — paixão fora da tela. O tabuleiro é line-art (mesma família
   dos glifos dos pilares): grade fina + as DUAS diagonais longas em âmbar —
   a clara (a8–h1, bispo da Catalã) e a escura (a1–h8, bispo da Índia do Rei),
   com os dois bispos marcados em g2 e g7. As aberturas se cruzam no centro. */
.ruido-peca.xadrez .xadrez-tabuleiro {
  width: 100%;
  max-width: 132px;
  height: auto;
  margin: 2px 0 6px;
  color: var(--papel-2);
}
.ruido-peca.xadrez .grade {
  stroke: currentColor;
  stroke-width: 0.5;
  fill: none;
  opacity: 0.45;
}
.ruido-peca.xadrez .diagonal {
  stroke: var(--acento);
  stroke-width: 0.9;
  fill: none;
}
.ruido-peca.xadrez .bispo { fill: var(--acento); }
.ruido-peca.xadrez p {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--papel-2);
  margin: 0;
}
.ruido-peca.xadrez p strong {
  color: var(--papel);
  font-weight: 500;
  font-style: italic;
}

.ruido-peca.imagem {
  grid-column: span 4;
  grid-row: span 24;
  padding: 0;
  overflow: hidden;
}
.ruido-peca.imagem .placeholder-img {
  flex: 1;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(239, 236, 228, 0.04) 0,
      rgba(239, 236, 228, 0.04) 8px,
      transparent 8px,
      transparent 16px
    ),
    var(--tinta-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.ruido-peca.imagem .placeholder-img span {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

.ruido-peca.imagem .legenda {
  padding: 18px 22px;
  border-top: 1px solid var(--bruma);
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Lateral monetário discreta */
.ruido-peca .canto {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--mono-met);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  text-transform: uppercase;
}

@media (max-width: 1080px) {
  .ruido-parede { column-count: 2; }
}

@media (max-width: 640px) {
  .ruido-cabec { grid-template-columns: 1fr; }
  .ruido-parede { column-count: 1; }
  /* no celular o mural endireita: sem deslizes/larguras variadas
     (.ruido-parede .ruido-peca tem especificidade igual às regras nth-child
     e vem depois no arquivo, então vence) */
  .ruido-parede .ruido-peca { --nx: 0px; --ny: 0px; width: 100%; margin-left: 0; }
}

/* ============================================================
   CAPA · outro patamar — poeira de mundos sem glow central.
   Mantém partículas e profundidade, mas sem "bola de luz" atrás do título.
   ============================================================ */

.capa-orquestra {
  position: relative;
  isolation: isolate;
}

/* sem brilho amplo: evita a sensação de entrada/bola de luz na capa */
.capa-orquestra::before {
  display: none;
}
@keyframes portalRespira {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}

.capa-poeira {
  position: absolute;
  inset: -16% -8%;
  z-index: 0;
  pointer-events: none;
}

.capa-titulo-bloco,
.capa-leia { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .capa-poeira { display: none; }
}

/* ============================================================
   entreMultiversos · camada responsiva
   Telas pequenas (celular) e proporções/orientações diferentes.

   Aditiva por princípio: não reescreve as regras acima — só
   refina o que estoura ou fica grande demais fora do desktop.
   A tipografia monumental passa a fluida (clamp), os grids
   colapsam para coluna única e os floreios de ponteiro fino /
   canvas pesados são aliviados no toque. A alma editorial fica.
   ============================================================ */

/* --- 1. Trava anti-overflow horizontal -------------------------------
   O título da capa tinha corpo fixo (212px) e vazava a viewport em
   ~287px no celular. Corrigimos a causa (corpo fluido, logo abaixo)
   e ainda barramos qualquer vazamento residual de elemento solto.
   IMPORTANTE: `clip` (não `hidden`) — `hidden` cria um contêiner de
   rolagem no eixo de bloco e quebra o `position: sticky` do palco das
   camadas (Digital Artisan). `clip` barra o vazamento sem esse efeito. */
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; }

/* --- 2. Capa · título fluido -----------------------------------------
   118px/212px eram fixos em qualquer largura. Agora escalam com a
   tela sem perder a monumentalidade no desktop (o máximo é o valor
   antigo; em telas largas/estranhas o clamp segura o teto). */
.capa-titulo.v3 .ln-1 { font-size: clamp(44px, 15vw, 118px); }
.capa-titulo.v3 .ln-3 { font-size: clamp(68px, 30vw, 212px); }
.capa-titulo.v3 .ln-2 .marca { font-size: clamp(13px, 2.6vw, 20px); }

/* os recuos escalonados encolhem em tela estreita pra não empurrar
   o texto pra fora da margem (a composição assimétrica se mantém). */
@media (max-width: 760px) {
  .capa-titulo.v3 .ln-1 { margin-left: 12%; }
  .capa-titulo.v3 .ln-2 { margin-left: 50%; }
  .giro-palavra { margin-left: 4%; }
}
@media (max-width: 480px) {
  .capa-titulo.v3 .ln-1 { margin-left: 4%; }
  .giro-palavra { margin-left: 0; }
}

/* --- 3. Painel de tweaks · cabe na tela ------------------------------- */
.tweaks-painel { width: min(320px, calc(100vw - 32px)); }

/* --- 4. Toque · floreios de ponteiro fino ----------------------------
   A "lanterna" segue o cursor — inexistente no toque. Escondê-la
   alivia a composição e a bateria sem mudar nada do visual estático. */
@media (hover: none), (pointer: coarse) {
  .lanterna { display: none !important; }
}

/* --- 5. Listas (textos · arquivo · leituras) -------------------------
   .entrada era 80px·1fr·auto com gaps de 48px: no celular a data
   ficava espremida e cortada. Empilha em coluna única. */
@media (max-width: 600px) {
  .entrada { grid-template-columns: 1fr; gap: 6px; padding: 22px 0; }
  .entrada-numero { padding-top: 0; }
}

/* --- 6. Vestígios · galeria em coluna no celular ---------------------
   O caderno editorial de 12 colunas já vira 2-up no tablet; abaixo de
   560px cada vestígio ocupa a largura inteira. */
@media (max-width: 760px) {
  .vestigios-meta { white-space: normal; }   /* quebra em vez de cortar */
}
@media (max-width: 560px) {
  .vestigios-caderno { gap: 26px; }
  .v-pos-1, .v-pos-2, .v-pos-3, .v-pos-4,
  .v-pos-5, .v-pos-6, .v-pos-7, .v-pos-8 { grid-column: 1 / -1; margin-top: 0; }
}

/* --- 7. Grade de fotos (traços / prévias) ----------------------------
   .fotos-grade é uma grade fixa de 12 colunas com spans variados; no
   celular vira 2-up e, no muito estreito, 1-up. O !important anula os
   spans por nth-child dos layouts (mosaico etc.). */
@media (max-width: 700px) {
  .fotos-grade { grid-template-columns: 1fr 1fr; gap: 16px; }
  .fotos-grade .foto { grid-column: auto !important; }
  .fotos-grade.layout-ensaio .foto { grid-template-columns: 1fr !important; padding: 24px 0; }
}
@media (max-width: 460px) {
  .fotos-grade { grid-template-columns: 1fr; }
}

/* ============================================================
   DOBRAS · 2026-05-29 — efeitos sutis (margem, traços, matéria),
   folha de contato navegável e rodapé creme full-bleed.
   Tudo CSS-first: só transform/opacity, reagindo a scroll/hover
   ou a uma entrada one-shot quando a página fica ativa. Sem laço
   contínuo — design + performance no mesmo gesto.
   ============================================================ */

/* Tom creme do site — entre o branco-papel e o âmbar. Toda a tipografia
   que era branca (--papel) passa a usar este creme; o rodapé usa o mesmo
   creme como superfície. Calculado a partir do branco literal (#EFECE4)
   para evitar referência circular com o próprio --papel. */
:root {
  --creme: color-mix(in oklab, #EFECE4 78%, var(--acento) 22%);
  --papel: var(--creme);        /* a tinta clara do site vira creme */
  /* Superfície do rodapé: o mesmo creme, porém puxado para o escuro
     para apagar o contraste com o site (era forte demais). A tipografia
     do site continua no creme cheio — só o rodapé é amortecido. */
  --creme-rodape: color-mix(in oklab, var(--creme) 72%, var(--tinta-base) 28%);
  /* Realce do rodapé — oxblood quente. Cor de contraste direto com o creme
     (não usada no resto do site), para o título "entremultiversos" e as
     linhas separadoras, que sumiam no fundo. */
  --realce-rodape: #5A2116;
}

/* --- MARGEM (marginalia) — notas presas que se endireitam -----------
   A grade vira um mural de bilhetes levemente tortos; no hover a nota
   se alinha, sobe e a frase ganha um traço de marca-texto âmbar. */
#pagina-marginalia {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --margem-traco: rgba(214, 162, 74, 0.24);
  --margem-traco-frio: rgba(201, 199, 194, 0.1);
}

#pagina-marginalia > .container {
  position: relative;
  z-index: 2;
}

#pagina-marginalia .running-cabec,
#pagina-marginalia .secao-cabecalho,
#pagina-marginalia .folio-fim {
  border-color: color-mix(in oklab, var(--papel-2) 46%, transparent);
}

#pagina-marginalia .running-cabec {
  border-bottom-width: 2px;
}

#pagina-marginalia .secao-cabecalho {
  position: relative;
  z-index: 3;
  border-bottom: 0;
}

#pagina-marginalia .secao-cabecalho::before {
  content: "";
  position: absolute;
  inset: -34px 0 -28px;
  z-index: -1;
  background:
    linear-gradient(to right, var(--tinta-base), color-mix(in oklab, var(--tinta-base) 94%, transparent) 18%, color-mix(in oklab, var(--tinta-base) 94%, transparent) 82%, var(--tinta-base)),
    color-mix(in oklab, var(--tinta-base) 96%, transparent);
}

#pagina-marginalia .secao-cabecalho::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  z-index: 1;
  background: color-mix(in oklab, var(--papel-2) 46%, transparent);
}

#pagina-marginalia .folio-fim {
  border-top-width: 2px;
}

#pagina-marginalia .meta-secao,
#pagina-marginalia .folio-fim {
  color: var(--texto-terciario);
}

#pagina-marginalia .folio-fim a {
  color: var(--papel-2);
}

#pagina-marginalia::before,
#pagina-marginalia::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#pagina-marginalia::before {
  z-index: 0;
  background:
    linear-gradient(to right, rgba(239, 236, 228, 0.036) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(239, 236, 228, 0.028) 1px, transparent 1px);
  background-size: 160px 160px, 160px 160px;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 94%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 94%, transparent);
}

#pagina-marginalia::after {
  z-index: 1;
  opacity: 1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 960 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M70 62h112M278 62h54M560 62h124M716 82h86M120 122h86M432 122h62M664 122h74M96 244h86M314 244h62M542 244h86M742 244h94M190 304h82M468 304h104M700 304h72' stroke='rgba(214,162,74,.24)' stroke-width='1'/%3E%3Cpath d='M238 62h62M382 62h54M560 164h86M702 164h72M62 204h76M390 204h84M676 204h92M244 304h38' stroke='rgba(201,199,194,.1)' stroke-width='1'/%3E%3Cpath d='M236 62v34M612 122v28M806 122v24M154 244v38M514 244v28M774 244v34' stroke='rgba(201,199,194,.09)' stroke-width='1'/%3E%3C/g%3E%3Cg fill='rgba(214,162,74,.22)'%3E%3Ccircle cx='196' cy='82' r='2'/%3E%3Ccircle cx='438' cy='64' r='1.5'/%3E%3Ccircle cx='812' cy='206' r='2'/%3E%3Ccircle cx='344' cy='284' r='1.8'/%3E%3Ccircle cx='648' cy='302' r='1.6'/%3E%3C/g%3E%3Cg fill='rgba(201,199,194,.1)'%3E%3Ccircle cx='402' cy='122' r='1.5'/%3E%3Ccircle cx='546' cy='188' r='1.3'/%3E%3Ccircle cx='208' cy='326' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 960px 420px;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 96%, transparent),
    linear-gradient(to bottom, transparent 0 8%, #000 8% 16%, transparent 16% 43%, #000 43% 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 7%, #000 96%, transparent),
    linear-gradient(to bottom, transparent 0 8%, #000 8% 16%, transparent 16% 43%, #000 43% 100%);
  mask-composite: intersect, intersect, exclude;
}

.marginalia-mural {
  background: transparent;
  border: 0;
  gap: clamp(18px, 2vw, 30px);
}
.marginalia-mural .meia-luz-card {
  position: relative;
  isolation: isolate;
  background: color-mix(in oklab, var(--tinta-base) 84%, transparent);
  backdrop-filter: blur(1.5px);
  border: 2px solid color-mix(in oklab, var(--papel-2) 46%, transparent);
  transition:
    transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms ease,
    border-color 300ms ease;
}
.marginalia-mural .meia-luz-card:nth-child(3n+1) { transform: rotate(-2.2deg); }
.marginalia-mural .meia-luz-card:nth-child(3n+2) { transform: rotate(1.6deg); }
.marginalia-mural .meia-luz-card:nth-child(3n)   { transform: rotate(-0.9deg); }
.marginalia-mural .meia-luz-card:hover {
  transform: rotate(0deg) translateY(-5px);
  border-color: var(--acento);
  box-shadow: 0 24px 52px -34px rgba(0, 0, 0, 0.85);
  z-index: 2;
}
/* marca-texto que se desenha sob a frase no hover */
.marginalia-mural .meia-luz-card p {
  display: inline;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition: background-size 560ms cubic-bezier(0.16, 1, 0.3, 1);
  padding-bottom: 2px;
}
.marginalia-mural .meia-luz-card:hover p { background-size: 100% 2px; }

/* --- TRAÇOS (desenhos) — entrada escalonada + brilho de grafite ----- */
@keyframes tracoSurge {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
#pagina-desenhos.ativa .fotos-grade .foto {
  animation: tracoSurge 620ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
#pagina-desenhos.ativa .fotos-grade .foto:nth-child(1) { animation-delay: 80ms; }
#pagina-desenhos.ativa .fotos-grade .foto:nth-child(2) { animation-delay: 180ms; }
#pagina-desenhos.ativa .fotos-grade .foto:nth-child(3) { animation-delay: 280ms; }
#pagina-desenhos.ativa .fotos-grade .foto:nth-child(4) { animation-delay: 380ms; }

#pagina-desenhos .fotos-grade .foto {
  transition: transform 460ms cubic-bezier(0.16, 1, 0.3, 1);
}
#pagina-desenhos .fotos-grade .foto:hover { transform: translateY(-6px); }
#pagina-desenhos .placeholder-imagem {
  overflow: hidden;
  transition: border-color 360ms ease;
}
/* lâmina de luz que cruza o papel no hover (grafite pegando a luz) */
#pagina-desenhos .placeholder-imagem::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(239, 236, 228, 0.12) 50%, transparent 58%);
  transform: translateX(-60%);
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
#pagina-desenhos .foto:hover .placeholder-imagem { border-color: var(--acento); }
#pagina-desenhos .foto:hover .placeholder-imagem::before { transform: translateX(60%); }
/* título do estudo — sublinhado que se desenha no hover */
#pagina-desenhos .titulo-foto {
  display: inline-block;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 520ms cubic-bezier(0.16, 1, 0.3, 1), color 300ms ease;
}
#pagina-desenhos .foto:hover .titulo-foto { background-size: 100% 1px; color: var(--papel); }

/* --- MATÉRIA — réguas que se desenham nos títulos ao entrar --------- */
@keyframes materiaRegua { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#pagina-materia .materia-prosa h3 {
  position: relative;
  padding-bottom: 10px;
}
#pagina-materia .materia-prosa h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--acento), transparent);
  transform: scaleX(0);
  transform-origin: left;
}
#pagina-materia.ativa .materia-prosa h3::after {
  animation: materiaRegua 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
#pagina-materia.ativa .materia-prosa h3:nth-of-type(1)::after { animation-delay: 140ms; }
#pagina-materia.ativa .materia-prosa h3:nth-of-type(2)::after { animation-delay: 300ms; }
#pagina-materia.ativa .materia-prosa h3:nth-of-type(3)::after { animation-delay: 460ms; }
#pagina-materia.ativa .materia-prosa h3:nth-of-type(4)::after { animation-delay: 620ms; }
/* blocos do aside reagem ao cursor */
#pagina-materia .materia-aside-bloco {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
#pagina-materia .materia-aside-bloco:hover { transform: translateX(5px); }
#pagina-materia .materia-aside-bloco:hover .materia-aside-rotulo { color: var(--acento); }

/* --- FOLHA DE CONTATO (capa → vestígios) — afordância de link ------- */
.contato-folha[data-rota] { cursor: pointer; }
.contato-folha[data-rota] .contato-quadro {
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), border-color 300ms ease, filter 300ms ease;
}
.contato-folha[data-rota]:hover .contato-quadro { filter: brightness(1.18); }
.contato-folha[data-rota]:hover .contato-quadro:hover {
  transform: scale(1.03);
  z-index: 2;
}
.contato-folha[data-rota]:focus-visible {
  outline: 1px solid var(--acento);
  outline-offset: 6px;
}

/* --- RODAPÉ GLOBAL — laje creme "chocante", texto na cor do fundo ----
   O rodapé do site (presente em todas as páginas) deixa de se fundir
   com o escuro: vira um bloco creme (entre o branco-papel e o âmbar) e
   as escritas antes claras assumem a cor do fundo atual (--tinta-base).
   É full-bleed por natureza — o .site-footer-principal já ocupa a tela
   inteira. (As faixas .folio-fim entre páginas seguem discretas.) */
/* Paleta QUENTE — o quase-preto frio não conversava com o pergaminho.
   Tudo aqui é derivado do âmbar + escuro, ficando na mesma família. */
.site-footer-principal {
  background: var(--creme-rodape);
  border-top: 2px solid var(--realce-rodape);
}
/* texto principal → marrom escuro quente, contraste firme sobre o creme
   (era 80/20 e lavava no fundo claro; subiu pra 88/12) */
.sf-topo, .sf-topo-mini,
.sf-col-titulo, .sf-col-desc, .sf-col-filo,
.sf-col a, .sf-assinatura, .sf-assina-link {
  color: color-mix(in oklab, var(--tinta-base) 88%, var(--acento) 12%);
}
/* Títulos e marcas do rodapé → oxblood de realce, a MESMA cor do
   "entremultiversos". Unifica DIGITAL ARTISAN, o entremultiversos do
   masthead e os rótulos das colunas (arquivo/universos/filosofia) numa só
   cor quente — antes era um bronze apagado que diluía no creme e fazia os
   rótulos parecerem de outra família. */
.sf-da, .sf-em, .sf-col-label,
.sf-col-link, .sf-col-link:visited {
  color: var(--realce-rodape) !important;
}
/* tons de apoio (separadores, frase, marca) → marrom quente médio, ainda
   legível (era 58/16 normalizado, claro demais pro creme) */
.sf-marca-sep, .sf-dot, .sf-frase, .sf-col p, .sf-col-marca {
  color: color-mix(in oklab, var(--tinta-base) 78%, var(--acento) 22%) !important;
}
/* linhas separadoras — antes âmbar quase invisível; agora no oxblood de
   realce, pra marcar a divisão com firmeza sobre o creme */
.site-footer-cabec, .site-footer-base {
  border-color: var(--realce-rodape);
}
/* "entremultiversos" — título da coluna de identidade ganha peso e o oxblood
   de realce, destacando-se do creme (era Italiana fina na cor do corpo;
   Italiana só tem 400, então troco pra Fraunces, que chega a 600 = negrito
   de verdade, sem faux-bold). */
.sf-col-titulo {
  font-family: var(--serif-corpo);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--realce-rodape) !important;
}
/* hover → aquece em direção ao âmbar, mas num bronze ainda legível sobre o
   creme; o sublinhado dá a affordance sem depender do contraste de cor (no
   fundo claro, "mais âmbar" = mais claro = menos contraste, então não dá pra
   clarear sem o link sumir — daí o sublinhado) */
.sf-topo:hover, .sf-topo-mini:hover,
.sf-col a:hover, .sf-assina-link:hover {
  color: color-mix(in oklab, var(--acento) 42%, var(--tinta-base) 58%) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================
   Digital Artisan — cabeçalho dos cinco pilares.
   O grid .pilares vinha solto, logo após o diagrama animado,
   sem nada que o nomeasse. Este cabeçalho situa o leitor:
   diz que ali estão os cinco pilares e liga ao diagrama acima.
   Mesma voz tipográfica da página "matéria" (rótulo mono +
   título serif-display em itálico + lede), só que em escala de
   sub-seção — o título grande da página já é o "Digital Artisan.".
   ============================================================ */
.pilares-cabec {
  margin-top: clamp(64px, 9vh, 120px);
  max-width: 64ch;
}

.pilares-cabec-rotulo {
  font-family: var(--mono-met);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
  display: block;
}

.pilares-cabec-titulo {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--papel);
  margin: 0 0 16px;
}

.pilares-cabec-titulo em {
  color: var(--acento);
  font-style: italic;
}

.pilares-cabec-lede {
  font-family: var(--serif-corpo);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--papel-2);
  max-width: 52ch;
  margin: 0;
}