/* ============================================================
   Patric Teixeira — Atelier-Arquivo
   Tokens, base, utilidades. Sem framework. Sem reset agressivo.
   ============================================================ */

:root {
  /* superfícies */
  --tinta: #18191E;
  --tinta-2: #202127;
  --tinta-3: #2A2B32;
  --tinta-deep: #0F1014;

  /* tinta tonal — fundo das páginas em grafite. ATENÇÃO: em runtime quem manda
     é o tweaks.js, que sobrescreve --tinta-base com FUNDOS[fundo] (padrão
     "mineral"). Este valor é só o fallback sem-JS — mantido igual ao mineral
     (#121318) pra coerência. Para mudar o fundo real, edite FUNDOS no
     tweaks.js. Escurecido um pouco (era #18191E), preservando o tom frio. */
  --tinta-base: #121318;

  /* tipo */
  --papel: #EFECE4;
  --papel-2: #C9C7C2;
  --grafite: #8B8990;
  --bruma: #474850;
  --bruma-2: rgba(71, 72, 80, 0.42);

  /* acentos disponíveis (a aplicação escolhe via --acento) */
  --ambar: #D6A24A;
  --ametista: #8B6EE0;
  --cinabre: #C0573E;
  --bronze: #93864C;
  --verdete: #6E8C5A;

  /* o acento ativo */
  --acento: var(--ambar);

  /* brasa — fio laranja-quente dos "rótulos editoriais". É a mesma família
     do oxblood do rodapé (--realce-rodape #5A2116), só que no irmão claro
     da paleta (cinabre), legível sobre o fundo escuro. Assim a cor quente
     dos títulos do rodapé reaparece no corpo do site (rótulos de seção),
     deixando de ser exclusiva do rodapé. Âmbar segue como acento interativo. */
  --brasa: var(--cinabre);

  /* tipografia */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Italiana", "Fraunces", Georgia, serif;

  /* escala / ritmo — controlada por densidade */
  --densidade: 1;
  --linha: calc(1.55 * var(--densidade));
  --linha-titulo: calc(1.02 * var(--densidade));
  --gap: calc(24px * var(--densidade));
  --gap-l: calc(48px * var(--densidade));
  --gap-xl: calc(96px * var(--densidade));

  /* container */
  --max-largura: 1320px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }


html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--tinta-base);
  color: var(--papel);
  font-family: var(--serif);
  font-size: 17px;
  line-height: var(--linha);
  font-feature-settings: "kern", "liga", "calt", "onum", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* clip em vez de hidden: não bloqueia position:sticky em descendentes */
}


::selection { background: var(--acento); color: var(--tinta); }

/* ============================================================
   Grade tipográfica (debug autoral, toggle via tweak)
   ============================================================ */

body.grade-visivel::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent calc((100vw - var(--gutter) * 2) / 12 - 1px),
      rgba(214, 162, 74, 0.10) calc((100vw - var(--gutter) * 2) / 12 - 1px),
      rgba(214, 162, 74, 0.10) calc((100vw - var(--gutter) * 2) / 12)
    );
  background-position: var(--gutter) 0;
  background-size: calc(100vw - var(--gutter) * 2) 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 999;
}

body.grade-visivel::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(139, 110, 224, 0.08) 31px,
      rgba(139, 110, 224, 0.08) 32px
    );
  pointer-events: none;
  z-index: 998;
}

/* ============================================================
   Tipografia — utilidades
   ============================================================ */

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite);
  font-weight: 400;
}

.mono-mid {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--papel-2);
}

.italic { font-style: italic; }
.tabular { font-variant-numeric: tabular-nums; }
.smallcaps {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78em;
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.005em;
  line-height: var(--linha-titulo);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 300;
  font-style: italic;
  line-height: var(--linha-titulo);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration: none;
}

.link-silencio {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 95%;
  transition: background-size 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.link-silencio:hover { background-size: 100% 1px; }

.grifo {
  display: inline-block;
  width: 1.6em;
  height: 1px;
  background: var(--acento);
  vertical-align: middle;
  margin-right: 0.6em;
}

/* ============================================================
   Layout
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--max-largura);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.hairline { border-top: 1px solid var(--bruma); }
.hairline-b { border-bottom: 1px solid var(--bruma); }

.col-12 { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); }

/* ============================================================
   Header
   ============================================================ */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  background: color-mix(in oklab, var(--tinta-base) 78%, transparent);
  border-bottom: 1px solid var(--bruma);
}

.cabecalho-corpo {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap-l);
  height: 64px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--papel);
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
}

.marca svg { display: block; }

.nav {
  display: flex;
  justify-content: center;
  gap: 28px;
}

.nav a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grafite);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms, border-color 180ms;
}

.nav a:hover { color: var(--papel-2); }
.nav a.ativo {
  color: var(--papel);
  border-bottom-color: var(--acento);
}

.nav-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
}

.nav-meta .ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--acento);
  display: inline-block;
  animation: pulse 3.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* ============================================================
   Sections / pages
   ============================================================ */

main { display: block; }

.pagina {
  display: none;
  padding: clamp(48px, 7vh, 96px) 0 var(--gap-xl);
  animation: surge 540ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pagina.ativa { display: block; }

/* Atenção: a keyframe NÃO deve deixar `transform` aplicado.
   Qualquer transform diferente de `none` na .pagina cria um
   containing block para descendentes `position: fixed`, e isso
   quebra o scrollytelling da seção Digital Artisan em viewports
   maiores (palco fica preso à .pagina em vez de ocupar o viewport). */
@keyframes surge {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pagina {
  animation-fill-mode: both;
}

/* ============================================================
   Campo autoral — homepage relacional
   ============================================================ */

.campo {
  position: relative;
  min-height: calc(100vh - 64px);
  padding: clamp(60px, 8vh, 120px) 0;
  overflow: hidden;
}

.campo-fundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.campo-fundo svg { width: 100%; height: 100%; display: block; }

.campo-cabecalho {
  position: relative;
  margin-bottom: var(--gap-xl);
  max-width: 880px;
}

.campo-cabecalho .marca-pequena {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--grafite);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.campo-cabecalho h1 {
  font-size: clamp(48px, 6.4vw, 92px);
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.02;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.campo-cabecalho h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  color: var(--papel-2);
}

.campo-cabecalho .preambulo {
  font-size: 19px;
  line-height: 1.55;
  color: var(--papel-2);
  max-width: 640px;
}

.campo-svg {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 70vh;
  min-height: 520px;
}

.campo-svg svg { width: 100%; height: 100%; display: block; overflow: visible; }

.no-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--papel-2);
  transition: fill 240ms;
  cursor: pointer;
  pointer-events: auto;
}
.no-numero {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  fill: var(--grafite);
}
.no-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 22px;
  fill: var(--papel);
  cursor: pointer;
  pointer-events: auto;
}
.no-circulo {
  fill: var(--tinta-base);
  stroke: var(--bruma);
  stroke-width: 1;
  transition: stroke 240ms, fill 240ms;
  cursor: pointer;
  pointer-events: auto;
}
.no:hover .no-circulo { stroke: var(--acento); }
.no:hover .no-label { fill: var(--acento); }
.no:hover .no-titulo { fill: var(--papel); }

.linha-campo {
  fill: none;
  stroke: var(--bruma);
  stroke-width: 1;
  transition: stroke 360ms, stroke-width 360ms, opacity 360ms;
  opacity: 0.55;
}

.linha-campo.acesa {
  stroke: var(--acento);
  opacity: 0.9;
  stroke-width: 1.25;
}

.observacoes {
  margin-top: var(--gap-xl);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap-l);
  position: relative;
}

.observacao {
  border-top: 1px solid var(--bruma);
  padding-top: 18px;
}

.observacao dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 12px;
}

.observacao dd {
  margin: 0;
  font-size: 15px;
  color: var(--papel-2);
  line-height: 1.5;
}

@media (max-width: 880px) {
  .observacoes { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Lista silenciosa (variação home)
   ============================================================ */

.lista-silenciosa {
  position: relative;
  padding: clamp(80px, 12vh, 180px) 0;
}

.lista-silenciosa .preambulo-lista {
  max-width: 540px;
  margin-bottom: var(--gap-xl);
}

.lista-silenciosa h1 {
  font-family: var(--display);
  font-size: clamp(60px, 9vw, 132px);
  line-height: 0.94;
  font-style: italic;
  margin-bottom: 32px;
}

.lista-entradas {
  border-top: 1px solid var(--bruma);
}

.lista-entrada {
  display: grid;
  grid-template-columns: 64px 120px 1fr 140px;
  gap: var(--gap);
  align-items: baseline;
  padding: 28px 0;
  border-bottom: 1px solid var(--bruma);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: padding 320ms;
}

.lista-entrada:hover { padding-left: 16px; }
.lista-entrada:hover .lista-titulo { color: var(--papel); }
.lista-entrada:hover .lista-numero { color: var(--acento); }

.lista-numero {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  transition: color 240ms;
}

.lista-tipo {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
}

.lista-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  line-height: 1.1;
  color: var(--papel-2);
  transition: color 240ms;
}

.lista-data {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--grafite);
  text-align: right;
}

@media (max-width: 760px) {
  .lista-entrada {
    grid-template-columns: 64px 1fr 80px;
  }
  .lista-tipo { display: none; }
}

/* ============================================================
   Section index (textos, fotos, etc.)
   ============================================================ */

.secao-cabecalho {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--gap);
  align-items: end;
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid var(--bruma);
  margin-bottom: var(--gap-xl);
}

.secao-cabecalho .numero-secao {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  /* rótulo de seção na brasa — mesmo papel ("rótulo") dos títulos do rodapé,
     amarrando a cor quente ao corpo do site (era grafite, neutro) */
  color: var(--brasa);
  margin-bottom: 18px;
}

.secao-cabecalho h2 {
  font-family: var(--display);
  font-size: clamp(56px, 7.5vw, 108px);
  line-height: 0.95;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 14px;
}

.secao-cabecalho .resumo {
  color: var(--papel-2);
  font-size: 18px;
  max-width: 540px;
  line-height: 1.5;
}

.secao-cabecalho .meta-secao {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--grafite);
  text-align: right;
  align-self: end;
}

/* ============================================================
   Lists for archive
   ============================================================ */

.entradas {
  display: flex;
  flex-direction: column;
}

.entrada {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--gap-l);
  align-items: baseline;
  padding: 32px 0;
  border-bottom: 1px solid var(--bruma);
  cursor: pointer;
  transition: background 240ms;
}

.entrada:hover { background: rgba(255,255,255,0.015); }

.entrada-numero {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  padding-top: 6px;
}

.entrada-corpo .entrada-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 30px;
  line-height: 1.1;
  margin-bottom: 8px;
  transition: color 240ms;
}

.entrada:hover .entrada-titulo { color: var(--acento); }

.entrada-resumo {
  color: var(--papel-2);
  font-size: 16px;
  max-width: 720px;
  line-height: 1.55;
}

.entrada-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 6px;
}

.entrada-data {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grafite);
  white-space: nowrap;
}

/* ============================================================
   Detail page (texto)
   ============================================================ */

.detalhe {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 0;
}

.detalhe .voltar {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 56px;
  display: inline-block;
  cursor: pointer;
}
.detalhe .voltar:hover { color: var(--acento); }

.detalhe header {
  margin-bottom: var(--gap-xl);
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid var(--bruma);
}

.detalhe .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 24px;
}

.detalhe h1 {
  font-family: var(--display);
  font-size: clamp(40px, 5.4vw, 76px);
  line-height: 1.02;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 32px;
}

.detalhe .ficha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.detalhe .ficha dt { color: var(--grafite); text-transform: uppercase; margin-bottom: 6px; }
.detalhe .ficha dd { margin: 0; color: var(--papel-2); }

.prose p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--papel);
  margin-bottom: 1.4em;
}

.prose p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 4.5em;
  float: left;
  line-height: 0.85;
  padding: 0.06em 0.12em 0 0;
  color: var(--acento);
  font-style: italic;
}

.prose h2 {
  font-family: var(--display);
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  margin: 2em 0 0.6em;
}

.prose blockquote {
  margin: 2em 0;
  padding: 0 0 0 28px;
  border-left: 1px solid var(--acento);
  font-style: italic;
  color: var(--papel-2);
  font-size: 22px;
  line-height: 1.55;
  font-family: var(--serif);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--bruma);
  margin: 3em auto;
  width: 80px;
}

/* ============================================================
   Footer
   ============================================================ */

.rodape {
  border-top: 1px solid var(--bruma);
  padding: var(--gap-xl) 0;
  margin-top: var(--gap-xl);
}

.rodape-corpo {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--gap-l);
  align-items: start;
}

.rodape .marca-grande {
  font-family: var(--display);
  font-style: italic;
  font-size: 56px;
  line-height: 1;
  margin-bottom: 14px;
}

.rodape dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 14px;
}

.rodape dd {
  margin: 0 0 6px;
  color: var(--papel-2);
  font-size: 14px;
  line-height: 1.5;
}

.rodape .build {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--bruma);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grafite);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
}

@media (max-width: 880px) {
  .rodape-corpo { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   Image placeholder (SVG striped)
   ============================================================ */

.placeholder-imagem {
  position: relative;
  width: 100%;
  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);
  border: 1px solid var(--bruma);
  display: flex;
  align-items: center;
  justify-content: center;
}

.placeholder-imagem::after {
  content: attr(data-label);
  position: absolute;
  bottom: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

.placeholder-imagem .ponto-foco {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--acento);
}

/* ============================================================
   Photography views
   ============================================================ */

.fotos-grade {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.fotos-grade .foto {
  cursor: pointer;
  position: relative;
}

.fotos-grade .foto .placeholder-imagem { aspect-ratio: 4 / 5; }

.fotos-grade .foto .legenda {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--grafite);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.fotos-grade .foto .titulo-foto {
  font-family: var(--display);
  font-style: italic;
  font-size: 18px;
  color: var(--papel-2);
  margin-top: 6px;
}

/* layouts */
.fotos-grade.layout-mosaico .foto:nth-child(6n+1) { grid-column: span 7; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+2) { grid-column: span 5; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+3) { grid-column: span 4; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+4) { grid-column: span 4; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+5) { grid-column: span 4; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+6) { grid-column: span 8; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+1) .placeholder-imagem { aspect-ratio: 16/10; }
.fotos-grade.layout-mosaico .foto:nth-child(6n+6) .placeholder-imagem { aspect-ratio: 16/9; }

.fotos-grade.layout-silencio .foto { grid-column: span 4; }
.fotos-grade.layout-silencio .foto:nth-child(odd) .placeholder-imagem { aspect-ratio: 4/5; }
.fotos-grade.layout-silencio .foto:nth-child(even) .placeholder-imagem { aspect-ratio: 1/1; }

.fotos-grade.layout-contato { gap: 12px; }
.fotos-grade.layout-contato .foto { grid-column: span 3; }
.fotos-grade.layout-contato .foto .placeholder-imagem { aspect-ratio: 3/2; border-width: 0.5px; }
.fotos-grade.layout-contato .foto .legenda { font-size: 9px; }
.fotos-grade.layout-contato .foto .titulo-foto { font-size: 14px; }

.fotos-grade.layout-ensaio .foto { grid-column: span 12; display: grid; grid-template-columns: 7fr 5fr; gap: var(--gap-l); align-items: center; padding: var(--gap-l) 0; border-bottom: 1px solid var(--bruma); cursor: default; }
.fotos-grade.layout-ensaio .foto .placeholder-imagem { aspect-ratio: 3/2; }
.fotos-grade.layout-ensaio .foto .legenda { display: block; margin-top: 18px; }
.fotos-grade.layout-ensaio .foto .titulo-foto { font-size: 36px; margin-top: 12px; }
.fotos-grade.layout-ensaio .foto .ensaio-texto { font-size: 16px; color: var(--papel-2); line-height: 1.6; margin-top: 18px; max-width: 460px; }

/* ============================================================
   Projetos / case studies
   ============================================================ */

.projeto-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-l);
  padding: var(--gap-l) 0;
  border-bottom: 1px solid var(--bruma);
  cursor: pointer;
  transition: padding 320ms;
}

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

.projeto-card .placeholder-imagem { aspect-ratio: 16/10; }

.projeto-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 44px;
  line-height: 1.04;
  margin-bottom: 18px;
  transition: color 240ms;
}

.projeto-tese {
  color: var(--papel-2);
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 24px;
}

.projeto-eixos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.projeto-eixos dt {
  color: var(--grafite);
  text-transform: uppercase;
}
.projeto-eixos dd { margin: 0; color: var(--papel-2); }

/* ============================================================
   Fragmentos
   ============================================================ */

.fragmentos-grid {
  column-count: 3;
  column-gap: var(--gap-l);
}

.fragmento {
  break-inside: avoid;
  margin-bottom: var(--gap-l);
  padding: 28px 0;
  border-top: 1px solid var(--bruma);
}

.fragmento .fragmento-data {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--grafite);
  margin-bottom: 18px;
}

.fragmento .fragmento-texto {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--papel);
}

.fragmento .fragmento-texto::before {
  content: "—";
  display: inline-block;
  margin-right: 10px;
  color: var(--acento);
  font-style: normal;
}

@media (max-width: 880px) { .fragmentos-grid { column-count: 1; } }

/* ============================================================
   Manifesto / colofão
   ============================================================ */

.manifesto {
  max-width: 760px;
  margin: 0 auto;
}

.manifesto .pilares {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-l);
  margin-top: var(--gap-xl);
}

.pilar {
  border-top: 1px solid var(--acento);
  padding-top: 24px;
}

.pilar-numero {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--acento);
  margin-bottom: 16px;
}

.pilar-numero-cifra {
  font-size: 13px;
}

.pilar-fechamento {
  border-bottom: 1px solid var(--acento);
  padding-bottom: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pilar-fechamento .pilar-corpo {
  max-width: 760px;
}

.pilar-titulo {
  font-family: var(--display);
  font-style: italic;
  font-size: 26px;
  line-height: 1.1;
  margin-bottom: 14px;
}

.pilar-corpo {
  color: var(--papel-2);
  font-size: 15px;
  line-height: 1.6;
}

@media (max-width: 760px) { .manifesto .pilares { grid-template-columns: 1fr; } }

/* ============================================================
   Tweaks panel (custom, minimal)
   ============================================================ */

.tweaks-toggle-area { position: fixed; bottom: 24px; right: 24px; z-index: 100; }

.tweaks-painel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 320px;
  background: var(--tinta-2);
  border: 1px solid var(--bruma);
  z-index: 100;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--papel-2);
  transform: translateY(8px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms, transform 240ms;
}

.tweaks-painel.aberto {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.tweaks-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--bruma);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tweaks-cabecalho button {
  background: transparent;
  border: 1px solid var(--bruma);
  color: var(--grafite);
  font-family: var(--mono);
  font-size: 10px;
  padding: 4px 8px;
  letter-spacing: 0.16em;
  cursor: pointer;
}
.tweaks-cabecalho button:hover { color: var(--papel); border-color: var(--acento); }

.tweaks-corpo {
  padding: 18px;
  max-height: 65vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tweak-grupo > .rotulo {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 10px;
}

.opcoes {
  display: grid;
  gap: 6px;
}

.opcoes.tres { grid-template-columns: repeat(3, 1fr); }
.opcoes.quatro { grid-template-columns: repeat(4, 1fr); }
.opcoes.dois { grid-template-columns: 1fr 1fr; }

.opcoes button {
  background: transparent;
  border: 1px solid var(--bruma);
  color: var(--grafite);
  padding: 8px 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms, border-color 180ms, background 180ms;
}

.opcoes button:hover { color: var(--papel-2); border-color: var(--papel-2); }

.opcoes button[aria-pressed="true"] {
  color: var(--papel);
  border-color: var(--acento);
  background: rgba(214, 162, 74, 0.06);
}

.opcoes.swatches {
  grid-template-columns: repeat(4, 1fr);
}

.opcoes.swatches button {
  height: 28px;
  padding: 0;
  position: relative;
}

.opcoes.swatches button::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: var(--cor);
}

.opcoes.swatches button[aria-pressed="true"] {
  border-color: var(--papel);
}