/* ==========================================================================
   PÁGINA DE CARTA — leitura longa, coluna única, registro premium
   ========================================================================== */

.carta-shell{ max-width:720px; margin:0 auto; padding:0 24px 120px; }

.carta-topo{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:32px 0 80px;
}
.carta-voltar{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-muted); text-decoration:none; border-bottom:none;
}
.carta-voltar:hover{ color:var(--gold); }
.carta-marca{ display:flex; align-items:center; color:var(--gold); }
.carta-marca .icon{ width:20px; height:20px; fill:currentColor; stroke:none; }

.carta-capa{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  margin-bottom:48px;
  aspect-ratio:3/2;
}
.carta-capa img{ width:100%; height:100%; object-fit:cover; display:block; }

.carta-num{
  font-family:var(--font-brand-label);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:16px;
}
.carta-titulo{
  font-family:var(--font-brand-display);
  font-size:clamp(34px, 6vw, 58px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--text);
  margin-bottom:20px;
}
.carta-linha{
  font-family:var(--font-brand-texto);
  font-size:19px;
  line-height:1.6;
  color:var(--text-muted);
  margin-bottom:48px;
}

.carta-corpo{ font-family:var(--font-brand-texto); }
.carta-corpo p{
  font-size:18px;
  line-height:1.75;
  color:var(--text);
  max-width:none;
  margin-bottom:26px;
}

/* Assinatura, logo abaixo da linha fina */
.carta-assinatura{
  font-family:var(--font-brand-label);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--text-dim);
  margin-bottom:56px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}

/* Viradas de assunto dentro da carta. O texto publicado usa h2 em três
   cartas e h3 em uma; aqui as duas recebem o mesmo tratamento, senão a
   hierarquia mudaria de carta para carta sem motivo. */
.carta-corpo h2,
.carta-corpo h3{
  font-family:var(--font-brand-display);
  font-size:26px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--text);
  margin:52px 0 20px;
}

.carta-corpo strong{ color:var(--text); font-weight:600; }
.carta-corpo em{ color:var(--text); }

/* "O que é isso, tecnicamente?" — a definição técnica que cada carta traz
   uma vez. Régua em Atrito porque é o único momento em que a carta sai da
   narrativa e nomeia o conceito. */
.carta-corpo blockquote{
  border-left:2px solid var(--gold-dim);
  padding:2px 0 2px 24px;
  margin:36px 0;
}
.carta-corpo blockquote p{
  font-size:16.5px;
  line-height:1.7;
  color:var(--text-muted);
  margin-bottom:0;
}

/* Rodapé editorial: por que a carta existe, glossário e fontes */
.carta-porque{
  margin-top:72px;
  padding-top:36px;
  border-top:1px solid var(--line);
  font-family:var(--font-brand-texto);
}
.carta-porque h2,
.carta-porque h3,
.carta-glossario h3{
  font-family:var(--font-brand-label);
  font-size:11px; font-weight:500;
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--gold);
  margin-bottom:16px;
}
.carta-porque p{
  font-size:15.5px;
  line-height:1.7;
  color:var(--text-muted);
  max-width:none;
  margin-bottom:0;
}

.carta-glossario{
  margin-top:44px;
  font-family:var(--font-brand-texto);
}
.carta-glossario ul{ list-style:none; padding:0; margin:0; }
.carta-glossario li{
  padding:14px 0;
  border-top:1px solid var(--line);
}
.carta-glossario li:last-child{ border-bottom:1px solid var(--line); }
.carta-glossario li p{
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-muted);
  max-width:none;
  margin-bottom:0;
}
.carta-glossario strong{ color:var(--text); font-weight:600; }

.carta-fonte{
  margin-top:28px;
  font-size:12.5px;
  line-height:1.6;
  color:var(--text-dim);
}

/* Sem régua: a linha de Fonte já vem logo acima, e duas réguas seguidas
   viravam um rodapé de três andares. */
.carta-disclaimer{
  margin-top:12px;
  font-size:12.5px;
  color:var(--text-dim);
  line-height:1.6;
}

.carta-nav{
  display:flex; justify-content:space-between; gap:20px;
  margin-top:56px; padding-top:28px;
  border-top:1px solid var(--line);
  font-size:13px;
}
.carta-nav a{
  color:var(--text-muted);
  text-decoration:none; border-bottom:none;
}
.carta-nav a:hover{ color:var(--gold); }