@charset "utf-8";
/* ═══════════════════════════════════════════════════════════════════════
   FILOSOFIAS DA MINHA CABEÇA — "O Caderno"
   Papel pautado, quatro canetas, nada carregado de fora.
   Sem fontes externas, sem CDN, sem rastreio. Abre por file://
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. RESET ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, ul, li { margin: 0; padding: 0; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
hr { border: 0; }


/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
  color-scheme: light;

  /* PAPEL E TINTA — contrastes calculados sobre #FFFDF1, não estimados */
  --papel:    #FFFDF1;  /* o pixel de canto real do banner e do logo    */
  --tinta:    #173E59;  /* 11.00:1 — todo o texto corrido, toda pauta   */
  --tinta-70: #4A687A;  /*  5.79:1 — texto secundário. Hex sólido       */
  --tinta-55: #68818E;  /*  4.02:1 — só a partir de 19px                */
  --indigo:   #0B0B4A;  /* 17.72:1 — títulos e rótulos                  */

  /* AS QUATRO CANETAS — ver LEI DA COR abaixo */
  --azul:  #228BE4;  --azul-txt:  #1668B0;  /* 3.50 / 5.65 */
  --ambar: #FFBF00;  --ambar-txt: #7A5600;  /* 1.62 / 6.51 */
  --verde: #29A33A;  --verde-txt: #1E7A2B;  /* 3.22 / 5.31 */
  --coral: #FC5C4B;  --coral-txt: #B8321F;  /* 3.04 / 5.85 */

  /* LEI DA COR
     Os quatro hexes da marca são cores de FORMA. Podem preencher um
     retângulo de 3px ou mais, um ícone SVG, ou uma borda de 3px ou mais.
     NUNCA podem desenhar uma letra e NUNCA podem virar um fio de 1px sobre
     o papel. Texto colorido usa sempre o par -txt (todos acima de 5.3:1).
     #FFBF00 é 1.62:1 sobre #FFFDF1 — só pode existir ATRÁS da tinta, como
     marca-texto. Quebrar isto reprova a página exatamente onde a versão
     anterior reprovou. */

  /* TINTA DILUÍDA — só linhas e preenchimentos, nunca letra */
  --pauta-cor:     rgba(23, 62, 89, .115);
  --fio:           rgba(23, 62, 89, .20);
  --fio-forte:     rgba(23, 62, 89, .32);
  --trilho:        rgba(23, 62, 89, .10);
  --sombra-ficha:  rgba(23, 62, 89, .10);
  --margem-cor:    rgba(252, 92, 75, .34);
  --furo-cor:      rgba(23, 62, 89, .10);
  --fita-cor:      rgba(255, 191, 0, .32);
  --marca-texto:   rgba(255, 191, 0, .42);  /* tinta sobre ele = 8.89:1 */

  /* RITMO — tudo é múltiplo da pauta */
  --pauta: 32px;
  --pauta-offset: 7px;
  --esp-1: var(--pauta);
  --esp-2: calc(var(--pauta) * 2);
  --esp-3: calc(var(--pauta) * 3);
  --esp-4: calc(var(--pauta) * 4);

  /* GEOMETRIA DA FOLHA */
  --folha:   1120px;
  --pad:     clamp(18px, 4.5vw, 64px);
  --sangria: clamp(18px, 2.6vw, 38px);

  /* FORMA — nunca ultrapassar. Nada é pílula. */
  --raio: 3px;
  --aba: 4px;

  /* TIPOS — três pilhas, zero rede */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Charter, Georgia, "Times New Roman", serif;
  --sans:  "Avenir Next", Avenir, "Segoe UI Variable Display", "Segoe UI",
           system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
           "Liberation Mono", monospace;

  --t-micro: 12px;
  --t-mono:  13px;
  --t-guia:  clamp(14px, 1.1vw, 15px);
  --t-corpo: clamp(17px, 1.6vw, 19px);
  --t-ficha: clamp(18px, 1.4vw, 20px);
  --t-cita:  clamp(19px, 2.1vw, 23px);
  --t-h2:    clamp(25px, 3.2vw, 33px);
  --t-h1:    clamp(29px, 4.6vw, 46px);

  /* MOVIMENTO — uma curva só: a caneta saindo do papel */
  --curva: cubic-bezier(.2, .7, .2, 1);
  --t-rapido: 140ms;
  --t-lento: 520ms;

  /* ACENTO VIVO — o JS troca; tinta é o padrão honesto */
  --tinta-atual: var(--tinta);
}

@media (max-width: 559px) { :root { --pauta: 28px; } }


/* ── 2. BASE ────────────────────────────────────────────────────────── */
body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: var(--t-corpo);
  font-size-adjust: 0.50;   /* Georgia e Palatino caem no tamanho aparente do Iowan */
  line-height: var(--pauta);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

/* também em a/button: sem isto, um link alcançado com Shift+Tab pode parar
   escondido debaixo da barra fixa de 44px */
[id], a, button { scroll-margin-top: 60px; }

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

h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: calc(var(--pauta) * 2);
  letter-spacing: .005em;
  color: var(--indigo);
  max-width: 26ch;
  text-wrap: balance;
}

p { text-wrap: pretty; }

/* Foco visível em tudo. Nunca outline:none sem substituto. */
a:focus-visible, button:focus-visible, .ficha:focus-within {
  outline: 2px solid var(--azul);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── 3. UTILITÁRIOS ─────────────────────────────────────────────────── */
.sr-so {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.pular {
  position: fixed; top: 8px; left: 8px; z-index: 60;
  background: var(--tinta); color: var(--papel);
  padding: 10px 16px; border-radius: 2px;
  font: 600 14px/1 var(--sans); text-decoration: none;
  clip-path: inset(50%);          /* escondido sem sair da página para -9999px */
}
.pular:focus { clip-path: none; }

.cofre { position: absolute; width: 0; height: 0; overflow: hidden; }

.sobrancelha {
  font: 400 var(--t-mono)/20px var(--mono);
  letter-spacing: .04em;
  color: var(--tinta-70);
}

.nota-margem {
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
}

.aviso {
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
  max-width: 62ch;
}

.numeros {
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
  max-width: 60ch;
  font-variant-numeric: tabular-nums;
}

.fio-3 {
  width: 96px; height: 0;
  border-top: 3px solid var(--fio-forte);
  border-radius: 2px;
  margin: var(--esp-2) auto 0 0;   /* auto à direita: o traço encosta na margem, não no centro */
}

.secao__abertura {
  max-width: 52ch;
  margin-block: var(--esp-1);
}

/* O marca-texto entrega-se PRONTO. O JS só remove o estado final quando
   pode animar — conteúdo nunca depende de script para aparecer. */
mark {
  background-color: transparent;
  background-image: linear-gradient(transparent 55%, var(--marca-texto) 55%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: inherit;
  padding: 0 .08em;
  transition: background-size var(--t-lento) var(--curva);
  /* Sem isto, uma frase grifada que quebra em duas linhas recebe UM fundo só
     para as duas juntas: o corte de 55% cai no meio do bloco e o grifo sai
     riscando a primeira linha. Com clone, cada linha ganha o seu próprio grifo. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* A régua azul de 2px é uma marca, não uma letra — permitida pela LEI DA COR */
.regua-azul {
  background: linear-gradient(var(--azul), var(--azul)) 0 100% / 100% 2px no-repeat;
  padding-bottom: 1px;
  /* mesma razão do <mark>: se a frase quebrar, as duas linhas ficam sublinhadas */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.acoes {
  display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 24px;
  margin-top: var(--esp-1);
}

.btn-tinta {
  display: inline-block;
  background: var(--tinta); color: var(--papel);
  border-radius: 2px;
  padding: 11px 20px;
  font: 600 14px/1.2 var(--sans);
  letter-spacing: .06em;
  text-decoration: none;
  transition: background-color var(--t-rapido) var(--curva);
}
.btn-tinta:hover { background: var(--indigo); }

.link-tinta {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-underline-offset 120ms var(--curva);
}
.link-tinta:hover { text-underline-offset: 6px; }

.pena-icone { width: 24px; height: 24px; flex: none; color: var(--pena, var(--tinta)); }

.pena-mundo   { --pena: var(--azul);  --pena-txt: var(--azul-txt);  }
.pena-ideia   { --pena: var(--ambar); --pena-txt: var(--ambar-txt); }
.pena-bolso   { --pena: var(--verde); --pena-txt: var(--verde-txt); }
.pena-pessoas { --pena: var(--coral); --pena-txt: var(--coral-txt); }


/* ── 4. A FOLHA ─────────────────────────────────────────────────────── */
.folha {
  position: relative;
  max-width: var(--folha);
  margin-inline: auto;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--pauta) - 1px),
    var(--pauta-cor) calc(var(--pauta) - 1px) var(--pauta));
  background-position: 0 var(--pauta-offset);
}

/* A margem coral corre a folha inteira e passa por cima do fundo das seções */
.folha::before {
  content: "";
  position: absolute; z-index: 1;
  left: var(--pad); top: 0; bottom: 0;
  width: 1.5px; background: var(--margem-cor);
  pointer-events: none;
}

.furo {
  position: absolute; z-index: 1;
  left: calc(var(--pad) - 22px);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--furo-cor);
}
.furo:nth-of-type(1) { top: var(--esp-1); }
.furo:nth-of-type(2) { top: var(--esp-2); }
.furo:nth-of-type(3) { top: var(--esp-3); }
@media (max-width: 899px) { .furo { display: none; } }

/* A coluna de texto: da margem coral até a borda direita da folha */
.secao {
  position: relative;
  padding-left: calc(var(--pad) + var(--sangria));
  padding-right: var(--pad);
}


/* ── 5. CABEÇALHO CORRIDO ───────────────────────────────────────────── */
.cabecalho {
  position: fixed; z-index: 20;
  top: 0; left: 0; right: 0;
  height: 44px;
  background: var(--papel);           /* opaco de propósito: sem backdrop-filter */
  border-bottom: 1px solid var(--fio);
  transform: translateY(-100%);
  /* visibility tira a barra da ordem de Tab enquanto ela está estacionada fora
     da tela. Sem isto, os três primeiros Tab da visita vão parar em links que
     ninguém consegue ver — e um elemento fixed não pode ser rolado até a tela. */
  visibility: hidden;
  transition: transform 220ms var(--curva), visibility 0s linear 220ms;
}
.cabecalho--visivel {
  transform: none;
  visibility: visible;
  transition: transform 220ms var(--curva), visibility 0s;
}

.cabecalho__linha {
  max-width: var(--folha);
  margin-inline: auto;
  padding-inline: var(--pad);
  height: 100%;
  display: flex; align-items: center; gap: 14px;
}

.cabecalho__marca { width: 26px; height: 26px; flex: none; }

.cabecalho__nome {
  font: 600 13px/1 var(--sans);
  letter-spacing: .12em;
  color: var(--indigo);
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cabecalho__nav {
  margin-left: auto;
  display: flex; gap: 18px; flex: none;
  font: 400 var(--t-mono)/1 var(--mono);
}
.cabecalho__nav a { text-decoration: none; color: var(--tinta); white-space: nowrap; }
.cabecalho__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }

.cabecalho__progresso {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--tinta-atual);
  transform: scaleX(var(--progresso, 0));
  transform-origin: left;
  transition: background-color 600ms var(--curva);
}

@media (max-width: 759px) {
  .so-largo { display: none; }
  .cabecalho__nav a[href="#sumario"]::after { content: " ↓"; }
}
@media (max-width: 559px) {
  .cabecalho__nome { font-size: 11px; letter-spacing: .06em; }
  .cabecalho__linha { gap: 10px; }
}


/* ── 6. A CAPA ──────────────────────────────────────────────────────── */
.capa { padding-top: var(--esp-2); padding-bottom: var(--esp-3); }

.fita-conjunto {
  position: relative;
  max-width: 720px;
  margin-top: var(--esp-1);
  transform: rotate(-1.1deg);          /* rotação 1 de 4 na página inteira */
  border: 1px solid var(--fio);
  background: var(--papel);
  box-shadow: 0 1px 6px rgba(23, 62, 89, .16);  /* a única sombra borrada do site */
}
.fita-marca { width: 100%; height: auto; }

.fita {
  position: absolute; top: -11px;
  width: 78px; height: 26px;
  background: var(--fita-cor);
}
.fita--esq { left: 34px;  transform: rotate(-14deg); }
.fita--dir { right: 34px; transform: rotate(14deg); }

@media (max-width: 699px) {
  .fita { width: 52px; height: 20px; top: -8px; }
  .fita--esq { left: 20px; }
  .fita--dir { right: 20px; }
}

.capa__manchete {
  margin-top: var(--esp-2);
  font-family: var(--serif);
  font-size: var(--t-h1);
  line-height: calc(var(--pauta) * 2);
  letter-spacing: .005em;
  max-width: 22ch;
  text-wrap: balance;
}

.sublinhado { position: relative; white-space: nowrap; }
.sublinhado__traco {
  position: absolute; left: 0; bottom: -6px;
  width: 100%; height: 10px;
  overflow: visible;
}

.capa__sub {
  margin-top: var(--esp-1);
  max-width: 46ch;
}

.capa__nota { margin-top: var(--esp-1); transform: rotate(2deg); }

@media (min-width: 1180px) {
  .capa__nota {
    position: absolute;
    right: var(--pad); top: var(--esp-4);
    width: 170px; margin-top: 0;
    text-align: right;
  }
}


/* ── 7. O SUMÁRIO ───────────────────────────────────────────────────── */
.sumario { padding-block: var(--esp-3); }

.sumario__lista { margin-top: var(--esp-1); }

.sumario__lista a {
  display: grid;
  grid-template-columns: 28px auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  height: calc(var(--pauta) * 2);
  border-bottom: 1px solid rgba(23, 62, 89, .18);
  color: var(--tinta);
  text-decoration: none;
}

.sumario__lista .pena-icone {
  transition: transform var(--t-rapido) var(--curva);
}
.sumario__lista a:hover .pena-icone,
.sumario__lista a:focus-visible .pena-icone { transform: translateX(4px); }

.sumario__nome {
  font: 600 17px/1.3 var(--sans);
  letter-spacing: .02em;
  color: var(--indigo);
}

.sumario__pontos {
  align-self: center; height: 0;
  border-bottom: 1px dotted var(--fio);
  transition: border-color var(--t-rapido) var(--curva);
}
.sumario__lista a:hover .sumario__pontos,
.sumario__lista a:focus-visible .sumario__pontos { border-bottom-color: var(--fio-forte); }

.sumario__conta {
  font: 400 var(--t-mono)/20px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-70);
  white-space: nowrap;
}

@media (max-width: 559px) {
  .sumario__lista a {
    grid-template-columns: 28px 1fr;
    height: auto;
    padding-block: 14px;
    row-gap: 2px;
  }
  .sumario__pontos { display: none; }
  .sumario__conta { grid-column: 2; }
}


/* ── 8. QUEM ESCREVE AQUI ───────────────────────────────────────────── */
.quem { padding-block: var(--esp-3); }

.quem__p { margin-top: var(--esp-1); max-width: 62ch; }
.quem__titulo { margin-bottom: var(--esp-1); }

.quem__selo {
  width: 104px; height: auto;
  margin: 0 auto var(--esp-1);
  transform: rotate(1deg);            /* rotação 2 de 4 */
}

/* Abaixo de 1000px a nota vira um bloco recuado com barra coral */
.quem__nota {
  margin-top: 14px;
  padding-left: 16px;
  border-left: 2px solid var(--coral);
}

@media (min-width: 1000px) {
  .quem {
    display: grid;
    /* minmax na terceira faixa: com um 1fr solto, a coluna do texto (58ch, que
       cresce com a fonte) comia todo o espaço e o selo saía com 79px em vez de
       152px — e virava um ponto de 18px quando a fonte caía no Georgia. */
    grid-template-columns: 170px minmax(0, 58ch) minmax(152px, 1fr);
    column-gap: 32px;
    align-items: start;
  }
  .quem__titulo { grid-column: 2; grid-row: 1; }
  .quem__p--1 { grid-column: 2; grid-row: 2; }
  .quem__p--2 { grid-column: 2; grid-row: 3; }
  .quem__p--3 { grid-column: 2; grid-row: 4; }

  /* A nota alinha pelo TOPO do parágrafo que comenta — é colocação de grade,
     não posição absoluta calibrada numa linha. Não desalinha em largura nenhuma. */
  .quem__nota {
    grid-column: 1;
    margin-top: var(--esp-1);
    padding-left: 0; border-left: 0;
    text-align: right;
    transform: rotate(1.5deg);        /* rotação 3 de 4 (as três contam como uma) */
  }
  .quem__nota--1 { grid-row: 2; }
  .quem__nota--2 { grid-row: 3; }
  .quem__nota--3 { grid-row: 4; }

  .quem__selo {
    grid-column: 3; grid-row: 1 / span 4;
    justify-self: center; align-self: start;
    width: 152px; margin: 0;
  }
}


/* ── 8.5. SOBRE MIM ─────────────────────────────────────────────────── */
.sobre-mim { padding-block: var(--esp-3); }

.sobre-mim__p { margin-top: var(--esp-1); max-width: 62ch; }
.sobre-mim__titulo { 
  margin-bottom: var(--esp-1); 
  font-family: var(--sans); 
  font-weight: 600; 
  font-size: var(--t-h2); 
  color: var(--indigo); 
}

.sobre-mim__foto {
  width: 100%; max-width: 480px; height: auto;
  margin: var(--esp-1) 0 var(--esp-2) 0;
  border-radius: var(--raio);
  border: 1px solid rgba(23, 62, 89, .22);
  box-shadow: 3px 3px 0 var(--sombra-ficha);
  transform: rotate(-1deg);
}


/* ── 9. O CADERNO ───────────────────────────────────────────────────── */
.caderno { padding-block: var(--esp-3); }
.caderno .aviso { margin-top: -12px; }   /* nota de rodapé da linha de abertura, não um parágrafo novo */

.grupo__cabeca {
  display: flex; align-items: center; gap: 12px;
  margin-top: var(--esp-3);
  margin-bottom: var(--esp-1);
}

.grupo__nome {
  font: 600 var(--t-micro)/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pena-txt);             /* NUNCA var(--pena) — é a lei do contraste */
  white-space: nowrap;
}

.grupo__conta {
  font: 400 var(--t-mono)/20px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinta-70);
  white-space: nowrap;
}

/* Um preenchimento de 3px é marca, não letra: as quatro canetas valem aqui */
.grupo__regua {
  flex: 1; min-width: 24px;
  height: 3px; border-radius: 2px;
  background: var(--pena);
}

.fichas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 24px;
}

/* A ficha é creme OPACO: cobre a pauta, e por isso a altura dela é livre.
   Nada aqui precisa ser múltiplo de 32px. */
.ficha {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--papel);
  border: 1px solid rgba(23, 62, 89, .22);
  border-left: var(--aba) solid var(--pena);
  border-radius: var(--raio);
  box-shadow: 3px 3px 0 var(--sombra-ficha);   /* aresta sólida, nunca desfoque */
  padding: 20px 20px 18px;
  transition: border-color var(--t-rapido) var(--curva),
              box-shadow var(--t-rapido) var(--curva);
}

.ficha__titulo {
  font: 400 var(--t-ficha)/28px var(--serif);
  color: var(--tinta);
  text-wrap: balance;
}
.ficha__titulo a { text-decoration: none; }
.ficha__titulo a::after { content: ""; position: absolute; inset: 0; }

/* A cor da caneta fica só na aba de 4px. Pintar as bordas de 1px com ela
   criaria exatamente o fio fino colorido que a LEI DA COR proíbe. */
.ficha:hover,
.ficha:focus-within { border-color: var(--fio-forte); border-left-color: var(--pena); }
.ficha:hover .ficha__titulo a,
.ficha:focus-within .ficha__titulo a { text-decoration: underline; text-underline-offset: 3px; }

/* position:relative devolve estes dois para cima da camada de clique do título,
   senão nenhum texto dentro das 21 fichas pode ser selecionado nem copiado. */
.ficha__guia {
  position: relative;
  font: 400 var(--t-guia)/22px var(--serif);
  color: var(--tinta-70);
  max-width: 46ch;
}

.ficha__pe {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  margin-top: auto;
}

.ficha__dur {
  font: 500 var(--t-mono)/20px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  flex: none;
}

.ficha__trilho {
  flex: 1;
  height: 4px; border-radius: 2px;
  background: var(--trilho);
  overflow: hidden;
}
/* --r vem do HTML, calculado a partir dos segundos reais. Bitcoin = 1.000 */
.ficha__barra {
  display: block; height: 4px; border-radius: 2px;
  width: calc(10px + var(--r, 0) * (100% - 10px));
  background: var(--pena);
}

/* Em tela estreita o cabeçalho do grupo quebra em duas linhas: ícone + nome
   em cima, contagem + régua embaixo. Sem isto a linha inteira empurrava a
   página para 448px de largura e o site rolava de lado. */
@media (max-width: 559px) {
  .grupo__cabeca { flex-wrap: wrap; row-gap: 8px; }
  .grupo__nome { flex: 1 1 auto; white-space: normal; }
  .grupo__conta { order: 3; }
  .grupo__regua { order: 4; }
}

.caderno__rodape {
  margin-top: var(--esp-2);
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
  max-width: 62ch;
}
.caderno__rodape .link-tinta { color: var(--tinta); }


/* ── 10. METÁFORAS CASEIRAS ─────────────────────────────────────────── */
.metaforas { padding-block: var(--esp-3); }

/* Sem cartão, sem fundo, sem borda: a pauta atravessa a citação.
   É exatamente isso que a separa das mil pull-quotes editoriais. */
.citacao { margin-block: var(--esp-2); max-width: 46ch; }

.citacao__barra {
  display: block;
  width: 44px; height: 3px; border-radius: 2px;
  background: var(--pena);
  margin-bottom: 12px;
}

.citacao__nome {
  font: 600 var(--t-micro)/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pena-txt);
  margin-bottom: 10px;
}

.citacao blockquote {
  font-size: var(--t-cita);
  line-height: var(--pauta);
  color: var(--tinta);
  text-indent: -.42em;              /* a aspa de abertura fica pendurada na margem */
  padding-left: .42em;
}

.citacao figcaption {
  margin-top: 12px;
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
}

.metaforas__nota { margin-top: var(--esp-2); }


/* ── 11. O CONVITE ──────────────────────────────────────────────────── */
/* Sem faixa escura de largura total. O papel é que muda: esta é a página
   que ele marcou. Fundo opaco (#FFFDF1 + amarelo 13%) para cobrir a pauta
   de tinta, e a pauta é repintada em âmbar. Tinta sobre ele = 10.3:1 */
.convite {
  padding-block: var(--esp-3);
  background-color: #FFF5D2;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--pauta) - 1px),
    rgba(255, 191, 0, .30) calc(var(--pauta) - 1px) var(--pauta));
  background-position: 0 var(--pauta-offset);
}

.convite__painel {
  max-width: 640px;
  margin-inline: auto;
  border: 2px solid var(--tinta);
  border-radius: var(--raio);
  padding: var(--esp-2) clamp(20px, 4vw, 40px);
  transform: rotate(-.6deg);          /* rotação 4 de 4 — o orçamento acabou */
}

.convite__frase {
  margin-top: var(--esp-1);
  font-size: clamp(19px, 2vw, 22px);
  line-height: var(--pauta);
  max-width: 34ch;
}
.convite__frase--2 { margin-top: var(--esp-1); }
.convite .emoji { font-size: .85em; }

.convite__punho {
  margin-top: 14px;
  font: 400 var(--t-mono)/20px var(--mono);
}
.convite__punho a { color: var(--tinta-70); text-underline-offset: 3px; }

@media (max-width: 559px) {
  .convite__painel { transform: none; padding-inline: 20px; }
}


/* ── 12. O VERSO DA CAPA ────────────────────────────────────────────── */
.rodape { padding-top: var(--esp-2); padding-bottom: var(--esp-3); }
.rodape .fio-3 { width: 100%; margin-top: 0; margin-bottom: var(--esp-1); }

.rodape p {
  font: 400 var(--t-mono)/20px var(--mono);
  color: var(--tinta-70);
  max-width: 62ch;
  margin-top: var(--esp-1);
}
.rodape p:first-of-type { margin-top: 0; }

.rodape__links a { color: var(--tinta); text-underline-offset: 3px; }

.rodape__canetas {
  display: flex; gap: 10px;
  margin-top: var(--esp-2);
}
.rodape__canetas .pena-icone { width: 16px; height: 16px; }


/* ── 13. AJUSTE DE CELULAR ──────────────────────────────────────────────
   Precisa vir depois de tudo para vencer as regras acima. */
@media (max-width: 559px) {
  /* No celular a manchete cai para o tamanho mínimo (29px), e duas pautas
     inteiras de entrelinha (56px) abrem buracos entre as linhas do título.
     Uma pauta e meia mantém o ritmo do papel e junta o título de volta. */
  h2, .capa__manchete { line-height: calc(var(--pauta) * 1.5); }
  .capa__manchete { margin-top: var(--esp-1); }

  /* Palavras longas do português não podem estourar a coluna estreita */
  .capa__manchete, .ficha__titulo, .citacao blockquote { hyphens: auto; }
}


/* ── 14. MOVIMENTO ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.sublinhado__traco path { transition: stroke-dashoffset 700ms var(--curva); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  mark { background-size: 100% 100% !important; }
  .sublinhado__traco path { stroke-dashoffset: 0 !important; }
  /* visibility continua fazendo o trabalho: opacity:0 esconderia a barra mas
     deixaria os links dela alcançáveis pelo Tab. */
  .cabecalho { transform: none; visibility: hidden; }
  .cabecalho--visivel { visibility: visible; }
}


/* ── 15. DEPURAÇÃO — só com ?grid=1 na URL ──────────────────────────── */
.depurar-pauta .folha {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--pauta) - 1px),
    rgba(220, 40, 40, .35) calc(var(--pauta) - 1px) var(--pauta));
}