/* ============================================================
   base.css — o que toda página do site compartilha:
   reset, a folha e seus fios de coluna, o vocabulário de
   rótulos e réguas, o topo e o rodapé.
   Depende de tokens.css, que deve vir antes.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--display);
  font-size:1rem;
  line-height:1.5;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}

a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--redline);outline-offset:4px;border-radius:1px}

/* ── a folha: conteúdo sobre os fios de coluna ─────────────── */
/* O conteúdo ocupa a tela inteira: sem teto de largura, com a
   margem proporcional. As medidas de leitura são resolvidas nos
   próprios blocos de texto, não pelo container. */
.folha{
  position:relative;
  width:100%;
  padding-inline:var(--margem);
}
.colunas{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-inline:var(--margem);
  pointer-events:none;
}
.colunas i{border-left:1px solid var(--coluna)}
.colunas i:last-child{border-right:1px solid var(--coluna)}
.folha > :not(.colunas){position:relative}

/* ── vocabulário ───────────────────────────────────────────── */
.rotulo,.nota,.mono{
  font-family:var(--mono);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.rotulo{font-size:var(--t-rotulo);color:var(--apagado);display:block}
.nota{font-size:var(--t-nota);color:var(--apagado)}
.mono{font-size:var(--t-rotulo);letter-spacing:.04em}

.divisor{
  border:0;
  border-top:1px solid var(--regua);
  margin-block:var(--respiro-secao);
}

.cabecalho{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2rem;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:var(--gap-rotulo);
}

/* ── topo ──────────────────────────────────────────────────── */
.topo{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem 2rem;
  justify-content:space-between;
  align-items:baseline;
  padding-top:3rem;
}
.topo .assinatura,
.utilitarios a{
  font-family:var(--mono);
  font-size:var(--t-rotulo);
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.utilitarios{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
.utilitarios a{
  padding-bottom:2px;
  box-shadow:inset 0 -1px 0 transparent;
  transition:box-shadow .18s ease;
}
.utilitarios a:hover{box-shadow:inset 0 -1px 0 var(--tinta)}
.utilitarios a[aria-current]{color:var(--apagado)}

/* ── abertura compartilhada por início, projetos e modo ────── */
.abertura{padding-top:clamp(4.5rem,11vw,11.5rem)}
.abertura .rotulo{margin-bottom:1.5rem}
.abertura h1{
  font-size:var(--t-hero);
  font-weight:600;
  line-height:1.105;
  letter-spacing:-.022em;
  max-width:38ch;
  text-wrap:pretty;
}
.abertura h1 b{font-weight:inherit;display:block}

/* ── chamada de contato ────────────────────────────────────── */
.chamada{
  display:inline-flex;
  align-items:baseline;
  gap:.375em;
  font-size:var(--t-chamada);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.2;
  box-shadow:inset 0 -1px 0 var(--tinta);
  padding-bottom:.1em;
}
.chamada .seta{color:var(--redline);transition:transform .22s cubic-bezier(.22,.61,.36,1)}
.chamada:hover .seta{transform:translate(.18em,-.18em)}

/* ── rodapé ────────────────────────────────────────────────── */
.rodape{
  border-top:1px solid var(--regua);
  margin-top:clamp(4rem,10.5vw,9.5rem);
  padding-block:1.75rem 5rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.75rem 2rem;
}
.rodape > :last-child{text-align:right}
.rodape a{box-shadow:inset 0 -1px 0 transparent;transition:box-shadow .18s ease}
.rodape a:hover{box-shadow:inset 0 -1px 0 var(--apagado)}

/* ── entrada, só na primeira dobra ─────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .entra{opacity:0;transform:translateY(10px);animation:sobe .8s cubic-bezier(.22,.61,.36,1) forwards}
  .entra:nth-of-type(2){animation-delay:.08s}
  @keyframes sobe{to{opacity:1;transform:none}}
}

@media (max-width:880px){
  .colunas{display:none}
  .rodape{grid-template-columns:1fr;gap:.625rem}
  .rodape > :last-child{text-align:left}
}