/* ═══════════════════════════════════════════════════════════════════════
   GLYFESSE / edicao.css — o CSS do TEMPLATE DA EDIÇÃO (esqueleto).
   Reproduz a ESTRUTURA aprovada (mocks 09 anatomia · 12 capa · 13 switch)
   com os tokens reais de tokens.css. Zero token novo, zero terceiro.
   Mobile-first: base = 390px; @media (min-width) adiciona para telas maiores.

   ⚠️ GUARD PIXEL N→H (reference-pixelfont-n-maiusculo): a PixelOperatorMono
   rasteriza o N MAIÚSCULO como H abaixo de 15px (e uppercase-transform
   dispara o mesmo). Logo: todo rótulo pixel decorativo <15px aqui é minúsculo
   (lowercase, sem uppercase-transform); o nome de seção, que é title-case,
   fica no piso seguro de 15px.
   ═══════════════════════════════════════════════════════════════════════ */

*{box-sizing:border-box}
html{scroll-behavior:smooth; --mesa:#2b2620; background:var(--mesa)}
body{
  margin:0; padding:0;
  font-family:var(--font-corpo); color:var(--texto-1);
}

/* ═══════════════════════════════════════════════════════════════════════
   A FOLHA = a PÁGINA da revista, sobre a MESA escura (mocks 12/09).
   O html é a mesa (#2b2620); a folha de papel envelhecido é LIMITADA e
   centrada — não o viewport inteiro. Sem isto, num monitor largo as laterais
   viravam papel morto. Mobile-first: base = a folha ocupa a largura toda
   (sem mesa visível, como o líder aprovou); a mesa só aparece no desktop.
   ═══════════════════════════════════════════════════════════════════════ */
.pagina{position:relative; padding-bottom:clamp(48px,8vw,88px)}
/* .pagina.folha herda o papel de .folha (tokens.css) recalculado por --idade */

/* fibra do papel: SVG com dimensão explícita (senão some no Gecko) */
.pagina.folha::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size:180px 180px; mix-blend-mode:multiply; opacity:.12;
}
.pagina > *{position:relative; z-index:1}

/* o gutter de página: a margem impressa da revista, dentro da folha */
.masthead-inner,.edicao{padding-inline:clamp(20px,3.5vw,56px)}

/* a coluna de LEITURA ~74ch DENTRO da folha (corpo/índice; legibilidade) —
   o líder confirmou manter isto. Os divisores de seção e a capa spanam a
   folha; só o texto de leitura é limitado. */
.indice,.indice-nota,.scaffold,.conteudo{max-width:74ch}

/* ── skip-link: escondido até receber foco ──
   Clipado por padrão (width/height 1px + clip-path), NÃO só empurrado pra fora
   com top negativo: o top negativo dependia do contexto de posição, e quando a
   mesa passou a estabelecer um (body:position:relative para as folhas soltas) o
   link reaparecia. O clip é independente de stacking/posição — a mesa não pode
   revelá-lo. Continua focável no teclado (Tab) e aparece ao receber foco. */
.skip{
  position:absolute; left:8px; top:8px; z-index:50;
  width:1px; height:1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap;
  background:var(--tela-bg); color:var(--tela-acento);
  font-family:var(--font-display); font-size:13px;
  border-radius:var(--raio-tela); text-decoration:none;
}
.skip:focus{
  width:auto; height:auto; padding:8px 12px; overflow:visible;
  clip-path:none; outline:2px solid var(--tela-acento); outline-offset:2px;
}

/* ═══════════════════ MASTHEAD (header[banner]) ═══════════════════ */
.masthead{padding-top:clamp(16px,4vw,26px)}
.masthead-inner{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px;
  border-bottom:3px solid var(--tinta-preta); padding-bottom:9px;
}
.logo{
  font-family:var(--font-display); font-weight:700; line-height:1;
  font-size:clamp(30px,7vw,46px); color:var(--tinta-preta); text-decoration:none;
  text-shadow:-1.5px -1.5px 0 #00b6d4a0, 1.5px 1.5px 0 #c2129ea0;
}
.logo:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:3px}
/* SAÍDA 1/3 · TOPO (só modo edição): o wordmark é link visível + rótulo "↩ banca"
   discreto embaixo, pra ninguém deixar de perceber que dá pra voltar. */
.logo-col{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.logo-link:hover{text-decoration:underline; text-decoration-color:var(--tinta-ciano);
  text-decoration-thickness:2px; text-underline-offset:4px}
.volta-banca{
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
  color:var(--tinta-ciano); text-decoration:none;
}
.volta-banca .seta{margin-right:2px}
.volta-banca:hover{text-decoration:underline; text-underline-offset:2px}
.volta-banca:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
.col-meta{display:flex; flex-direction:column; align-items:flex-end; gap:7px}
/* o nome da edição em destaque acima do expediente (decisão do líder):
   fonte display grande, tinta cheia — assenta a identidade da edição no topo. */
.meta-titulo{
  font-family:var(--font-display); font-weight:400; text-shadow:0 1px 0 currentColor; /* N em negrito vira H em qualquer corpo: mesmo conserto do .secao-nome, batida VERTICAL */
  font-size:clamp(16px,2.4vw,20px); line-height:1.1; text-align:right;
  color:var(--tinta-preta); margin:0 0 -1px;
}
/* PISO DE 15px: o expediente carrega INFORMAÇÃO (volume, número, data, domínio)
   e a fonte pixel troca glifo abaixo de 15px — a 11px "2026" saía "Z0Z6" e os
   `s` de gusworld.site viravam bolha. SEM tracking de compensação: a linha cabe
   inteira a 320px, e apertar fonte pixel joga o glifo em posição fracionária,
   que é justamente o que borra a diagonal do N. */
.meta{
  font-family:var(--font-display); font-size:15px; text-align:right;
  line-height:1.4; color:var(--tinta-2); margin:0;
}
/* o número da edição segue em destaque: agora por PESO e tinta cheia, já que o
   tamanho virou o piso comum da linha */
.meta b{color:var(--tinta-preta); font-size:15px}
/* uptime das sessões de trabalho (3ª linha do expediente, só nas edições que
   capturaram o dado). O "discreto" vem da POSIÇÃO e do tamanho já herdados do
   .meta, NUNCA de baixar contraste: --tinta-2 está calibrada no fio da navalha
   do AA (4.51:1 no papel mais encardido), então qualquer opacity quebraria. */
.meta-uptime{color:var(--tinta-2)}

/* ── a LCD do switch de idioma (mock 13, tratamento A) ──
   Um buraco de tela acesa no papel: a menor tela do site. Herda .aceso do
   tokens.css (ganha o CRT de graça quando o leitor liga o scanline). */
.imprint{
  --lcd-cols:16;    /* colunas: cabe a linha mais longa do log + folga (mock 13) */
  display:block; text-decoration:none; cursor:pointer;
  background:var(--tela-bg); border-radius:var(--raio-tela);
  padding:7px 9px; width:calc(var(--lcd-cols) * 1ch + 18px);
  font-family:var(--font-display); font-size:11px; line-height:1.5;
  box-shadow:inset 0 0 0 1px var(--tela-borda-ui), 0 0 0 1px #00000026, var(--brilho-tela);
  transition:box-shadow var(--dur-medio) var(--ease);
}
/* min-height reserva a 2ª linha mesmo vazia = zero layout shift (mock 13) */
.imprint .l1,.imprint .l2{display:block; white-space:pre; overflow:hidden; min-height:1.5em}
.imprint .l1{color:var(--tela-texto-2)}                                   /* 7.59:1 AAA */
.imprint .l2{color:var(--tela-acento); display:flex; align-items:center; gap:6px} /* 10.83:1 AAA */
/* o "executar": triângulo em CSS puro, zero dependência de fonte */
.imprint .run{
  width:0; height:0; border-style:solid; border-width:3.5px 0 3.5px 5px;
  border-color:#0000 #0000 #0000 var(--tela-acento);
  transition:transform var(--dur-medio) var(--ease);
}
.imprint:hover{box-shadow:inset 0 0 0 1px var(--tela-acento), 0 0 0 1px #00000026, 0 0 18px #4dd9e8b0}
.imprint:hover .run{transform:translateX(2px)}
.imprint:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
/* texto só-leitor-de-tela: diz o que o comando faz sem substituir o rótulo visível */
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}

/* ═══════════════════ MAIN / a folha da edição ═══════════════════ */
main{display:block}
.edicao{padding-top:6px}

/* ── 01 · CAPA ── */
.capa{padding:clamp(18px,4vw,28px) 0 clamp(16px,3vw,22px); border-bottom:3px solid var(--tinta-preta)}
.manchete{
  font-family:var(--font-manchete); font-weight:700; text-transform:uppercase;
  font-size:clamp(46px,13vw,104px); line-height:.9; letter-spacing:var(--manchete-ls);
  color:var(--tinta-preta); margin:0 0 6px;
}
.dek{
  font-family:var(--font-corpo); font-style:italic; font-weight:400;
  font-size:clamp(16px,2.4vw,21px); line-height:1.4;
  color:var(--tinta-2); margin:0; max-width:52ch;
}
/* o frame: buraco de tela acesa no papel (raio de tela), sem CLS (dims no img) */
.capa-frame{
  margin:clamp(16px,3vw,22px) 0 0; position:relative;
  border-radius:var(--raio-tela); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--tela-borda-ui), var(--brilho-tela); background:var(--tela-bg);
}
.capa-frame img{display:block; width:100%; height:auto; image-rendering:pixelated}

/* ── 02 · ÍNDICE (#sumario) ── */
.sumario{scroll-margin-top:12px; padding:clamp(18px,3vw,24px) 0}
.indice{list-style:none; margin:0; padding:0}
.indice li{border-bottom:1px dotted #00000022}
.indice a{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:6px 0; color:var(--tinta-preta); text-decoration:none;
  font-family:var(--font-corpo); font-size:15px;
}
.indice .pg{font-family:var(--font-display); font-size:11px; color:var(--tinta-ciano); flex:0 0 26px}
.indice .pt{flex:1}
.indice a:hover .pt{text-decoration:underline; text-decoration-color:var(--tinta-ciano); text-underline-offset:2px}
.indice a:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
/* SAÍDA 2/3 · ÍNDICE: a 1ª entrada é uma SAÍDA (de volta pra banca), não uma
   seção: ciano cheio, seta no lugar do número, borda inferior mais firme. */
.indice-banca{border-bottom:1px solid #00b6d444}
.indice-banca a{color:var(--tinta-ciano)}
.indice-banca .pt{font-family:var(--font-display); font-size:13px; letter-spacing:.04em}

.links-fixos{margin-top:14px; padding:12px 14px; background:#0d152008; border-left:2px solid var(--tinta-ciano)}
.links-fixos a{
  display:block; padding:4px 0; font-family:var(--font-display); font-size:13px;
  color:var(--tinta-ciano); text-decoration:underline; text-underline-offset:2px;
}
.links-fixos a:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
.links-fixos .gus{
  font-family:var(--font-corpo); font-style:italic; font-size:13px;
  color:var(--tinta-2); margin:2px 0 0 22px;
}
.links-fixos .gus .conector{font-style:normal; color:var(--tinta-ciano); margin-right:4px}
/* rótulo pixel <15px → minúsculo (guard N→H) */
.indice-nota{font-family:var(--font-display); font-size:11px; color:var(--tinta-2); line-height:1.6; margin:12px 0 0}

/* ── 03…19 · divisor de seção + scaffold ── */
.secao-bloco{scroll-margin-top:12px}
.secao{
  display:flex; align-items:center; gap:10px;
  margin:clamp(24px,4vw,32px) 0 12px; padding-top:20px; border-top:1px solid #00000018;
}
.secao .n{
  font-family:var(--font-display); font-weight:700; font-size:11px;
  color:var(--papel); background:var(--tinta-preta);
  padding:3px 7px; letter-spacing:.06em; flex:0 0 auto;
}
/* nome de seção: title-case. O N do PixelOperatorMono degrada em H no peso
   BOLD (600/700 caem no mesmo arquivo -Bold) em qualquer tamanho — media: "A
   Nota" lia "A Hota" em toda edição publicada. Peso 400 devolve o glifo; a
   DUPLA-BATIDA (o mesmo glifo repetido 1px adiante, como impressora batendo
   duas vezes) devolve o corpo visual do bold sem deformar o desenho.
   ⚠️ A batida tem de ser VERTICAL. Medido nas 12 fases de subpixel, nos dois
   papéis: com 1px HORIZONTAL a cópia preenche a contra-forma ao lado da
   diagonal e o N volta a ler H — o mesmo defeito por outra via. */
.secao-nome{
  font-family:var(--font-display); font-weight:400; font-size:15px;
  letter-spacing:.02em; color:var(--tinta-preta); margin:0;
  text-shadow:0 1px 0 currentColor;
}
/* rótulo de grupo pixel <15px → minúsculo (guard N→H) */
.secao .grupo{
  margin-left:auto; font-family:var(--font-display); font-size:9px;
  letter-spacing:.1em; color:var(--tinta-2);
}

/* o placeholder de scaffold: NÃO é o vazio-com-graça final; é o marcador de dev */
.scaffold{
  border:1.5px dashed var(--tinta-ciano); background:#0d5e670a;
  padding:14px 15px; margin-top:4px;
}
.scaffold .tag{
  display:inline-block; margin-bottom:6px; font-family:var(--font-display);
  font-size:10px; letter-spacing:.1em; color:var(--tinta-ciano);
}
.scaffold p{font-family:var(--font-corpo); font-size:14px; line-height:1.5; color:var(--tinta-2); margin:0}

/* voltar ao índice: discreto, ao fim de cada seção (mock 09) */
.up-wrap{text-align:right; margin:12px 0 0}
.up{
  font-family:var(--font-display); font-size:11px; letter-spacing:.08em;
  color:var(--tinta-ciano); text-decoration:none;
  border:1px solid var(--tinta-ciano); padding:3px 9px; white-space:nowrap;
}
.up:hover{background:var(--tinta-ciano); color:var(--papel)}
.up:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
.up-fim{margin-top:clamp(20px,4vw,30px)}

/* SAÍDA 3/3 · FIM DA LEITURA: a saída natural pra banca, na VOZ do Gus (prompt +
   dito). Fora de .conteudo, então reproduz o tratamento da voz aqui, 1:1. */
.voltar-banca{
  margin:clamp(20px,4.2vw,32px) 0 0; padding-top:clamp(14px,2.6vw,18px);
  border-top:1px dotted #00000022;
}
.voltar-banca .prompt{
  font-family:var(--font-display); font-size:16px; color:var(--tinta-ciano);
  letter-spacing:.01em; white-space:nowrap; margin-right:8px;
}
.voltar-banca .dito{
  font-family:var(--font-corpo); font-weight:400; font-size:16px; line-height:1.55;
  color:var(--tinta-2); text-decoration:underline;
  text-decoration-color:var(--tinta-ciano); text-underline-offset:2px;
}
.voltar-banca .dito:hover{color:var(--tinta-preta)}
.voltar-banca .dito:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════
   O CONTEÚDO DA SEÇÃO (.conteudo) — substitui o .scaffold quando o partial
   src/content/edicao-<n>/<lang>/<id>.php existe. Reproduz o tratamento de VOZ
   dos mocks 14 (apartes) e 15 (Gus no Bus), portado 1:1 para os tokens reais:
   a fala (prompt = assinatura ciano · o dito lê baixinho) e o pensamento // (o
   comentário verde AA). Zero token/estética nova. Sem em-dash.
   ═══════════════════════════════════════════════════════════════════════ */

/* prosa de papel: a serifa de corpo, tinta cheia, coluna de leitura já ~74ch */
.conteudo{font-family:var(--font-corpo); color:var(--tinta-preta)}
.conteudo > p{font-size:clamp(15.5px,2.1vw,17px); line-height:1.6; margin:0 0 clamp(12px,2vw,16px)}
.conteudo h3{
  font-family:var(--font-manchete); font-weight:700; letter-spacing:var(--manchete-ls);
  font-size:clamp(20px,3vw,26px); line-height:1.06; color:var(--tinta-preta);
  margin:clamp(20px,3.5vw,30px) 0 10px;
}
.conteudo strong{font-weight:600; color:var(--tinta-preta)}

/* tokens de código na prosa (D-ACENTOS): monospace de sistema, ASCII, tinta
   levemente destacada. NÃO usa a pixel (--font-display) pra não disparar o
   guard N→H em corpo pequeno; um mono real lê limpo em qualquer tamanho. */
.conteudo code{
  font-family:ui-monospace,"Cascadia Code","Source Code Pro",Menlo,Consolas,monospace;
  font-size:.86em; background:#0d152010; color:var(--tinta-preta);
  padding:1px 5px; border-radius:3px; word-break:break-word;
}

/* ── a VOZ: a fala (prompt + dito) e o pensamento // ── */
.conteudo .fala{margin:0 0 clamp(10px,1.6vw,14px)}
/* o prompt é ASSINATURA: mesmo peso visual da fala, ciano, nunca menor (regra
   do líder nos mocks 11a/14). Fica em ASCII, monospace pixel. */
.conteudo .prompt{
  font-family:var(--font-display); font-size:16px; color:var(--tinta-ciano);
  letter-spacing:.01em; white-space:nowrap;
}
/* a fala LE BAIXINHO: suave (--tinta-2, AA no pior papel), não a preta cheia */
.conteudo .dito{
  font-family:var(--font-corpo); font-weight:400; font-size:16px; line-height:1.55;
  color:var(--tinta-2);
}
/* o // = comentário de código: verde AA (5.05:1 sobre o pior papel), de-emphasis
   por COR. ⚠️ 15px é o piso do guard N→H (a pixel rasteriza N como H abaixo
   disso); o // é a camada honesta, tem que ler limpo. NUNCA baixar de 15px. */
.conteudo .pensa{
  display:block; font-family:var(--font-display); font-size:15px; line-height:1.5;
  color:#35562f; letter-spacing:.005em; margin:5px 0 clamp(10px,1.6vw,14px);
}
.conteudo .pensa::before{content:"// "; opacity:.85}
/* a nota "prezado leitor" (bloco //): mesma cor, um respiro à esquerda */
.conteudo .pensa.nota-leitor{
  padding:8px 12px; border-left:2px solid #35562f66; margin-top:clamp(12px,2vw,16px);
}
.conteudo .pensa.assinatura{margin-top:2px; opacity:.9}

/* ── §5 A NOTA: o placar (gráficos/jogabilidade/texto) ── */
.conteudo .placar{list-style:none; margin:0 0 clamp(12px,2vw,16px); padding:0}
.conteudo .placar li{
  font-family:var(--font-corpo); font-size:16px; line-height:1.7;
  padding:3px 0; border-bottom:1px dotted #00000018;
}
/* o [ícone de imagem quebrada]: placeholder textual (o quadro-rachado CSS/SVG
   é de outra leva). Monospace apagado, entre colchetes, como um alt-text nu. */
.conteudo .img-quebrada{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.8em;
  color:var(--tinta-2); background:#0d152010; padding:1px 6px; border-radius:3px;
}

/* ── §10 CLASSIFICADOS: fragmentos curtos, um anúncio por bloco ── */
.conteudo .classificados{
  display:grid; gap:clamp(14px,2.4vw,20px); margin:0;
}
@media (min-width:560px){ .conteudo .classificados{grid-template-columns:1fr 1fr} }
.conteudo .classificado{
  padding:12px 14px; border:1px solid var(--borda); border-left:3px solid var(--tinta-ciano);
  background:#0d152006;
}
.conteudo .classificado.anon{border-left-color:var(--tinta-2)}
/* PISO DE 15px: o número do anúncio é DADO (o leitor cita "10.2" pra achar o
   classificado). A 10px o `2` saía `Z` — "10.Z". */
.conteudo .class-id{
  display:block; font-family:var(--font-display); font-size:15px; letter-spacing:.04em;
  color:var(--tinta-2); margin:0 0 6px;
}
.conteudo .classificado .dito,
.conteudo .classificado .fala{margin:0}
.conteudo .classificado .verbo{color:var(--tinta-preta); font-weight:700; letter-spacing:.02em}
/* PISO DE 15px: é a linha de CONTATO (e-mail + ID do anúncio). A 11px lia
   `5ubject`, `ZZ7de71d` e `Intereooadoo`. */
.conteudo .class-contato{
  font-family:var(--font-display); font-size:15px; line-height:1.5;
  color:var(--tinta-2); margin:8px 0 0;
}
.conteudo .email{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.95em; color:var(--tinta-ciano);
}

/* ── §7 CEMITÉRIO · a LÁPIDE (só CSS, sem imagem) ──
   Uma pedra com o topo em ARCO (a silhueta clássica de lápide) e a base reta,
   centralizada no eixo horizontal, na família papel/tinta da revista. A inscrição
   lê como epitáfio GRAVADO: o nome escavado (text-shadow de bisel), datas em pixel,
   epitáfio em serif itálico. Pedra em tom de granito quente, que assenta no papel.
   Sem animação -> nada a desligar em prefers-reduced-motion.
   ⚠️ o nome "GDScript" é pixel (--font-display) mas NÃO tem N maiúsculo, logo escapa
   do guard N->H; e vem grande (>=26px), bem acima do piso de 15px. */
.conteudo .lapide{margin:clamp(20px,3.4vw,30px) 0; padding:0; display:flex; justify-content:center}
.conteudo .lapide-pedra{
  width:min(100%,380px); box-sizing:border-box; text-align:center;
  padding:clamp(30px,6vw,46px) clamp(20px,4.5vw,34px) clamp(24px,4.5vw,34px);
  /* topo em arco (a lápide) + base assentada no chão (cantos de baixo quase retos) */
  border-radius:clamp(90px,30vw,150px) clamp(90px,30vw,150px) 5px 5px;
  background:linear-gradient(176deg,#d7cfc4 0%,#c3baac 60%,#b2a899 100%);   /* granito quente */
  border:1px solid #00000030;
  box-shadow:
    0 14px 26px -12px #1a161466,   /* a pedra projeta sombra suave no chão */
    inset 0 2px 0 #ffffff73,       /* luz no topo do bisel */
    inset 0 -4px 10px #00000021;   /* sombra na base do bisel */
  color:var(--tinta-preta);
}
/* ornamento gravado no alto do arco (lozango neutro, sem carga religiosa) */
.conteudo .lapide-pedra::before{
  content:"◆"; display:block; font-size:clamp(13px,2vw,16px); line-height:1;
  color:#6f675c; margin:0 0 clamp(12px,2.4vw,18px); text-shadow:0 1px 0 #ffffff5c;
}
/* o nome: escavado fundo na pedra (bisel claro embaixo, sombra fina em cima) */
.conteudo .lapide-nome{
  font-family:var(--font-display); font-size:clamp(26px,6vw,40px);
  letter-spacing:.02em; color:#39332d; margin:0 0 clamp(12px,2.4vw,16px);
  text-shadow:0 1px 0 #ffffff8a, 0 -1px 1px #0000003a;
}
/* datas n./m. (b./d.), empilhadas, tom mais claro */
.conteudo .lapide-datas{
  font-family:var(--font-display); font-size:clamp(13px,2vw,15px); line-height:1.5;
  color:#4f483f; margin:0 0 clamp(16px,3vw,22px);
  display:flex; flex-direction:column; gap:3px;
}
/* o epitáfio: serif itálico, o coração da inscrição */
.conteudo .lapide-epitafio{
  font-family:var(--font-corpo); font-style:italic;
  font-size:clamp(15px,2.6vw,18px); line-height:1.5; color:#2c2823;
  max-width:24ch; margin:0 auto clamp(14px,2.6vw,18px);
}
/* o fecho seco ("Descanse. Foi rápido.") */
.conteudo .lapide-descanse{
  font-family:var(--font-corpo); font-size:clamp(14px,2.2vw,16px);
  letter-spacing:.02em; color:#4f483f; margin:0;
}

/* ── §16 A ENTREVISTA: o Q&A ── */
.conteudo .materia-lede{
  font-family:var(--font-corpo); font-size:clamp(15px,2vw,17px); line-height:1.55;
  color:var(--tinta-2); margin:0 0 clamp(16px,3vw,22px);
  padding-left:14px; border-left:2px solid var(--tinta-ciano);
}
.conteudo .qa .fala{margin-top:clamp(16px,2.6vw,22px)}
.conteudo .qa .pergunta .dito{font-weight:600; color:var(--tinta-preta)}  /* a pergunta lê forte */
.conteudo .qa .resposta{margin-top:8px}
/* parágrafos extras da mesma resposta: alinham sob o dito (sem repetir o prompt) */
.conteudo .resposta-cont{
  font-family:var(--font-corpo); font-size:16px; line-height:1.55; color:var(--tinta-2);
  margin:10px 0 0;
}

/* ── §17 PROGRAMAÇÃO: listas, tabela de specs, blockquote do 1º prompt ── */
.conteudo ol.pipeline,
.conteudo ul.clausulas,
.conteudo ul.bibliografia{
  margin:0 0 clamp(14px,2.2vw,18px); padding-left:24px;
}
.conteudo ol.pipeline li,
.conteudo ul.clausulas li,
.conteudo ul.bibliografia li{
  font-size:clamp(15px,2vw,16.5px); line-height:1.55; margin:0 0 9px;
}
.conteudo ul.bibliografia{list-style:none; padding-left:0}
.conteudo ul.bibliografia li{padding-left:14px; border-left:2px solid #00000014}

/* PISO DE 15px na tabela inteira: é onde mora o nome da tecnologia. A 13px o
   corpo lia `.HET`/`Hative`; a 11px o kicker lia `COMPOHENTE`, `CU5TO`, `5PEC`,
   `OPTIOH`, `GAHHO HOS HOT PATH5`. Cabeçalho e corpo ficam no mesmo corpo de
   letra — a hierarquia passa a vir do PESO (th é bold), da caixa alta e do fio
   grosso embaixo. A goteira lateral encolhe no estreito pra pagar a largura que
   os px a mais custaram, sem deixar a tabela empurrar a página. */
.conteudo .specs{
  width:100%; border-collapse:collapse; margin:0 0 clamp(14px,2.2vw,18px);
  font-family:var(--font-display); font-size:15px;
}
.conteudo .specs th,.conteudo .specs td{
  text-align:left; padding:7px clamp(5px,1.2vw,12px); border-bottom:1px solid var(--borda);
}
/* ⚠️⚠️ PESO 400 OBRIGATÓRIO, e o motivo é um defeito de glifo MEDIDO em
   2026-08-04, mais amplo do que o guard que já estava registrado.
   O guard conhecido dizia "o N maiúsculo da PixelOperatorMono vira H ABAIXO de
   15px". Medido num espécime de 14 a 20px, peso a peso:
     peso 400  -> N correto de 15px para cima  (o guard conhecido)
     peso 700  -> N lê H em TODOS os corpos testados, 14px a 20px
     peso 600  -> idem
   Ou seja: no ARQUIVO BOLD da fonte a diagonal do N some, e NENHUM tamanho
   resolve. O <th> é negrito por regra do próprio navegador, então a tabela
   herdava o defeito sem ninguém pedir - e a #2, já publicada, imprime
   "GAHHO HOS HOT PATHS" no lugar de "GANHO NOS HOT PATHS".
   O peso não era o que dava hierarquia ao cabeçalho: quem dá é o filete de 2px
   embaixo e a tinta cheia contra o --tinta-2 das células. Tirar o negrito não
   custa nada e devolve a palavra. NÃO reintroduzir bold aqui. */
.conteudo .specs thead th{
  border-bottom:2px solid var(--tinta-preta); color:var(--tinta-preta);
  letter-spacing:0; text-transform:uppercase; font-size:15px; font-weight:400;
}
.conteudo .specs td:first-child{color:var(--tinta-2)}
.conteudo .specs td:last-child{color:var(--tinta-preta)}

.conteudo blockquote{
  margin:0 0 clamp(14px,2.2vw,18px); padding:12px 16px;
  border-left:3px solid var(--tinta-ciano); background:#0d5e6708;
  font-family:var(--font-corpo); font-style:italic; font-size:clamp(16px,2.2vw,18px);
  line-height:1.5; color:var(--tinta-preta);
}
/* o gancho do efeito CRT/nano (§17) e o gancho da tela do BUS (§18): a peça
   VISUAL é de outra leva. Marcador de slot reservado (dev), no espírito do
   .scaffold — nunca um bloco vazio invisível. */
.conteudo .crt-hook,
.conteudo .bus-hook{
  display:flex; align-items:center; justify-content:center;
  min-height:120px; margin:clamp(12px,2vw,16px) 0;
  border:1.5px dashed var(--tinta-ciano); border-radius:var(--raio-tela);
  background:#05090f;
}
.conteudo .crt-hook::before,
.conteudo .bus-hook::before{
  content:"▮ " attr(data-visual) " · próxima leva";
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em;
  color:var(--gw-ciano); opacity:.75;
}

/* ── telas REAIS embutidas (§17 primeiro prompt, §18 tela do BUS) ──
   screenshots originais, inteiros, sem retoque. Cabem na coluna (max-width:100%);
   a figura rola na horizontal como rede de seguranca (o body nunca rola). As
   dims reais no <img> travam o aspect-ratio -> zero CLS. */
.conteudo .tela-real{margin:0 0 clamp(14px,2.2vw,18px); overflow-x:auto}
.conteudo .tela-real img{
  display:block; max-width:100%; height:auto;
  border:1px solid var(--borda); border-radius:var(--raio-tela);
}
/* PISO DE 15px: a legenda é texto de leitura (explica a tela). A 11,5px o
   `BUS git` lia `BU5 git` e os `s` de "caixas/site/passando" viravam bolha. */
.conteudo .tela-real figcaption{
  font-family:var(--font-display); font-size:15px; line-height:1.5; color:var(--tinta-2);
  margin:8px 0 0; padding-left:9px; border-left:2px solid var(--tinta-ciano);
}

/* ── §19 EXPEDIENTE: o colofão ── */
.conteudo .colofao{margin:0 0 clamp(14px,2.2vw,18px)}
.conteudo .colo-titulo{
  font-family:var(--font-manchete); font-weight:700; letter-spacing:var(--manchete-ls);
  font-size:clamp(20px,3vw,26px); line-height:1.05; color:var(--tinta-preta); margin:0 0 2px;
}
/* PISO DE 15px: é a DATA do colofão. A 12px "de 2026" lia "de Z0Z6". */
.conteudo .colo-data{font-family:var(--font-display); font-size:15px; color:var(--tinta-2); margin:0 0 12px}
.conteudo .colo-creditos{font-family:var(--font-corpo); font-size:16px; line-height:1.7; color:var(--tinta-preta); margin:0 0 10px}
.conteudo .colo-creditos .prompt{font-size:15px}
.conteudo .colo-direitos{font-family:var(--font-corpo); font-style:italic; font-size:14px; color:var(--tinta-2); margin:0}
.conteudo .colo-sep{border:0; border-top:1px solid var(--borda); margin:clamp(16px,2.6vw,22px) 0}

/* ── 404 ── */
.erro-404{padding:clamp(24px,6vw,48px) 0}

/* ═══════════════════ RODAPÉ (footer[contentinfo]) ═══════════════════ */
.rodape{border-top:3px solid var(--tinta-preta); margin-top:clamp(24px,5vw,40px)}
.rodape-inner{
  padding:clamp(16px,3vw,22px) clamp(20px,3.5vw,56px) 0;
  display:flex; flex-direction:column; gap:12px;
}
.som{display:flex; gap:12px; flex-wrap:wrap}
.som-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--font-display); font-size:11px; letter-spacing:.04em;
  color:var(--tinta-preta); background:#0000;
  border:1px solid var(--borda-forte); padding:8px 12px; min-height:44px;
}
.som-btn .luz{width:9px; height:9px; border:1.5px solid var(--borda-forte); background:#173a24}  /* LED apagado: verde escuro */
.som-btn[aria-pressed="true"] .luz{background:#44e668; box-shadow:0 0 5px #44e668aa}  /* LED aceso: verde forte + glow */
.som-btn:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}
.licenca{font-family:var(--font-corpo); font-size:13px; line-height:1.55; color:var(--tinta-2); margin:0; max-width:60ch}
.contato{margin:0; font-family:var(--font-display); font-size:12px}
.contato a{color:var(--tinta-ciano); text-underline-offset:2px}
.contato a:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:2px}

/* build-tag EXPERT (project-i18n-switch / versionamento): carimbo mono discreto
   na base da EDIÇÃO. ASCII só-minúsculas (guard N→H não dispara). Cor apagada
   — a discrição vem da TINTA e da posição, não mais do corpo de letra.
   PISO DE 15px: o carimbo é DADO de versão; a 11px lia `build Z0Z6.05.15`, e
   um número de build que se lê errado não serve pra nada. */
.build-tag{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--tinta-2); opacity:.65; margin:4px 0 0;
}

/* a BANCADA do maker (peças espalhadas na mesa): só desktop; ver bloco no
   @media abaixo. No mobile a folha é full-width e a mesa não aparece. */
.bancada{display:none}

/* ═══════════════════ TELAS MAIORES: a MESA aparece ═══════════════════ */
@media (min-width:768px){
  .capa{padding-top:clamp(24px,4vw,34px)}
  /* a folha vira uma PÁGINA de ~1080px centrada sobre a mesa escura (mock 12).
     As laterais no desktop são a mesa emoldurando a revista, não papel morto. */
  .pagina{
    max-width:1080px; margin-inline:auto;
    margin-block:clamp(16px,2.6vw,34px);
    min-height:calc(100dvh - 2 * clamp(16px,2.6vw,34px));
    box-shadow:var(--sombra-folha);
  }

  /* ═════════════ A MESA = a BANCADA de quem faz o jogo ═════════════
     Build-in-public: a revista está sobre a mesa do dev. Só desktop — no
     mobile a folha é full-width e a mesa não aparece (ver base). Tratamento
     escolhido pelo líder: "bancada do maker" (combo).

     ★ "A mesa NÃO é tela" (a_vibe_papel_e_tela): dark-on-dark, APAGADA, sem
     neon forte. A folha segue o ponto de maior contraste; a mesa nunca a
     ofusca. Tudo em CSS/SVG — zero arte, zero raster novo. */

  /* 1) textura técnica sob a revista: traços de placa MUITO sutis + vias
        raras. O único aceno de tela é um ciano PÁLIDO e pontual (as vias);
        o resto é cobre apagado sobre o marrom da mesa. */
  html{
    background:
      radial-gradient(circle at 26px 30px,   #4dd9e80f 0 1.3px, #0000 2.2px) 0 0/260px 220px,
      radial-gradient(circle at 150px 128px, #6b5f4a24 0 1.8px, #0000 2.6px) 0 0/260px 220px,
      repeating-linear-gradient(45deg, #0000 0 78px, #332d26 78px 79px, #0000 79px 190px),
      repeating-linear-gradient(0deg,  #0000 0 60px, #322d26 60px 61px, #0000 61px 128px),
      repeating-linear-gradient(90deg, #0000 0 50px, #322d26 50px 51px, #0000 51px 104px),
      var(--mesa);
    /* as folhas soltas giradas balançam os cantos pra fora: clipa o X para
       nunca gerar scroll horizontal (clip não cria scroll container nem
       mexe no scroll-behavior:smooth, ao contrário de overflow:hidden). */
    overflow-x:clip;
  }

  /* 2) as FOLHAS SOLTAS: rascunhos/outras edições espiando por trás da
        revista. 2 papéis envelhecidos em tons distintos (uma pilha), de leve
        girados, atrás da folha (z-index:-1), com sombra. A revista pousa
        fisicamente sobre a bancada. body:relative é o contexto de posição das
        folhas (o skip-link já é clipado, imune a isto). */
  /* overflow-x:clip AQUI (no dono dos pseudos) e não só no html: as folhas
     soltas são absolutas relativas ao body e têm a ALTURA da página (top:22
     /bottom:22); giradas 1.3-1.5°, os cantos superior/inferior são lançados
     ~114px pra fora na horizontal e vazam pro documentElement.scrollWidth. O
     clip do html sozinho não clampa esse scrollWidth (a propagação de viewport
     ainda o reporta). clip não cria scroll container nem mexe no smooth. */
  body{position:relative; overflow-x:clip}
  body::before,
  body::after{
    content:""; position:absolute; z-index:-1; top:22px; bottom:22px;
    width:min(1080px,94vw); left:50%; pointer-events:none;
    box-shadow:0 10px 34px #0000004d;
  }
  body::before{
    background:#e6dcc6;
    transform:translateX(-50%) rotate(-1.5deg) translateX(-28px);
  }
  body::after{
    background:#dccfb2;
    transform:translateX(-50%) rotate(1.3deg) translateX(26px);
  }

  /* 3) as PEÇAS da bancada: placa de circuito, protoboard, régua, lápis, chips
        espalhados nas guteiras laterais fora da folha de 1080px. Densidade B
        (todas as peças), aprovada pelo líder. position:FIXED (a mesa fica
        parada, a revista rola por cima; as peças NÃO somem no scroll (os top:
        passam a ser relativos ao viewport). Apagada, dark-on-dark, atrás da
        folha (z-index:-1), sem pointer-events. Tudo CSS/SVG, zero raster. */
  /* overflow:hidden contém as peças fixed que passam da borda (p-bp2 em
     right:-40px, p-bp1 em left:-34px) dentro do viewport: como são
     position:fixed, escapam do clip do body; o clip vem da própria bancada
     (inset:0 = viewport). Higiene visual — não contribuíam pro scrollWidth
     (a origem do scroll horizontal são as folhas soltas do body). */
  .bancada{display:block; position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
  .bancada .pc{position:absolute; filter:saturate(.7) brightness(.92)}
  .bancada .bp{width:300px; height:216px; background:#1b2836;
    background-image:
      repeating-linear-gradient(0deg,#35566f26 0 1px,#0000 1px 15px),
      repeating-linear-gradient(90deg,#35566f26 0 1px,#0000 1px 15px),
      repeating-linear-gradient(0deg,#4a708c33 0 1px,#0000 1px 75px),
      repeating-linear-gradient(90deg,#4a708c33 0 1px,#0000 1px 75px);
    box-shadow:0 10px 26px #00000059, inset 0 0 0 1px #2a4258}
  .bancada .bp::before{content:"";position:absolute;left:24px;top:38px;width:120px;height:120px;border:1px solid #52789580;border-radius:50%}
  .bancada .bp::after{content:"";position:absolute;right:0;top:0;width:46px;height:46px;background:linear-gradient(225deg,#28405626 0 50%,#0000 50%);border-left:1px solid #3a5a76;border-bottom:1px solid #3a5a76;clip-path:polygon(100% 0,0 0,100% 100%);box-shadow:-3px 3px 6px #00000040}
  .bancada .bp .cota{position:absolute;left:20px;bottom:26px;width:180px;height:1px;background:#5a819d99}
  .bancada .bp .cota::before,.bancada .bp .cota::after{content:"";position:absolute;top:-3px;width:1px;height:7px;background:#5a819d99}
  .bancada .bp .cota::before{left:0} .bancada .bp .cota::after{right:0}
  .bancada .pcb{width:150px; height:112px; background:#241f17;
    background-image:
      repeating-linear-gradient(0deg,#4a3f2c 0 1.5px,#0000 1.5px 19px),
      repeating-linear-gradient(90deg,#4a3f2c 0 1.5px,#0000 1.5px 23px),
      repeating-linear-gradient(45deg,#4a3f2c00 0 20px,#4a3f2c 20px 21.5px,#4a3f2c00 21.5px 44px),
      radial-gradient(circle at 34px 30px,#5a4d34 0 2.6px,#0000 3.4px),
      radial-gradient(circle at 118px 84px,#5a4d34 0 2.6px,#0000 3.4px),
      radial-gradient(circle at 96px 26px,#4dd9e838 0 2.2px,#0000 3px);
    box-shadow:0 8px 20px #0000005e, inset 0 0 0 1px #33291b}
  .bancada .pcb::before{content:"";position:absolute;left:44px;top:40px;width:46px;height:30px;background:#15110c;box-shadow:inset 0 0 0 1px #3a2f1f}
  .bancada .pcb::after{content:"";position:absolute;left:40px;top:44px;width:54px;height:22px;background:repeating-linear-gradient(0deg,#6b5a3a 0 2px,#0000 2px 7px) left/4px 100% no-repeat,repeating-linear-gradient(0deg,#6b5a3a 0 2px,#0000 2px 7px) right/4px 100% no-repeat}
  .bancada .regua{width:270px; height:26px; border-radius:2px;background:linear-gradient(#4a4436,#37322a);box-shadow:0 8px 18px #00000055, inset 0 1px 0 #6a6250}
  .bancada .regua::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,#0000 0 14px,#b7a877 14px 15px,#0000 15px) top/100% 8px no-repeat,repeating-linear-gradient(90deg,#0000 0 74px,#cabf95 74px 75px,#0000 75px) top/100% 14px no-repeat;opacity:.8}
  .bancada .lapis{width:172px; height:13px}
  .bancada .lapis .corpo{position:absolute;left:16px;top:0;right:14px;height:13px;background:linear-gradient(#7d6c40,#5f5230);box-shadow:0 6px 14px #0000004d, inset 0 1px 0 #9c8a5a}
  .bancada .lapis .ferrule{position:absolute;right:0;top:0;width:16px;height:13px;background:linear-gradient(#8f8a7e,#645f54)}
  .bancada .lapis .ferrule::after{content:"";position:absolute;right:-8px;top:1px;width:9px;height:11px;background:#b78a86;border-radius:0 3px 3px 0}
  .bancada .lapis .ponta{position:absolute;left:0;top:0;width:0;height:0;border-style:solid;border-width:6.5px 16px 6.5px 0;border-color:#0000 #c8b184 #0000 #0000}
  .bancada .lapis .ponta::after{content:"";position:absolute;left:0;top:-2.5px;width:0;height:0;border-style:solid;border-width:2.5px 6px 2.5px 0;border-color:#0000 #2a2620 #0000 #0000}
  .bancada .chip{width:52px; height:26px}
  .bancada .chip .corpo{position:absolute;left:8px;top:0;width:36px;height:26px;background:#17130e;border-radius:2px;box-shadow:inset 0 0 0 1px #3a2f1f}
  .bancada .chip::before,.bancada .chip::after{content:"";position:absolute;width:52px;height:5px;background:repeating-linear-gradient(90deg,#0000 0 4px,#6b5a3a 4px 6px,#0000 6px 9px)}
  .bancada .chip::before{top:-1px} .bancada .chip::after{bottom:-1px}
  .p-bp1{left:-34px;top:150px;transform:rotate(-5deg)}
  .p-pcb1{right:24px;top:250px;transform:rotate(6deg)}
  .p-regua1{left:36px;top:470px;transform:rotate(-58deg)}
  .p-bp2{right:-40px;top:610px;transform:rotate(4deg)}
  .p-pcb2{left:60px;top:96px;transform:rotate(-9deg)}
  .p-lapis{right:70px;top:520px;transform:rotate(24deg)}
  .p-chip1{left:150px;top:300px;transform:rotate(-14deg)}
  .p-chip2{right:150px;top:130px;transform:rotate(11deg)}
}

/* o masthead empilha em telas estreitas: a LCD desce para baixo do expediente,
   mas nunca muda de altura (mantém as 2 linhas) — zero CLS no topo. */
@media (max-width:560px){
  .masthead-inner{flex-direction:column; align-items:flex-start; gap:10px}
  .col-meta{align-items:flex-start; width:100%}
  .meta,.meta-titulo{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════════
   A BANCA (home) — mock 10 · IA-WIREFRAME §3.1.
   Herda a MESMA .pagina.folha + .bancada da edição (acima). Aqui só o que a
   home acrescenta: a fileira de capas (o coração) e os ganchos W6 em scaffold.
   Mobile-first: base = 1 coluna; o grid de 3 colunas entra no desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* o wordmark é o <h1> da home: zera a margem/tamanho default do h1, o visual
   fica todo no .logo (herdado do masthead) */
.logo-h1{margin:0; font-size:inherit; font-weight:inherit; line-height:0}

/* a goteira de página da home: o mesmo recuo impresso do masthead/rodapé e do
   corpo da edição (.edicao), para o conteúdo do <main> alinhar com o topo */
.banca-corpo{padding-top:6px; padding-inline:clamp(20px,3.5vw,56px)}

/* a lede da home (W5 placeholder): a voz do Gus logo abaixo do masthead */
.banca-lede{
  font-family:var(--font-corpo); font-style:italic;
  font-size:clamp(15px,2.2vw,19px); line-height:1.45;
  color:var(--tinta-2); margin:clamp(14px,2.4vw,20px) 0 0; max-width:56ch;
}

/* ── os ganchos W6: cada interativo é uma seção reservada (scaffold) ── */
.gancho-w6{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.gancho-w6 .scaffold{margin-top:0}

/* ═══ O QUADRADINHO (hero da banca · item W6) ═══════════════════════════════
   A capa é o brinquedo. Estado-base (sem JS): o quadrado ciano parado + a
   legenda escrita — nunca um bloco vazio. .ligado (JS): mostra a instrução e o
   d-pad, e o jogo roda. .reduz (prefers-reduced-motion): o Gus parado + a
   legenda. A cor da tela é LUZ (a sala é a --gw-navy do jogo; o quadrado é o
   --gw-ciano sólido, com brilho). Bate com o mock 05. */
.quad-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.quad-moldura{
  border-radius:var(--raio-tela); padding:5px; background:#05090f;
  box-shadow:inset 0 0 0 1px #2c3d52, 0 2px 0 #00000018;
}
.quad-sala{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:var(--gw-navy); touch-action:none; outline:none;
}
/* moldura interna clara (a "tela" impressa) + scanline sutil */
.quad-sala::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  border:12px solid #b9c6d6;
  background:repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}
.quad-sala:focus-visible{box-shadow:inset 0 0 0 3px var(--gw-ciano)}
.quad-parede{position:absolute; background:#b9c6d6; z-index:1}

/* o herói: quadrado CIANO SÓLIDO (não contorno), com brilho. Vira o Gus. */
.quad-heroi{
  position:absolute; left:0; top:0; width:26px; height:26px;
  transform:translate(var(--x,60px), var(--y,150px));
  transition:transform .06s linear;
  background:var(--gw-ciano); box-shadow:0 0 10px #4dd9e8cc;
  image-rendering:pixelated; z-index:2;
}
.quad-heroi.virou{
  width:120px; height:208px; background:#0000; box-shadow:none;
  background-image:var(--sprite, url("/assets/sprites/gus-south.png"));
  background-size:contain; background-repeat:no-repeat; background-position:bottom center;
  filter:drop-shadow(0 0 5px #4dd9e855);
}

/* o d-pad: só quando há JS (.ligado) e em telas de toque/estreitas. Botões
   reais ≥44px (alvo de dedo). Escondido sem JS (nada de botão morto). */
.quad-dpad{
  position:absolute; left:50%; bottom:14px; translate:-50% 0; z-index:5;
  display:none; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:4px;
}
.quad-dpad .dp{
  appearance:none; -webkit-appearance:none; padding:0; cursor:pointer;
  background:#0d1520cc; border:1.5px solid var(--gw-ciano); color:var(--gw-ciano);
  display:grid; place-items:center; font-size:18px; line-height:1;
  border-radius:6px; touch-action:manipulation;
}
.quad-dpad .dp:active{background:var(--gw-ciano); color:var(--gw-navy)}
.quad-dpad .dp:focus-visible{outline:2px solid var(--gw-ciano-alto); outline-offset:2px}
.quad-dpad .u{grid-area:1/2} .quad-dpad .l{grid-area:2/1}
.quad-dpad .r{grid-area:2/3} .quad-dpad .d{grid-area:3/2}
@media (max-width:640px){ .quad-hero.ligado .quad-dpad{display:grid} }

/* a instrução (só com JS) × a legenda (estado-base / reduced-motion) */
.quad-instr, .quad-legenda{
  font-family:var(--font-corpo); font-size:13px; line-height:1.5;
  color:var(--tinta-2); margin:9px 0 0; text-align:center;
}
.quad-instr b{color:var(--tinta-ciano); font-weight:600}
.quad-instr{display:none}
.quad-hero.ligado .quad-instr{display:block}
.quad-hero.ligado .quad-legenda{display:none}
.quad-hero.reduz .quad-instr{display:none}

@media (prefers-reduced-motion:reduce){
  .quad-heroi{transition:none}
}

/* ═══ O PRESS START (pôster da banca · item W6 · D-PRESS-START) ═════════════
   Um pôster-tela de fliperama abaixo do quadradinho. Estado-base (sem JS /
   reduced-motion): a MENSAGEM honesta ESTÁTICA (a seta é um <a> que aponta pro
   quadradinho) — nunca um bloco vazio. Com JS+motion o press-start.js escreve
   data-st no pôster: "attract" (o PRESS START piscando), "boot" (o BIOS imprime
   ~1.3s) e "msg" (aterrissa na mesma fala honesta). É TELA: a luz (ciano/glow)
   é permitida DENTRO da moldura; o papel em volta segue sem glow. Mock 08. */
.ps-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.ps-moldura{
  border-radius:var(--raio-tela); padding:5px; background:#05090f;
  box-shadow:inset 0 0 0 1px #2c3d52, 0 2px 0 #00000018;
}
.ps-poster{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  display:grid; place-content:center; text-align:center; user-select:none;
  background:radial-gradient(120% 130% at 50% 60%, #12324a 0%, var(--gw-navy) 58%);
}
/* brilho de tubo + vinheta + scanline sutil embutido (igual ao quadradinho:
   a tela do jogo tem scanline; não depende do toggle CRT global) */
.ps-poster::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  background:
    radial-gradient(120% 130% at 50% 62%, #4dd9e81f 0%, #0000 46%, #00000073 100%),
    repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}
.ps-poster:focus-visible{outline:3px solid var(--gw-ciano); outline-offset:3px}

/* as três camadas ocupam a mesma área; a visibilidade é por data-st */
.ps-attract,.ps-boot{
  position:absolute; inset:0; z-index:3; display:none;
  place-content:center; text-align:center; padding:0 6%;
}
.ps-msg{position:relative; z-index:3; padding:0 8%}   /* ESTADO-BASE: visível */

.ps-msg-l1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,3.6vw,34px); letter-spacing:.14em;
  color:var(--gw-ciano-alto); text-shadow:0 0 14px #6ff0ffcc; margin:0;
}
.ps-fala{
  font-family:var(--font-display); font-size:clamp(11px,1.7vw,14px);
  line-height:1.7; color:var(--tela-texto-1); margin:12px auto 0; max-width:38ch;
}
.ps-fala .hh{color:var(--gw-ciano); margin-right:5px}
.ps-pensa{
  font-family:var(--font-display); font-size:clamp(10px,1.4vw,12px);
  color:var(--tela-texto-3); margin:5px 0 0; opacity:.85;
}
.ps-seta{
  display:inline-block; margin-top:14px; font-family:var(--font-display);
  font-size:clamp(11px,1.6vw,13px); letter-spacing:.06em;
  color:var(--gw-ciano-alto); text-shadow:0 0 10px #6ff0ffcc; text-decoration:none;
}
.ps-seta:hover,.ps-seta:focus-visible{text-decoration:underline; outline:none}
.ps-seta:focus-visible{outline:2px solid var(--gw-ciano); outline-offset:3px}

/* attract: o "PRESS START" piscando + a linha de fichas */
.ps-press{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(20px,3.6vw,34px); letter-spacing:.18em; margin:0;
  color:var(--gw-ciano-alto);
  text-shadow:0 0 14px #6ff0ffcc, 2px 0 0 #ff004840, -2px 0 0 #00eeff40;
  animation:ps-pisca 1.15s steps(1) infinite;
}
@keyframes ps-pisca{50%{opacity:.18}}
/* PISO DE 15px: a linha de fichas é texto que o leitor lê. A 12px lia `FICHA5`
   / `TOKEHS`, e a 9px do mobile a linha inteira sumia — e as scanlines do CRT
   comem justo a linha de antialiasing que separava `S` de `5`. O espacejamento
   encolhe pra a linha caber na tela estreita do gabinete. */
.ps-insert{
  font-family:var(--font-display); font-size:15px;
  letter-spacing:.08em; color:var(--gw-ciano); margin:8px 0 0; opacity:.82;
}

/* boot: o BIOS imprime linha a linha, alinhado à esquerda como um terminal */
.ps-boot{background:#05090f}
.ps-boot-txt{
  font-family:var(--font-display); font-size:clamp(11px,1.7vw,14px);
  letter-spacing:.06em; color:var(--gw-ciano); line-height:1.95;
  text-shadow:0 0 8px #4dd9e888; text-align:left; margin:0 auto; max-width:32ch;
}
.ps-bl{display:none}
.ps-bl.vis{display:block}
.ps-cur{
  display:inline-block; width:.55em; height:1.05em; vertical-align:-.16em;
  background:var(--gw-ciano-alto); animation:ps-pisca 1.1s steps(1) infinite;
}

/* ── data-st (só com JS): troca qual camada aparece ── */
.ps-poster[data-st="attract"] .ps-msg{display:none}
.ps-poster[data-st="attract"] .ps-attract{display:grid}
.ps-poster[data-st="boot"] .ps-msg{display:none}
.ps-poster[data-st="boot"] .ps-boot{display:grid}
.ps-poster[data-st="msg"] .ps-attract,
.ps-poster[data-st="msg"] .ps-boot{display:none}
.ps-poster[data-st="msg"] .ps-msg{display:block}
/* boot e msg apagam a atmosfera do attract (a tela "liga" preta) */
.ps-poster[data-st="boot"],
.ps-poster[data-st="msg"]{background:#05090f}
.ps-poster[data-st="msg"] .ps-seta{animation:ps-sobe 1.3s ease-in-out infinite}
@keyframes ps-sobe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* legenda de papel abaixo do pôster (fora da tela: sem glow) */
.ps-cap{
  font-family:var(--font-corpo); font-size:13px; line-height:1.5;
  color:var(--tinta-2); text-align:center; margin:9px 0 0;
}

@media (prefers-reduced-motion:reduce){
  .ps-press,.ps-cur,.ps-seta{animation:none}
}

/* ══ A GLYFA · A FORJA DE NOMES (item W6 · GLYFA) ══
   Uma forja de nomes em Sylvarin: 2 seletores -> o nome nasce brilhando DENTRO
   da tela (o buraco de luz), com o significado. O papel em volta segue sem glow.
   O nome forjado e GRANDE (>=15px) -> o guard N->H do pixel nao dispara. */
.glyfa-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.glyfa-cab{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
}
.glyfa-cab .conta{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--tinta-2);
}
.glyfa-lide{
  font-family:var(--font-corpo); font-size:clamp(14px,1.7vw,16px);
  line-height:1.55; color:var(--tinta-2); margin:8px 0 0; max-width:60ch;
}

.glyfa-moldura{
  margin-top:clamp(12px,2vw,16px);
  border-radius:var(--raio-tela); padding:5px; background:#05090f;
  box-shadow:inset 0 0 0 1px #2c3d52, 0 2px 0 #00000018;
}
.glyfa-tela{
  position:relative; border-radius:calc(var(--raio-tela) - 3px); overflow:hidden;
  padding:clamp(18px,3.5vw,28px) clamp(14px,4vw,26px);
  background:radial-gradient(120% 130% at 50% 40%, #12324a 0%, var(--gw-navy) 62%);
}
/* scanline + brilho de tubo embutido (a tela do jogo, independente do CRT global) */
.glyfa-tela::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 130% at 50% 40%, #4dd9e816 0%, #0000 52%, #00000066 100%),
    repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}

/* ── ESTADO-BASE (sem JS): o exemplo estatico canon ── */
.glyfa-base{
  position:relative; z-index:3; margin:0; text-align:center;
  font-family:var(--font-display); font-size:clamp(12px,1.8vw,15px);
  line-height:1.9; color:var(--tela-texto-1); letter-spacing:.02em;
}
.glyfa-ex-pre{color:var(--tela-texto-3); margin-right:6px}
.glyfa-ex-raiz{color:var(--tela-acento)}
.glyfa-ex-g{color:var(--tela-texto-2)}
.glyfa-ex-igual,.glyfa-mais{color:var(--tela-texto-3); margin:0 4px}
.glyfa-ex-nome{
  font-weight:700; font-size:1.5em; color:var(--gw-ciano-alto);
  text-shadow:0 0 12px #6ff0ffaa; letter-spacing:.04em; display:inline-block;
  margin:0 4px;
}
.glyfa-ex-sig{display:block; color:var(--tela-texto-2); font-size:.92em; margin-top:4px}

/* ── A FORJA interativa (revelada por JS) ── */
.glyfa-forja[hidden]{display:none}
.glyfa-forja{position:relative; z-index:3; display:grid; gap:clamp(14px,2.5vw,20px)}
.glyfa-sels{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:center;
  gap:10px 12px;
}
.glyfa-campo{display:flex; flex-direction:column; gap:4px}
.glyfa-lbl{
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
  color:var(--tela-texto-3);
}
.glyfa-op{
  align-self:center; font-family:var(--font-display); font-size:18px;
  color:var(--gw-ciano); padding-bottom:6px;
}
.glyfa-sel{
  font-family:var(--font-display); font-size:14px; color:var(--tela-texto-1);
  background:var(--tela-alto); border:1px solid var(--tela-borda-ui);
  border-radius:5px; padding:7px 10px; min-width:16ch; cursor:pointer;
  appearance:none; -webkit-appearance:none;
  background-image:linear-gradient(45deg,#0000 50%,var(--gw-ciano) 50%),linear-gradient(135deg,var(--gw-ciano) 50%,#0000 50%);
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;
  background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px;
}
.glyfa-sel:focus-visible{outline:2px solid var(--gw-ciano); outline-offset:2px}
.glyfa-btn{
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--gw-navy); background:var(--gw-ciano); border:0; border-radius:5px;
  padding:9px 18px; cursor:pointer; align-self:flex-end;
  box-shadow:0 0 12px #4dd9e84d;
}
.glyfa-btn:hover{background:var(--gw-ciano-alto)}
.glyfa-btn:active{transform:translateY(1px)}
.glyfa-btn:focus-visible{outline:2px solid var(--gw-ciano-alto); outline-offset:3px}

.glyfa-out{
  display:block; text-align:center;
  border-top:1px solid var(--tela-borda); padding-top:clamp(12px,2vw,16px);
}
.glyfa-nome{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:clamp(28px,6vw,52px); letter-spacing:.05em;
  color:var(--gw-ciano-alto); text-shadow:0 0 16px #6ff0ffcc;
}
.glyfa-sig{
  display:block; font-family:var(--font-display); font-size:clamp(12px,1.8vw,15px);
  color:var(--tela-texto-1); margin-top:8px;
}
/* o reveal da forja: um "carimbo" curto quando o nome nasce (re-disparado por .aceso) */
.glyfa-out.aceso .glyfa-nome{animation:glyfa-forjar var(--dur-medio,260ms) ease-out}
@keyframes glyfa-forjar{
  0%{transform:scale(.86); opacity:.2; text-shadow:0 0 2px #6ff0ff44}
  60%{transform:scale(1.04); text-shadow:0 0 26px #6ff0ffee}
  100%{transform:scale(1); opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .glyfa-out.aceso .glyfa-nome{animation:none}
}

/* legenda de papel abaixo da forja (fora da tela: sem glow) */
.glyfa-cap{
  font-family:var(--font-corpo); font-size:13px; line-height:1.5;
  color:var(--tinta-2); text-align:center; margin:9px 0 0;
}

/* ── O ÁLBUM · cromos de glifo (item W6 · ALBUM) ──
   Herda a MESMA tela do jogo da Glyfa (moldura navy + scanline): os cromos são
   LUZ, acendem em ciano DENTRO da moldura; o papel em volta segue sem glow. Os
   glifos/glosas são minúsculos → guard N→H do pixel não dispara. */
.album-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.album-cab{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.album-cab .conta{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--tinta-2);
}
.album-lide{
  font-family:var(--font-corpo); font-size:clamp(14px,1.7vw,16px);
  line-height:1.55; color:var(--tinta-2); margin:8px 0 0; max-width:60ch;
}

.album-moldura{
  margin-top:clamp(12px,2vw,16px);
  border-radius:var(--raio-tela); padding:5px; background:#05090f;
  box-shadow:inset 0 0 0 1px #2c3d52, 0 2px 0 #00000018;
}
.album-tela{
  position:relative; border-radius:calc(var(--raio-tela) - 3px); overflow:hidden;
  padding:clamp(16px,3vw,24px) clamp(12px,3vw,22px);
  background:radial-gradient(120% 130% at 50% 30%, #12324a 0%, var(--gw-navy) 62%);
}
.album-tela::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(120% 130% at 50% 30%, #4dd9e816 0%, #0000 52%, #00000066 100%),
    repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}

.album-contador{
  position:relative; z-index:3; margin:0 0 clamp(12px,2vw,16px); text-align:center;
  font-family:var(--font-display); font-size:clamp(12px,1.7vw,14px);
  letter-spacing:.03em; color:var(--tela-texto-2);
}

/* a grade de slots: mobile-first 3 colunas, sobe a 5 e 7 por CONTEÚDO */
.album-grade{
  position:relative; z-index:3; list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(8px,1.6vw,12px); grid-template-columns:repeat(3,1fr);
}
@media (min-width:32rem){.album-grade{grid-template-columns:repeat(5,1fr)}}
@media (min-width:52rem){.album-grade{grid-template-columns:repeat(7,1fr)}}

/* o cromo: o VERSO (silhueta com ?) por padrão; acende quando colado */
.album-slot{
  position:relative; aspect-ratio:3/4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; padding:6px 4px;
  border:1px solid var(--tela-borda); border-radius:6px; background:var(--tela-alto);
  overflow:hidden;
}
.album-q{
  font-family:var(--font-display); font-size:clamp(18px,4vw,26px);
  color:var(--tela-texto-3); opacity:.5;
}
.album-glifo{
  display:none; font-family:var(--font-display); font-weight:700;
  font-size:clamp(15px,3.4vw,22px); letter-spacing:.02em; text-align:center;
  color:var(--gw-ciano-alto); text-shadow:0 0 10px #6ff0ff88; word-break:break-word;
}
.album-glosa{
  display:none; font-family:var(--font-display); font-size:clamp(9px,1.8vw,11px);
  color:var(--tela-texto-2); text-align:center;
}
/* colado: acende — glifo+glosa aparecem, o ? some, a borda vira ciano */
.album-slot.colada{
  border-color:var(--tela-borda-ui);
  background:linear-gradient(160deg,#123048,#0b1a28);
  box-shadow:inset 0 0 12px #4dd9e820;
}
.album-slot.colada .album-q{display:none}
.album-slot.colada .album-glifo,.album-slot.colada .album-glosa{display:block}

/* o carimbo de colar (reveal da figurinha nova): reduced-motion desliga */
.album-slot.colando{animation:album-colar var(--dur-medio,180ms) ease-out}
@keyframes album-colar{
  0%{transform:scale(.8) rotate(-4deg); opacity:.2}
  60%{transform:scale(1.06) rotate(1deg)}
  100%{transform:scale(1) rotate(0); opacity:1}
}
@media (prefers-reduced-motion:reduce){.album-slot.colando{animation:none}}

.album-acao{
  position:relative; z-index:3; display:flex; justify-content:center;
  margin-top:clamp(14px,2.5vw,18px);
}
.album-btn{
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--gw-navy); background:var(--gw-ciano); border:0; border-radius:5px;
  padding:9px 18px; cursor:pointer; box-shadow:0 0 12px #4dd9e84d;
}
.album-btn[hidden]{display:none}
.album-btn:hover{background:var(--gw-ciano-alto)}
.album-btn:active{transform:translateY(1px)}
.album-btn:focus-visible{outline:2px solid var(--gw-ciano-alto); outline-offset:3px}
.album-btn:disabled{
  background:var(--tela-alto); color:var(--tela-texto-2);
  box-shadow:none; cursor:default;
}

.album-nota{
  position:relative; z-index:3; margin:clamp(10px,2vw,14px) 0 0; text-align:center;
  font-family:var(--font-display); font-size:11px; letter-spacing:.02em;
  color:var(--tela-texto-3);
}
.album-nota[hidden]{display:none}

.album-cap{
  font-family:var(--font-corpo); font-size:13px; line-height:1.5;
  color:var(--tinta-2); text-align:center; margin:9px 0 0;
}

/* ── O CUPOM · a enquete recortável (item W6 · CUPOM) ──
   Ao contrário da Glyfa/álbum (TELA navy acesa), o cupom é PAPEL: fica na cor da
   tinta, com pontilhado de recorte e tesoura. É o único backend vivo do site.
   Progressive enhancement: o <form> nativo já é o cupom; .cupom.js adiciona o
   rasgar (--rasgo 0..1) e os estados finais. Rótulos pixel são minúsculos → o
   guard N→H do pixel não dispara. */
.cupom-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.cupom-cab{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.cupom-cab .conta{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--tinta-2);
}
.cupom-lide{
  font-family:var(--font-corpo); font-size:clamp(14px,1.7vw,16px);
  line-height:1.55; color:var(--tinta-2); margin:8px 0 0; max-width:60ch;
}

/* o cupom em si: um cartão de PAPEL com borda TRACEJADA nos 4 LADOS (o pontilhado
   de recorte cerca a caixa inteira — um cupom que se destaca por completo). A
   tesoura fica no topo do pontilhado. Tom mais claro que a folha + sombra sutil. */
.cupom{
  position:relative; margin-top:clamp(12px,2vw,16px);
  border:2px dashed var(--tinta-ciano); border-radius:6px;
  background:#0d5e6708; padding:0;
  --rasgo:0;   /* progresso do rasgo (0..1), pintado por cupom.js */
}

/* a serrilha de recorte: a faixa da tesoura no topo, separada do miolo por um
   pontilhado (mesma linha de recorte que cerca a caixa). */
.cupom-serra{
  display:flex; align-items:center; gap:8px;
  padding:6px clamp(12px,3vw,18px); border-bottom:2px dashed var(--tinta-ciano);
  color:var(--tinta-ciano); user-select:none;
}
.cupom-tesoura{
  /* a fonte pixel/serifa nao tem o glifo da tesoura → stack de simbolo/emoji do
     sistema (Gecko cai no que houver; senao o "recorte aqui" carrega o sentido). */
  font-family:"Noto Color Emoji","Noto Emoji","Segoe UI Emoji","Apple Color Emoji","Symbola",sans-serif;
  font-size:15px; line-height:1; transform:translateY(1px);
}
.cupom-recorte{
  font-family:var(--font-display); font-size:10px; letter-spacing:.12em;
  text-transform:none; color:var(--tinta-2);
}

.cupom-papel{padding:clamp(14px,3vw,22px) clamp(14px,4vw,26px) clamp(16px,3vw,22px)}

.cupom-campo{border:0; margin:0; padding:0; min-width:0}
.cupom-pergunta{
  font-family:var(--font-manchete); font-weight:700;
  font-size:clamp(17px,2.6vw,22px); line-height:1.2; color:var(--tinta-preta);
  padding:0; margin:0;
}
.cupom-dica{
  font-family:var(--font-display); font-size:11px; letter-spacing:.02em;
  color:var(--tinta-2); margin:6px 0 clamp(12px,2vw,16px);
}

/* as opções: um voto por linha, com um quadradinho de marcar (papel, não tela) */
.cupom-opcao{
  display:flex; align-items:center; gap:10px; padding:9px 0; cursor:pointer;
  border-top:1px solid #00000012;
}
.cupom-opcao:first-of-type{border-top:0}
.cupom-opcao input{position:absolute; opacity:0; width:0; height:0}
.cupom-marca{
  flex:0 0 auto; width:16px; height:16px; border:1.5px solid var(--tinta-2);
  border-radius:3px; background:transparent; position:relative;
}
.cupom-opcao input:checked + .cupom-marca{
  border-color:var(--tinta-ciano); background:var(--tinta-ciano);
}
.cupom-opcao input:checked + .cupom-marca::after{
  content:"\2713"; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:12px; color:var(--papel);
}
.cupom-opcao input:focus-visible + .cupom-marca{
  outline:2px solid var(--tinta-ciano); outline-offset:2px;
}
.cupom-txt{
  font-family:var(--font-corpo); font-size:clamp(14px,1.8vw,16px);
  color:var(--tinta-preta); line-height:1.4;
}

.cupom-acao{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-top:clamp(14px,2.5vw,18px);
}
.cupom-btn{
  font-family:var(--font-display); font-size:13px; letter-spacing:.06em;
  color:var(--papel); background:var(--tinta-ciano); border:0; border-radius:5px;
  padding:9px 18px; cursor:pointer;
}
.cupom-btn:hover{background:#0a4b52}
.cupom-btn:active{transform:translateY(1px)}
.cupom-btn:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:3px}
.cupom-btn:disabled{background:var(--tinta-2); cursor:default; opacity:.7}

/* rasgar / colar de volta: botões-texto discretos (só aparecem com JS) */
.cupom-rasgar,.cupom-desfazer{
  font-family:var(--font-display); font-size:11px; letter-spacing:.04em;
  color:var(--tinta-ciano); background:transparent;
  border:1px solid var(--tinta-ciano); border-radius:5px;
  padding:7px 12px; cursor:pointer;
}
.cupom-rasgar[hidden],.cupom-desfazer[hidden]{display:none}
.cupom-rasgar:hover,.cupom-desfazer:hover{background:#0d5e6712}
.cupom-rasgar:focus-visible,.cupom-desfazer:focus-visible{
  outline:2px solid var(--tinta-ciano); outline-offset:2px;
}

.cupom-espera{
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
  color:var(--tinta-2); margin:clamp(12px,2vw,16px) 0 0;
  text-transform:none;
}

/* o rasgar: NUNCA uma linha reta. À medida que --rasgo (0..1) sobe, a beira de
   CIMA do cupom vira uma serrilha de PAPEL RASGADO e a tira "recorte aqui" PEELA
   pra cima e some — a sensação física de destacar o cupom pelo pontilhado.
   Técnica: um pseudo (::before) em var(--papel) — o MESMO papel da .folha por
   herança do custom-property, então casa com a folha atrás — desce por cima do
   topo do cupom recortado num clip-path em zigue-zague IRREGULAR (dente de papel
   picotado, não perfuração de máquina). O drop-shadow fino é a fibra rasgada.
   Quanto mais rasga, mais fundo a beira jagged desce, comendo a tira. */
.cupom::before{
  content:""; position:absolute; z-index:2; pointer-events:none;
  left:-2px; right:-2px; top:-2px;              /* cobre a borda tracejada do topo */
  height:calc(var(--rasgo) * 40px);             /* a beira desce conforme rasga */
  background:var(--papel);                       /* a folha "comendo" o topo do cupom */
  clip-path:polygon(
    0 0, 100% 0,
    100% 62%, 94% 100%, 88% 54%, 81% 96%, 74% 60%, 68% 100%,
    61% 50%, 54% 92%, 47% 58%, 40% 100%, 34% 52%, 27% 96%,
    20% 60%, 13% 100%, 7% 55%, 0 94%
  );
  filter:drop-shadow(0 1.5px .5px #1a161426);    /* fibra: sombra de tinta na beira */
  opacity:0;                                     /* repouso (--rasgo:0): sem beira */
  transition:height .18s ease, opacity .12s ease;
}
.cupom.rasgando::before,.cupom.destacado::before{opacity:1}

/* a tira "✂ recorte aqui": desliza pra cima, inclina de leve e some — o peel. O
   pontilhado dela cede o lugar pra beira rasgada (some junto). */
.cupom-serra{
  transform-origin:left center;
  transition:transform .18s ease, opacity .18s ease;
}
.cupom.rasgando .cupom-serra,.cupom.destacado .cupom-serra{
  transform:translateY(calc(var(--rasgo) * -9px)) rotate(calc(var(--rasgo) * -1.2deg));
  opacity:calc(1 - var(--rasgo) * .9);
  border-bottom-color:transparent;
}
/* destacado: o cupom "soltou" — inclina de leve e ganha sombra de papel solto.
   Os 3 lados restantes seguem pontilhados (papel + tinta, coeso); só o topo é a
   beira rasgada. NADA de border sólido reto. */
.cupom.destacado{
  transform:rotate(-.5deg); box-shadow:0 6px 14px #00000018;
}
@media (prefers-reduced-motion:reduce){
  /* sem tween: o rasgo salta pro estado final, mas a beira jagged (clip-path
     estático, guiado por --rasgo) ainda LÊ como recorte — nunca linha reta. */
  .cupom::before,.cupom-serra{transition:none}
  .cupom.destacado{transform:none}
}

/* enviado / já votou: sela o cupom — o papel "carimba" e esmaece os controles */
.cupom.enviado .cupom-acao{opacity:.55}
.cupom-status{
  font-family:var(--font-corpo); font-size:14px; line-height:1.5;
  color:var(--tinta-preta); margin:clamp(12px,2vw,16px) clamp(14px,4vw,26px);
  padding:10px 14px; border-left:3px solid var(--tinta-ciano);
  background:#0d5e670a;
}
.cupom-status[hidden]{display:none}
.cupom-status[data-tipo="erro"]{border-left-color:var(--tinta-magenta); background:#8d1da10a}

.cupom-cap{
  font-family:var(--font-corpo); font-size:13px; line-height:1.5;
  color:var(--tinta-2); text-align:center; margin:9px 0 0;
}

/* ── O RESULTADO · barras de % (Decisão do líder 2026-07-19) ──
   Sai AO VIVO, mas SÓ proporção — nunca o número absoluto. É PAPEL (na cor da
   tinta), no mesmo cartão tracejado do cupom. Server-render (sem-JS, quando o
   cookie diz "já votou") e o caminho JS (depois do voto) compartilham esta marcação.
   A largura da barra = calc(--pct * 1%); --pct é inteiro 0..100. Sem animação
   contínua (papel assenta, não pisca) → reduced-motion não precisa desligar nada. */
.cupom-resultado{
  position:relative; margin-top:clamp(12px,2vw,16px);
  border:2px dashed var(--tinta-ciano); border-radius:6px;
  background:#0d5e6708; padding:clamp(14px,3vw,22px) clamp(14px,4vw,26px);
}
.cupom-res-tit{
  font-family:var(--font-manchete); font-weight:700;
  font-size:clamp(16px,2.4vw,20px); line-height:1.2; color:var(--tinta-preta);
  margin:0 0 clamp(12px,2vw,16px);
}
.cupom-res-vazia{
  font-family:var(--font-corpo); font-size:clamp(14px,1.8vw,16px);
  color:var(--tinta-2); margin:0;
}
.cupom-barras{list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px,2vw,14px)}
.cupom-barra{
  display:grid; grid-template-columns:1fr auto; align-items:baseline;
  column-gap:10px; row-gap:5px;
}
.cupom-barra-lbl{
  font-family:var(--font-corpo); font-size:clamp(14px,1.8vw,16px);
  color:var(--tinta-preta); line-height:1.3;
}
.cupom-barra-eu{
  font-family:var(--font-display); font-size:10px; letter-spacing:.06em;
  color:var(--papel); background:var(--tinta-ciano);
  border-radius:3px; padding:1px 6px; vertical-align:middle;
}
.cupom-barra-pct{
  font-family:var(--font-display); font-size:13px; letter-spacing:.03em;
  color:var(--tinta-ciano); font-variant-numeric:tabular-nums; text-align:right;
}
.cupom-barra-trilho{
  grid-column:1 / -1; display:block; height:10px; border-radius:5px;
  background:#0d5e6714; overflow:hidden;
}
.cupom-barra-fill{
  display:block; height:100%; width:calc(var(--pct,0) * 1%);
  background:var(--tinta-ciano); border-radius:5px;
}
/* a barra do "seu voto" ganha um traço mais forte (só no caminho JS) */
.cupom-barra[data-eu] .cupom-barra-fill{background:var(--tinta-magenta)}
.cupom-barra[data-eu] .cupom-barra-pct{color:var(--tinta-magenta)}
.cupom-res-nota{
  font-family:var(--font-display); font-size:11px; letter-spacing:.04em;
  color:var(--tinta-2); margin:clamp(12px,2vw,16px) 0 0; text-transform:none;
}

/* ── A FILEIRA DE CAPAS ── */
.banca{padding:clamp(20px,3.5vw,28px) 0 0}
.banca-tit{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-top:1px solid #00000018; padding-top:18px;
}
/* .secao-nome (h2) já vem do bloco da edição: display, 15px, guard N→H ok */
/* PISO DE 15px em TODA .conta (aqui e nas 4 irmãs: linha do tempo, álbum,
   glyfa, cupom). A que obrigava era esta — a contagem da banca, que a 11px lia
   `Z edições publicadas`. As outras 4 sobem junto porque .conta é UM componente
   só, repetido lado a lado na home: deixar uma a 15px e quatro a 11px seria
   trocar um defeito de leitura por um defeito de desenho. */
.banca-tit .conta{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em;
  color:var(--tinta-2);
}

/* A ESTANTE. Mobile-first: as capas empilhadas numa coluna, cada uma na largura
   toda. No desktop (lá embaixo) o grid abre em N colunas e vira estante. */
.prateleira{display:grid; grid-template-columns:1fr; gap:16px; margin-top:16px}

/* cada capa = uma FOLHA com IDADE própria (o .folha do tokens.css amarela
   sozinho pelo --idade inline). É um <a> de bloco inteiro → alvo grande. */
.ed{
  position:relative; display:block; text-decoration:none; color:var(--tinta-preta);
  padding:14px 15px 16px; box-shadow:var(--sombra-folha);
  border-top:3px solid var(--tinta-preta);
  transition:transform var(--dur-medio) var(--ease), box-shadow var(--dur-medio) var(--ease);
}
/* fibra do papel do card (dimensão explícita: some no Gecko sem ela) */
.ed::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size:150px 150px; mix-blend-mode:multiply; opacity:.15;
}
.ed > *{position:relative; z-index:1}
.ed:hover{transform:translateY(-4px); box-shadow:0 3px 0 #00000012, 0 16px 34px #00000026}
.ed:focus-visible{outline:3px solid var(--tinta-ciano); outline-offset:3px}

.ed .mini-mast{
  display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-family:var(--font-display); border-bottom:1.5px solid var(--tinta-preta);
  padding-bottom:5px;
}
.ed .mini-mast .marca{font-weight:700; font-size:15px; color:var(--tinta-preta)}
/* PISO DE 15px: a referência do card É o expediente da edição na estante (vol.,
   nº e data). A 11px lia `de Z0Z6`.
   No estreito (≤~400px) ela passa a ocupar DUAS linhas, e isso é aceito de
   propósito: o `text-align:right` + `line-height:1.3` já foram escritos para
   duas linhas. Apertar o tracking não salvaria — faltam 1px a 390px, mas o
   nome do mês varia ("junho" × "setembro") e a linha quebraria do mesmo jeito
   em metade das edições. Melhor uma quebra previsível que um aperto que borra
   o glifo. */
.ed .mini-mast .ref{font-size:15px; color:var(--tinta-2); text-align:right; line-height:1.3}

/* ── A ARTE DE CAPA da estante: o CARD SOCIAL (1200x630) da edição ──
   Mesma gramática do .ed-frame (uma tela acesa embutida no papel), mas para a
   arte de capa: fica logo abaixo do friso de identidade e acima da manchete. A
   proporção é fixa em 1.91:1 (a do card social), então a caixa reserva a altura
   ANTES da imagem chegar; junto do width/height reais no <img>, o CLS é zero
   mesmo no pior 3G. object-fit:cover só entra como rede de segurança: se um dia
   um card vier com outra proporção, ele recorta pelo centro em vez de deformar.
   ⚠️ image-rendering AUTO (não pixelated como o frame): o card é tipografia
   suavizada + render 3D, e pixelar destruiria a nitidez ao reduzir. */
.ed-capa{
  margin:12px 0 0; position:relative; border-radius:var(--raio-tela); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--tela-borda-ui), var(--brilho-tela); background:var(--tela-bg);
  aspect-ratio:1200 / 630;
}
.ed-capa img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:center;
  image-rendering:auto;
}

.ed .ct{
  font-family:var(--font-manchete); font-weight:700; text-transform:uppercase;
  font-size:clamp(22px,3.2vw,27px); line-height:.94; letter-spacing:-.015em;
  color:var(--tinta-preta); margin:11px 0 7px;
}
.ed .ch{
  font-family:var(--font-corpo); font-weight:600; font-size:13.5px; line-height:1.42;
  color:var(--tinta-preta); margin:0;
}

/* o frame: um buraco de tela acesa no papel (mesmo raio/brilho da capa da
   edição), miniatura sem CLS (dims no img) */
.ed-frame{
  margin:12px 0 0; position:relative; border-radius:var(--raio-tela); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--tela-borda-ui), var(--brilho-tela); background:var(--tela-bg);
}
.ed-frame img{display:block; width:100%; height:auto; image-rendering:pixelated}

/* badge "nova" da capa mais recente (minúsculo: guard N→H) */
.ed .nova{
  position:absolute; top:-11px; right:10px; z-index:2;
  font-family:var(--font-display); font-size:10px; font-weight:700; letter-spacing:.08em;
  color:var(--papel); background:var(--tinta-ciano); padding:3px 8px;
}
/* selo da edição-hero: a capa cujo brinquedo é o quadradinho da home */
.ed .selo-jogo{
  display:inline-flex; align-items:center; gap:6px; margin-top:11px;
  font-family:var(--font-display); font-size:10px; letter-spacing:.05em; color:var(--tinta-ciano);
}
.ed .selo-jogo::before{
  content:""; width:8px; height:8px; background:var(--gw-ciano); box-shadow:0 0 7px var(--gw-ciano);
}

/* ── desktop: A ESTANTE. As capas ficam lado a lado, TODAS com o mesmo
   tratamento (nenhuma em destaque: quem envelhece é o papel) e com a ALTURA
   NATURAL do próprio conteúdo: align-items:start faz cada uma pendurar do
   topo, alinhadas pela borda de cima, como revistas encostadas na estante.
   O número de colunas vem do PHP (--cols, de prateleira_colunas()) e é
   escolhido pra fileira fechar cheia: 2 edições = 2 colunas (capas mais
   largas), sem buraco na ponta. Com 1 edição só, --cols:1 e a capa ocupa a
   fileira inteira. O grid quebra as fileiras seguintes sozinho. ── */
@media (min-width:768px){
  .prateleira{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr)); gap:18px; align-items:start}
}

/* ═══ A LINHA DO TEMPO · O SCRUBBER (item W6 · LINHA-TEMPO) ══════════════════
   A era VISUAL do jogo (do quadrado azul em diante). Estado-base (sem JS /
   reduced-motion): a LISTA estatica das edicoes visuais publicadas — legivel,
   nunca um bloco vazio. Com JS+motion, linha-tempo.js monta o SCRUBBER dentro
   da mesma seção e o CSS de .lt-ligado esconde a lista. A tela e LUZ (o navy do
   jogo); o papel em volta segue sem glow. Mock 07. */
.lt-hero{scroll-margin-top:12px; margin-top:clamp(18px,3vw,24px)}
.lt-cab{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  border-top:1px solid #00000018; padding-top:18px;
}
/* .secao-nome (h2) ja vem do bloco da edição (display, 15px, guard N→H ok) */
.lt-cab .conta{
  font-family:var(--font-display); font-size:15px; letter-spacing:.02em; color:var(--tinta-2);
}
.lt-lide{
  font-family:var(--font-corpo); font-size:clamp(13.5px,1.9vw,15px); line-height:1.5;
  color:var(--tinta-2); margin:8px 0 0; max-width:62ch;
}
/* ── VAZIO COM GRACA: a linha desenhada, ainda APAGADA ────────────────────────
   Sem edicao visual publicada a secao mostrava so uma nota seca e lia como
   pagina quebrada. Agora a linha aparece igual: o MESMO .lt-scrub / .lt-trilho /
   .lt-marca do scrubber real (nada de peca paralela), com o ponto no estado
   apagado (o aceso e o data-on="1", que aqui nunca vem) e a fala do Gus por
   baixo. E PAPEL: tinta, sem glow: o brilho ciano so acende quando a linha
   acender de verdade. */
.lt-vazio{margin:16px 0 0}
.lt-vazio .lt-scrub{height:42px; margin:0; cursor:default; pointer-events:none}
/* o trilho vira TRACEJADO: o percurso existe, mas ainda nao foi percorrido (a
   convencao de "por vir"). O continuo volta sozinho quando a linha acende, que
   e' quando o .lt-vazio deixa de existir. */
.lt-vazio .lt-trilho{
  background:repeating-linear-gradient(to right, #00000026 0 7px, #0000 7px 15px);
}
/* o ponto do proximo marco encosta no INICIO do trilho (left:11px), no lugar
   exato onde o 1o ponto real vai nascer. Fica so' vazado e mais claro: apagado,
   nao quebrado (tracejar um circulo de 15px vira sujeira, nao desenho). */
.lt-vazio .lt-marca{left:11px; cursor:default; border-color:var(--tinta-2); opacity:.55}
/* com um ponto so', o rotulo alinha pela ESQUERDA (centrado, "em breve" saltaria
   pra fora da margem da folha) */
.lt-vazio .lt-rot{left:-8px; translate:0 0}
.lt-vazio-fala{
  font-family:var(--font-display); font-size:clamp(11px,1.7vw,13px); line-height:1.6;
  color:var(--tinta-preta); margin:8px 0 0;
}
.lt-vazio-fala .hh{color:var(--tinta-ciano); margin-right:5px}
.lt-vazio-pensa{
  font-family:var(--font-display); font-size:clamp(10px,1.5vw,12px); line-height:1.55;
  color:var(--tinta-2); margin:5px 0 0; max-width:64ch;
}

/* ── ESTADO-BASE: a lista estatica (o caminho sem-JS / reduced-motion) ── */
.lt-lista{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:18px}
@media (min-width:640px){ .lt-lista{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))} }
.lt-item{margin:0}
.lt-item-frame{
  margin:0; position:relative; border-radius:var(--raio-tela); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--tela-borda-ui), var(--brilho-tela); background:var(--tela-bg);
}
.lt-item-frame img{display:block; width:100%; height:auto; image-rendering:pixelated}
.lt-item-data{
  display:block; margin:9px 0 0; font-family:var(--font-display); font-size:11px;
  letter-spacing:.04em; color:var(--tinta-ciano);
}
.lt-item-titulo{
  font-family:var(--font-manchete); font-weight:700; text-transform:uppercase;
  font-size:clamp(18px,2.6vw,22px); line-height:.96; letter-spacing:-.015em;
  color:var(--tinta-preta); margin:3px 0 5px;
}
.lt-item-dek{
  font-family:var(--font-corpo); font-weight:600; font-size:13px; line-height:1.42;
  color:var(--tinta-preta); margin:0;
}

/* ── ENHANCED: o scrubber (so quando linha-tempo.js liga .lt-ligado) ── */
.lt-ligado .lt-lista{display:none}
.lt-jogo{margin:14px 0 0}
.lt-moldura{
  border-radius:var(--raio-tela); padding:5px; background:#05090f;
  box-shadow:inset 0 0 0 1px #2c3d52, 0 2px 0 #00000018;
}
/* a tela acesa: o buraco de luz onde o frame do mes vive */
.lt-palco{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--raio-tela); background:#05090f;
}
.lt-frame{position:absolute; inset:0; opacity:0; transition:opacity var(--dur-medio) var(--ease)}
.lt-frame img{width:100%; height:100%; object-fit:cover; display:block;
  image-rendering:pixelated; filter:saturate(.94) brightness(.97)}
/* enquanto arrasta, o crossfade e instantaneo (a evolucao acompanha o dedo) */
.lt-jogo.lt-arrastando .lt-frame,
.lt-jogo.lt-arrastando .lt-feito,
.lt-jogo.lt-arrastando .lt-puxador{transition:none}
/* brilho de tubo + scanline por cima do frame (costura a foto na tela) */
.lt-palco::after{
  content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    radial-gradient(130% 120% at 50% 44%, #4dd9e814 0%, #0000 55%, #0000009e 100%),
    repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}
.lt-legenda{
  position:absolute; left:10px; top:9px; z-index:4;
  font-family:var(--font-display); font-size:12px; letter-spacing:.08em;
  color:var(--gw-ciano-alto); text-shadow:0 0 8px #4dd9e8cc;
  background:#05090fb0; padding:3px 8px; border-radius:2px;
}
/* a fala embaixo da tela (titulo + dek — texto que conta a evolucao por escrito) */
.lt-fala{margin:11px 0 0; min-height:3.4em}
.lt-titulo-mes{
  font-family:var(--font-manchete); font-weight:700; text-transform:uppercase;
  font-size:clamp(19px,2.8vw,24px); line-height:1; letter-spacing:-.015em;
  color:var(--tinta-preta); margin:0 0 4px;
}
.lt-dek{
  font-family:var(--font-corpo); font-weight:600; font-size:13.5px; line-height:1.45;
  color:var(--tinta-preta); margin:0; max-width:62ch;
}

/* o trilho + as marcas + o puxador */
.lt-scrub{position:relative; height:52px; margin:16px 0 0; user-select:none; touch-action:none}
.lt-trilho{position:absolute; left:11px; right:11px; top:20px; height:3px; background:#00000022}
.lt-feito{
  position:absolute; left:0; top:0; height:100%; width:var(--p,0%);
  background:var(--tinta-ciano); transition:width var(--dur-medio) var(--ease);
}
.lt-marca{
  position:absolute; top:20px; translate:-50% -50%; width:15px; height:15px; border-radius:50%;
  background:var(--papel); border:2.5px solid var(--tinta-2); cursor:pointer; z-index:2;
  transition:border-color var(--dur-rapido), background var(--dur-rapido);
}
.lt-marca[data-on="1"]{border-color:var(--tinta-ciano); background:var(--tinta-ciano)}
.lt-rot{
  position:absolute; top:19px; left:50%; translate:-50% 0; white-space:nowrap;
  font-family:var(--font-display); font-size:10px; letter-spacing:.04em; color:var(--tinta-2);
}
.lt-marca[data-on="1"] .lt-rot{color:var(--tinta-preta)}
.lt-puxador{
  position:absolute; top:20px; translate:-50% -50%; width:24px; height:24px; border-radius:50%;
  background:var(--tinta-preta); border:3px solid var(--gw-ciano); cursor:grab; z-index:3;
  box-shadow:0 0 10px #4dd9e855, 0 2px 4px #00000040; left:var(--px,0%);
  transition:left var(--dur-medio) var(--ease);
}
.lt-scrub.arrastando .lt-puxador,
.lt-jogo.lt-arrastando .lt-puxador{cursor:grabbing}
.lt-puxador:focus-visible{outline:3px solid var(--tinta-ciano); outline-offset:3px}
.lt-dica{
  font-family:var(--font-display); font-size:10px; color:var(--tinta-2);
  text-align:center; margin:8px 0 0; letter-spacing:.04em;
}

@media (prefers-reduced-motion:reduce){
  .lt-frame,.lt-feito,.lt-puxador{transition:none}
}

/* ═══════════════════ TERMINAL CRT DE FOSFORO VERDE ═══════════════════
   O tijolo comum das pecas artisticas da #1 (crt-nano na §17, os 3 quadros da
   HQ na §11): moldura de plastico escuro + tela de fosforo verde com scanline
   embutido. O CORPO usa ui-monospace (nao a pixel --font-display) de proposito:
   o texto longo do HAL tem N maiusculo e acentos, e a PixelOperatorMono
   rasteriza N como H abaixo de 15px. ui-monospace ja e o monospace da revista
   (.email, .img-quebrada) e escapa do guard. Verde = literal (nao ha token de
   fosforo; segue o padrao do arquivo de hex cru dentro do componente de tela). */
.crt-scr{
  position:relative; overflow:hidden;
  border-radius:var(--raio-tela); padding:5px; background:#05090f;   /* a carcaca */
  box-shadow:inset 0 0 0 1px #24402f, 0 2px 0 #00000018;
}
.crt-tela{
  position:relative; border-radius:calc(var(--raio-tela) - 3px); overflow:hidden;
  padding:clamp(12px,3vw,20px) clamp(12px,3.5vw,22px);
  background:radial-gradient(120% 130% at 50% 42%, #0c2417 0%, #050a06 66%);
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(12px,1.7vw,14px); line-height:1.75;
  color:#5dfc9a; text-shadow:0 0 6px #2ad07a66;   /* o brilho do tubo */
}
/* scanline + vinheta por cima (a tela "acesa", independente do CRT global) */
.crt-tela::after{
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(120% 130% at 50% 55%, #5dfc9a12 0%, #0000 46%, #00000066 100%),
    repeating-linear-gradient(0deg, #0000000d 0 1px, #0000 1px 3px);
}
.crt-tela p{margin:0}
.crt-tela .pr{color:#8affc0; text-shadow:0 0 7px #5dfc9a88}   /* o prompt, mais claro */
.crt-tela .er{color:#ff9a7a; text-shadow:0 0 6px #ff5a3a55}   /* stderr, ambar-vermelho */
.crt-tela .dim{color:#3f9c6a; text-shadow:none}               /* teor apagado (keycap etc.) */

/* o cursor de bloco piscando (compartilhado). Pisca DEVAGAR (1.2s), a pedido do
   lider — o blink rapido incomodava. */
.crt-cur{
  display:inline-block; width:.62em; height:1.05em; vertical-align:-.16em;
  background:#8affc0; box-shadow:0 0 8px #5dfc9a99;
  animation:crt-blink 1.2s steps(1) infinite;
}
@keyframes crt-blink{50%{opacity:.12}}

/* ── §17 · crt-nano: o prompt sendo DIGITADO, disparado AO ENTRAR NA VIEW ──
   ANTES a animacao rodava no LOAD (o leitor rolava ate aqui e ja tinha acabado).
   Agora o IntersectionObserver (pecas.js) so dispara a digitacao quando o quadro
   entra no viewport: adiciona .is-typing. Progressive enhancement: SEM JS (ou sem
   observer) o comando JA aparece digitado (estado-base) — nunca um bloco em branco.
   pecas.js "arma" (.armed) o quadro escondendo o comando, e so o revela char-a-char
   quando .is-typing chega. A logica pura (quando "entrou") vive em typing-core.js. */
.crt-nano{margin:clamp(12px,2vw,16px) 0}
.crt-nano .crt-typed{
  display:inline-block; overflow:hidden; white-space:nowrap; vertical-align:bottom;
  width:5ch;   /* estado-base: "nano " ja revelado (sem JS) */
}
.crt-nano .crt-key{opacity:1}   /* estado-base: keycap <enter> visivel */
/* armado por JS, antes de entrar na view: volta ao inicio (comando escondido) */
.crt-scr.armed .crt-typed{width:0ch}
.crt-scr.armed .crt-key{opacity:0}
/* entrou na view: digita "nano " (5ch) e revela o <enter>, uma vez so */
.crt-scr.is-typing .crt-typed{animation:crt-type 1.05s steps(5) .15s forwards}
.crt-scr.is-typing .crt-key{animation:crt-keyin .01s linear 1.25s forwards}
@keyframes crt-type{from{width:0ch} to{width:5ch}}   /* "nano " = 5ch */
@keyframes crt-keyin{to{opacity:1}}

/* ── §11 · a HQ: tirinha de 3 quadros numa LINHA, contorno preto de jornal ──
   os gutters pretos = o fundo do strip aparecendo pelo gap. Quadros = telas CRT.
   Desktop: Q1|Q2|Q3 em 3 colunas IGUAIS, todos a mesma altura (grid stretch).
   Mobile (<600px): empilha em 1 coluna. */
.hq{margin:clamp(14px,2.4vw,20px) 0 clamp(16px,2.6vw,22px)}
/* a TIRA de jornal: gutter = o PAPEL respirando entre os quadros (grid-gap), e
   cada quadro com sua propria moldura preta (border) — os dois conceitos da HQ:
   gutter e o espaco, border e a linha ao redor do painel. O fundo da tira e o
   papel pra que o gutter mostre papel, nao tinta. Ref.: Envato Tuts+ "CSS Grid
   Layout and Comics" (grid-gap = gutter) + Wikipedia glossary of comics. */
.hq-strip{
  display:grid; grid-template-columns:1fr;
  gap:clamp(10px,1.8vw,16px);          /* o gutter: papel entre os quadros */
  background:var(--papel);
}
@media (min-width:600px){
  .hq-strip{grid-template-columns:repeat(3,1fr)}
}
.hq-q{
  position:relative; background:#050a06; min-height:120px; display:flex;
  border:3px solid var(--tinta-preta); /* a moldura de cada quadro (jornal 90s) */
}
.hq-q .crt-tela{border-radius:0; flex:1; width:100%}
/* etiqueta de quadro (canto), como numero de vinheta.
   PISO DE 15px: e o numero que da a ORDEM DE LEITURA da tirinha. A 11px o `2`
   lia `Z`. Custo de layout zero — position:absolute, nao empurra nada. */
.hq-n{
  position:absolute; top:6px; left:8px; z-index:6;
  font-family:var(--font-display); font-size:15px; letter-spacing:.06em;
  color:#3f9c6a; opacity:.8;
}
/* Q3 do HQ: a tela REAL do monologo HAL (tui_claude.png). A figura preenche a
   coluna do strip (mesma altura de Q1/Q2) e ancora o olho vermelho. object-fit
   cover + object-position top: o CABECALHO da tela (a barra de abas) fica sempre
   visivel no topo, e e nele que o olho crava. Sem retoque no arquivo (cover e so
   enquadramento de exibicao; o monologo inteiro se le no zoom, item #6). */
.hq-hal-foto{position:relative; margin:0; line-height:0; flex:1; width:100%; overflow:hidden}
.hq-hal-foto .zoom-link{display:block; width:100%; height:100%}   /* o <a> preenche o quadro */
/* object-position:top LEFT — revela o robozinho laranja do Claude Code (canto
   superior-esquerdo da tela) na coluna estreita; antes (top center) ele era cortado. */
.hq-hal-foto img{display:block; width:100%; height:100%; object-fit:cover; object-position:top left}
/* o olho vermelho do HAL na MINIATURA: crava no TOPO-DIREITO da tela (mesmo canto
   do zoom), nao mais sobre o robo. Posicao em % (segue o enquadramento em qualquer
   escala); tamanho PEQUENO (proporcional a miniatura). RESPIRA (hal-pulsa). */
.hq-hal-foto .hal-eye{
  position:absolute; top:9.5%; right:2.6%;
  z-index:6; pointer-events:none;
  width:clamp(9px,1.1vw,14px);
}
.hal-eye{
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, #ffd1c4 0%, #ff2a2a 42%, #7a0000 100%);
  box-shadow:0 0 24px #ff2a2acc, 0 0 52px #ff000080, inset 0 0 8px #ffffff66;
  animation:hal-pulsa 3.6s ease-in-out infinite;
}
/* respiracao: o glow e o brilho crescem e recuam devagar (inspira/expira). */
@keyframes hal-pulsa{
  0%,100%{box-shadow:0 0 16px #ff2a2a99, 0 0 32px #ff000055, inset 0 0 8px #ffffff55;
          filter:brightness(.82)}
  50%    {box-shadow:0 0 36px #ff2a2aff, 0 0 80px #ff0000bb, inset 0 0 12px #ffffff99;
          filter:brightness(1.18)}}

/* ── §11 (edição #2) · a HQ da CONSTRUÇÃO: andaime ASCII + a mini-lápide ──
   A tirinha da #2 (Rota B, tema construção) reusa .hq/.hq-strip/.hq-q/.crt-tela.
   DUAS peças novas, só desta HQ:
   1) .hq-art — o andaime desenhado em ASCII dentro do terminal (Q1 sobe parcial,
      Q3 reconstruído mais alto). Ornamento (aria-hidden), na mesma monospace/cor
      apagada do CRT; preserva o alinhamento (white-space:pre). Nada a animar. */
.hq .hq-art{
  margin:clamp(4px,1.2vw,8px) 0; font:inherit; color:#3f9c6a;
  line-height:1.12; white-space:pre; text-shadow:none;
}
/* 2) .lapide-mini — a lápide "GDScript" do Q2, versão REDUZIDA da .lapide-pedra
      (§07), mas em FÓSFORO (verde do CRT) para pertencer à tela em vez de brigar
      com o granito. Topo em arco + base reta (a silhueta clássica), no fluxo do
      terminal, centralizada abaixo da narração ("ao fundo" do quadro). Decorativa
      (aria-hidden) → nada a ler para o leitor de tela. Sem animação. */
/* o piso de 84px é DERIVADO do nome escavado: "GDScript" a 15px mede 60px, e
   com 6px de goteira dos dois lados a pedra precisa de 72+12. O piso antigo
   (64px) foi calculado pro nome a 13px e deixava o `t` final atravessar a borda
   direita da lápide assim que o corpo subiu. No estreito quem manda é o 34%,
   que já dava ~104px — lá nada muda. */
.hq .lapide-mini{
  display:block; width:clamp(84px,34%,104px); box-sizing:border-box;
  margin:clamp(8px,2vw,14px) auto 2px; padding:14px 6px 9px; text-align:center;
  border-radius:clamp(28px,11vw,48px) clamp(28px,11vw,48px) 3px 3px;   /* arco + base */
  background:linear-gradient(176deg,#0e3a24 0%,#0a2c1c 62%,#08251a 100%);   /* granito em fósforo */
  border:1px solid #1f6b4577;
  box-shadow:inset 0 1px 0 #5dfc9a2e, inset 0 -4px 9px #00000055, 0 0 12px #0a1f1466;
}
/* o lozango gravado no alto do arco (neutro, sem carga religiosa), como na §07 */
.hq .lapide-mini::before{
  content:"◆"; display:block; font-size:9px; line-height:1;
  color:#3f9c6a; margin:0 0 7px; text-shadow:none;
}
/* o nome escavado: pixel (--font-display), fósforo claro. O comentário antigo
   dizia que "GDScript" escapava do guard por não ter N maiúsculo — mas o guard
   não é só o N: o S MAIÚSCULO vira 5 entre 10 e 12px, e no mobile o clamp
   pousava em 11px e a lápide lia `GD5cript`. PISO DE 15px: é o NOME da
   tecnologia enterrada, a piada inteira do quadro depende de lê-lo. */
.hq .lapide-mini .lm-nome{
  font-family:var(--font-display); font-size:15px;
  letter-spacing:0; color:#8affc0; text-shadow:0 0 6px #2ad07a55;
}

/* ── §13 · o poster central: o icone de imagem quebrada GIGANTE (SVG) ── */
.poster-quebrada{
  display:grid; place-items:center; gap:clamp(12px,2.4vw,18px);
  padding:clamp(20px,5vw,44px) 0; text-align:center;
}
.poster-quebrada svg{
  width:min(88%,420px); height:auto; image-rendering:pixelated;
}
.poster-cap{
  font-family:var(--font-corpo); font-style:italic;
  font-size:clamp(15px,2.4vw,19px); line-height:1.4; color:var(--tinta-2); margin:0;
}
.poster-sub{
  font-family:var(--font-display); font-size:11px; letter-spacing:.06em;
  color:var(--tinta-2); opacity:.85; margin:0;
}

/* ── §13 (edição #2) · o PÔSTER CENTRAL emoldurado: o Gus 3D ABANDONADO ──
   O render 3D que o jogo quase foi, tratado como pôster destacável de revista.
   .poster-mat = passe-partout navy (a tinta impressa) com keyline ciano (a luz
   do jogo) rente à imagem; a foto grande e centralizada. Reusa o zoom-link /
   zoom-badge (§17) pro lightbox: SEM JS abre a PNG full; COM JS amplia in-page.
   O rótulo de canto "ENCARTE" evoca o pôster arrancável do miolo da revista. */
/* o pôster (encarte) centraliza na SEÇÃO/FOLHA inteira, não na coluna de texto
   (que é 74ch presa à esquerda). A folha é max-width:1080px centrada (linha ~529),
   então a largura da seção = min(1080px,100vw) menos os 2 paddings do .edicao.
   NÃO usar 100vw puro: num monitor largo a folha é 1080 e o resto é mesa, e o
   100vw estouraria pra fora da página à direita. */
.conteudo .poster{
  display:flex; justify-content:center;
  width:calc(min(1080px, 100vw) - 2 * clamp(20px,3.5vw,56px));
  margin:0 0 clamp(16px,3vw,26px); box-sizing:border-box;
}
.conteudo .poster-mat{
  position:relative; display:block; margin:0; max-width:min(100%,560px);
  padding:clamp(16px,4vw,34px);
  background:linear-gradient(158deg,#151d2e 0%,#0d1420 62%,#0a0f19 100%);
  border:1px solid var(--borda); border-radius:var(--raio-tela);
  box-shadow:var(--sombra-folha), inset 0 0 0 1px #ffffff12;
}
/* a LEGENDA do pôster (fala + //) acompanha o encarte: ganha a mesma largura da
   folha e centraliza o texto, pra ficar alinhada sob o pôster centralizado (e não
   presa à esquerda na coluna de texto). Escopo: só a fala/pensa que seguem o .poster */
.conteudo .poster ~ .fala,
.conteudo .poster ~ .pensa{
  width:calc(min(1080px, 100vw) - 2 * clamp(20px,3.5vw,56px));
  text-align:center;
}
/* o rótulo de encarte no alto do mat (pixel apagada, como carimbo de miolo).
   PISO DE 15px: a 9,5px o carimbo lia `EHCARTE` — palavra que não existe. O
   relatório de QA não conseguiu ler o N aqui (o emblema de zoom cobria o rótulo
   no render em que a foto ainda não tinha carregado); com a foto no lugar o
   emblema desce pro canto inferior, o carimbo fica inteiro à vista e a troca se
   confirma. A discrição continua na TINTA (ciano apagado, opacity .72) e no
   espacejamento largo, não no corpo de letra. Custo de layout zero: é
   position:absolute sobre um mat de até 560px, e a palavra mede ~88px. */
.conteudo .poster-mat::before{
  content:"ENCARTE"; position:absolute; top:clamp(6px,1.6vw,11px); left:0; right:0;
  text-align:center; font-family:var(--font-display); font-size:15px;
  letter-spacing:.34em; color:#7fd6e0; opacity:.72; pointer-events:none;
}
/* a imagem justa no mat, com o keyline ciano fino separando tinta de foto */
.conteudo .poster-mat .zoom-link{
  border:1px solid #1f6b7a; background:#05080e;
  box-shadow:0 6px 22px #00000059;
}
.conteudo .poster-mat img{display:block; width:100%; height:auto}
.conteudo .poster-mat .zoom-badge{background:#0c1524e6}

/* ── §14 · o brinde: encarte da fonte CC0 + wallpaper de terminal ── */
.brinde{display:grid; gap:clamp(16px,3vw,22px); margin:0}
@media (min-width:620px){ .brinde{grid-template-columns:1fr 1fr; align-items:start} }
.brinde-card{
  border:1px solid var(--borda); border-left:3px solid var(--tinta-ciano);
  padding:14px 16px; background:#0d152006;
}
.brinde-kick{
  font-family:var(--font-display); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--tinta-ciano); margin:0 0 8px;
}
.brinde-card h3{
  font-family:var(--font-manchete); font-weight:700; letter-spacing:var(--manchete-ls);
  font-size:clamp(18px,2.6vw,22px); line-height:1.05; color:var(--tinta-preta); margin:0 0 8px;
}
.brinde-card p{font-family:var(--font-corpo); font-size:15px; line-height:1.55; color:var(--tinta-2); margin:0 0 10px}
/* o mostruario da pixel: SO em corpos >=15px (o guard N->H) e minusculo no piso */
.brinde-specimen{
  font-family:var(--font-display); color:var(--tinta-preta);
  border:1px dashed var(--borda); padding:10px 12px; margin:0 0 10px; background:var(--papel);
}
.brinde-specimen .sp-big{display:block; font-size:26px; line-height:1.1; letter-spacing:.02em}
.brinde-specimen .sp-mid{display:block; font-size:17px; line-height:1.3; margin-top:6px; color:var(--tinta-2)}
.brinde-dl{
  display:inline-block; font-family:var(--font-display); font-size:13px; letter-spacing:.03em;
  color:var(--tinta-ciano); text-decoration:none; border-bottom:1px solid currentColor;
}
.brinde-dl:hover,.brinde-dl:focus-visible{color:var(--tinta-preta); outline:none}
.brinde-dl:focus-visible{outline:2px solid var(--tinta-ciano); outline-offset:3px}
.brinde-dl .kbd{opacity:.7}
/* preview do wallpaper: mini tela de terminal (mesma familia CRT, escala menor) */
.brinde-wall .crt-tela{font-size:12px; padding:14px 16px; min-height:150px}
.brinde-wall figcaption{
  font-family:var(--font-display); font-size:11px; color:var(--tinta-2);
  margin:8px 0 0; padding-left:9px; border-left:2px solid var(--tinta-ciano);
}

/* ── §11/§17 · ZOOM (lightbox): clique-pra-ampliar as telas reais ──
   O <a class="zoom-link"> envolve a imagem. SEM JS abre a PNG em tamanho real
   (href nativo). COM JS o pecas.js intercepta e abre o overlay abaixo. Logica
   pura em lightbox-core.js. */
.zoom-link{display:block; position:relative; cursor:zoom-in}
.zoom-link:focus-visible{outline:2px solid var(--acento); outline-offset:3px}
/* indicador de CLICAVEL (correcao #3): lupa + rotulo curto no canto inferior-direito
   da tela. SEMPRE visivel (mobile nao tem :hover), aria-hidden no HTML. O rotulo e
   bilingue e vive no partial (pt/en). pointer-events:none -> o clique passa pro <a>
   (progressive enhancement intacto: sem JS o href ainda abre a PNG). */
.zoom-badge{
  --lupa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='6.6' cy='6.6' r='4.2'/%3E%3Cline x1='9.7' y1='9.7' x2='14' y2='14'/%3E%3Cline x1='6.6' y1='4.6' x2='6.6' y2='8.6'/%3E%3Cline x1='4.6' y1='6.6' x2='8.6' y2='6.6'/%3E%3C/g%3E%3C/svg%3E");
  position:absolute; right:8px; bottom:8px; z-index:7;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:11px; letter-spacing:.03em; line-height:1;
  color:#eaf1fa; background:#0c1524d9; border:1px solid #ffffff2e; border-radius:5px;
  padding:5px 8px; pointer-events:none; box-shadow:0 2px 8px #00000059;
}
.zoom-badge::before{
  content:""; width:13px; height:13px; flex:none; background:currentColor;
  -webkit-mask:var(--lupa) center/contain no-repeat;
          mask:var(--lupa) center/contain no-repeat;
}

/* o overlay: fundo escuro (a tela do Tavus-Drive envolvendo a folha) + a imagem
   ampliada ao maximo do viewport, legivel. Montado no <body> por pecas.js. */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,3vw,40px);
  background:#04060af5; cursor:zoom-out;
  animation:lb-in var(--dur-medio) var(--ease);
}
.lightbox[hidden]{display:none}
/* a figura envolve a imagem justa (shrink-wrap) e ancora o olho do HAL (correcao
   #6): a img e limitada pelo VIEWPORT (descontada a padding do overlay dos dois
   lados) pra nao depender da altura da figura -> sem laco circular, Gecko-safe. */
.lightbox-fig{position:relative; display:block; margin:0; line-height:0; max-width:100%; max-height:100%}
.lightbox img{
  display:block; width:auto; height:auto;
  max-width:calc(100vw - clamp(24px,6vw,80px));
  max-height:calc(100vh - clamp(24px,6vw,80px));
  border-radius:var(--raio-tela); box-shadow:0 12px 48px #000000b3;
  cursor:default;
}
/* o olho vermelho na visao ampliada: no zoom a imagem inteira aparece, entao o
   olho fica no topo-DIREITO (o grande orbe do HAL, nivelado com o robo a esquerda),
   como ja estava. Aqui ele e MAIOR — ao contrario da miniatura, onde e pequeno.
   Reusa .hal-eye (glow + hal-pulsa). */
.lightbox-fig .hal-eye{
  position:absolute; top:9.5%; right:2.6%; z-index:101; pointer-events:none;
  width:clamp(30px,3.4vw,52px);
}
@keyframes lb-in{from{opacity:0} to{opacity:1}}
.lightbox-fechar{
  position:absolute; top:clamp(8px,2vw,18px); right:clamp(8px,2vw,18px);
  font-family:var(--font-display); font-size:12px; letter-spacing:.06em;
  color:#dce8f5; background:#1a2436; border:1px solid #486486; border-radius:5px;
  padding:8px 13px; cursor:pointer;
}
.lightbox-fechar:hover{background:#243350}
.lightbox-fechar:focus-visible{outline:2px solid var(--gw-ciano); outline-offset:2px}
/* trava o scroll do fundo enquanto o zoom esta aberto */
html.lightbox-aberto{overflow:hidden}

@media (prefers-reduced-motion:reduce){
  /* reduzido = estado final, sem animar: comando ja digitado (mesmo se JS armou),
     cursor e olho parados mas ACESOS. */
  .crt-nano .crt-typed,.crt-scr.armed .crt-typed{width:5ch; animation:none}
  .crt-nano .crt-key,.crt-scr.armed .crt-key{opacity:1; animation:none}
  .crt-scr.is-typing .crt-typed,.crt-scr.is-typing .crt-key{animation:none}
  .crt-cur{animation:none}
  .hal-eye{animation:none}
}


/* ═══════════════════════════════════════════════════════════════════════
   EDIÇÃO #3 · as peças novas
   Portadas dos mocks 17 (Detonado censurado), 18 (a HQ do quadrado) e 19 (o
   pôster central), mais as duas formas do // e a moldura da Entrevista.
   ⚠️ TUDO ESCOPADO. Os mocks usavam nomes genéricos (.tarja, .quadro, .num,
   .cena, .corpo) que colidiriam com o resto da revista; aqui cada peça vive
   dentro do seu wrapper (.det-doc / .hq3 / .enc) e nada vaza.
   Zero JS · zero animação nas 3 peças (as três vão IMPRESSAS: têm que dizer a
   mesma coisa paradas) -> nada a desligar em prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── as DUAS FORMAS DO // (decisão do editor-geral, 2026-08-03) ──
   1) APARTE CURTO embutido na prosa: já é o .pensa de sempre (a Galeria usa).
   2) BLOCO SEPARADO ao fim da peça, para a confissão longa (o Editorial usa).
   O bloco ganha um fio à esquerda e linhas coladas, para ler como uma coisa só
   em vez de nove pensamentos soltos. Mesma cor/corpo do .pensa (15px é piso do
   guard N->H: o // é a camada honesta e tem que ler limpo). */
.conteudo .pensa-bloco{
  margin:clamp(16px,2.6vw,22px) 0 0; padding:10px 0 10px 14px;
  border-left:2px solid #35562f4d;
}
.conteudo .pensa-bloco .pensa{margin:0 0 2px}
.conteudo .pensa-bloco .pensa:last-child{margin-bottom:0}

/* ── §16 · a ENTREVISTA: as trocas ──
   Cada troca é um par pergunta/resposta com os dois pensamentos. O respiro
   ENTRE trocas é o que faz o leitor ver nove blocos e não uma parede.
   O // do Cauã é o MESMO verde do Gus de propósito: os dois pensam na mesma
   página, e quem diferencia é o prompt logo acima, não a cor. */
.conteudo .entrev .troca{margin:0 0 clamp(20px,3.4vw,30px)}
.conteudo .entrev .troca:last-child{margin-bottom:0}
.conteudo .entrev .pensa{margin-bottom:clamp(12px,2vw,16px)}
.conteudo .entrev .pensa + .pensa{margin-top:-6px}

/* ── §17 · a DESCULPA FURADA em bloco de terminal (canon novo da #3) ──
   Reusa .crt-scr/.crt-tela. NÃO é decorativa (é a voz do root e o leitor lê),
   por isso não leva aria-hidden e não pode encolher. */
.conteudo .crt-scr.desculpa{margin:clamp(14px,2.4vw,20px) 0}

/* ═══════════════════════════════════════════════════════════════════════
   §08 · o DOCUMENTO DESCLASSIFICADO (porte do mock 17)
   ═══════════════════════════════════════════════════════════════════════ */

/* o documento é o palco do carimbo: position:relative para ancorá-lo e
   overflow:hidden para que o retângulo girado a -17deg não escape da coluna
   (guard: nada de rolagem horizontal por causa da arte). */
.conteudo .det-doc{position:relative; overflow:hidden; padding-top:4px}
.conteudo .det-doc > *{position:relative; z-index:1}

/* a voz do root: a diferença é a COR, medida no mock contra os três papéis
   (--voz-root #9a1815 = 7.28 no papel novo · 7.03 nesta folha · 5.06 no pior
   papel da banca, a #1 encardida). Foi escolhida ENUMERANDO candidatos: os
   vermelhos mais vivos (#a81f1b=4.43, #b3221d=4.03, #c0272d=3.57) REPROVAM AA
   no papel da #1. ⚠️ Escopo restrito ao Detonado de propósito: aplicar vermelho
   a toda voz root da revista é decisão do editor-geral, não deste porte. */
.conteudo .det-doc{--voz-root:#9a1815}
.conteudo .det-doc .fala.root .prompt{color:var(--voz-root)}
.conteudo .det-doc .fala.root .dito{color:var(--tinta-preta)}

.conteudo .det-legenda{
  font-family:var(--font-corpo); font-style:italic;
  font-size:clamp(14.5px,2vw,15.5px); line-height:1.5; color:var(--tinta-2);
  max-width:56ch; margin:12px 0 clamp(14px,2.4vw,20px);
}
.conteudo .det-fecho{margin-bottom:clamp(14px,2.4vw,20px)}
.conteudo .det-glosa{
  font-family:var(--font-corpo); font-size:14.5px; line-height:1.5;
  color:var(--tinta-2); margin:6px 0 0;
}

/* ── a transcrição: papel dentro do papel, a folha datilografada colada ──
   ⚠️ ROLA NA HORIZONTAL, não encolhe a fonte. O mock descia a 11,5px no
   estreito; aqui o piso é 15px porque isto é texto que o leitor LÊ e a
   PixelOperatorMono degrada abaixo disso (o N vira H, o 2 vira Z - e "2632" é
   justamente o número que a seção existe para dizer). O overflow-x:auto é o
   mesmo recurso que a .tela-real já usa: a caixa rola, a página nunca. */
.conteudo .det-transcricao{
  margin:6px 0 4px; padding:16px 14px 14px;
  background:#00000008;
  border-top:2px solid var(--tinta-preta);
  border-bottom:2px solid var(--tinta-preta);
  box-shadow:inset 0 0 0 1px #0000000d;
  overflow-x:auto; overflow-y:hidden;
}
.conteudo .det-transcricao .cab{
  display:block; margin:0 0 10px;
  font-family:var(--font-display); font-size:15px; letter-spacing:.04em; color:var(--tinta-2);
}
.conteudo .det-linhas{
  margin:0; font-family:var(--font-display); font-size:15px;
  line-height:1.85; color:var(--tinta-preta);
}
/* ⚠️ ALINHAMENTO SEM VAZAMENTO: a linha é um FLEX de 3 peças e quem estica é a
   dos pontinhos. O "ok" alinha por LAYOUT, não por contagem de caractere - é
   isso que permite a tarja ter largura arbitrária sem quebrar a coluna, e sem
   que a largura signifique nada. */
.conteudo .det-linha{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.conteudo .det-linha .nome{flex:0 0 auto}
.conteudo .det-linha .pontos{flex:1 1 auto; min-width:12px; overflow:hidden; color:var(--tinta-2)}
.conteudo .det-linha .ok{flex:0 0 auto; color:var(--tinta-preta)}
.conteudo .det-linhas .total{
  display:block; margin-top:14px; padding-top:10px;
  border-top:1px dashed #00000030; color:var(--tinta-preta); white-space:nowrap;
  font-size:16px;
}
/* ⚠️ NO ESTREITO A LINHA QUEBRA, e a alternativa era pior. Medido no render de
   390px: a coluna útil da transcrição dá 322px e a linha mais longa (em EN,
   "[arena] ▮▮▮ does not act outside its own turn") mede ~360px a 15px. Com a
   linha em nowrap o "ok" saía do quadro e só voltava rolando a caixa - ou seja,
   a informação que a seção inteira existe para dizer ("passou") ficava fora da
   vista, sem nenhum aviso de que havia mais à direita.
   As três saídas possíveis e por que esta:
     (a) encolher a fonte  -> é o que o mock fazia (11,5px), e é justamente o que
         a regra da casa proíbe em texto que o leitor LÊ: a PixelOperatorMono
         degrada abaixo de 15px (N vira H, 2 vira Z, s vira o);
     (b) rolar a caixa     -> o "ok" fica escondido atrás de um gesto que ninguém
         adivinha num bloco que parece estático;
     (c) QUEBRAR A LINHA   -> perde-se o alinhamento em coluna do "ok" (que é
         enfeite de terminal) e ganha-se a leitura inteira em corpo seguro.
   Os pontinhos somem porque só existem PARA alinhar; sem coluna, seriam ruído. */
@media (max-width:620px){
  .conteudo .det-transcricao{overflow-x:visible}
  .conteudo .det-linha{display:block; white-space:normal; line-height:1.55; margin-bottom:6px}
  .conteudo .det-linha .pontos{display:none}
  .conteudo .det-linha .ok{margin-left:8px}
  .conteudo .det-linhas .total{white-space:normal}
}

/* ── A TARJA ──
   ⛔ Elemento VAZIO. Não há texto por baixo, não há atributo com o termo, não
   há comentário. O aria-label diz "trecho censurado" e nada mais.
   user-select:none para que arrastar o mouse não copie coisa nenhuma. */
.conteudo .det-tarja{
  display:inline-block; vertical-align:-.12em;
  height:1.05em; background:#000; width:7ch;   /* fallback; o ciclo abaixo manda */
  -webkit-user-select:none; user-select:none; pointer-events:none;
  box-shadow:0 0 0 .5px #00000040;   /* a tinta empasta um fio além da barra */
}
/* ⚠️ LARGURAS QUANTIZADAS, sorteadas pela POSIÇÃO DA LINHA. Quatro tamanhos
   fixos num ciclo de 4. Nenhum olha o conteúdo: trocar o texto das linhas não
   muda largura nenhuma, e por isso a largura não pode entregar contagem de
   letras. Parece natural sem significar nada. */
.conteudo .det-linha:nth-of-type(4n+1) .det-tarja{width:4ch}
.conteudo .det-linha:nth-of-type(4n+2) .det-tarja{width:11ch}
.conteudo .det-linha:nth-of-type(4n+3) .det-tarja{width:7ch}
.conteudo .det-linha:nth-of-type(4n)   .det-tarja{width:9ch}

/* ── O CARIMBO ──
   Retângulo de cantos arredondados, borda vermelha, CENSURADO!!! dentro,
   "sterling corp." miúdo no canto inferior direito. Torto e descuidado: -17deg
   (não 15, que é o ângulo de quem está prestando atenção), fora do centro,
   espessura de borda irregular nos quatro lados, raio diferente em cada canto,
   e a palavra girada mais um fio em relação à moldura.
   DECORATIVO: aria-hidden + pointer-events:none, fora da ordem de leitura.
   ⚠️ NADA de opacity nem mix-blend-mode AQUI: o .det-carimbo é só a caixa que
   posiciona e gira. Opacity no pai criaria isolamento de grupo e o multiply do
   filho passaria a misturar com o vazio do grupo em vez de com a página. */
.conteudo .det-carimbo{
  position:absolute; z-index:6; pointer-events:none;
  -webkit-user-select:none; user-select:none;
  /* ⚠️ top:30% e não 43% (o número do mock): lá a peça era uma página inteira e
     43% caía sobre prosa; aqui a seção é mais curta e o mesmo 43% jogava o
     carimbo em cima do cabeçalho da transcrição, tapando "trecho" e a primeira
     linha de teste. Em 30% ele cruza prosa nos dois tamanhos (medido em 1200 e
     em 390) e continua atravessando o documento, que é o gesto da peça. */
  left:50%; top:30%; width:min(80%,470px);
  translate:-52% -46%;   /* fora do centro de propósito */
  rotate:-17deg;
  --carimbo-tinta:#b81f26;
}
/* ⚠️ A MÁSCARA DE TINTA GASTA MORA NA .moldura, NÃO no .det-carimbo: a máscara
   é um mosaico de manchas em posição FIXA na caixa, e sobre o carimbo inteiro
   uma delas comia metade do "sterling corp." (visto no render do mock, não
   suposto). O rótulo tem requisito explícito - "bem pequeno mas ainda visível"
   - então fica FORA da camada mascarada.
   ⚠️ Teto de opacidade .70, e o número tem conta: o texto preto por baixo do
   carimbo (multiply) fica em 5.30:1 com .62, 4.60:1 com .70 e cai para 3.98:1
   com .78. Acima de .70 o carimbo atrapalha a leitura de verdade. Não subir.
   O SVG da máscara leva dimensão EXPLÍCITA, senão o Gecko descarta o filtro e
   a máscara vira um retângulo opaco. */
.conteudo .det-carimbo .moldura{
  display:block; opacity:.70; mix-blend-mode:multiply;
  padding:clamp(10px,2.4vw,20px) clamp(14px,4vw,30px) clamp(16px,3.4vw,26px);
  border-style:solid; border-color:var(--carimbo-tinta);
  border-width:3.5px 5px 4.5px 3px;                       /* espessura irregular */
  border-radius:17px 12px 19px 13px / 13px 18px 12px 17px;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='4.2' intercept='-0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23w)'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='w' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='4.2' intercept='-0.28'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size:320px 320px; mask-size:320px 320px;
  -webkit-mask-repeat:repeat;    mask-repeat:repeat;
  -webkit-mask-position:18px 42px; mask-position:18px 42px;
}
.conteudo .det-carimbo .txt{
  display:block; text-align:center;
  font-family:var(--font-manchete); font-weight:700; text-transform:uppercase;
  font-size:clamp(25px,6.6vw,50px); line-height:1; letter-spacing:.05em;
  color:var(--carimbo-tinta);
  margin-left:.14em;   /* nem o texto está centrado direito */
  rotate:.7deg;        /* batido torto DENTRO da moldura torta */
}
/* ⚠️⚠️ O RÓTULO FICA FORA DO MULTIPLY, e este é o achado que só o render deu.
   Com o "sterling corp." dentro da camada multiplicada, a cauda dele caía em
   cima de uma palavra do corpo e SUMIA: vermelho multiplicado por tinta preta
   dá preto. ⚠️⚠️ E NÃO TEM HALO - halo da cor do papel APAGA o que estiver
   embaixo (medido: a palavra inteira "se" lavada em 430px). A legibilidade vem
   da COR: o rótulo tem DOIS fundos reais (papel e tinta do corpo) e a tinta foi
   escolhida enumerando os dois - #c54c4e dá 3.74:1 no papel e 3.87:1 sobre o
   texto, praticamente o teto teórico (~4:1) para uma cor única servindo fundos
   opostos. Segue DECORATIVO, e por isso abaixo de 4.5:1 é aceito.
   ⚠️ 12.8px é piso (aqui é Archivo Narrow, nada a ver com o defeito da pixel):
   abaixo disso a cauda do rótulo, ao cruzar palavra, vira mancha. */
.conteudo .det-carimbo .corp{
  position:absolute; right:clamp(20px,4vw,34px); bottom:clamp(9px,1.8vw,16px);
  font-family:var(--font-manchete); font-weight:700;
  font-size:clamp(12.8px,2vw,13.5px); letter-spacing:.045em;
  color:color-mix(in srgb, var(--carimbo-tinta) 78%, var(--papel)); rotate:.4deg;
}

/* IMPRESSÃO: a peça é papel, imprimir é o caso normal. A tarja PRECISA sair
   preta, senão o navegador economiza tinta e imprime a barra vazia - e um
   documento censurado com a barra branca deixa de ser o que é. Não há risco de
   revelar nada: não há nada embaixo. */
@media print{
  .conteudo .det-tarja{background:#000 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .conteudo .det-carimbo{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .conteudo .det-transcricao{overflow:visible}
}

/* ═══════════════════════════════════════════════════════════════════════
   §11 · a TIRINHA DO QUADRADO (porte do mock 18)
   ⛔ NÃO EXISTE DESENHO: retângulo, borda, hachura e posição. O elenco é um
   quadrado e uma sala, e ele NÃO ganha olho, boca nem braço - a graça é ele
   ser um quadrado. ★ A piada é a economia: o quadro 3 é quase pixel-por-pixel
   o quadro 2. Dar um desfecho ao quadro 3 mata a tirinha.
   ═══════════════════════════════════════════════════════════════════════ */
.conteudo .hq3{margin:clamp(10px,2vw,16px) 0}
/* ⚠️ 1 COLUNA OU 3 COLUNAS, NUNCA 2+1: auto-fit daria 2 em cima e 1 embaixo por
   volta de 600px, e a tirinha quebrada em 2+1 perde a leitura da esquerda para
   a direita, que É a piada (o quadro 3 só funciona como repetição do 2). */
.conteudo .hq3 .tira{list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:640px){ .conteudo .hq3 .tira{grid-template-columns:repeat(3,1fr); gap:14px} }
.conteudo .hq3 .tira > li{margin:0}
.conteudo .hq3 figure{margin:0}

/* o painel. As proporções da cena vivem em custom properties: mudar --piso ou
   --parede move chão e parede nos TRÊS quadros de uma vez, e o alinhamento
   entre eles é o que faz o quadro 3 ler como repetição do 2. */
.conteudo .hq3 .cena{
  --piso:29%;      /* altura da faixa de chão */
  --parede:15%;    /* largura da parede da direita */
  --q:25%;         /* lado do quadrado, em % da largura do painel */
  position:relative; aspect-ratio:4/3; overflow:hidden; background:transparent;
}
/* ⚠️ A MOLDURA É UM PSEUDO-ELEMENTO POR CIMA, não a border do .cena: com border
   no próprio .cena os filhos absolutos são pintados DEPOIS dela e a lasca do
   quadro 1 tapava a moldura. Em quadrinho é o contrário - o quadro CORTA o
   personagem. */
.conteudo .hq3 .cena::after{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  border:3px solid var(--tinta-preta);
}
.conteudo .hq3 .chao{
  position:absolute; left:0; right:0; bottom:0; height:var(--piso);
  border-top:3px solid var(--tinta-preta);
  background:repeating-linear-gradient(45deg, #1a161426 0 1.5px, #0000 1.5px 8px);
}
/* a parede: hachura DENSA e no sentido CONTRÁRIO ao do chão. A troca de sentido
   é o que separa os dois planos; com as duas iguais a parede lia como uma
   coluna solta no meio do quadro (visto no render do mock). */
.conteudo .hq3 .parede{
  position:absolute; right:0; top:0; bottom:var(--piso); width:var(--parede);
  border-left:3px solid var(--tinta-preta);
  background:repeating-linear-gradient(135deg, #1a161440 0 2px, #0000 2px 5px);
}
/* o protagonista: chapado, contorno preto de quadrinho. NÃO DAR OLHINHO. */
.conteudo .hq3 .q{
  position:absolute; bottom:var(--piso); width:var(--q); aspect-ratio:1;
  background:var(--tinta-ciano); border:3px solid var(--tinta-preta);
  right:var(--parede);   /* default: encostado na parede */
}
/* a lasca do quadro 1: -76% deixa cerca de um quarto dentro do quadro. Menos e
   ele vira um risco; mais e o silêncio do quadro 1 acaba antes da hora. */
.conteudo .hq3 .q.lasca{right:auto; left:0; translate:-76% 0}
/* o eco do passo anterior: o único jeito de dizer "de novo" sem legenda e sem
   seta. ⚠️ O MIOLO É PAPEL, não transparente: vazado, o rastro passava por
   dentro do eco e os dois viravam uma mancha listrada ilegível. */
.conteudo .hq3 .q.eco{
  background:var(--papel); border:2px dashed var(--tinta-2); z-index:2;
  right:calc(var(--parede) + var(--q) + 20%);
}
/* linhas de velocidade: vocabulário de quadrinho para "ele veio andando" */
.conteudo .hq3 .rastro{
  position:absolute; bottom:var(--piso); height:var(--q);
  right:calc(var(--parede) + var(--q)); left:8%;
  background:repeating-linear-gradient(180deg, var(--tinta-preta) 0 2px, #0000 2px 8px);
  -webkit-mask-image:linear-gradient(90deg, #0000 0%, #000 62%, #000 100%);
          mask-image:linear-gradient(90deg, #0000 0%, #000 62%, #000 100%);
}
/* no quadro 3 o rastro é CURTO e mais denso: ele não veio do outro lado da
   sala, veio do eco ali do lado, com mais vontade e menos espaço. */
.conteudo .hq3 .q3 .rastro{
  left:auto; width:18%;
  background:repeating-linear-gradient(180deg, var(--tinta-preta) 0 2px, #0000 2px 6px);
}
/* o impacto. ⚠️ Traços em ELEMENTO, não em gradiente mascarado: o leque tem que
   sair EXATAMENTE do meio da face direita e nenhum traço pode cair sobre o azul
   (preto sobre #0d5e67 dá 2.4:1 e some). Com elementos rotacionados o ângulo de
   cada traço é escolhido; com gradiente seria sorte.
   ⚠️ O .fx tem o TAMANHO DO QUADRADO (100%/100%) e não zero: é o que deixa o
   comprimento dos traços ser % do lado do quadrado e escalar de 390 a 1200. */
.conteudo .hq3 .fx{
  position:absolute; left:100%; top:0; width:100%; height:100%; z-index:3;
  transform-origin:0 50%; pointer-events:none;
}
.conteudo .hq3 .fx i{
  position:absolute; left:0; top:50%; display:block; height:3px;
  width:var(--len,45%); background:var(--tinta-preta);
  transform-origin:0 50%; rotate:var(--a,0deg); translate:3px -50%;
}
.conteudo .hq3 .fx i:nth-child(1){--a:-74deg; --len:40%}
.conteudo .hq3 .fx i:nth-child(2){--a:-36deg; --len:52%}
.conteudo .hq3 .fx i:nth-child(3){--a:0deg;   --len:34%}
.conteudo .hq3 .fx i:nth-child(4){--a:36deg;  --len:52%}
.conteudo .hq3 .fx i:nth-child(5){--a:74deg;  --len:40%}
/* segundo leque, só no quadro 3: mesma batida, mais uma vez. Não é "mais
   forte", é "de novo" - por isso é igual e só gira um pouco. */
.conteudo .hq3 .fx.bis{rotate:15deg}
.conteudo .hq3 .fx.bis i{--len:30%}
.conteudo .hq3 .fx.bis i:nth-child(2),
.conteudo .hq3 .fx.bis i:nth-child(4){--len:38%}
/* as marcas no chão do quadro 3: dois riscos. Sem seta, sem estrelinha. */
.conteudo .hq3 .marca{
  position:absolute; bottom:calc(var(--piso) - 9px); height:2px; width:9px;
  background:var(--tinta-2); rotate:-14deg;
}
.conteudo .hq3 .marca.a{right:calc(var(--parede) + 3%)}
.conteudo .hq3 .marca.b{right:calc(var(--parede) + 9%); bottom:calc(var(--piso) - 14px); rotate:-24deg}
/* o número do quadro: bloco preto sólido no canto. O fundo real deste texto é
   #1a1614, não o papel - por isso é --papel sobre preto (~15:1). PixelOperator
   a 16px, acima do piso de 15px do defeito de glifo (o "2" vira "Z" abaixo). */
.conteudo .hq3 .num{
  position:absolute; left:0; top:0; z-index:6;   /* acima da moldura (z 5) */
  background:var(--tinta-preta); color:var(--papel);
  font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1;
  padding:5px 8px 6px; letter-spacing:.02em;
}
/* a legenda: FORA do painel, sobre papel limpo. Uma palavra por quadro.
   ★ "sala." / "parede." / "parede.": a terceira é IGUAL à segunda de propósito.
   Não é copy-paste esquecido - é a tirinha inteira. */
.conteudo .hq3 figcaption{
  font-family:var(--font-corpo); font-style:italic; font-size:15px; line-height:1.4;
  color:var(--tinta-2); margin-top:7px;
}
@media print{
  .conteudo .hq3 .tira{grid-template-columns:repeat(3,1fr); gap:10px}
  .conteudo .hq3 .tira > li{break-inside:avoid; page-break-inside:avoid}
  .conteudo .hq3 .cena,.conteudo .hq3 .q,.conteudo .hq3 .chao,
  .conteudo .hq3 .parede,.conteudo .hq3 .rastro,.conteudo .hq3 .num{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §13 · o ENCARTE CENTRAL (porte do mock 19)
   ★ A peça não é o quadrado, é a MOLDURA em volta dele: moldura dupla, marcas
   de corte, cruzes de registro, barra de controle de cor, vinco de dobra e
   ficha técnica. A piada mora na distância entre a pompa e o conteúdo.
   Aumentar o quadrado não melhora a peça; apertar a margem piora.
   ═══════════════════════════════════════════════════════════════════════ */
/* A margem não é respiro estético: é o ESPAÇO ONDE AS MARCAS DE CORTE E AS
   CRUZES DE REGISTRO CABEM (a marca avança 36px além do quadro no desktop e
   26px no estreito; a cruz avança 34px acima). */
/* ⚠️ O ENCARTE OCUPA A SEÇÃO INTEIRA, não a coluna de texto (74ch, presa à
   esquerda). É o mesmo tratamento que o pôster da #2 já recebe: encarte central
   que sentasse na coluna de leitura leria como erro de diagramação, não como
   miolo destacável. A largura é a da folha menos os dois paddings do .edicao.
   ⚠️ NÃO usar 100vw puro: num monitor largo a folha é 1080 e o resto é mesa, e
   o 100vw estouraria para fora da página à direita. */
/* A folga lateral é PADDING (não margin) de propósito: com box-sizing:border-box
   ela cabe DENTRO da largura calculada, então o bloco não estoura a seção. E
   essa folga não é respiro estético - é o espaço onde as marcas de corte e as
   cruzes de registro cabem (a marca avança 36px além do quadro no desktop e
   26px no estreito; a cruz avança 34px acima). */
.conteudo .enc{
  position:relative; box-sizing:border-box;
  width:calc(min(1080px, 100vw) - 2 * clamp(20px,3.5vw,56px));
  margin:clamp(30px,5vw,44px) 0 0;
  padding:0 clamp(20px,3vw,26px);
}
.conteudo .enc .quadro,
.conteudo .enc .credito{position:relative; z-index:1}
/* a moldura: borda grossa de tinta + um filete fino AFASTADO por fora. Duas
   linhas com ar entre elas, como moldura de encarte impressa. border + outline
   de propósito: zero elemento extra, e o outline não entra no box (não empurra
   layout nem cria rolagem lateral). */
.conteudo .enc .quadro{
  border:4px solid var(--tinta-preta);
  outline:1px solid var(--tinta-2); outline-offset:6px;
  padding:clamp(18px,4vw,34px) clamp(14px,3.4vw,28px) clamp(16px,3.6vw,30px);
}
/* marcas de corte. O L ABERTO é o que faz parecer material gráfico de verdade:
   numa prova de gráfica as duas linhas NÃO se tocam no canto, porque o corte
   cai entre elas. Se fecharem em L contínuo, vira "borda decorativa".
   ⚠️ As marcas têm que nascer FORA do filete fino (o outline a 6px): com a
   âncora a 4px os traços cruzavam o filete e os três viravam sujeira de canto.
     --o distância da âncora até a borda · --a onde o traço começa · --l comprimento */
.conteudo .enc .corte{--o:14px; --a:22px; --l:16px; position:absolute; width:0; height:0; z-index:2}
.conteudo .enc .corte::before,
.conteudo .enc .corte::after{content:""; position:absolute; background:var(--tinta-2)}
.conteudo .enc .corte::before{height:1px; width:var(--l)}
.conteudo .enc .corte::after {width:1px;  height:var(--l)}
.conteudo .enc .corte.tl{left:calc(-1*var(--o));  top:calc(-1*var(--o))}
.conteudo .enc .corte.tr{right:calc(-1*var(--o)); top:calc(-1*var(--o))}
.conteudo .enc .corte.bl{left:calc(-1*var(--o));  bottom:calc(-1*var(--o))}
.conteudo .enc .corte.br{right:calc(-1*var(--o)); bottom:calc(-1*var(--o))}
.conteudo .enc .corte.tl::before{left:calc(-1*var(--a));  top:0}
.conteudo .enc .corte.tl::after {left:0;  top:calc(-1*var(--a))}
.conteudo .enc .corte.tr::before{right:calc(-1*var(--a)); top:0}
.conteudo .enc .corte.tr::after {right:0; top:calc(-1*var(--a))}
.conteudo .enc .corte.bl::before{left:calc(-1*var(--a));  bottom:0}
.conteudo .enc .corte.bl::after {left:0;  bottom:calc(-1*var(--a))}
.conteudo .enc .corte.br::before{right:calc(-1*var(--a)); bottom:0}
.conteudo .enc .corte.br::after {right:0; bottom:calc(-1*var(--a))}
@media (max-width:560px){ .conteudo .enc .corte{--o:10px; --a:16px; --l:12px} }
/* cruz de registro: o alvo que a gráfica usa para alinhar as chapas de cor.
   ⚠️ É filha do .quadro, NÃO do .enc: ancorada no .enc, o "bottom" mediria a
   partir do fim do crédito e a cruz de baixo caía em cima dele. */
.conteudo .enc .registro{
  position:absolute; left:50%; width:12px; height:12px; translate:-50% 0; z-index:2;
  border:1px solid var(--tinta-2); border-radius:50%;
}
.conteudo .enc .registro::before,
.conteudo .enc .registro::after{content:""; position:absolute; background:var(--tinta-2)}
.conteudo .enc .registro::before{left:50%; top:-4px; width:1px; height:20px; translate:-50% 0}
.conteudo .enc .registro::after {top:50%; left:-4px; height:1px; width:20px; translate:0 -50%}
.conteudo .enc .registro.topo{top:-30px}
.conteudo .enc .registro.base{bottom:-28px}
/* ★ A ASSIMETRIA É INTENCIONAL: o título empurra para a esquerda e a tarja vai
   para o canto direito, na linha de base da última linha do título.
   Centralizar os dois deixaria a peça com cara de certificado. */
.conteudo .enc .kicker{
  font-family:var(--font-manchete); font-weight:700; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-ciano); margin:0 0 6px;
}
.conteudo .enc .cabeca{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.conteudo .enc .titulo{
  font-family:var(--font-manchete); font-weight:700;
  font-size:clamp(38px,9.4vw,74px); line-height:.86;
  letter-spacing:-.03em; text-transform:uppercase;
  color:var(--tinta-preta); margin:0;
}
/* a tarja invertida é o gesto mais noventista que existe em banca: a chamada
   que grita em negativo. ⚠️ O margin-left:auto É a assimetria, e só importa
   QUANDO QUEBRA: sem ele, ao passar para a linha de baixo a tarja cola na
   margem esquerda e vira um bloco centrado de certificado. */
.conteudo .enc .tarja{
  font-family:var(--font-manchete); font-weight:700;
  font-size:clamp(15px,4vw,24px); letter-spacing:.2em; text-transform:uppercase;
  background:var(--tinta-preta); color:var(--papel);
  padding:5px 12px 6px; white-space:nowrap; margin:0 0 4px auto;
}
/* filete duplo entre o título e a arte: grosso em cima, fino embaixo, com ar no
   meio. É a pontuação gráfica de revista antes de uma prancha. */
.conteudo .enc .filete{
  margin:clamp(14px,2.6vw,22px) 0; height:0;
  border-top:4px solid var(--tinta-preta);
  box-shadow:0 4px 0 var(--papel), 0 5px 0 var(--tinta-preta);
}
/* A CHAPA. Uma chapa. Sem borda, sem sombra, sem gradiente, sem brilho, sem
   contorno, sem nada dentro: chapa de tinta em papel não tem contorno, e quem
   desenha contorno está desenhando um ícone. ⚠️ NÃO DAR OLHINHO.
   width:100% + aspect-ratio:1 garante que ele DOMINA em qualquer largura. */
.conteudo .enc .chapa{position:relative; width:100%; aspect-ratio:1; background:var(--tinta-ciano)}
/* a fibra do papel REENTRA por cima da chapa: tinta impressa não apaga a
   textura do papel embaixo, e sem isto o azul lia como retângulo de tela, não
   como área impressa. Dimensão explícita no SVG (o Gecko descarta filtro sem). */
.conteudo .enc .chapa::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:180px 180px; mix-blend-mode:multiply; opacity:.14;
}
/* ⚠️ O LADO ESCURO DA DOBRA SÓ EXISTE AQUI, e é o guard de contraste da peça.
   A versão anterior do mock tinha um vinco escuro atravessando a folha inteira
   com alpha .19: medido, ele derrubava o texto secundário de 5.97 para 4.11:1
   (REPROVA AA). A varredura mostrou que o teto é .14 e que .14 chega a 4.51,
   margem ZERO - e numa folha velha não há alpha que sirva (--tinta-2 sobre
   --papel-fim já é 4.51 SEM véu). Logo a saída não é achar um alpha simpático:
   é o véu não encostar em texto. Por isso o lado escuro mora DENTRO da chapa,
   a única região sem texto por construção. */
.conteudo .enc .chapa::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:26px;
  translate:-50% 0; pointer-events:none;
  background:linear-gradient(90deg, #0000 0%,
    rgb(10 30 34 / .10) 30%, rgb(10 30 34 / .30) 47%, rgb(10 30 34 / .34) 50%,
    rgb(255 255 255 / .06) 53%, rgb(255 255 255 / .22) 57%,
    rgb(255 255 255 / .07) 74%, #0000 100%);
}
/* ★ A FICHA TÉCNICA é onde a piada mora sem ser dita: "16 x 16 px" é um dado,
   escrito como qualquer ficha escreve dado, e é o único lugar do encarte que
   contradiz o tamanho do que está impresso acima. Nenhuma linha comenta isso,
   e não pode haver. Se alguém acrescentar a piada explícita, apagar. */
.conteudo .enc .ficha{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:10px 0 0;
  font-family:var(--font-manchete); font-weight:700; font-size:12.5px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-2);
}
.conteudo .enc .ficha b{color:var(--tinta-preta)}
/* a barra de controle de cor da gráfica: detalhe de material gráfico de verdade
   e, de graça, uma piada silenciosa (quadradinhos de 11px ao lado do quadrado
   gigante). Não comentar. Decorativa: aria-hidden no HTML. */
.conteudo .enc .barra{display:flex; gap:3px; margin-left:auto}
.conteudo .enc .barra i{display:block; width:11px; height:11px; border:1px solid #00000026}
.conteudo .enc .barra .k{background:var(--tinta-preta)}
.conteudo .enc .barra .c{background:var(--tinta-ciano)}
.conteudo .enc .barra .m{background:var(--tinta-magenta)}
.conteudo .enc .barra .g{background:var(--tinta-2)}
.conteudo .enc .barra .w{background:var(--papel)}
/* o margin-top NÃO é respiro: é o que impede a colisão com a cruz de registro
   da base, que avança 34px abaixo da moldura. Encurtar encavala os dois. */
.conteudo .enc .credito{
  margin:clamp(38px,5vw,48px) 0 0; display:flex; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  font-family:var(--font-manchete); font-weight:700; font-size:11.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-2);
}
.conteudo .enc .credito span:last-child{margin-left:auto}
/* O VINCO DA DOBRA: a assinatura do formato (pôster central vem dobrado dentro
   da revista, e a dobra fica marcada para sempre).
   ⚠️ SOBRE O PAPEL, SÓ A CRISTA DE LUZ. Ele passa por cima de texto, e a
   medição provou que qualquer sombreamento ali reprova AA. Ficou só o lado
   CLARO: ele CLAREIA o papel, e clarear papel AUMENTA o contraste da tinta
   (secundário sobre papel limpo 5.97:1 · sob a crista 6.43:1 - melhora).
   ⚠️ E FICA POR BAIXO DO CONTEÚDO (z-index 0): com z-index alto, esta crista de
   .46 de branco caía POR CIMA da chapa azul e lavava a dobra impressa.
   ⚠️ PORTE: no mock ele atravessava a folha inteira; aqui é confinado ao bloco
   do encarte - a página da edição tem 17 seções e uma dobra cruzando todas
   seria outra peça. */
.conteudo .enc .vinco{
  position:absolute; left:50%; top:0; bottom:0; width:26px; translate:-50% 0;
  z-index:0; pointer-events:none;
  background:linear-gradient(90deg, #0000 0%,
    rgb(255 255 255 / .10) 40%, rgb(255 255 255 / .46) 51%,
    rgb(255 255 255 / .34) 60%, rgb(255 255 255 / .10) 76%, #0000 100%);
}
@media print{
  .conteudo .enc{break-inside:avoid; page-break-inside:avoid}
  .conteudo .enc .chapa,.conteudo .enc .barra i,.conteudo .enc .tarja,
  .conteudo .enc .filete,.conteudo .enc .vinco,
  .conteudo .enc .chapa::before,.conteudo .enc .chapa::after{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §18 · A CAIXA DO BUS VAZIA (o CRT desta edição)
   ═══════════════════════════════════════════════════════════════════════
   O molde declarado da seção é uma TELA DE TUBO mostrando o bus. Nesta edição
   ela está VAZIA, e o vazio É o assunto: em junho de 2026 o canal ainda não
   existia. O trabalho todo da peça é fazer o vazio parecer DELIBERADO em vez
   de quebrado — e a diferença entre as duas coisas é FORMA:

     tela quebrada = área em branco, sem explicação
     tela vazia    = a tabela EXISTE (cabeçalho de coluna + as duas réguas),
                     o programa rodou, o contador diz ZERO, e o cursor volta
                     ao prompt esperando o próximo comando.

   Ou seja: o esqueleto da listagem é o que prova que não houve erro. Uma
   caixa de entrada vazia num terminal tem esse desenho exato.

   ★ E o comando aparece DUAS VEZES, com a mesma saída. É o "conferi duas
   vezes" do texto virando imagem, sem uma palavra a mais. Não mexer: repetir
   é a peça.

   ⛔ A ARTE NÃO EXPLICA A PIADA, e não pode: nada de fantasma, nada de
   ônibus. O leitor liga sozinho com o Cemitério (§07) desta mesma edição.

   Reusa o tijolo da casa (.crt-scr carcaça + .crt-tela tubo), como a §17 e a
   HQ da #1 — não é uma segunda família de CRT. Tudo escopado em .bus-crt.
   ZERO JS · ZERO <img> · ZERO SVG figurativo: é caixa, régua e texto.
   A FONTE é a ui-monospace herdada do .crt-tela, não a pixel: escapa por
   inteiro do guard N->H (o cabeçalho é "DE/ASSUNTO/QUANDO", em maiúsculas).
   ═══════════════════════════════════════════════════════════════════════ */
.conteudo .bus-crt{margin:clamp(14px,2.4vw,20px) 0 clamp(16px,2.6vw,22px)}

/* respiro entre as linhas do terminal (o .crt-tela zera a margem dos <p>) */
.conteudo .bus-crt .cmd{margin:0 0 10px}
.conteudo .bus-crt .cmd + .cmd{margin-top:14px}

/* a LISTAGEM. As duas réguas (uma sob o cabeçalho, outra sobre o contador)
   são o que dá contorno ao vão: sem elas o vazio vira buraco. Verde apagado
   porque são FILETE, não texto — a informação está no cabeçalho e no zero. */
.conteudo .bus-crt .cx{margin:0 0 4px}
/* ⚠️ AS COLUNAS SÃO FIXAS E SOBRA BRANCO À DIREITA, e isto é o desenho, não
   descuido: no primeiro render a última coluna era 1fr e o "QUANDO" ia parar
   na borda oposta da tela, com um vão de meia tela entre ele e o "ASSUNTO" —
   lia como cabeçalho esticado/quebrado, exatamente o que a peça não pode
   parecer. Listagem de terminal de verdade (ls -l, docker ps) tem largura de
   coluna fixa e deixa o resto da linha em branco. As RÉGUAS, essas sim,
   atravessam a largura inteira: são elas que dão contorno ao vão. */
.conteudo .bus-crt .cab{
  display:grid; grid-template-columns:7ch 22ch 10ch;
  line-height:1.4;   /* o 1.75 do .crt-tela descolava a régua do rótulo */
  padding:0 0 6px; border-bottom:1px solid #35895f;
  color:#6cc79b; text-shadow:none; letter-spacing:.04em;
}
/* o VÃO: as mensagens caberiam aqui. O espaço é generoso de propósito —
   apertá-lo faria a tabela parecer cortada em vez de desocupada. */
.conteudo .bus-crt .nada{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(58px,11vw,84px); padding:10px 8px;
  border-bottom:1px solid #35895f;
  color:#6cc79b; text-shadow:none;
}
/* o CONTADOR EM ZERO: é ele que transforma "não veio nada" em fato apurado.
   Fica no fósforo cheio (não no apagado) porque é a resposta da tela. */
/* ⚠️ A SAÍDA DA MÁQUINA NÃO TEM GLOW, e a divisão é semântica, não estética:
   o que o Gus DIGITOU (as linhas de comando) fica no fósforo com brilho, como
   em toda a revista; o que a MÁQUINA RESPONDEU (cabeçalho, vão e contador)
   vem com text-shadow:none. Isso agrupa a listagem numa coisa só e separa-a
   dos comandos — e é o que faz o vazio ler como resposta em vez de sobra.
   Medido no Gecko: o blur de 6-7px sobre monospace denso funde os halos numa
   FAIXA retangular clara por cima da linha inteira (no Blink o mesmo CSS já
   sai suave — por isso a regra da casa é verificar no Gecko). Nas linhas de
   comando a faixa é a assinatura herdada do .crt-tela e fica; aqui, onde o
   leitor precisa contar o zero, ela sai. */
.conteudo .bus-crt .conta{margin:6px 0 0; color:#5dfc9a; text-shadow:none}
.conteudo .bus-crt .conta .z{color:#8affc0}

/* a segunda rodada: respiro ANTES (é outro comando, outra vez) e a saída
   colada DEPOIS (o resultado é idêntico, e é a repetição que carrega o
   sentido). Sem o respiro, as duas rodadas viravam um bloco só. */
.conteudo .bus-crt .cmd.de-novo{margin:16px 0 4px}

/* o prompt final com o cursor: a tela está viva, esperando. É o oposto de
   uma tela travada, e é aqui que "deliberado" se fecha. */
.conteudo .bus-crt .fim{margin:14px 0 0}

/* a legenda, FORA do tubo, sobre papel: mesma família da .hq3 */
.conteudo .bus-crt figcaption{
  font-family:var(--font-corpo); font-style:italic; font-size:15px; line-height:1.4;
  color:var(--tinta-2); margin-top:7px;
}

/* ESTREITO: a coluna do meio some. A 390px o "ASSUNTO" espremido entre as
   outras duas ficava com 2 caracteres úteis e a régua parecia rachada; com
   duas colunas o cabeçalho respira e continua dizendo que é uma tabela. */
@media (max-width:560px){
  .conteudo .bus-crt .cab{grid-template-columns:7ch 10ch}
  .conteudo .bus-crt .cab .assunto{display:none}
}

/* IMPRESSO: a peça tem que dizer a mesma coisa parada e em papel.
   O cursor perde o pisca e fica SÓLIDO (continua sendo o cursor no prompt),
   e as cores do tubo são preservadas — como as outras peças da #3 fazem. */
@media print{
  .conteudo .bus-crt{break-inside:avoid; page-break-inside:avoid}
  .conteudo .bus-crt .crt-scr,
  .conteudo .bus-crt .crt-tela,
  .conteudo .bus-crt .crt-tela::after,
  .conteudo .bus-crt .cab,
  .conteudo .bus-crt .nada,
  .conteudo .bus-crt .crt-cur{
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
  }
  .conteudo .bus-crt .crt-cur{animation:none; opacity:1}
}
/* MOTION REDUZIDO: o pisca some, o cursor FICA (a informação é que a tela
   está no prompt, não o piscar). O bloco global da linha ~1996 já zera a
   animação; isto é o guard explícito da peça, para o dia em que alguém mexer
   naquele bloco sem lembrar desta. */
@media (prefers-reduced-motion: reduce){
  .conteudo .bus-crt .crt-cur{animation:none; opacity:1}
}