/* GERADO por extração de styles.css. O sistema visual da rota /comecei.
   Vive separado porque as outras quatro rotas não usam uma linha dele: era
   25% das 602 regras que index, ebook, imersao e lote baixavam à toa.
   Ver docs/AUDIT-COMECEI.md, achado 7. */

/* ============================================================================
   /comecei · o deck da palestra "Tudo que eu gostaria de saber quando comecei
   no design", virado página.

   TUDO aqui é escopado em `.deck`. O design system do Visant Club é quase
   monocromático e usa o cyan com ração curta; o deck é outra peça, com outro
   preto, outra tipografia de corpo e o cyan solto. Os dois convivem porque
   nenhuma regra abaixo existe fora de `.deck`.

   Os valores vieram do arquivo do Figma (e7kgIUOXjw93wRmkGx2wli), não de
   estimativa em cima de print. Ver docs/PLANO-COMECEI.md.
   ========================================================================= */
.deck {
  --deck-bg: #0d0d0d;
  --deck-fg: #f1f1f1;
  --deck-fg-2: #dedede; /* variável "Color 3" do arquivo */
  --deck-accent: #52ddeb; /* variável "Color 5", o ponto e o traço */
  /* O cinza de letra miúda. Medido, e é por isso que ele existe: o rótulo do
     número, a linha do retrato e o rodapé estavam em #6a6a6e e #5a5a5e, que
     sobre o #0d0d0d dão 3,44:1, 3,61:1 e 2,83:1 num corpo de 9,6px. O piso do
     AA pra texto pequeno é 4,5:1, então as três linhas mais miúdas da peça
     eram as três ilegíveis. Este valor já existia no arquivo, usado no lugar
     certo em outras regras: 5,47:1. Ele virou token pra a próxima letra miúda
     nascer legível em vez de nascer escura e ser corrigida depois. */
  --deck-mute: #8a8a8e;
  --deck-borda: #d9d9d9;
  /* O retrato da linha de capítulo. Mora aqui e não na regra da lista porque
     as DUAS listas (o índice do lobby e o reler do fecho) usam a mesma peça, e
     o valor tem que bater com o `data-sizes` que o scripts/indice.mjs escreve
     no HTML: divergir faz o browser baixar a derivada errada. */
  --deck-thumb: clamp(40px, 6vw, 56px);
  --deck-raio: 3.72px;
  --deck-sombra: 0 4px 15.7px rgba(0, 0, 0, 0.15);
  --deck-claro: #f1f1f1; /* fundo das aberturas de capítulo */
  --deck-mono: 'JetBrains Mono', ui-monospace, monospace;
  /* A FAIXA DE CONTEÚDO. O deck ocupava a janela inteira de ponta a ponta:
     a 1440px eram 1248px de conteúdo, e a dobra não tinha nenhuma margem
     onde descansar. Antes disso o trilho vertical comia 132px à esquerda e
     dava esse respiro por acidente; com ele fora, a falta apareceu.

     1024px é a caixa INTEIRA (o padding lateral vem por dentro): a 1440 dá
     880px de conteúdo, ou seja 30% a menos que os 1248 de antes, com 208px
     de folga de cada lado. Abaixo de 1024 a regra é inerte — quem manda
     volta a ser o padding. */
  --deck-largura: 1024px;

  background: var(--deck-bg);
  color: var(--deck-fg-2);
}

/* --- Tipografia do deck -------------------------------------------------- */

/* A headline do slide: Manrope Bold, caixa baixa, tracking bem negativo e
   entrelinha abaixo de 1. No slide de 1920 são 151px com -9px de tracking,
   ou seja -0.06em: é proporção, não número absoluto, então sobrevive ao
   clamp. */
.deck-h {
  font-family: var(--font-sans);
  font-weight: 700;
  /* O deck usa 151px num slide de 1920, ou seja ~7.9% da largura. O clamp
     reproduz a proporção e para em 7rem: acima disso a headline passa a
     brigar com a altura da janela em notebook, e uma frase de cinco linhas
     deixa de ser headline. */
  font-size: clamp(2.2rem, 6.4vw, 7rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--deck-fg);
  text-wrap: balance;
  /* Em ch, medido na PRÓPRIA fonte de display: segura a frase em duas ou três
     linhas em qualquer largura, sem depender do contêiner. */
  max-width: 15ch;
}
/* O corpo: mono, CAIXA ALTA, entrelinha larga. A caixa alta é do deck, não
   é decisão nova: é o contraste dela com a headline em caixa baixa que dá o
   ritmo da página inteira. */
.deck-p {
  font-family: var(--deck-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  color: var(--deck-fg-2);
  max-width: 62ch;
}
.deck-label {
  font-family: var(--deck-mono);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--deck-accent);
}

/* O ponto ciano. No deck ele tem 68px e abre todo slide de conteúdo: é a
   batida antes da frase, e é o que amarra 25 slides como um sistema só. */
.deck-ponto {
  display: block;
  width: clamp(28px, 3.6vw, 44px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--deck-accent);
}

/* --- Capa ---------------------------------------------------------------- */

.deck-capa {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  gap: clamp(28px, 4vw, 54px);
  padding: clamp(80px, 9vw, 130px) clamp(20px, 5vw, 96px) clamp(60px, 7vw, 96px);
  overflow: hidden;
}
.deck-capa-logo {
  display: block;
  width: clamp(180px, 24vw, 320px);
  color: var(--deck-fg);
}
.deck-capa-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.deck-capa-titulo {
  position: relative;
  z-index: 2;
  max-width: 15ch;
}
/* O traço à mão que sublinha a headline da capa. É um path preenchido, não
   um stroke, então não dá pra desenhar com dashoffset: a máscara é o próprio
   contêiner, e o que anda é um scaleX. Transform puro, sem custo de layout. */
.deck-traco {
  display: block;
  width: min(52vw, 700px);
  overflow: hidden;
}
.deck-traco svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--deck-accent);
  transform-origin: left center;
}
.deck-traco path {
  /* pathLength="1" no HTML normaliza o comprimento do path, então o dash
     é 1 e o offset anda de 1 a 0 sem ninguém precisar medir o traço. */
  stroke-dasharray: 1;
}
.js .deck-traco path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-climax) var(--ease-out) 0.25s;
}
.js .deck-capa.in .deck-traco path {
  stroke-dashoffset: 0;
}
.deck-capa-ano {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--deck-fg-2);
}
.deck-capa-pe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
/* A dica de rolar. Era o caractere `↓` regido por mono, caixa alta e
   tracking — três propriedades que não governam um SVG. Agora é ícone de
   biblioteca, e o que resta é caixa, cor e o pulso de convite. */
.deck-capa-rolar {
  display: block;
  width: 18px;
  height: 18px;
  color: var(--deck-mute);
}
.deck-capa-rolar svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* A colagem da capa: quatro cartas tombadas, sobrepostas, com a borda clara
   e a sombra que o deck usa. Em telas estreitas ela desce pra baixo do
   título e vira uma fileira, porque tombada e sobreposta num celular ela só
   come a headline. */
.deck-colagem {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
@media (min-width: 900px) {
  .deck-colagem {
    position: absolute;
    right: clamp(24px, 5vw, 90px);
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: min(38vw, 560px);
    height: min(46vw, 620px);
    margin: 0;
  }
  .deck-colagem .deck-foto {
    position: absolute;
  }
  .deck-colagem .deck-foto:nth-child(1) {
    left: 0;
    top: 32%;
    width: 42%;
  }
  .deck-colagem .deck-foto:nth-child(2) {
    left: 30%;
    top: 0;
    width: 41%;
  }
  .deck-colagem .deck-foto:nth-child(3) {
    left: 24%;
    top: 52%;
    width: 40%;
  }
  .deck-colagem .deck-foto:nth-child(4) {
    left: 58%;
    top: 24%;
    width: 42%;
  }
}

/* --- A carta de foto ----------------------------------------------------- */

/* A peça que se repete o deck inteiro: foto com borda clara de 1px, raio
   curto, sombra baixa e um tombo de alguns graus. O ângulo vem do
   fotos.comecei.json via --tilt, então trocar a inclinação de uma foto é
   editar um número num json, não caçar um seletor aqui. */
.deck-foto {
  --tilt: 0deg;
  /* Fator de inclinação, pra a mesma foto ser mais reta no celular.
     Uma caixa girada ocupa mais espaço do que o layout reservou pra ela: o
     retângulo de contorno de um retângulo inclinado é maior que o original nos
     dois eixos. No desktop isso cabe na folga do container; no celular a foto
     ocupa a largura toda e os cantos passam dos DOIS lados. Medido a 375px:
     9px de estouro do documento inteiro, só disso.
     O gesto é a peça jogada de canto, e ele sobrevive proporcionalmente — não
     é `rotate: none`, é o mesmo desenho em escala menor. */
  --deck-tilt-fator: 1;
  margin: 0;
  border: 1px solid var(--deck-borda);
  border-radius: var(--deck-raio);
  box-shadow: var(--deck-sombra);
  overflow: hidden;
  background: #000;
  transform: rotate(calc(var(--tilt) * var(--deck-tilt-fator)));
  transition: transform var(--dur-slow) var(--ease-out);
}
/* 720px e não 640: entre as duas larguras a foto já enche a linha do flex
   (`flex: 1 1 200px`) e o problema começa antes do breakpoint de celular. */
@media (max-width: 720px) {
  .deck-foto {
    --deck-tilt-fator: 0.3;
  }
}
.deck-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hover endireita a carta. É a única recompensa de mouse da página, e ela
   diz uma coisa verdadeira: tem uma foto ali que vale olhar de frente. */
@media (hover: hover) {
  .deck-foto:hover {
    transform: rotate(0deg) scale(1.02);
  }
}

/* --- O slide de conteúdo ------------------------------------------------- */

.deck-slide {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  /* O vertical caiu 28% (era 46/6.2vw/92) pra pagar o que a faixa de
     conteúdo cobrou: estreitar o bloco quebra tudo em mais linhas, e o
     cap03 subiu 691px só com isso. Ar é o que dá pra devolver sem tocar em
     uma palavra do capítulo. */
  padding: clamp(34px, 4.4vw, 66px) clamp(20px, 5vw, 96px);
  max-width: var(--deck-largura);
  margin-inline: auto;
}
@media (min-width: 900px) {
  .deck-slide {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 90px);
  }
  /* Alterna o lado da colagem. Vinte e cinco slides com a foto sempre à
     direita viram papel de parede; alternando, o olho continua procurando. */
  .deck-slide:nth-of-type(even) .deck-slide-corpo {
    order: 2;
  }
}
.deck-slide-corpo {
  display: grid;
  gap: clamp(20px, 2.6vw, 40px);
  justify-items: start;
}
.deck-slide-fotos {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 26px);
  align-items: center;
  justify-content: center;
}
.deck-slide-fotos .deck-foto {
  flex: 1 1 200px;
  max-width: 340px;
}

/* Entrada do slide: o ponto primeiro, a headline depois, o corpo por último.
   É a ordem em que a fala acontecia no palco. Sem @keyframes de propósito,
   pra a entrada continuar interrompível se a pessoa rolar de volta. */
.js .deck-slide .deck-ponto,
.js .deck-slide .deck-h,
.js .deck-slide .deck-p,
.js .deck-slide .deck-slide-fotos {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-fold) var(--ease-out),
    transform var(--dur-fold) var(--ease-out);
}
.js .deck-slide .deck-ponto {
  transform: scale(0.95);
}
.js .deck-slide.in .deck-ponto,
.js .deck-slide.in .deck-h,
.js .deck-slide.in .deck-p,
.js .deck-slide.in .deck-slide-fotos {
  opacity: 1;
  transform: none;
}
.js .deck-slide.in .deck-h {
  transition-delay: 0.08s;
}
.js .deck-slide.in .deck-p {
  transition-delay: 0.16s;
}
.js .deck-slide.in .deck-slide-fotos {
  transition-delay: 0.1s;
}

/* Parallax das colagens. Nativo, fora da main thread, então não tem como
   travar a rolagem. Onde não houver suporte a foto fica parada, que é um
   resultado correto e não um bug. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .deck-slide-fotos {
      animation: deck-parallax linear both;
      animation-timeline: view();
      animation-range: entry 8% exit 92%;
    }
  }
}
@keyframes deck-parallax {
  from {
    transform: translateY(34px);
  }
  to {
    transform: translateY(-34px);
  }
}

/* --- Abertura de capítulo ------------------------------------------------ */

/* No deck as aberturas são as ÚNICAS telas claras. Essa inversão é o que
   separa um capítulo do outro sem precisar de um rótulo gritando. */
.deck-cap {
  position: relative;
  min-height: 58svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  padding: clamp(54px, 6.5vw, 96px) clamp(20px, 5vw, 96px);
  max-width: var(--deck-largura);
  margin-inline: auto;
  background: var(--deck-claro);
  color: #0d0d0d;
  text-align: center;
  overflow: hidden;
}
.deck-cap .deck-label {
  color: var(--deck-mute);
}
.deck-cap-titulo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 3.1rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: #0d0d0d;
  max-width: 18ch;
}
.deck-cap-foto {
  /* 500 e não 620: a abertura é pausa, não é dobra de conteúdo, e a foto
     grande demais transformava o respiro em mais uma tela pra rolar. */
  width: min(64vw, 500px);
}
.deck-cap-foto img {
  display: block;
  width: 100%;
  height: auto;
}
/* A abertura sobe um pouco enquanto passa. Movimento longo e deliberado de
   marketing, fora do teto de 300ms que governa controle respondendo a
   clique. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-cap-foto {
      animation: deck-cap-sobe linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes deck-cap-sobe {
  from {
    transform: translateY(46px) scale(1.03);
  }
  to {
    transform: translateY(-46px) scale(1.03);
  }
}

/* --- Números ------------------------------------------------------------- */

.deck-numeros {
  padding: clamp(44px, 5.5vw, 88px) 0;
}
/* A FAIXA. Um trilho só: peça de obra e carta de dado intercaladas, andando
   juntas.

   O caminho até aqui é o argumento. Eram seis números numa fileira de seis
   colunas iguais MAIS duas esteiras de marquee com as mesmas obras — oito
   elementos com o mesmo peso, que é o mesmo que nenhum. Virou um bento de
   quatro células com um carrossel embaixo, e ainda eram DUAS peças ocupando
   dois lugares e disputando o mesmo olhar.

   Agora é uma. A hierarquia não sumiu, mudou de suporte: ela mora na LARGURA
   da carta (`data-largo` na régua), não numa grade paralela.

   Movimento constante, então `linear` e infinito: é a única animação da
   página que ninguém interrompe, e por isso é a única que pode ser @keyframes
   sem culpa. */
.deck-faixa {
  position: relative;
  padding: clamp(16px, 2vw, 26px) 0;
  overflow: hidden;
  /* Nas duas pontas a fita some no fundo em vez de bater numa borda dura: sem
     isso o corte anuncia que aquilo é um elemento, e não um acervo passando. */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.deck-obra {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: max-content;
  animation: deck-corre 62s linear infinite;
}
/* Parar no hover é o que separa "faixa bonita passando" de "deixa eu ler esse
   número". Com dado dentro da fita isto deixou de ser cortesia: é a única
   forma de ler com calma um valor que anda. */
.deck-faixa:hover .deck-obra {
  animation-play-state: paused;
}

/* A peça de obra e a carta de dado têm a MESMA caixa. É o que faz o trilho
   ler como um trilho, e não como um carrossel com legendas enfiadas no meio. */
.deck-obra-peca,
.deck-obra-dado {
  width: clamp(200px, 21vw, 290px);
  flex: none;
  aspect-ratio: 4 / 3;
  margin: 0;
}
.deck-obra-peca {
  transform: none;
}
.deck-obra-peca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A carta de dado. Fundo da página e borda de 1px: ela é o NEGATIVO da peça
   de obra, que é foto sangrada com borda clara. Duas cartas do mesmo tom
   seriam uma fileira de retângulos; opostas, o olho separa dado de prova sem
   precisar de rótulo. */
.deck-obra-dado {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(18px, 2vw, 28px);
  background: #131316;
  border: 1px solid #26262b;
  border-radius: var(--deck-raio);
}
/* A régua. "10 + anos" é a premissa do título da palestra, e é contra ela que
   os outros três — que não têm denominador — querem dizer alguma coisa. Uma
   foto e meia de largura, e é só isso que a hierarquia precisa aqui. */
.deck-obra-dado[data-largo] {
  width: clamp(290px, 31vw, 430px);
}
.deck-obra-dado b {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--deck-fg);
  font-variant-numeric: tabular-nums;
}
.deck-obra-dado[data-largo] b {
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  line-height: 0.94;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.deck-obra-dado span {
  font-family: var(--deck-mono);
  text-transform: uppercase;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--deck-accent);
}
.deck-obra-dado small {
  font-family: var(--deck-mono);
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--deck-mute);
}
/* A régua não tem rótulo do meio: o subtítulo dela é que carrega o sentido,
   então ele sobe pro lugar (e pra cor) do rótulo. */
.deck-obra-dado[data-largo] small {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--deck-accent);
}
@keyframes deck-corre {
  from {
    transform: translateX(0);
  }
  to {
    /* -50% porque a fita é o mesmo conjunto duplicado: no meio do caminho a
       imagem é idêntica ao começo, e o loop não tem emenda visível. */
    transform: translateX(-50%);
  }
}
/* Marquee infinito é o gatilho clássico de enjoo — e aqui ele leva DADO
   junto, então parar não é só conforto: é a única versão em que os quatro
   números estão todos legíveis ao mesmo tempo. A fita para e vira grade. */
@media (prefers-reduced-motion: reduce) {
  .deck-obra {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
  }
  .deck-faixa {
    mask-image: none;
  }
}

/* --- Índice -------------------------------------------------------------- */

/* A lista com o título grande, que é o que este índice sempre foi. Houve uma
   versão em prateleira, com sete lombadas de pé e o título virado 90°: ela
   descrevia bem e lia mal — título vertical se lê devagar, e o capítulo de
   nome mais longo era justamente o de lombada mais fina. Voltou pra linha.

   A única coisa que sobreviveu daquela versão é a marca de já lido, e ela
   sobreviveu por função, não por estilo: com um módulo por vez, sem ela não
   há nenhum sinal de onde a leitura parou. */
.deck-indice {
  padding: clamp(48px, 6vw, 92px) clamp(20px, 5vw, 96px);
  max-width: var(--deck-largura);
  margin-inline: auto;
  display: grid;
  gap: clamp(22px, 3vw, 40px);
}
.deck-indice ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #1c1c1f;
}
.deck-indice li {
  border-bottom: 1px solid #1c1c1f;
}
.deck-indice a {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem var(--deck-thumb) 1fr;
  align-items: baseline;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 22px) 4px;
  transition: background-color var(--dur-base) var(--ease-out);
}

/* A capa do capítulo, no tamanho de um retrato. Existe porque as sete linhas
   eram tipograficamente idênticas numa lista que é a navegação real da rota:
   sem imagem, escolher capítulo é ler sete títulos com o mesmo peso. Nenhum
   asset novo — são as MESMAS capas que abrem cada capítulo, agora com um
   derivado de 112px (5 kB no lugar dos 64 kB do de 620).

   Largura E altura fixas de propósito. O `aspect-ratio` que o fotos:build
   escreve inline é verdade pra capa em largura fluida, e as sete têm proporção
   diferente (16/9, 1/1, 4/5, 9/16, 5/4) — sete formas diferentes numa lista
   lêem como descuido. Fixar os dois lados desliga o aspect-ratio sem precisar
   de `!important`, e o corte fica com o object-fit. A borda, o raio, a sombra
   e o `overflow: hidden` vêm de `.deck-foto`: aqui só a caixa muda. */
.deck-indice-thumb {
  --deck-tilt-fator: 0;
  width: var(--deck-thumb);
  height: var(--deck-thumb);
  align-self: center;
}
.deck-indice-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deck-indice a:hover {
  background: #131316;
}
.deck-indice i {
  font-family: var(--deck-mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--deck-accent);
}
.deck-indice span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.75rem);
  letter-spacing: -0.035em;
  color: var(--deck-fg);
  line-height: 1.12;
}
/* Já lido: um filete na borda de dentro da linha. Não é barra de progresso,
   não é percentual e não é frase — é onde a fita de leitura ficaria. */
.deck-indice a[data-lido]::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--deck-accent);
}

/* --- A conta do capítulo 06 ---------------------------------------------- */

/* No palco a piada depende do tempo: as três linhas aparecem, e só então a
   medalha pousa na do meio. Sem a espera não há piada, então a espera é
   parte do desenho e não sobra de animação. */
.deck-conta {
  display: grid;
  gap: 0;
  border-top: 1px solid #1c1c1f;
  width: min(100%, 640px);
}
.deck-conta-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(16px, 2.4vw, 28px) 6px;
  border-bottom: 1px solid #1c1c1f;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1;
}
.js .deck-conta-linha {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-fold) var(--ease-out),
    transform var(--dur-fold) var(--ease-out);
}
.js .deck-slide.in .deck-conta-linha {
  opacity: 1;
  transform: none;
}
.js .deck-slide.in .deck-conta-linha:nth-child(2) {
  transition-delay: 0.18s;
}
.js .deck-slide.in .deck-conta-linha:nth-child(3) {
  transition-delay: 0.36s;
}
.deck-medalha {
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1;
}
.js .deck-medalha {
  opacity: 0;
  transform: translateY(-14px) scale(0.95);
  transition:
    opacity var(--dur-slow) var(--ease-out) 0.62s,
    transform var(--dur-slow) var(--ease-out) 0.62s;
}
.js .deck-slide.in .deck-medalha {
  opacity: 1;
  transform: none;
}

/* --- Retratos ------------------------------------------------------------ */

.deck-retratos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(40px, 5vw, 80px) clamp(20px, 5vw, 96px);
}
.deck-retrato {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.deck-retrato .deck-foto {
  width: clamp(120px, 14vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
}
.deck-retrato .deck-foto img {
  object-position: center 28%;
}
.deck-retrato b {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  letter-spacing: -0.04em;
  color: var(--deck-fg);
}
.deck-retrato span {
  font-family: var(--deck-mono);
  text-transform: uppercase;
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  color: var(--deck-mute);
}

/* --- Fecho --------------------------------------------------------------- */

.deck-fim {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(20px, 3vw, 40px);
  text-align: center;
  min-height: 60svh;
  padding: clamp(70px, 9vw, 130px) clamp(20px, 5vw, 96px);
  max-width: var(--deck-largura);
  margin-inline: auto;
}
.deck-obrigado {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 8vw, 6.5rem);
  letter-spacing: -0.055em;
  line-height: 0.9;
  color: var(--deck-fg);
}
.deck-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--deck-raio);
  background: var(--deck-fg);
  color: var(--deck-bg);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition:
    transform var(--dur-press) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}
.deck-cta:active {
  transform: scale(0.97);
}
.deck-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 30px clamp(20px, 5vw, 96px) 44px;
  border-top: 1px solid #1c1c1f;
  font-family: var(--deck-mono);
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--deck-mute);
}
.deck-rodape a:hover {
  color: var(--deck-fg-2);
}

/* --- Movimento reduzido --------------------------------------------------- */

/* Reduzir movimento não é desligar a página: o conteúdo continua chegando,
   o que sai é o deslocamento. O tombo das fotos vira zero porque ele também é
   movimento, só que congelado. (A troca do mosaico é desligada no
   js/comecei.js, não aqui: sem JS a célula já mostra uma peça só.) */
@media (prefers-reduced-motion: reduce) {
  .js .deck-slide .deck-ponto,
  .js .deck-slide .deck-h,
  .js .deck-slide .deck-p,
  .js .deck-slide .deck-slide-fotos,
  .js .deck-conta-linha,
  .js .deck-medalha {
    transform: none;
    transition-duration: var(--dur-base);
  }
  .js .deck-traco svg {
    transform: none;
    transition: none;
  }
  .deck-foto {
    transform: none;
    transition: none;
  }
}

/* Slide sem colagem. Vários slides do deck são só voz: forçar a grade de duas
   colunas neles deixaria metade da tela vazia do lado da headline, e vazio
   por acidente lê como erro de layout. */
.deck-slide--so-texto {
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .deck-slide--so-texto {
    grid-template-columns: 1fr;
  }
  .deck-slide--so-texto .deck-slide-corpo {
    order: 0;
    /* Sem colagem, quem limita a linha é o max-width em ch de cada peça
       (.deck-h e .deck-p), não o contêiner: 68ch aqui resolvia contra a fonte
       de 16px do corpo e estrangulava a headline em 540px. */
    max-width: none;
  }
}
/* A conta "💻 + 💻 + ☕️ =" do primeiro slide. É fala do deck, não ícone. */
.deck-emoji {
  font-size: clamp(1.2rem, 2.6vw, 1.9rem);
  line-height: 1;
  letter-spacing: 0.08em;
}
/* A foto da abertura de capítulo é recorte sobre fundo claro, não carta
   tombada: borda e sombra aqui desenhariam um retângulo em volta de um
   recorte que não tem retângulo. */
.deck-cap-foto {
  border: 0;
  box-shadow: none;
  background: transparent;
  border-radius: 0;
}
.deck-cap-foto img {
  height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .deck-cap-foto:hover {
    transform: none;
  }
}
.deck-fim .deck-p a {
  border-bottom: 1px solid #33333a;
  transition: border-color var(--dur-base) var(--ease-out);
}
.deck-fim .deck-p a:hover {
  border-color: var(--deck-accent);
}
.deck-fim .deck-cap-titulo {
  color: var(--deck-fg);
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 20ch;
}

/* ============================================================================
   /comecei · os cinco tipos de dobra (etapa 1 do burilamento)

   Vinte e cinco dobras com a mesma anatomia é fiel ao deck e cansativo na web:
   no palco quem dava o ritmo era a voz, e aqui não tem voz, então a rolagem
   virava metrônomo. Os tipos abaixo são o ritmo escrito no CSS.

   Ver docs/PLANO-COMECEI-BURILAMENTO.md.
   ========================================================================= */

/* --- BOARD: a dobra vira canvas ----------------------------------------- */

/* Três dobras em que a foto para de ser ilustração ao lado do texto e vira o
   próprio espaço: peças jogadas, tortas, em profundidades diferentes, como um
   arquivo do Figma aberto no meio do trabalho.

   A versão anterior disto era uma foto sangrando a tela com um véu escuro por
   cima. Foi recusada, e com razão: véu é o oposto do que o deck faz. O deck
   NUNCA cobre a foto, ele joga a foto por cima. Aqui a legibilidade vem de
   onde a peça é posta (o json evita a coluna do texto), não de um filtro.

   Posição, largura, tombo e velocidade de cada peça vêm do bloco `boards` do
   fotos.comecei.json, via custom property. Mover uma foto no board é mexer
   num número lá, não caçar seletor aqui. */
.deck-slide--board {
  position: relative;
  grid-template-columns: 1fr;
  align-content: center;
  min-height: 74svh;
  /* A peça que sangra pela direita é sangria de propósito: o canvas continua
     fora da tela. Sem este clip ela vira 59px de rolagem horizontal, que é
     como a sangria estava chegando no celular. */
  overflow: hidden;
}
.deck-board {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* As peças ficam ABAIXO do texto na pilha, e o texto não tem fundo: quem
     separa os dois é a posição no board, não uma caixa atrás da headline. */
  z-index: 0;
}
.deck-slide--board .deck-slide-corpo {
  position: relative;
  z-index: 1;
  max-width: min(100%, 720px);
}
.deck-slide--board .deck-h {
  max-width: 13ch;
}

.deck-board-peca {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  margin: 0;
  pointer-events: auto;
}
.deck-board-peca img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cada peça flutua num ritmo próprio: `--vel` abaixo de 1 anda menos que a
   rolagem e recua, acima de 1 anda mais e vem pra frente. É o que separa o
   board de uma colagem parada, e é o que o pedido chamou de movimento. A
   conta acontece dentro do transform, então continua sendo só transform. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-board-peca {
      animation: deck-flutua linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
/* O arrasto escreve --dx/--dy e o keyframe SOMA os dois. Se o arrasto
   escrevesse  direto, o último a falar ganharia e a peça pularia
   na mão a cada frame de scroll. Compondo, os dois convivem. */
@keyframes deck-flutua {
  from {
    transform: translate(var(--dx, 0px), calc(var(--vel) * 70px + var(--dy, 0px)))
      rotate(var(--tilt));
  }
  to {
    transform: translate(var(--dx, 0px), calc(var(--vel) * -70px + var(--dy, 0px)))
      rotate(var(--tilt));
  }
}

/* No celular o board vira empilhamento: peça absoluta em 380px de largura ou
   some atrás do texto ou empurra a dobra pra 3000px de altura. O tombo fica,
   porque o tombo é a assinatura. */
@media (max-width: 860px) {
  .deck-slide--board {
    min-height: 0;
  }
  .deck-board {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: clamp(24px, 5vw, 40px);
  }
  .deck-board-peca {
    position: static;
    width: calc(50% - 7px);
    animation: none;
    transform: rotate(var(--tilt));
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-board-peca {
    animation: none;
    /* movimento por scroll sai; movimento pedido com a mão fica */
    transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--tilt));
  }
}

/* --- DUPLA: duas ideias curtas numa dobra ------------------------------- */

/* Depois de duas dobras largas, uma dobra que entrega duas ideias de uma vez
   muda a respiração sem tirar conteúdo. É também o que mais encurta a
   página: três duplas apagam três dobras inteiras de padding. */
.deck-dupla {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 80px);
  padding: clamp(48px, 6.5vw, 100px) clamp(20px, 5vw, 96px);
}
@media (min-width: 860px) {
  .deck-dupla {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 5vw, 88px);
  }
}
.deck-slide--curto {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(20px, 2.4vw, 32px);
  padding: 0;
}
.deck-slide--curto .deck-slide-corpo {
  gap: clamp(16px, 1.8vw, 26px);
}
/* Metade da largura pede metade da voz. Sem esta redução a headline do curto
   quebra em cinco linhas e a dupla fica mais alta que as duas dobras que ela
   substituiu, que é o oposto do ponto. */
.deck-slide--curto .deck-h {
  font-size: clamp(1.7rem, 3.2vw, 3.1rem);
  letter-spacing: -0.05em;
  max-width: 16ch;
}
.deck-slide--curto .deck-ponto {
  width: clamp(20px, 2.2vw, 28px);
}
.deck-slide--curto .deck-slide-fotos {
  justify-content: flex-start;
}
.deck-slide--curto .deck-slide-fotos .deck-foto {
  max-width: 260px;
}

/* A entrada da dupla é uma só: as duas colunas sobem juntas. Escalonar as
   metades de uma dobra que existe pra ser lida de uma vez desmontaria o
   motivo dela existir. */
.js .deck-dupla .deck-ponto,
.js .deck-dupla .deck-h,
.js .deck-dupla .deck-p,
.js .deck-dupla .deck-slide-fotos {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur-fold) var(--ease-out),
    transform var(--dur-fold) var(--ease-out);
}
.js .deck-dupla .deck-ponto {
  transform: scale(0.95);
}
.js .deck-dupla.in .deck-ponto,
.js .deck-dupla.in .deck-h,
.js .deck-dupla.in .deck-p,
.js .deck-dupla.in .deck-slide-fotos {
  opacity: 1;
  transform: none;
}
.js .deck-dupla.in .deck-h {
  transition-delay: 0.08s;
}
.js .deck-dupla.in .deck-p {
  transition-delay: 0.16s;
}

/* --- O fecho ------------------------------------------------------------ */

.deck-fecho-peca {
  width: min(58vw, 300px);
  border: 0;
  box-shadow: none;
  background: none;
  border-radius: 0;
}
.deck-fecho-peca img {
  height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .deck-fecho-peca:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .deck-dupla .deck-ponto,
  .js .deck-dupla .deck-h,
  .js .deck-dupla .deck-p,
  .js .deck-dupla .deck-slide-fotos {
    transform: none;
    transition-duration: var(--dur-base);
  }
}

/* ============================================================================
   /comecei · etapa 3 do burilamento: as peças desenhadas
   ========================================================================= */

/* --- A marca-d'água do capítulo ------------------------------------------ */

/* Na rolagem, o marco de "virou de capítulo" precisa de tamanho. O algarismo
   atrás do título faz esse trabalho sem dizer nada, e é o mesmo 01..07 que
   já está no índice: ordinal, não copy nova. Fica em cima do fundo claro com
   contraste baixíssimo de propósito — ele é marco, não é informação, e se
   competisse com o título seria ruído. */
.deck-cap-num {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(14rem, 34vw, 30rem);
  line-height: 0.8;
  letter-spacing: -0.08em;
  color: #0d0d0d;
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
}
.deck-cap > *:not(.deck-cap-num) {
  position: relative;
  z-index: 1;
}
/* O algarismo anda menos que a rolagem: ele é o fundo do marco, e fundo que
   anda junto com a frente não cria profundidade nenhuma. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-cap-num {
      animation: deck-num-desliza linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes deck-num-desliza {
  from {
    transform: translate(-50%, calc(-50% + 60px));
  }
  to {
    transform: translate(-50%, calc(-50% - 60px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .deck-cap-num {
    animation: none;
  }
}

/* ============================================================================
   /comecei · consertos da auditoria (docs/AUDIT-COMECEI.md)
   ========================================================================= */

/* --- A barra do módulo --------------------------------------------------- */

/* Era o contador de celular; virou a única peça de navegação da rota depois
   que o trilho vertical saiu. Por isso vale em QUALQUER largura agora — e só
   com um módulo aberto, porque no índice ela não teria o que dizer.

   É link pro índice de propósito. Progresso sem destino responde "quanto
   falta" e deixa "me tira daqui" sem resposta, e quem está no meio de um
   capítulo costuma querer as duas. */
.deck-topo {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  /* 44px é o piso do dedo, e a barra media 37. Ela é o ÚNICO caminho de volta
     pro índice em tela estreita (o botão do meio da barra de passo saiu por
     repetir esta), então o alvo dela não pode ser o menor da rota. */
  min-height: 44px;
  padding: 10px clamp(14px, 4vw, 22px);
  background: color-mix(in srgb, var(--deck-bg) 86%, transparent);
  /* Único blur da rota, e ele é de barra fixa sobre conteúdo que passa por
     baixo — o caso em que o fundo sólido esconderia a foto e o transparente
     deixaria o número ilegível. */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #1c1c1f;
}
.deck-topo-volta {
  flex: none;
  display: block;
  width: 18px;
  height: 18px;
  color: var(--deck-mute);
  transition: color var(--dur-base) var(--ease-out);
}
.deck-topo-volta svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* O nome do destino, ao lado da seta. Uma seta sozinha diz "volta" e não diz
   volta pra onde, e esta barra é o único caminho de volta em tela estreita.
   Some abaixo de 720px porque lá a barra divide a largura com o trilho de
   progresso e o contador, e aí o `aria-label` do <a> carrega o recado. */
.deck-topo-rotulo {
  flex: none;
  font-family: var(--deck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--deck-mute);
  transition: color var(--dur-base) var(--ease-out);
}
.deck-topo:hover .deck-topo-rotulo,
.deck-topo:focus-visible .deck-topo-rotulo {
  color: var(--deck-accent);
}
@media (max-width: 719px) {
  .deck-topo-rotulo {
    display: none;
  }
}
.deck-topo:hover .deck-topo-volta,
.deck-topo:focus-visible .deck-topo-volta {
  color: var(--deck-accent);
}
.deck-topo-barra {
  position: relative;
  flex: 1;
  height: 1px;
  background: #2a2a2e;
  overflow: hidden;
}
.deck-topo-barra b {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--deck-accent);
  transform-origin: left;
  transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .deck-topo-barra b {
    animation: deck-progresso linear both;
    animation-timeline: scroll(root block);
  }
}
/* A barra é horizontal e o keyframe era `scaleY`, herdado do trilho vertical
   que ela acompanhava. Numa faixa de 1px de altura, scaleY não desenha
   progresso nenhum: ela acendia inteira e ficava. Agora o keyframe é o eixo
   certo. */
@keyframes deck-progresso {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
/* Sem scroll timeline a barra some em vez de mentir um progresso parado. */
@supports not (animation-timeline: scroll()) {
  .deck-topo-barra {
    display: none;
  }
}
.deck-topo-cap {
  flex: none;
  font-family: var(--deck-mono);
  /* 0.72rem e o token de letra miúda, como o resto da navegação: em 0.62rem e
     #6a6a6e (3,61:1) o contador de capítulo era o texto mais escuro e mais
     pequeno de uma barra que existe só pra ser lida de relance. */
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--deck-mute);
  font-variant-numeric: tabular-nums;
}
.deck-topo-cap b {
  font-weight: 400;
  color: var(--deck-accent);
}
/* A barra fixa cobre o topo: o alvo de âncora precisa parar abaixo dela. */
.deck-cap,
.deck-indice {
  scroll-margin-top: 52px;
}

/* --- O board se mexe com a mão (achado 5) -------------------------------- */

/* A afordância vem do cursor e do foco, não de um rótulo dizendo "arraste":
   peça tombada num canvas com `grab` já é a convenção que todo mundo conhece
   de Figma, Miro e mapa. */
@media (min-width: 861px) and (pointer: fine) {
  .deck-board-peca {
    cursor: grab;
    touch-action: none;
  }
  .deck-board-peca.arrastando {
    cursor: grabbing;
  }
  /* Enquanto arrasta, a peça para de flutuar: dois donos do mesmo transform
     brigando é o que faz a peça pular na mão. */
  .deck-board-peca.arrastando {
    animation-play-state: paused;
  }
}
.deck-board-peca:focus-visible {
  outline: 2px solid var(--deck-accent);
  outline-offset: 3px;
}

/* --- O fecho que fecha (achado 8) ---------------------------------------- */

.deck-fim-titulo {
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  max-width: 20ch;
  color: var(--deck-fg);
}
/* Duas portas com pesos diferentes. Antes eram dois links na mesma voz, e
   quem leu 29 telas recebia a mesma porta de quem caiu de paraquedas. */
.deck-fim-portas {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(8px, 1.5vw, 16px);
}
.deck-fim-duvida {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.deck-fim-duvida a {
  font-family: var(--deck-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--deck-fg-2);
  border-bottom: 1px solid #33333a;
  padding-bottom: 2px;
  transition: border-color var(--dur-base) var(--ease-out);
}
.deck-fim-duvida a:hover {
  border-color: var(--deck-accent);
}

/* Matéria de trás: os sete capítulos de novo, pra quem terminou voltar sem
   rolar 29 telas. Compacta de propósito — é índice de saída, não de entrada,
   e quem chega aqui já sabe o que tem dentro. */
.deck-reler {
  padding: clamp(40px, 5vw, 76px) clamp(20px, 5vw, 96px);
  max-width: var(--deck-largura);
  margin-inline: auto;
  border-top: 1px solid #1c1c1f;
  display: grid;
  /* `minmax(0, 1fr)` e não o `auto` implícito. Sem esta linha a coluna deste
     grid era `auto`, que dimensiona pelo max-content do filho — e o max-content
     de um `auto-fit` é o número de itens vezes o piso da faixa. Resultado
     medido a 375px: o <ol> abria QUATRO colunas de 260px (1046px) dentro de uma
     tela de 375, e o documento inteiro ganhava 691px de estouro horizontal.
     A palestra inteira balançava de lado e três dos sete capítulos ficavam
     fora da tela, inalcançáveis sem arrastar a página. */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
/* No fecho o cartão tem piso de 260px e divide a linha com outros três, então
   o retrato entra no menor tamanho da faixa em vez de escalar com a viewport. */
.deck-reler {
  --deck-thumb: 40px;
}
.deck-reler ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  /* Teto de 4 colunas: com auto-fit livre, sete capítulos numa tela larga
     viravam seis numa linha e um órfão na outra. 4+3 lê como bloco.
     O `min(260px, 100%)` é o idioma padrão do auto-fit e é a segunda metade do
     conserto acima: sem ele, uma faixa de piso 260px nunca desce abaixo de
     260px, nem quando o container tem menos que isso. Com ele, a faixa colapsa
     pra largura disponível e o índice vira uma coluna no celular. */
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  max-width: 1180px;
  gap: 2px;
}
.deck-reler a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* 12 e não 10: com 10 a linha fechava em 40px, quatro a menos que o piso do
     dedo. É a navegação entre capítulos de uma peça de 26.000px lida no
     telefone, então errar o toque aqui é sair da leitura. */
  padding: 12px 8px;
  border-radius: var(--deck-raio);
  transition: background-color var(--dur-base) var(--ease-out);
}
.deck-reler a:hover {
  background: #131316;
}
.deck-reler i {
  font-family: var(--deck-mono);
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--deck-accent);
  flex: none;
}
.deck-reler span {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.02em;
  color: var(--deck-fg-2);
  line-height: 1.25;
}

/* --- Placeholder das fotos da capa (achado 9) ---------------------------- */

/* As quatro cartas da capa são LCP e carregam em `fetchpriority=high`. Numa
   rede ruim elas montavam em pedaços sobre o preto. O LQIP é gerado no build
   pelo scripts/fotos.mjs (sharp, 20px, embutido como data URI de ~400 bytes)
   e mora aqui atrás da foto: a carta já nasce com a cor certa e a foto entra
   por cima. Só nas quatro da capa — 105 imagens com LQIP seriam 40KB inline
   pra resolver um problema que só existe acima da dobra. */
.deck-foto[data-lqip] {
  background-size: cover;
  background-position: center;
}

/* ============================================================================
   /comecei · um módulo por vez (docs/PLANO-COMECEI-ESTANTE.md)
   ========================================================================= */

/* A cortina. A classe entra no <html> por um <script> de uma linha no <head>,
   antes do primeiro pixel, e sai no primeiro frame do js/comecei.js — que
   nesse mesmo frame põe os `hidden` de verdade. Ela existe só para cobrir o
   intervalo entre as duas coisas: sem ela, o navegador pintaria os sete
   módulos empilhados (26.000px) antes de o script fechar seis.

   Note que NÃO existe regra para `.deck-modulo[hidden]`. O fechamento é o
   `hidden="until-found"` nativo: com uma regra `display: none` de autor por
   cima, o Ctrl+F deixaria de encontrar o capítulo fechado, que é justamente o
   que o until-found devolve. */
.deck-cortina .deck-modulo {
  display: none;
}

/* O `[hidden]` que a folha do navegador dá de graça é `[hidden] {display:none}`
   — e regra de autor ganha dele. Estes quatro têm `display: grid`/`flex`
   escrito neste arquivo, então fechá-los pelo atributo e mais nada não fechava
   NADA: medido, a capa continuava `display: grid` com o capítulo 03 aberto por
   cima. O `.deck-modulo` fica de fora de propósito: ele não tem display de
   autor, e é ali que o `hidden=until-found` precisa continuar valendo. */
.deck-capa[hidden],
.deck-numeros[hidden],
.deck-indice[hidden],
.deck-topo[hidden] {
  display: none;
}

/* --- A barra de passo, no pé do módulo ----------------------------------- */

/* Gerada pelo js/comecei.js a partir do próprio índice: os rótulos são os
   mesmos `indice.c1..c7` do copy.comecei.json, então isto não inventa uma
   palavra. Sem JS ela não existe — e sem JS também não há módulo fechado, a
   rota é a rolagem contínua de sempre. */
.deck-passo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 10px;
  padding: clamp(28px, 4vw, 54px) clamp(20px, 5vw, 96px) clamp(56px, 7vw, 90px);
  max-width: var(--deck-largura);
  margin-inline: auto;
  border-top: 1px solid #1c1c1f;
}
.deck-passo a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid #1c1c1f;
  border-radius: var(--deck-raio);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.deck-passo a:hover {
  background: #131316;
  border-color: #26262b;
}
.deck-passo i {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--deck-mono);
  font-style: normal;
  /* 0.72rem e não 0.6: com a seta virando ícone de verdade, o número ao lado
     dela não pode ser o menor texto da rota. */
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--deck-mute);
}
/* O ícone do Phosphor herda a cor por currentColor e o tamanho daqui. 1.15em
   e não 1em: o glifo do Phosphor tem folga interna no viewBox de 256, então
   em 1em ele lê menor que a letra ao lado. */
.deck-passo i svg {
  display: block;
  width: 1.15em;
  height: 1.15em;
}
.deck-passo b {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--deck-fg);
}
/* O vizinho da direita alinha à direita: a seta e o texto apontam pro mesmo
   lado do movimento. */
.deck-passo-b {
  text-align: right;
  align-items: flex-end;
}
/* Buraco no lugar do vizinho que não existe (antes do 01, depois do fecho):
   a célula vazia segura a grade e o "próximo" do primeiro capítulo não
   escorrega pra coluna do "anterior". */
.deck-passo span[data-vazio] {
  display: block;
}
@media (max-width: 640px) {
  .deck-passo {
    grid-template-columns: 1fr 1fr;
  }
  .deck-passo a.deck-passo-volta {
    grid-column: 1 / -1;
    order: 2;
    padding-top: 4px;
  }
}

/* --- A linha que abre ---------------------------------------------------- */

/* A linha clicada no índice e a abertura do capítulo recebem o MESMO
   `view-transition-name` (posto e removido pelo js/comecei.js), e o navegador
   interpola uma na outra sozinho: a linha da lista vira a capa do capítulo
   sem uma linha de animação escrita à mão. Onde a API não existe, a troca
   acontece seca — e a rota continua inteira.

   O tempo e a curva saem dos tokens que o styles.css já usa na passagem
   entre rotas, e a guarda de `prefers-reduced-motion` de lá é global
   (`::view-transition-group(*)`) — esta peça não precisa repetir nenhuma das
   duas. `--ease-drawer` porque é gaveta: a linha do índice abre. */
::view-transition-group(livro) {
  animation-duration: var(--dur-vt-in);
  animation-timing-function: var(--ease-drawer);
}
/* --- Ler tudo de uma vez ------------------------------------------------- */

/* `#tudo` devolve a rolagem contínua de antes, e a impressão faz o mesmo sem
   pedir. `display: block` e não `revert`: `revert` num elemento com [hidden]
   volta pro `display: none` da folha do navegador, que é exatamente o que
   estas duas regras precisam desfazer. */
.deck-tudo .deck-modulo,
.deck-tudo .deck-modulo[hidden] {
  display: block;
  content-visibility: visible;
}
@media print {
  .deck-modulo,
  .deck-modulo[hidden] {
    display: block !important;
    content-visibility: visible !important;
  }
  .deck-topo,
  .deck-passo {
    display: none !important;
  }
}

/* ============================================================================
   /comecei · a dobra vira slide no celular
   ========================================================================= */

/* MEDIDO, e é o motivo: um capítulo no 390px é uma pilha de 3 a 5 dobras de
   anatomia idêntica — ponto ciano, headline, parágrafo, foto — com 4.948px de
   rolagem no cap03. Cinco telas e meia de dedo, pra ler cinco frases que não
   dependem uma da outra. No palco isso era o deck avançando.

   Aqui elas voltam pro eixo X: uma por tela, arrasta pro lado. E é o CSS que
   faz, não um carrossel de biblioteca — `overflow-x` mais `scroll-snap`. O
   conteúdo continua inteiro no DOM (Ctrl+F, leitor de tela e o `.reveal`
   seguem funcionando), a barra de rolagem nativa continua sendo a barra de
   rolagem nativa, e não há um byte de JS novo.

   SÓ NO CELULAR, e isso não é conservadorismo: acima de 861px com ponteiro
   fino as peças do board são arrastáveis (js/comecei.js), e arrasto de peça
   dentro de um trilho horizontal disputaria o mesmo gesto. Abaixo de 820px o
   board já está desligado, então o conflito não existe.

   O seletor é `> section[aria-labelledby]` porque é o que o HTML já tem: a
   seção de dobras de um capítulo é a irmã da abertura, e ela aponta pro
   `<h2>` da abertura. Não valia inventar uma classe pra nomear o que a
   estrutura já nomeia. */
@media (max-width: 819px) {
  .deck-modulo > section[aria-labelledby] {
    display: flex;
    align-items: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    /* A barra some, o gesto fica. A afordância é o espiar da próxima dobra,
       logo abaixo — barra de rolagem horizontal em celular não é vista. */
    scrollbar-width: none;
  }
  .deck-modulo > section[aria-labelledby]::-webkit-scrollbar {
    display: none;
  }
  .deck-modulo > section[aria-labelledby] > .deck-slide {
    /* 88% e não 100%: o pedaço da próxima dobra aparecendo na borda é a
       única coisa que diz "tem mais pro lado". Sem esse espiar, um trilho
       parece uma tela e ninguém arrasta — é o defeito clássico do carrossel,
       e ele se resolve com 12% de largura, não com uma seta. */
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: center;
  }
  /* O espiar só se vê se o vizinho tiver pixel pintado naquela altura, e
     metade das dobras tem o conteúdo em outro ponto vertical. O filete
     resolve: sempre há uma borda do próximo cartão aparecendo, mesmo quando
     o que vem depois dela é preto. */
  .deck-modulo > section[aria-labelledby] > .deck-slide + .deck-slide {
    border-left: 1px solid #1c1c1f;
  }
  /* A dobra do board é canvas e não texto: ela precisa da tela inteira. */
  .deck-modulo > section[aria-labelledby] > .deck-slide--board {
    flex-basis: 100%;
    max-width: 100%;
  }
}