.feed {
  padding-top: calc(var(--logo-clearance) + 10px);
  padding-bottom: var(--block-gap);
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
  /* V1.17.2: item flex de `body` (ver base.css) — cresce pra empurrar o
     rodapé pro fim da viewport quando o conteúdo é curto. Inerte em
     `projeto.html`: lá `#conteudo-projeto` (`.feed`) é filho de
     `.projeto-corpo`, não de `body` diretamente, então `flex` não tem
     container flex pra reagir (exceto dentro de `is-projeto-sem-
     galeria`, que já sobrescreve com seu próprio `flex: 1`, ver abaixo). */
  flex: 1;
}

/* =========================================================
   BLOCO
   NUNCA aplicar transform, filter, perspective, backdrop-filter
   ou will-change em .block ou acima. Qualquer uma delas converte
   o position:sticky do título em fixed e o efeito quebra em silêncio.
   ========================================================= */

.block {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: var(--block-width) 1fr;
  column-gap: var(--gutter);
  padding-inline: var(--gutter);
}

.block--right {
  grid-template-columns: 1fr var(--block-width);
}
.block--right .block__main { grid-column: 2; text-align: right; }
.block--right .block__side { grid-column: 1; grid-row: 1; }

.block--center {
  grid-template-columns: 1fr;
  padding-inline: 0;
}

.block__main { grid-column: 1; min-width: 0; }
.block__side { grid-column: 2; grid-row: 1; }

/* ---------- título preso ---------- */

.title {
  position: sticky;
  top: var(--logo-clearance);
  z-index: var(--z-title);
  /* 'wdth' 200 já é o teto do eixo variável da Advent Pro (100..200, ver
     @import em base.css) — não dá pra ir além sem trocar de fonte.
     'wght' subiu pro máximo do eixo (900). */
  font-variation-settings: 'wdth' 200, 'wght' 900;
  font-size: clamp(30px, 5.4vw, 74px);
  line-height: .94;
  letter-spacing: -.01em;
  opacity: 1;
  transition: opacity var(--t-text) ease;
  margin-bottom: var(--title-media-gap);
}

.block--center .title { padding-inline: var(--gutter); text-align: right; }

/* ---------- mídia ---------- */

.media {
  position: relative;
  z-index: var(--z-media);
  overflow: hidden;
  max-height: var(--media-max-h);
  background: var(--placeholder, #d8d5d0);
}

.media.is-missing {
  min-height: clamp(220px, 42vw, 620px);
  display: grid;
  place-items: center;
}

.media.is-missing::before {
  content: 'mídia em produção';
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-size: 14px;
  color: var(--ink-60);
}

.media video,
.media img {
  width: 100%;
  height: 100%;
  max-height: var(--media-max-h);
  object-fit: contain;
  transition: filter .28s ease;
}


/* ---------- efeito de cor, ativo só com painel aberto ----------
   V1.17.3: era duotone (mídia em `grayscale` + overlay `mix-blend-mode:
   darken`) — "tirar o Duotone, deixar apenas a cor com um efeito de
   Multiply em cima": tirou o `filter`, só sobrou o overlay de `--hue`
   com `multiply`.

   V1.17.4: volta o P&B, mas não o duotone de antes — "antes de aplicar
   o efeito de cor no fundo, aplique um efeito de dessaturação (P&B) e
   aumente o contraste." `filter: grayscale(1) contrast(1.3)` na mídia
   de novo (sem o `brightness(.92)` que a V1.6 original tinha — não foi
   pedido, e o `multiply` já escurece sozinho); o overlay continua
   `multiply` (não voltou o `darken` da V1.6). Grão (V1.17.4, "é
   possível?"): `--grain` (`tokens.css`, SVG de ruído) somado ao
   `background` do MESMO `::after`, misturado com `--hue` via
   `background-blend-mode: overlay` — mistura as camadas de fundo desse
   elemento ENTRE SI, antes do `mix-blend-mode: multiply` (que mistura
   o elemento inteiro, já com grão, contra a mídia por baixo) entrar em
   ação. Um pseudo-elemento só, sem `::before` extra — evita problema de
   ordem de pintura (`::before` nasce ANTES do conteúdo real no DOM,
   ficaria atrás da imagem, não por cima). */

.media::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--hue);
  background-image: var(--grain);
  background-size: 200px 200px;
  background-blend-mode: overlay;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

html.is-overlay-open .media video,
html.is-overlay-open .media img { filter: grayscale(1) contrast(1.3); }

html.is-overlay-open .media::after { opacity: 1; }

/* PATCH: bug real — o duotone acima só cobria `.media`, a classe do
   feed/carrossel original. Versões mais recentes trouxeram mídia com
   OUTRAS classes (`.diretor-bio__foto`, a bio do diretor; `.projeto-
   video`, o vídeo de verdade da página de projeto; `.galeria-fotos__
   item`, a grade de fotos) que nunca foram incluídas nessa cobertura —
   ao abrir um painel, essas três ficavam intocadas, sem duotone
   nenhum. Pedido explícito: "o efeito de cor deve cobrir TODOS os
   elementos da página, inclusive as fotos e vídeos. A única coisa que
   fica por cima é o menu, submenu, quem somos e contato." Mesmo par de
   regras do `.media` acima, repetido pros três containers que
   faltavam — os dois lightboxes (foto/vídeo) ficam de fora de
   propósito, mesmo raciocínio de "quem somos"/"contato": são sistemas
   com fundo próprio, deliberadamente fora da cor da sessão (ver seção
   6, "Modal de vídeo"), não esquecidos por descuido como os três
   daqui. */
.diretor-bio__foto,
.projeto-video,
.galeria-fotos__item {
  position: relative;
}

.diretor-bio__foto::after,
.projeto-video::after,
.galeria-fotos__item::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--hue);
  background-image: var(--grain);
  background-size: 200px 200px;
  background-blend-mode: overlay;
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .28s ease;
  pointer-events: none;
}

html.is-overlay-open .diretor-bio__foto img,
html.is-overlay-open .projeto-video img,
html.is-overlay-open .projeto-video video,
html.is-overlay-open .projeto-video iframe,
html.is-overlay-open .galeria-fotos__item img {
  filter: grayscale(1) contrast(1.3);
}

html.is-overlay-open .diretor-bio__foto::after,
html.is-overlay-open .projeto-video::after,
html.is-overlay-open .galeria-fotos__item::after {
  opacity: 1;
}

/* V1.17.7: "as barras ao lado do vídeo são mais escuras que o
   cabeçalho e as linhas da galeria" — `.projeto-video` (diferente de
   `.diretor-bio__foto`/`.galeria-fotos__item`, que não têm padding
   próprio) tem `padding-inline: var(--gutter)` (mais `padding-bottom`
   extra quando `is-projeto-sem-galeria`, ver abaixo); como o `::after`
   usava `inset: 0`, ele cobria a caixa INTEIRA, inclusive esse
   padding — então a faixa de respiro ao lado do vídeo recebia DOIS
   `multiply` empilhados (o do `body`, por baixo, mais o do próprio
   `.projeto-video::after`, por cima, sem nenhuma imagem ali pra
   justificar), ficando mais escura que áreas com um `multiply` só
   (cabeçalho, vão entre linhas da galeria). Fix: inset lateral igual
   ao padding, pra o overlay parar exatamente na borda do vídeo — só
   `--grain`+`--hue` do `body` (uma camada) aparece no respiro. */
.projeto-video::after {
  inset: 0 var(--gutter);
}

html.is-projeto-sem-galeria .projeto-video::after {
  bottom: var(--gutter);
}

/* ---------- alvo de clique pro vídeo real (V8: sem ícone) ----------
   A galeria de fotos passou a viver só na página do projeto (título é o
   único link pra lá — o ícone ao lado do bloco foi removido). Aqui, quando
   o projeto tem `video`, a mídia inteira vira alvo de clique pro modal,
   sem indicação visual — só o cursor e o foco de teclado entregam que é
   clicável. */

.media__play,
.slide__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  cursor: pointer;
}

/* difference garante contraste sobre qualquer mídia por baixo, mesmo
   escura — o mesmo truque das setas do carrossel. */
.media__play:focus-visible,
.slide__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  mix-blend-mode: difference;
}

/* ---------- carrossel ---------- */

.media--carousel {
  overflow: visible;
  background: none;
  max-height: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.block:has(.media--carousel) {
  grid-template-columns: 1fr;
  padding-inline: 0;
}

/* .block--right posiciona .block__main na coluna 2 (ver regra acima na
   seção de BLOCO). Como o carrossel reduz a grid para uma única coluna
   explícita, esse grid-column:2 sobra sem par e o grid cria uma coluna
   implícita extra só para caber o item — o carrossel fica confinado a essa
   coluna implícita em vez de ocupar a largura toda. Força de volta pra
   coluna 1 em qualquer lado. */
.block:has(.media--carousel) .block__main {
  grid-column: 1;
}

.block:has(.media--carousel) .title {
  padding-inline: var(--gutter);
}

.track {
  display: flex;
  align-items: center;
  gap: var(--slide-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-inline: var(--peek);
  /* V1.4: affordance do arrasto por mouse (ver js/carousel-infinite.js) —
     cursor de "mão aberta" em repouso, "mão fechada" durante o arrasto.
     `user-select: none` evita selecionar texto/imagem sem querer no meio
     do gesto (os slides não têm texto, mas evita artefato mesmo assim). */
  cursor: grab;
  user-select: none;
}
.track::-webkit-scrollbar { display: none; }
.track:active { cursor: grabbing; }

.slide {
  position: relative;
  flex: 0 0 var(--slide-width);
  scroll-snap-align: center;
  /* Sem isso, um slide de vídeo/imagem ainda não carregado não tem altura
     intrínseca nenhuma (nem o <video> nem o <img> têm width/height fixos
     no HTML) — o track inteiro colapsa pra altura 0 ou pro tamanho padrão
     do navegador (300×150) até a mídia carregar. Isso torna qualquer
     leitura de geometria logo no 'feed:pronto' (largura do slide,
     scrollIntoView) instável — é a causa do V13 do vídeo em loop "sumir"
     no carregamento. Mesmo valor do placeholder de "mídia em produção". */
  min-height: clamp(220px, 42vw, 620px);
  max-height: var(--media-max-h);
  background: var(--placeholder, #d8d5d0);
  overflow: hidden;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-arrow);
  color: #fff;
  mix-blend-mode: difference;
  font-size: 26px;
  line-height: 1;
  padding: 10px;
}

.arrow--prev { left: calc(var(--peek) / 2 - 22px); }
.arrow--next { right: calc(var(--peek) / 2 - 22px); }
.arrow[hidden] { display: none; }

/* V1.5: setas só aparecem com o mouse por perto — escondidas por padrão,
   reveladas no hover do carrossel inteiro (não teria como só no hover da
   própria seta: ela é pequena, e some assim que o mouse for até ela).
   Escopado a `.media--carousel .arrow` de propósito, não `.arrow`
   sozinho — o lightbox de fotos (`.photo-modal__frame .arrow`, base.css)
   é outro contexto, sem gesto de arrastar nem mouse "passando perto":
   lá as setas continuam sempre visíveis. `:focus-within` garante que
   quem navega por teclado consegue enxergar a seta ao chegar nela (sem
   isso, ela ficaria focável mas invisível — regressão de acessibilidade
   só pra ganhar a revelação por hover). Toque não tem estado de hover
   persistente; sem problema, quem usa toque já arrasta o carrossel
   direto, nunca dependeu das setas. */
.media--carousel .arrow {
  opacity: 0;
  transition: opacity var(--t-text) var(--ease-out);
}

.media--carousel:hover .arrow,
.media--carousel:focus-within .arrow {
  opacity: 1;
}

/* ---------- bloco de pessoa (time) ----------
   Variante do bloco de projeto: mesmo sticky, mesmo hover, mesmo overlay de cor.
   Muda a proporção, porque retrato vertical + bio longa não cabem na
   divisão 82/18 da home — a coluna vazia vira coluna de texto. */

.block--pessoa {
  grid-template-columns: 38vw 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
}
.block--pessoa.block--right {
  grid-template-columns: 1fr 38vw;
}

/* .block__main normalmente é uma célula só, com título e mídia empilhados
   em fluxo normal. O título aqui é um nome (ex. "Ricardo Rapozo") e pode
   quebrar em 1 ou 2 linhas dependendo do nome e da largura — então não dá
   pra alinhar a bio com a foto adivinhando a altura do título em CSS.
   Em vez disso .block__main vira uma subgrid de 2 linhas que espelha as
   linhas do grid externo (linha 1 = altura real do título, linha 2 =
   mídia), e a bio ocupa a linha 2 do grid externo — alinhada exatamente
   onde a mídia começa, seja qual for a altura do título. */
.block--pessoa .block__main {
  grid-row: 1 / 3;
  display: grid;
  grid-template-rows: subgrid;
}
.block--pessoa .title { grid-row: 1; }
.block--pessoa .media { grid-row: 2; }

.block--pessoa .block__side { grid-row: 2; }

.block--pessoa .media { max-height: 78vh; }
.block--pessoa .media img { object-position: top; }

.bio {
  position: sticky;
  top: calc(var(--logo-clearance) + 10px);
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.55;
  color: var(--ink);
}
.bio p + p { margin-top: .9em; }

.block--pessoa.block--right .bio { margin-left: auto; }

/* ---------- galeria do diretor (páginas de bio) ----------
   Mesmo ritmo do .feed da home: um gap entre blocos, sem padding próprio —
   o espaço entre o bloco de pessoa e o primeiro projeto já vem do gap do
   .feed que envolve os dois. */

.galeria {
  display: flex;
  flex-direction: column;
  gap: var(--block-gap);
}

/* ---------- página de diretor: cabeçalho + abas trabalhos/bio (V16) ----------
   O nome do diretor sai de dentro do bloco de pessoa (que tinha uma
   subgrid só pra resolver o alinhamento bio↔foto por causa do título
   variar de 1 a 2 linhas) e vira um cabeçalho de página, centralizado,
   comum às duas abas. Sem título dentro do bloco de bio, não precisa mais
   de subgrid — é só duas colunas simples. Ver js/diretor-tabs.js. */

.diretor-header {
  padding-inline: var(--gutter);
  text-align: center;
}

/* V17.1: nas páginas de diretor, `.feed` (`gap`/`padding-bottom: var(
   --block-gap)`, 72–160px — pensado pra separar BLOCOS inteiros na home)
   também é o espaçamento entre cabeçalho→conteúdo da aba, conteúdo→
   .diretor-voltar e .diretor-voltar→rodapé. Ali dá certo (blocos grandes
   e poucos); aqui, com o cabeçalho de abas e o link de voltar sendo
   elementos pequenos, o mesmo valor cria uma margem "bizarra" — mesma
   causa-raiz já corrigida entre vídeo e galeria em `projeto.html`
   (V1.12/V1.13): reduzir pra `var(--gutter)`, escopado só a essa página
   via `[data-diretor-page]` pra não afetar a home (que usa a mesma
   classe `.feed`, sem esse atributo). */
.feed[data-diretor-page] {
  gap: var(--gutter);
  padding-bottom: var(--gutter);
}

/* V16.1: grande e centralizado nas duas abas — sem variação de tamanho
   por aba. A referência visual tinha o nome grande em trabalhos e em
   bio; a leitura de que ficava menor em trabalhos estava errada. */
.diretor-nome {
  font-variation-settings: 'wdth' 200, 'wght' 900;
  font-size: clamp(48px, 8vw, 108px);
  line-height: .94;
  letter-spacing: -.01em;
}

.diretor-tabs {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 18px;
  font-variation-settings: 'wdth' 175, 'wght' 700;
  font-size: clamp(18px, 1.6vw, 24px);
}

/* V16.1: a linha sob a aba na referência era só o hover capturado no
   print, não um indicador fixo de aba ativa — mesmo princípio do menu
   principal ("Hover — menu" na seção 5: item da página atual não tem
   sublinhado visual, só `aria-current` pra acessibilidade). Reaproveita
   a mesma animação: linha entra pela esquerda no hover/foco, sem nada
   estático marcando qual aba está aberta. */
.diretor-tabs a { position: relative; }

.diretor-tabs a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-text) var(--ease-out);
}

.diretor-tabs a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* V17: a separação de seção passa a ser marcada pelo peso da fonte, não só
   por convenção implícita — pedido explícito pra essa página (diferente do
   menu principal, onde `aria-current` continua sem estilo nenhum). O hover
   acima não muda: a linha entra do mesmo jeito na aba ativa ou não. */
.diretor-tabs a[aria-current='page'] {
  font-variation-settings: 'wdth' 175, 'wght' 900;
}

/* ---------- bio do diretor (aba "bio") ----------
   Duas colunas simples — sem título dentro do bloco, sem subgrid. */

.diretor-bio {
  display: grid;
  grid-template-columns: 38vw 1fr;
  column-gap: var(--gutter);
  padding-inline: var(--gutter);
  align-items: center;
}

.diretor-bio--right { grid-template-columns: 1fr 38vw; }
.diretor-bio--right .diretor-bio__foto { grid-column: 2; grid-row: 1; }
.diretor-bio--right .bio { grid-column: 1; grid-row: 1; margin-left: auto; }

/* V16.2: object-fit:cover + aspect-ratio fixo em vez de contain — a foto
   preenche a coluna inteira (uma "máscara" retangular sobre a imagem
   original, que pode ter enquadramento diferente) em vez de sobrar
   espaço vazio quando a proporção da imagem não bate exatamente com a
   da coluna. align-items:center no grid pai alinha o bloco da foto ao
   centro vertical do bloco de texto, em vez de grudar os dois no topo. */
.diretor-bio__foto img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}

/* V16.2: texto de bio maior e com mais respiro que o `.bio` genérico
   (usado também no time.html) — a referência mostrava um bloco de texto
   claramente maior, não o tamanho "notas de rodapé" que o `.bio` de base
   usa quando é uma coluna sticky ao lado da galeria. Sobrescreve só
   dentro de `.diretor-bio`, sem mexer no time.html. */
.diretor-bio .bio {
  position: static;
  max-width: 44ch;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.6;
}

/* Parágrafo de abertura como uma frase de efeito: maior, em negrito,
   sem aspas no texto (a pontuação de citação virava ruído visual — a
   referência trata a frase como uma epígrafe tipográfica, não uma
   citação entre aspas). Só o primeiro parágrafo, nas duas bios. */
.diretor-bio .bio p:first-child {
  font-weight: 700;
  font-size: clamp(24px, 2.3vw, 32px);
  line-height: 1.3;
  margin-bottom: .85em;
}

/* PATCH: bio de Ricardo Rapozo vira bloco de destaque tipográfico —
   mesma fonte do "quem somos" ('wdth' 200, 'wght' 900, line-height
   .9), numa caixa da largura da página (não mais dividindo a linha
   com a foto) e da altura da foto (calculada a partir da mesma largura/
   aspect-ratio 3/4 da foto, já que os dois elementos empilham em vez
   de ficar lado a lado). Modificador aplicado só em ricardo-rapozo.html
   — `.diretor-bio` genérico (usado por Daniela) e o time.html não
   mudam. Sem parágrafo-epígrafe aqui: as duas regras de
   `.diretor-bio .bio p:first-child`/`.bio p + p` acima são
   sobrescritas abaixo pra tudo usar o mesmo tratamento tipográfico. */
.diretor-bio--destaque {
  align-items: stretch;
}
/* `align-items: stretch` (em vez do `center` herdado de `.diretor-bio`)
   faz `.bio` esticar até a altura da linha do grid — que é a altura da
   foto, já que ela é bem mais alta que duas linhas de texto. É assim
   que a caixa de texto vira "do tamanho da foto" ficando ao lado dela,
   sem precisar calcular a altura por fórmula: o próprio grid resolve. */
.diretor-bio--destaque .bio {
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* `hidden`, não `auto` — o `font-size` abaixo já é calibrado pra
     caber sem estourar (com margem de segurança), mas se algum texto
     mais longo passar 1px do limite, o certo é cortar em silêncio, não
     abrir barra de rolagem numa caixa que devia ser só texto grande. */
  overflow-y: hidden;
  font-family: 'Advent Pro', sans-serif;
  font-variation-settings: 'wdth' 200, 'wght' 900;
  line-height: .9;
  /* Medido por tentativa (busca binária via Playwright): maior
     `font-size` que ainda cabe na altura da coluna sem estourar,
     testado em várias larguras de tela — como a coluna (`1fr`, ao lado
     da foto de 38vw) escala perto de linear com `vw`, um valor fixo em
     `vw` mantém o texto "encostando" nas bordas da caixa em qualquer
     largura de desktop, sem precisar de `clamp()`. Um valor só,
     compartilhado por qualquer bio que use este modificador (Ricardo
     E Daniela, mesma "formatação" pedida) — calibrado pro texto mais
     longo dos dois (o da Daniela, 3 parágrafos, cabia só até ~2.44vw;
     o de Ricardo, 2 parágrafos, até ~2.47vw). `2.4vw` fica com margem
     de segurança abaixo do mais apertado dos dois. */
  font-size: 2.3vw;
}
.diretor-bio--destaque .bio p:first-child {
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 0;
}
.diretor-bio--destaque .bio p + p { margin-top: .5em; }

/* ---------- página de diretor: link de volta pro final da página ----------
   V17: fica fora dos dois `<section>` das abas, direto em `.feed`, então
   aparece igual nas duas — não precisa duplicar o link dentro de cada aba.
   O `gap` do `.feed` (flex column) já cria o respiro antes dele sozinho,
   sem precisar de margin-top manual aqui. */
.diretor-voltar {
  text-align: right;
  padding-inline: var(--gutter);
}

.diretor-voltar a {
  position: relative;
  font-variation-settings: 'wdth' 175, 'wght' 700;
  font-size: clamp(16px, 1.4vw, 19px);
}

.diretor-voltar a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.06em;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--t-text) var(--ease-out);
}

.diretor-voltar a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---------- página de projeto: LOGO — [Diretor]: [Título] — VOLTAR (V1.6, padrão único na V1.11) ----------
   Reformulação completa a partir de referência visual: a página deixou
   de ter título grande + mídia ambiente clicável (ver `js/projeto.js`
   pra todo o histórico do que existia antes). Agora são só duas peças:
   esta barra fixa e o vídeo de verdade tocando direto abaixo.

   V1.11 unifica as duas variantes da página (com e sem galeria) num só
   padrão de topo, com referência visual marcada à mão: "TODAS as
   paginas do PROJETO devem obedecer o seguinte padrão: LOGO [DIRETOR]
   - [TITULO] VOLTAR (Menu Hamburger SOME)." Até aqui, só a variante
   sem galeria (V1.10) tinha perdido o burger — a V1.11 estende isso
   pras duas, e troca o link de volta de "fechar" (só sem galeria, um
   canto) + "voltar" (só com galeria, sticky até o fim da rolagem) por
   UM SÓ link "voltar", sempre fixo no canto superior direito, nas duas
   variantes. `.burger`, `<nav id="menu">`, "quem somos" e "contato"
   saíram do HTML de `projeto.html` de vez — sem burger, esses painéis
   não tinham mais como abrir; `js/panel.js` (que gerenciava tudo isso)
   também parou de ser carregado nessa página, já que ficaria só
   assumindo elementos que não existem mais aqui (seria erro de JS, não
   só código morto: `burger.addEventListener` sem `if` de guarda).

   Texto sem fundo (voltou atrás de um patch que tinha dado um fundo em
   formato de pílula — a pílula foi descartada; "erro meu", segundo o
   pedido que reverteu). Ela é HTML estático em `projeto.html`
   (`#projeto-barra`, fora de `<main>`) — `js/projeto.js` só preenche o
   `innerHTML`, a posição é toda CSS. Estar fora de `<main>`, como irmã
   de `<main>` dentro de `.projeto-corpo`, é o que permite o
   comportamento mobile logo abaixo.

   **Alinhamento vertical entre logo/barra/voltar (V1.11) — achado e
   corrigido a partir da referência marcada à mão.** Os três são
   `position:fixed` independentes, com fontes de tamanhos DIFERENTES
   (`.logo` 21px, `.projeto-barra` um `clamp` de 11–15px, `.projeto-
   voltar` 19px) — usar o mesmo `top` fixo nos três (como era antes)
   alinha o TOPO da caixa de cada um, não o CENTRO vertical do texto, e
   caixas de altura diferente com o mesmo topo ficam com centros
   diferentes: exatamente o desalinhamento que a referência marcou.
   Correção: `.logo` (`top:18px`, `font-size:21px`, `line-height:1`) é
   o âncora — define a linha média em `18px + 21px/2 = 28.5px` do topo
   da viewport. `.projeto-barra` e `.projeto-voltar` calculam o próprio
   `top` a partir dessa mesma linha média, subtraindo METADE da altura
   da própria caixa (`font-size × line-height`) — assim os três TEXTOS
   ficam com o centro na mesma altura, não só o topo da caixa. */
.projeto-barra {
  --fs: clamp(11px, 1.3vw, 15px);
  position: fixed;
  top: calc(28.5px - (var(--fs) * 1.3) / 2);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-chrome);
  max-width: min(60vw, 640px);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: var(--fs);
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.projeto-barra a {
  text-decoration: underline;
  text-underline-offset: .14em;
}

/* Link único de volta — substitui tanto o antigo `.projeto-voltar`
   (sticky até o fim da rolagem, só na variante com galeria) quanto o
   `.projeto-fechar` (só na variante sem galeria, V1.10) — mesmo canto
   fixo que o `.burger` ocupava antes de sumir de vez. `line-height:1`
   explícito (sem isso, herdaria `1.5` do body, mudando a altura da
   caixa e quebrando a conta de alinhamento acima: `28.5 - 19/2 =
   19px`). */
.projeto-voltar {
  position: fixed;
  top: 19px;
  right: var(--gutter);
  z-index: var(--z-chrome);
  font-variation-settings: 'wdth' 175, 'wght' 600;
  font-size: 19px;
  line-height: 1;
  text-decoration: underline;
  text-underline-offset: .14em;
}

/* `#conteudo-projeto` (`.feed`) reserva `padding-bottom: var(--block-
   gap)` (72–160px) por padrão — folga pensada pra separar o conteúdo
   do rodapé que vinha em seguida. V1.10 removeu o `<footer>` desta
   página e zerou esse `padding-bottom` de vez, incondicional — bom
   pro rodapé mobile (a barra `position:sticky` já resolve sozinha não
   sobrepor a última foto ali, ver `@media (max-width:820px)` abaixo),
   mas ruim pro DESKTOP: sem rodapé nem barra grudada embaixo pra
   "segurar" o fim da página, a foto da galeria colava direto na borda
   da janela — "Não deixe a foto colar em baixo da janela. Adicione uma
   margem ao fim da pagina PROJETO" (V1.13, com referência visual).
   Corrigido descendo (não zerando) pra `var(--gutter)`: a mesma folga
   já usada nas laterais da galeria e entre ela e o vídeo, mantendo o
   respiro consistente nos quatro lados. No mobile, a regra volta a
   zerar (abaixo) — lá a barra sticky no rodapé já cumpre esse papel;
   somar as duas reabriria o "espaço estranho" que a V1.10 corrigiu.
   Sem galeria, `padding-bottom` é resetado pra `0` de novo (ver
   `is-projeto-sem-galeria` abaixo) — o vídeo preenche a viewport
   inteira, nenhuma folga extra cabe ali.

   `gap` também reduzido de `var(--block-gap)` (72–160px, o espaçamento
   entre BLOCOS inteiros da home — `.feed` é a mesma classe usada lá)
   pra `var(--gutter)` (V1.12): `.projeto-video` e `.galeria-fotos` são
   os dois únicos filhos diretos de `#conteudo-projeto` quando há
   galeria, e esse `gap` do flex somava com a folga própria de cada
   um, dobrando o espaço — achado junto com o `margin-top` de
   `.galeria-fotos` abaixo (mesmo pedido: "espaço negativo bizarro
   entre o vídeo... e as imagens da galeria"). Sem efeito quando não
   há galeria (só um filho, `gap` não faz nada entre um item e ele
   mesmo). */
#conteudo-projeto {
  padding-bottom: var(--gutter);
  gap: var(--gutter);
}

/* Sem margin-top próprio: `.projeto-video` é o primeiro filho que conta
   (os outros dois, `.projeto-barra` e `.projeto-voltar`, são
   `position:fixed`, fora do fluxo) dentro de `<main class="feed">`,
   cujo `padding-top` (seção 4, "Estrutura da home") já reserva a folga
   do chrome fixo. */
.projeto-video {
  padding-inline: var(--gutter);
}

.projeto-video iframe,
.projeto-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ---------- página de projeto sem galeria: "só o player" (V1.10) ----------
   Pedido explícito: "Quando ela NÃO TIVER GALERIA veremos apenas o
   player do vídeo, sem rolagem da página... não temos rodapé."
   `js/projeto.js` decide (`p.galeria` vazio ou não) e alterna a classe
   `is-projeto-sem-galeria` no `<html>` — todo o resto abaixo é reação
   a essa classe, sem JS adicional nenhum. Projeto COM galeria mantém a
   rolagem normal e a galeria abaixo do vídeo — o chrome fixo (logo,
   barra, voltar) e a ausência de burger/rodapé são iguais nas duas
   variantes desde a V1.11 (ver bloco acima). */
html.is-projeto-sem-galeria,
html.is-projeto-sem-galeria body {
  height: 100%;
  overflow: hidden;
}

html.is-projeto-sem-galeria .projeto-corpo {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* `#conteudo-projeto` (== `.feed`) já reserva o `padding-top` do chrome
   fixo (logo/barra) — só precisa virar `flex: 1` pra ocupar o resto da
   altura da viewport, com `min-height: 0` pra um filho flex conseguir
   encolher abaixo do tamanho do próprio conteúdo (senão o vídeo
   empurraria a altura pra fora da viewport, voltando a ter rolagem). */
html.is-projeto-sem-galeria #conteudo-projeto {
  flex: 1;
  min-height: 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
}

/* Vídeo enche o espaço disponível dentro da margem — V1.10 tinha feito
   isso full-bleed (`padding-inline: 0`, vídeo colado nas bordas da
   janela); V1.14 corrigiu com referência visual: "não deixei o player
   do vídeo colado na janela. RESPEITE AS MARGENS." `padding` nos
   quatro lados na V1.14 criou um problema novo, corrigido aqui na
   V1.15: o TOPO já tinha uma folga própria vindo de outro lugar — o
   `padding-top` do chrome fixo em `#conteudo-projeto` (herdado de
   `.feed`, `calc(var(--logo-clearance) + 10px)` ≈ 66px) — e o
   `padding-top: var(--gutter)` (44px) daqui se somava a isso, dando
   ≈110px de margem no topo contra 44px nos outros três lados. "o
   quadro do vídeo está com uma margem muito grande na parte superior."
   `padding-top: 0` aqui resolve: o topo já tem sua própria folga
   (a do chrome), só faltava não competir com ela — os outros três
   lados continuam com `var(--gutter)`, sem folga extra nenhuma
   competindo com eles. */
html.is-projeto-sem-galeria .projeto-video {
  flex: 1;
  min-height: 0;
  padding: 0 var(--gutter) var(--gutter);
}

html.is-projeto-sem-galeria .projeto-video iframe,
html.is-projeto-sem-galeria .projeto-video video {
  height: 100%;
  aspect-ratio: auto;
}

/* ---------- página de projeto (vídeo + galeria de fotos) ----------
   Uma coluna só, sem alternância de lado — a página é sobre um projeto
   só, não faz sentido dividir em bloco+coluna vazia. */

.bloco-projeto {
  grid-template-columns: 1fr;
  padding-inline: var(--gutter);
}

/* V9: título de volta ao topo, dentro de .block__main junto com a mídia —
   igual à home. É esse agrupamento (não uma regra CSS específica daqui)
   que faz o título ficar "atrás" da mídia ao rolar e para de grudar assim
   que .block__main termina, antes da galeria de fotos. Ver js/projeto.js. */
.bloco-projeto .title { text-align: left; }

/* V1.1: grade editorial em pares — uma foto "horizontal" (coluna larga)
   ao lado de uma "vertical" (coluna estreita), não mais 3 colunas
   quadradas uniformes. A proporção 2fr:1fr das colunas é o que define o
   ritmo: só a coluna estreita (itens pares) tem `aspect-ratio` fixo
   (3/4, retrato); a coluna larga (itens ímpares) não tem proporção
   própria — ela estica pra preencher a altura da linha (comportamento
   padrão de grid, `align-items: stretch`), então acaba saindo no
   formato paisagem só por ser mais larga na mesma altura. Isso funciona
   com QUALQUER foto de origem, não só as que já são naturalmente
   horizontais/verticais — é a "máscara" pedida: `object-fit: cover`
   recorta cada imagem pro formato da célula, venha ela do tamanho que
   vier. */
/* PATCH: dois problemas achados numa referência marcada à mão — "existe
   um espaço negativo bizarro entre o vídeo postado e as imagens da
   galeria" e "respeite a margem das fotos da galeria". Sem `margin-top`
   próprio: a folga entre `.projeto-video` e `.galeria-fotos` já vem do
   `gap: var(--gutter)` do flex pai (`#conteudo-projeto`, ver acima) —
   um `margin-top` aqui SOMARIA com esse `gap` em vez de substituí-lo
   (foi exatamente isso que causou o espaço "bizarro": o `margin-top`
   de antes, `var(--block-gap)`, se empilhava com o `gap` do pai,
   também `var(--block-gap)` na época). `padding-inline` nunca tinha
   existido aqui — sem isso, a galeria ia de ponta a ponta da tela, sem
   a margem lateral que o vídeo (`.projeto-video { padding-inline:
   var(--gutter) }`, mais acima) sempre teve; agora as duas peças da
   página respeitam o mesmo respiro nas laterais. */
.galeria-fotos {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: stretch;
  gap: var(--gutter);
  padding-inline: var(--gutter);
}

.galeria-fotos__item { overflow: hidden; }
.galeria-fotos__item:nth-child(even) { aspect-ratio: 3 / 4; }
/* Sobra de foto sem par (total ímpar de fotos): sem uma vertical ao
   lado pra ditar a altura da linha, a última entra com uma proporção
   própria em vez de ficar sem altura nenhuma. */
.galeria-fotos__item:nth-child(odd):last-child { aspect-ratio: 3 / 2; }

/* Cover (não contain) é uma exceção deliberada aqui: isto é uma galeria de
   registro em grade, não a peça principal do cliente — a regra da seção de
   mídia ("nunca recortar a peça do cliente") vale pro vídeo/imagem
   principal, não pra fotos de bastidor numa grade uniforme. */
.galeria-fotos__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

/* ---------- bloco de menu: último bloco do feed da home (V1.18.1.1) ----------
   Pedido: "quando o usuário rola até o final do feed de PROJETOS,
   aparece como último bloco os elementos do menu" — os mesmos quatro
   itens da nav (Projetos/Diretores/Quem somos/Contato) que a V1.18
   tinha posto no rodapé (revertido pra V1.18.1.1, ver `css/base.css`)
   viram o último item de `.feed` na home, com o mesmo peso visual de
   um título de projeto — não texto pequeno de rodapé. Sem link
   "voltar" (pedido explícito: "tira o voltar do canto inferior
   direito do feed de PROJETOS" — só "Projetos" cumpre esse papel,
   rolando pro topo). Escrito direto em `index.html`, dentro de
   `#conteudo`; `js/feed.js` insere os projetos ANTES dele
   (`insertAdjacentHTML('afterbegin')`), não sobrescreve mais com
   `innerHTML`, então ele sempre sobra como o filho final de verdade —
   o `gap`/`padding-bottom` de `.feed` (`var(--block-gap)` na home) já
   dá o respiro antes e depois dele de graça, sem margin própria. */
.bloco-menu {
  padding-inline: var(--gutter);
}

.bloco-menu ul {
  list-style: none;
}

/* V1.18.3: "estamos usando H1 nos elementos do menu... use H3" — os
   quatro itens (Projetos/Diretores/Quem somos/Contato) ganharam um
   `<h3>` cada, dentro do próprio `<li>` (mesmo padrão de `js/feed.js`,
   que envolve o link do título do projeto num `<h2 class="title">` —
   aqui é `<h3>` porque esse título de projeto já é o `<h2>` da página;
   os itens do menu, um nível abaixo na hierarquia, ficam em `<h3>`).
   Reset do `<h3>` (peso/margem do user-agent) não precisou de regra
   própria — `* { margin: 0 }` (topo de `base.css`) e `font-variation-
   settings`/`font-size` explícitos aqui já cobrem os dois. */
/* V1.18.4: "diminua o tamanho... deixe do mesmo tamanho dos itens do
   MENU hambúrguer" — `clamp(36px, 6vw, 84px)` (calibrado só pra este
   bloco) trocado pelo MESMO clamp de `.panel--menu ul a`/`.menu-
   toggle` (`css/base.css`), pra bater exatamente com o menu de
   verdade, não só "parecido". */
.bloco-menu h3 {
  font-variation-settings: 'wdth' 200, 'wght' 900;
  font-size: clamp(30px, 4vw, 52px);
  line-height: .98;
  letter-spacing: -.01em;
}

.bloco-menu a,
.bloco-menu button {
  display: inline-block;
}

.bloco-menu a:hover,
.bloco-menu a:focus-visible,
.bloco-menu button:hover,
.bloco-menu button:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: .05em;
  text-decoration-skip-ink: none;
}

/* ---------- responsivo ---------- */

@media (max-width: 820px) {
  :root { --block-width: 90vw; --slide-width: 88%; --peek: 5vw; }

  .block,
  .block--right,
  .block--center {
    grid-template-columns: 1fr;
    padding-inline: var(--gutter);
  }
  .block--right .block__main,
  .block--center .title { text-align: left; }
  .block--right .block__main,
  .block__main { grid-column: 1; }
  .block--right .block__side,
  .block__side { grid-column: 1; grid-row: 2; margin-top: 14px; }

  .block--center .title { padding-inline: 0; }

  /* 'wdth' fica em 175, não no teto de 200 — em 200 as palavras quebram
     cedo demais numa tela estreita e o título vira 4 linhas (ver seção 3
     do PROJETO.md). 'wght' acompanha o desktop, vai a 900. */
  .title { font-size: clamp(26px, 8vw, 38px); font-variation-settings: 'wdth' 175, 'wght' 900; }

  .block--pessoa,
  .block--pessoa.block--right { grid-template-columns: 1fr; }
  /* Desfaz a subgrid do desktop: em coluna única, título e mídia voltam a
     empilhar em fluxo normal, e a bio (block__side) cai numa linha
     implícita logo abaixo — o alinhamento por linha de grade só faz
     sentido com as duas colunas lado a lado. */
  .block--pessoa .block__main { grid-row: auto; display: block; }
  .block--pessoa .block__side { grid-row: auto; }
  .bio { position: static; max-width: none; margin-top: 18px; }
  .block--pessoa.block--right .bio { margin-left: 0; }
  .block--pessoa .media { max-height: 62vh; }

  .panel--menu { height: auto; }

  /* Uma coluna só — a proporção 2fr:1fr do desktop não sobrevive numa
     tela estreita. Mantém a alternância horizontal/vertical (mesmo
     `nth-child`) pra não virar uma coluna monótona de quadrados. */
  .galeria-fotos { grid-template-columns: 1fr; gap: 10px; }
  .galeria-fotos__item { aspect-ratio: 4 / 3; }
  .galeria-fotos__item:nth-child(even) { aspect-ratio: 3 / 4; }
  .galeria-fotos__item:nth-child(odd):last-child { aspect-ratio: 4 / 3; }

  .about-content__logo { width: min(220px, 60vw); }

  .diretor-nome { font-size: clamp(32px, 10vw, 48px); }
  .diretor-tabs { gap: 20px; }

  .diretor-bio,
  .diretor-bio--right { grid-template-columns: 1fr; }
  /* PATCH: faltava resetar `grid-row` — só `grid-column` era resetado
     aqui. `.diretor-bio--right` (usada pela Daniela) põe os dois
     `grid-row: 1` no desktop (pra ficarem lado a lado, foto na coluna
     2); sem resetar isso também, no mobile (uma coluna só) os dois
     itens continuavam na MESMA linha do grid — foto e texto
     sobrepostos na mesma célula, cada um "esticando" o outro
     (`align-items: stretch` do `.diretor-bio--destaque`) pra uma
     altura sem sentido, cortando a maior parte do texto atrás da foto
     opaca. `grid-row: auto` devolve os dois pro posicionamento
     automático (uma linha por item, na ordem do HTML: foto depois
     texto), como sempre funcionou pro `.diretor-bio` sem `--right`
     (Ricardo, que nunca teve esse `grid-row` fixo pra começo de
     conversa). */
  .diretor-bio--right .diretor-bio__foto,
  .diretor-bio--right .bio { grid-column: 1; grid-row: auto; }
  .diretor-bio .bio { margin-left: 0; margin-top: 18px; }

  /* No mobile a coluna vira 1fr único (regra acima) — foto e texto
     empilham em linhas separadas do grid, então `align-items: stretch`
     do desktop já não tem efeito de igualar alturas (cada um vira dono
     da própria linha). Só falta um `font-size` de leitura normal, não o
     valor calibrado pra caber ao lado da foto no desktop. */
  .diretor-bio--destaque .diretor-bio__foto { width: 100%; }
  .diretor-bio--destaque .bio { font-size: clamp(22px, 6vw, 30px); }

  /* No mobile, `.projeto-barra` desce do topo pro rodapé — vira uma
     faixa branca de largura total, "sticky" limitada pela caixa de
     `.projeto-corpo` (que termina onde o `<main>` termina — desde a
     V1.10 não sobra `<footer>` depois pra se preocupar em não
     sobrepor). Precisa ser irmã direta de `.projeto-corpo` (não neta,
     dentro de `<main>`) pra esse alcance funcionar — por isso a
     reestruturação em `projeto.html`/`js/projeto.js`.

     Vale pras DUAS variantes da página, sem condicional nenhuma (V1.11
     — antes só valia pra com-galeria; sem galeria tinha um desvio
     próprio, removido): sem galeria, `.projeto-corpo` é uma coluna
     flex de `100vh` (ver bloco `is-projeto-sem-galeria` abaixo) e
     `#projeto-barra` é o último item dela — `position:sticky` aí
     dentro, sem nada rolando, só se comporta como `relative`: fica
     parada na própria posição de flex-item, que já é o rodapé da
     coluna, exatamente onde deveria estar.

     `.projeto-voltar` NÃO precisa de ajuste de posição aqui — desde a
     V1.11 ele é `position:fixed` no canto superior direito o tempo
     todo, mobile e desktop, nunca pareado com a barra no rodapé (era
     assim antes, quando os dois dividiam o rodapé). */
  .projeto-barra {
    position: sticky;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    max-width: none;
    width: 100%;
    background: var(--paper);
    padding: 10px var(--gutter);
  }

  /* `padding-bottom` de `#conteudo-projeto` volta a `0` aqui — no
     mobile, a barra sticky logo acima já cumpre o papel de "margem no
     fim da página" (ela é o fim visível da página). O `var(--gutter)`
     do desktop (regra base, mais acima) é só pra quando NÃO existe
     barra grudada no rodapé segurando o final — no mobile ela sempre
     existe, somar as duas reabriria o "espaço estranho" que a V1.10 já
     tinha corrigido uma vez. */
  #conteudo-projeto {
    padding-bottom: 0;
  }
}

/* ---------- movimento reduzido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .track { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }

  /* `transition-duration` acima não afeta isto — são `animation`, não
     `transition`. Sem essa regra em separado, o navegador não desliga o
     fade entre páginas sozinho: é o site que precisa checar a
     preferência (ver https://developer.chrome.com/docs/web-platform/view-transitions). */
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}