/* ============================================================================
   ~grec — A TRAJETÓRIA EM PRANCHAS (rodada 7e, specs/rodada-7e-eye-candy.md)

   A crítica de 28/09 sobre a página da rodada 7d: "a página tá muito textual [...] não tem uma
   imagem, um link, um case do meu trabalho [...] parece que tá lendo meu LinkedIn". O caminho
   sinuoso (caminho.css/.js, aposentados aqui) sai; cada parada vira uma PRANCHA de revista:

   - a gravura solta, sem caixa (alfa real desde esta rodada: o papel das gravuras virou
     transparência — site/_orfas/halo/halo.py);
   - uma COLAGEM de artefatos reais em grade quebrada (molde atlas-tecnicas
     `grade-css-moderna`: tipografia-layout-grade.html, grades "quebrada" e "colagem"):
     recortes em papel girados à mão (--r), telas e capas em preto e branco, fotos de prêmio e
     de evento em meio-tom de pontos (a retícula dos cartazes, pré-processada em gerar.py);
     cada recorte com legenda e link, e a cor volta ao passar o mouse;
   - o número do dado principal em JetBrains Mono, vermelho — o único acento da prancha;
   - a citação de imprensa em Newsreader, quando há; os feitos como lista curta.

   Grade (derivada do suporte de origem, a revista): 12 colunas. Prancha GRANDE sangra a tela
   (largura toda, altura mínima de uma tela), com a fase em lombada vertical na margem; MEIA
   prancha fica na largura da página. Lados alternados (a = gravura à esquerda, b = à direita);
   entre as grandes, uma em cada duas troca o fundo para tinta (no tema escuro, o inverso:
   papel) — profundidade por troca de fundo.

   Pisos (GREC-0035): a marcação já é a composição final. A revelação por rolagem só existe em
   @supports (animation-timeline: view()) + prefers-reduced-motion: no-preference, ou pelo
   reforço de trajetoria.js (que só esconde depois de confirmar IntersectionObserver). Sem JS,
   com movimento reduzido, na impressão: tudo visível. 390 px: uma coluna recomposta (não a
   de 1440 espremida), colagem em duas, sem rolagem lateral (overflow-x: clip).
   ============================================================================ */

.pranchas { --gut: clamp(20px, 4.4vw, 72px); overflow-x: clip; }

/* ------------------------------------------------------------------ índice */
.pranchas__indice { border-bottom: var(--border); }
.pranchas__indice ol {
  list-style: none; margin: 0 auto; padding: var(--s-5) 0 var(--s-6);
  width: min(100% - 2 * var(--s-5), var(--page));
  columns: 4 13rem; column-gap: var(--s-6);
}
.pranchas__indice li { break-inside: avoid; }
.pranchas__indice a {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: var(--s-3);
  padding-block: 6px; font-size: var(--t-sm); line-height: 1.3; color: var(--fg); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pranchas__indice a span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-muted); font-variant-numeric: tabular-nums; padding-top: 2px; }
.pranchas__indice a:hover { color: var(--brand); }
.pranchas__indice a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ prancha */
.prancha {
  --pr-bg: var(--bg); --pr-fg: var(--fg); --pr-body: var(--fg-body); --pr-mute: var(--fg-muted);
  --pr-acc: var(--brand); --pr-rule: var(--rule);
  position: relative; background: var(--pr-bg); color: var(--pr-fg);
  scroll-margin-top: var(--altura-topo);
}
.prancha + .prancha { border-top: 1px solid var(--pr-rule); }
.prancha__grade {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(12px, 1.6vw, 28px); row-gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}
.prancha__grade > * { min-width: 0; }
.prancha--grande .prancha__grade {
  padding: clamp(72px, 11vh, 140px) var(--gut) clamp(64px, 10vh, 120px);
  min-height: 100vh; min-height: 100svh; align-content: center;
}
.prancha--meia .prancha__grade {
  width: min(100% - 2 * var(--s-5), var(--page)); margin-inline: auto;
  padding-block: clamp(56px, 8vh, 104px);
}

/* fundo de tinta (uma em cada duas grandes) — e o inverso no tema escuro */
.prancha--tinta {
  --pr-bg: var(--ink-800); --pr-fg: #f4f1f1; --pr-body: #d3cccd; --pr-mute: #aaa2a4;
  --pr-acc: var(--brand-lift); --pr-rule: #3a3436;
}
.prancha--tinta .arte img { filter: invert(1) hue-rotate(180deg); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .prancha--tinta {
    --pr-bg: #f4f1f1; --pr-fg: var(--ink-800); --pr-body: var(--ink-600); --pr-mute: #6a6164;
    --pr-acc: var(--cin-red); --pr-rule: var(--hairline);
  }
  :root:not([data-tema="claro"]) .prancha--tinta .arte img { filter: none; mix-blend-mode: multiply; }
}
:root[data-tema="escuro"] .prancha--tinta {
  --pr-bg: #f4f1f1; --pr-fg: var(--ink-800); --pr-body: var(--ink-600); --pr-mute: #6a6164;
  --pr-acc: var(--cin-red); --pr-rule: var(--hairline);
}
:root[data-tema="escuro"] .prancha--tinta .arte img { filter: none; mix-blend-mode: multiply; }

/* ------------------------------------------------------------------ peças de texto */
.prancha__cab { position: relative; z-index: 3; }
.prancha__nome {
  font-family: var(--font-display); font-weight: 800; color: var(--pr-fg);
  font-size: clamp(2.5rem, 0.9rem + 4.9vw, 6.6rem); line-height: .92; letter-spacing: -0.04em;
  text-wrap: balance; margin: 0;
}
.prancha--meia .prancha__nome { font-size: clamp(2rem, 0.9rem + 2.7vw, 3.8rem); }
.prancha__nome a { color: inherit; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; text-decoration-color: transparent; transition: text-decoration-color .3s ease; }
.prancha__nome a:hover, .prancha__nome a:focus-visible { text-decoration-color: var(--pr-acc); }
.prancha__anos { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--pr-mute); margin-top: var(--s-4); font-variant-numeric: tabular-nums; }
.prancha__papel { font-family: var(--font-serif); font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); line-height: 1.32; color: var(--pr-body); margin-top: var(--s-3); max-width: 30ch; }

.prancha__dado { position: relative; z-index: 3; margin: 0; }
.prancha__num {
  display: block; font-family: var(--font-mono); font-weight: 500; color: var(--pr-acc);
  font-size: clamp(4.6rem, 1rem + 10vw, 12.5rem); line-height: .8; letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.prancha--meia .prancha__num { font-size: clamp(3.6rem, 1rem + 6vw, 7.5rem); }
/* número com unidade ("€ 2,3 mi", "2 milhões"): escala menor, para caber na coluna de texto */
.prancha__num.prancha__num--longo { font-size: clamp(3rem, 1rem + 5.2vw, 7.6rem); letter-spacing: -0.05em; white-space: normal; }
.prancha--meia .prancha__num.prancha__num--longo { font-size: clamp(2.4rem, 0.8rem + 3.3vw, 4.4rem); }
.prancha__num-rot { display: block; max-width: 24ch; margin-top: var(--s-4); font-size: var(--t-sm); line-height: 1.4; color: var(--pr-body); }

.prancha__cit { margin: 0; padding: 0; border: 0; position: relative; z-index: 3; max-width: 26ch; font-size: inherit; font-style: normal; }
.prancha__cit p {
  font-family: var(--font-serif); font-style: italic; font-weight: 300; color: var(--pr-fg);
  font-size: clamp(1.6rem, 1rem + 1.9vw, 3rem); line-height: 1.08; letter-spacing: -0.01em;
  position: relative;
}
.prancha__cit p::before { content: "\201C"; position: absolute; right: 100%; }
.prancha__cit p::after { content: "\201D"; }
.prancha__cit--longa { max-width: 34ch; }
.prancha__cit--longa p { font-size: clamp(1.3rem, 0.9rem + 1.1vw, 2.05rem); line-height: 1.16; }
.prancha__cit footer { margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--pr-mute); }
.prancha__cit cite { font-style: normal; color: var(--pr-fg); }
.prancha__cit a { color: inherit; }

.prancha__feitos { list-style: none; margin: 0; padding: 0; position: relative; z-index: 3; border-top: 2px solid var(--pr-fg); }
.prancha__feitos li { font-size: var(--t-sm); line-height: 1.5; color: var(--pr-body); padding: .75em 0; border-bottom: 1px solid var(--pr-rule); max-width: 60ch; }

.prancha__fase {
  position: absolute; left: calc(var(--gut) / 2 - .5em); top: clamp(72px, 11vh, 140px);
  writing-mode: vertical-rl; rotate: 180deg; margin: 0;
  font-family: var(--font-mono); font-size: var(--t-xs); color: var(--pr-mute); white-space: nowrap;
}
.prancha--b .prancha__fase { left: auto; right: calc(var(--gut) / 2 - .5em); rotate: none; }
.prancha__fase span { color: var(--pr-acc); }

/* ------------------------------------------------------------------ gravura */
.prancha__gravura { position: relative; z-index: 1; pointer-events: none; }
.prancha__gravura img { display: block; width: 100%; height: auto; }

/* ============================================================ GRANDE: 1440 */
@media (min-width: 900px) {
  /* a: gravura à esquerda, colagem descendo pela direita (sobre a borda da gravura); citação e
     feitos sob a gravura, preenchendo a coluna enquanto a colagem desce. b: espelho. */
  .prancha--grande .prancha__grade { grid-template-rows: auto auto auto 1fr; }
  .prancha--grande.prancha--a .prancha__cab   { grid-column: 1 / 8;  grid-row: 1; }
  .prancha--grande.prancha--a .prancha__dado  { grid-column: 8 / 13; grid-row: 1; justify-self: end; text-align: right; align-self: end; }
  .prancha--grande.prancha--a .prancha__dado .prancha__num-rot { margin-left: auto; }
  .prancha--grande.prancha--a .prancha__gravura { grid-column: 1 / 9;  grid-row: 2; margin-top: -2vw; margin-left: -1.5vw; }
  .prancha--grande.prancha--a .colagem        { grid-column: 7 / 13; grid-row: 2 / 5; margin-top: 3vw; }
  .prancha--grande.prancha--a .prancha__cit   { grid-column: 2 / 7;  grid-row: 3; margin-top: -1vw; }
  .prancha--grande.prancha--a .prancha__feitos{ grid-column: 1 / 7;  grid-row: 4; }

  .prancha--grande.prancha--b .prancha__cab   { grid-column: 6 / 13; grid-row: 1; }
  .prancha--grande.prancha--b .prancha__dado  { grid-column: 1 / 6;  grid-row: 1; align-self: end; }
  .prancha--grande.prancha--b .prancha__gravura { grid-column: 5 / 13; grid-row: 2; margin-top: -2vw; margin-right: -1.5vw; }
  .prancha--grande.prancha--b .colagem        { grid-column: 1 / 7;  grid-row: 2 / 5; margin-top: 3vw; }
  .prancha--grande.prancha--b .prancha__cit   { grid-column: 7 / 12; grid-row: 3; margin-top: -1vw; }
  .prancha--grande.prancha--b .prancha__feitos{ grid-column: 7 / 13; grid-row: 4; }

  /* sem citação: os feitos sobem para logo abaixo da gravura */
  .prancha--grande:not(:has(.prancha__cit)).prancha--a .prancha__feitos { grid-row: 3 / 5; }
  .prancha--grande:not(:has(.prancha__cit)).prancha--b .prancha__feitos { grid-row: 3 / 5; }
  .prancha--grande .prancha__feitos { columns: 2; column-gap: var(--s-6); border-top: 0; }
  .prancha--grande .prancha__feitos li { break-inside: avoid; border-top: 1px solid var(--pr-rule); border-bottom: 0; }

  /* ======================================================== MEIA: 1440 */
  /* meia prancha: o texto numa coluna estreita (1–5) e a gravura com a colagem colada a ele
     (5–13), a colagem subindo sobre a base da gravura — sem meia prancha vazia (crítica 7e, 7) */
  .prancha--meia.prancha--b .prancha__cab     { grid-column: 1 / 5;  grid-row: 1; }
  .prancha--meia.prancha--b .prancha__dado    { grid-column: 1 / 5;  grid-row: 2; }
  .prancha--meia.prancha--b .prancha__feitos  { grid-column: 1 / 5;  grid-row: 3 / 7; }
  .prancha--meia.prancha--b .prancha__gravura { grid-column: 5 / 13; grid-row: 1 / 3; }
  .prancha--meia.prancha--b .colagem          { grid-column: 5 / 12; grid-row: 3 / 5; margin-top: -7vw; }
  .prancha--meia.prancha--b .prancha__cit     { grid-column: 6 / 12; grid-row: 5; }

  .prancha--meia.prancha--a .prancha__cab     { grid-column: 9 / 13; grid-row: 1; }
  .prancha--meia.prancha--a .prancha__dado    { grid-column: 9 / 13; grid-row: 2; }
  .prancha--meia.prancha--a .prancha__feitos  { grid-column: 9 / 13; grid-row: 3 / 7; }
  .prancha--meia.prancha--a .prancha__gravura { grid-column: 1 / 9;  grid-row: 1 / 3; }
  .prancha--meia.prancha--a .colagem          { grid-column: 2 / 9;  grid-row: 3 / 5; margin-top: -7vw; }
  .prancha--meia.prancha--a .prancha__cit     { grid-column: 2 / 8;  grid-row: 5; }

  /* meia sem gravura (empresa sem gravura encomendada): a colagem ocupa o lugar dela */
  .prancha--meia.prancha--sem-gravura .colagem { grid-row: 1 / 5 !important; margin-top: 0; }
  /* sem colagem: a gravura desce para ocupar o lugar */
  .prancha--sem-colagem .prancha__gravura { grid-row: 1 / 5 !important; }
}

/* ------------------------------------------------------------------ COLAGEM */
.colagem {
  list-style: none; margin: 0; padding: 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: clamp(10px, 1.2vw, 18px); row-gap: clamp(10px, 1.2vw, 18px); align-items: start;
}
.peca { position: relative; rotate: var(--r, 0deg); grid-column: span 3; }
/* posições: grade quebrada — sobreposição por coluna compartilhada, degraus por margem */
/* Tamanhos alternados (4+2, 2+4, 3+3 colunas) e degraus por margem. A sobreposição é só de
   canto (margem negativa pequena, peça seguinte POR BAIXO da anterior): cobre o papel da borda,
   nunca a legenda de outra peça. */
.colagem .peca--i1 { grid-column: 1 / 5; grid-row: 1; z-index: 6; }
.colagem .peca--i2 { grid-column: 5 / 7; grid-row: 1; margin-top: clamp(40px, 5vw, 88px); margin-left: -14px; z-index: 5; }
.colagem .peca--i3 { grid-column: 1 / 3; grid-row: 2; margin-top: clamp(16px, 2vw, 32px); z-index: 4; }
.colagem .peca--i4 { grid-column: 3 / 7; grid-row: 2; margin-left: -14px; margin-top: -8px; z-index: 3; }
.colagem .peca--i5 { grid-column: 1 / 4; grid-row: 3; margin-top: 8px; z-index: 2; }
.colagem .peca--i6 { grid-column: 4 / 7; grid-row: 3; margin-top: clamp(28px, 3vw, 56px); margin-left: -14px; z-index: 1; }
.colagem--n1 .peca--i1 { grid-column: 1 / -1; }
.colagem--n2 .peca--i1 { grid-column: 1 / 5; }
.colagem--n2 .peca--i2 { grid-column: 3 / 7; grid-row: 2; margin-top: -8px; margin-left: 0; }
.colagem--n3 .peca--i3 { grid-column: 2 / 6; }
.colagem--n5 .peca--i5 { grid-column: 2 / 6; }
.peca--retrato { justify-self: center; width: 78%; }
.peca--pequena .peca__alvo { max-width: var(--max); }
.peca--pequena { justify-self: start; }
/* sem número (IMPA, Sony): o artefato mais forte em tamanho grande, 6 colunas */
.prancha--destaque .colagem .peca--i1 { grid-column: 1 / -1; width: auto; }
.prancha--destaque .colagem .peca--i2 { grid-column: 1 / 4; grid-row: 2; margin: 0; }
.prancha--destaque .colagem .peca--i3 { grid-column: 4 / 7; grid-row: 2; margin: 24px 0 0 -14px; }
.prancha--espelho .prancha__gravura img { transform: scaleX(-1); }

.peca__alvo {
  display: block; position: relative; background: #fffdfb; color: #231f20; text-decoration: none;
  padding: clamp(6px, .6vw, 10px) clamp(6px, .6vw, 10px) 10px;
  box-shadow: 0 1px 1px rgba(35, 31, 32, .14), 0 14px 22px -6px rgba(35, 31, 32, .24);
  transition: rotate .35s cubic-bezier(.2, .8, .2, 1), scale .35s cubic-bezier(.2, .8, .2, 1);
}
.prancha--tinta .peca__alvo { box-shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 16px 24px -6px rgba(0, 0, 0, .5); }
a.peca__alvo:hover, a.peca__alvo:focus-visible { rotate: calc(-1 * var(--r, 0deg)); scale: 1.035; z-index: 9; }
.peca:has(a.peca__alvo:hover), .peca:has(a.peca__alvo:focus-visible) { z-index: 9; }
a.peca__alvo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.peca__img { display: block; overflow: hidden; background: #fff; }
.peca__img img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.12) brightness(1.02); transition: filter .5s ease; }
a.peca__alvo:hover .peca__img img, a.peca__alvo:focus-visible .peca__img img { filter: none; }
.peca--reticula .peca__img img, a.peca__alvo:hover .peca--reticula img { filter: none; }
/* telas e recortes: um fio de meio-tom por cima, para conversar com a retícula das fotos */
.peca:not(.peca--reticula) .peca__img { position: relative; }
.peca:not(.peca--reticula) .peca__img::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .1;
  background: radial-gradient(circle at 50% 50%, #231f20 0 28%, transparent 30%) 0 0 / 4px 4px;
  transition: opacity .5s ease;
}
a.peca__alvo:hover .peca__img::after, a.peca__alvo:focus-visible .peca__img::after { opacity: 0; }

/* fita crepe nos recortes de jornal */
.peca--fita .peca__alvo::before {
  content: ""; position: absolute; z-index: 2; left: 50%; top: -10px; width: 34%; min-width: 56px; height: 20px;
  translate: -50% 0; rotate: calc(-2 * var(--r, 0deg) - 2deg);
  background: rgba(224, 225, 224, .78); box-shadow: 0 1px 1px rgba(35, 31, 32, .12);
}

.peca__leg { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-3); margin-top: 8px; font-size: 12.5px; line-height: 1.35; }
.peca__leg b { grid-column: 1 / -1; order: 1; font-family: var(--font-text); font-weight: 600; font-size: 13px; color: #231f20; }
.peca__leg > span:not(.peca__tipo) { grid-column: 1 / -1; order: 2; color: #554d50; }
.peca__tipo { order: 3; font-family: var(--font-mono); font-size: 11px; color: #6d6467; margin-top: 4px; white-space: nowrap; }
.peca__alvo { hyphens: manual; word-break: normal; overflow-wrap: normal; }
.peca__leg time { order: 4; font-family: var(--font-mono); font-size: 11px; color: #6d6467; margin-top: 4px; font-variant-numeric: tabular-nums; }

/* notas sem imagem: case (número) e capa tipográfica (publicação/prêmio sem foto) */
.peca__nota { display: block; padding: clamp(10px, 1.2vw, 18px) clamp(8px, 1vw, 14px) 6px; border-top: 3px solid #231f20; }
.peca__num { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(2.2rem, 1rem + 2.4vw, 3.6rem); line-height: .9; letter-spacing: -0.05em; color: var(--cin-red); }
.peca__num.peca__num--longo { font-size: clamp(1.6rem, 1rem + 1.3vw, 2.4rem); white-space: nowrap; }
.peca__frase { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; color: #3a3436; }
.peca__capa { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.4rem, 1rem + 1vw, 2rem); line-height: 1.05; color: #231f20; padding-block: 18px 28px; }
.peca--nota .peca__leg b { display: none; }
.peca--case .peca__leg b { display: block; }

/* ============================================================ CELULAR (< 900) */
@media (max-width: 899.98px) {
  /* no celular o índice vira uma régua que corre de lado (rolagem só dentro dela), para a
     primeira prancha — a tese — entrar na primeira tela */
  .pranchas__indice ol {
    columns: auto; display: flex; gap: var(--s-4); width: auto; margin: 0;
    padding: var(--s-3) var(--s-5); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--s-5);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .pranchas__indice ol::-webkit-scrollbar { display: none; }
  .pranchas__indice li { flex: none; scroll-snap-align: start; }
  .pranchas__indice a { grid-template-columns: auto; gap: 0; font-size: 13px; padding-block: 4px; min-height: var(--alvo-min); align-content: center; white-space: nowrap; }
  .pranchas__indice a span { font-size: 11px; }

  .prancha__grade { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: var(--s-5); }
  .prancha--grande .prancha__grade { min-height: 0; padding: var(--s-8) var(--s-5) var(--s-7); }
  .prancha--meia .prancha__grade { width: auto; padding: var(--s-7) var(--s-5); }
  .prancha__grade > * { grid-column: 1 / -1; }
  .prancha__fase { display: none; }
  .prancha__cab { order: 1; }
  .prancha__dado { order: 2; }
  .prancha__gravura { order: 3; margin-inline: calc(-1 * var(--s-5)); margin-top: calc(-1 * var(--s-3)); }
  .prancha--meia .prancha__gravura { margin-inline: 12% calc(-1 * var(--s-5)); }
  .colagem { order: 4; margin-top: calc(-1 * var(--s-6)); }
  .prancha__cit { order: 5; }
  .prancha__feitos { order: 6; }
  .prancha__nome { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .prancha--meia .prancha__nome { font-size: clamp(2rem, 9vw, 2.8rem); }
  .prancha__num { font-size: clamp(4.2rem, 24vw, 7rem); }
  .prancha--meia .prancha__num { font-size: clamp(3.4rem, 19vw, 5.4rem); }
  .prancha__num.prancha__num--longo, .prancha--meia .prancha__num.prancha__num--longo { font-size: clamp(2.6rem, 13vw, 3.8rem); }

  .colagem { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 14px; }
  .colagem .peca { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; rotate: calc(var(--r, 0deg) * .6); }
  .colagem .peca--i1 { grid-column: 1 / -1 !important; width: 92%; }
  .colagem .peca:nth-child(2n+3) { margin-top: 22px !important; }
  .colagem--n2 .peca--i2 { grid-column: 2 !important; margin-top: -18px !important; }
  .colagem .peca:last-child:nth-child(even) { grid-column: 1 / -1 !important; width: 78%; justify-self: end; }
  .colagem .peca.peca--retrato { grid-column: 1 / -1 !important; width: 68%; justify-self: center; }
  .peca__leg { font-size: 11.5px; }
  .peca__leg b { font-size: 12px; }
}

/* ================================================= REVELAÇÃO POR ROLAGEM (CSS) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .prancha .peca {
      animation: peca-cola linear both; animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    .prancha__num { animation: num-sobe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .prancha__gravura img { animation: gravura-deriva linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes peca-cola {
  /* só posição, giro e escala: o recorte nunca fica invisível à espera da rolagem */
  from { translate: 0 64px; rotate: calc(var(--r, 0deg) * 4); scale: .92; }
  to   { translate: 0 0; }
}
@keyframes num-sobe {
  from { translate: -.18em 0; letter-spacing: -0.12em; }
  to   { translate: 0 0; }
}
@keyframes gravura-deriva {
  from { translate: 0 -3%; }
  to   { translate: 0 3%; }
}

/* reforço sem animation-timeline (Safari/Firefox): trajetoria.js marca .pr-js e .visto */
@media (prefers-reduced-motion: no-preference) {
  .pr-js .peca, .pr-js .prancha__num { transition: opacity .7s cubic-bezier(.2, .8, .2, 1), translate .7s cubic-bezier(.2, .8, .2, 1); }
  .pr-js .peca:not(.visto) { opacity: 0; translate: 0 40px; }
  .pr-js .prancha__num:not(.visto) { opacity: 0; translate: 0 .2em; }
  .pr-js .peca.visto:nth-child(2) { transition-delay: .08s; }
  .pr-js .peca.visto:nth-child(3) { transition-delay: .16s; }
  .pr-js .peca.visto:nth-child(4) { transition-delay: .24s; }
  .pr-js .peca.visto:nth-child(5) { transition-delay: .32s; }
  .pr-js .peca.visto:nth-child(6) { transition-delay: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .peca__alvo, .peca__img img, .prancha__nome a { transition: none; }
}
@media print {
  .prancha--grande .prancha__grade { min-height: 0; }
  .prancha--tinta { --pr-bg: #fff; --pr-fg: #231f20; --pr-body: #554d50; --pr-acc: #db1e2f; }
  .prancha .peca, .prancha__num, .prancha__gravura img { animation: none !important; opacity: 1 !important; translate: none !important; }
}