html, body.work-page {
  height: 100%;
  /* era um hex fixo (#0d1117, bem próximo mas não idêntico ao "--bg" do
     resto do site) — nunca mudava com o tema claro/escuro. Trocado pela
     variável de verdade, igual toda outra página, pra essa tela também
     virar clara no modo claro (ver PROJECT_NOTES.md — o toggle de tema
     "não fazia nada" de fato em work.html antes disso) */
  background: var(--bg);
}
body.work-page { overflow: hidden; cursor: default; }

/* logos de produtora (mesmos arquivos de ".client-logo" em style.css, ver
   buildLogoEl em work.js — ".work-card-logo" no hover do grid,
   ".work-detail-logo" no cabeçalho da página de detalhe, ambos podem ser
   um <img> direto OU um <span> com ".logo-piece" dentro) + os wordmarks
   "papaki" de fundo da página de detalhe (".work-detail-wordmark"/"-mobile")
   — mesmo tratamento "invert(1)" cru do resto do site (ver comentário
   grande perto do filter:invert(1) em style.css) */
:root[data-theme="light"] .work-card-logo,
:root[data-theme="light"] .logo-piece,
:root[data-theme="light"] .work-detail-wordmark,
:root[data-theme="light"] .work-detail-wordmark-mobile {
  filter: invert(1);
}

/* --- marca no canto (substitui o hamburguer nesta página) --- */
.work-brand {
  position: fixed;
  left: var(--edge);
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
  width: clamp(90px, 8vw, 138px);
  opacity: .9;
  transition: opacity .2s ease;
}
.work-brand:hover { opacity: 1; }
.work-brand img { width: 100%; height: auto; display: block; }
/* hambúrguer novo (Figma node 14043:1562) — escondido no desktop, onde
   ".work-brand" acima continua "substituindo" ele, como já era antes;
   reaparece só no mobile (ver @media max-width:720px abaixo, que reaproveita
   o mesmo ".menu-overlay"/".site-controls" das outras páginas) */
.work-page .site-controls.left { display: none; }

/* --- canvas infinito --- */
.work-main { position: relative; width: 100%; height: 100vh; }
.work-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.work-viewport.is-dragging { cursor: grabbing; }
.work-canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}
.work-tile { position: absolute; top: 0; left: 0; }

.work-card {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
  /* mesma cor do fundo do canvas/viewport (.work-viewport, html/body.work-page)
     — com object-fit:contain nas imagens (ver .work-card img abaixo), sobra
     "letterbox" em volta da imagem sempre que a proporção dela não bate com a
     do card, e antes esse fundo era um tom mais claro (#1a1f27), destacando
     um retângulo visível ao redor de cada foto em vez de se misturar com o
     resto do fundo — "var(--bg)" mesmo tema-dependente igual acima */
  background: var(--bg);
}
/* ">" (filho direto), não "descendente" — a foto é filha direta de
   .work-card, mas o logo do hover (.work-card-logo) fica dentro de
   .work-card-label, ou seja, é NETO, não filho direto. Selecionar com
   ".work-card img" (sem o ">") pegava os dois sem querer: como essa regra
   tem mais especificidade que ".work-card-logo" (classe+tag vs. só classe),
   ela vencia e forçava position:absolute;inset:0 no logo também, o que —
   junto com max-width/max-height sobrando de ".work-card-logo" — deixava o
   logo "sobre-restringido" e o navegador jogava ele pro canto
   superior-esquerdo em vez de centralizar. */
.work-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain (não cover): a imagem inteira sempre aparece, sem cortar —
     pode sobrar espaço vazio dentro do card (mostra o fundo escuro de
     .work-card), o que é aceitável aqui de propósito */
  object-fit: contain;
  display: block;
  /* mais escura/apagada por padrão (filtro: era brightness(.72) saturate(.9);
     opacidade reduzida também, pra escurecer ainda mais misturando com o
     fundo escuro do card por trás) — no hover volta pra cor ORIGINAL de
     verdade (filter:none + opacity:1 — o filter era brightness(.9)
     saturate(1), que ainda não era 100% a cor real) */
  filter: brightness(.5) saturate(.75);
  opacity: .3;
  transition: filter .5s ease, opacity .5s ease, transform 1.4s cubic-bezier(.19,1,.22,1);
}
/* só a imagem muda no hover — o fundo do card (.work-card, acima) continua
   sempre a mesma cor, não escurece nem clareia junto */
.work-card:hover > img { filter: none; opacity: 1; }
/* identificação da produtora (logo, ou nome em texto quando não tem logo —
   ver buildLogoEl em work.js), centralizada, só aparece no hover — pra dar
   pra saber de quem é o vídeo antes de clicar */
.work-card-label {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px;
  font-family: var(--font-menu);
  font-weight: 800;
  font-size: clamp(13px, 1.4vw, 20px);
  text-transform: uppercase;
  letter-spacing: .04em;
  /* sobre a MINIATURA (foto/vídeo escurecido no hover, ver ".work-card >
     img"), não uma seção de fundo sólido — "--fg" (mesmo raciocínio do
     "--fg" sobre vídeo em about.css: acompanha o tema como a marca do
     site, não fica preso a um branco fixo) */
  color: var(--fg);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.work-card:hover .work-card-label { opacity: 1; }
.work-card-logo {
  position: static;
  display: block;
  width: auto;
  max-width: 70%;
  height: 70%;
  max-height: 46px;
  object-fit: contain;
}
/* "caixa" do logo no hover do card do grid — MESMA altura de .client-logo
   em style.css (a home), pra o logo aparecer exatamente do tamanho que
   aparece lá (pedido do usuário). A altura de verdade do logo (ou das
   pieces) dentro dela vem inline via JS (style.height = scale%, ver
   buildLogoEl em work.js) — mesmo campo "scale" usado em CLIENT_LOGOS
   (data.js) pro mesmo arquivo, então sem max-height nenhum aqui (senão
   voltaria a limitar todo mundo igual, o problema original). */
.work-card-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(56px, 7.6vw, 140px);
}
.work-card-logo-box .work-card-logo {
  max-width: 90%;
  max-height: none;
}
.work-card-logo-pieces { position: relative; }
.work-card-logo-pieces .logo-piece {
  position: absolute;
  display: block;
}

/* --- página de detalhe (2º clique) --- */
.work-detail {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--menu-bg);
  /* herdado por ".work-detail-name"/"-nav-btn"/"-handle"/".work-back" (sem
     "color" próprio, ver abaixo) — ".work-detail-play-btn"/"-mute-btn"/
     "-photo-dots" NÃO entram: ficam sobre o VÍDEO/FOTO em si, dentro de um
     círculo preto translúcido — convenção comum de controle de player
     (sempre escuro+ícone branco, não muda com o tema do site, precisa
     funcionar sobre qualquer cor de vídeo) */
  color: var(--menu-fg);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility 0s linear .4s;
  overflow: hidden;
}
.work-detail.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s ease;
}
/* fundo "papaki" reduzido pra bater com a altura do vídeo (ver
   .work-detail-photo abaixo) — era 108% da LARGURA (ficava enorme, bem mais
   alto que o vídeo). Em vh (não %) porque .work-detail é
   position:fixed;inset:0 (preenche a viewport inteira), então vh mede
   exatamente a altura da tela — o vídeo usa a mesma unidade, pra garantir
   que as duas alturas batem sempre, em qualquer tamanho de tela.

   Alinhado à esquerda, não mais centralizado (só a vertical continua
   centralizada) — e dividido em 2 ARQUIVOS separados (era 1 só com a
   palavra inteira): "P" (assets/img/wordmark-papaki-p.svg, só a primeira
   letra) e "PAKI" (wordmark-papaki-paki.svg, as 4 letras finais — pula o
   primeiro "A" de propósito). O vídeo entra entre os dois, ocupando o lugar
   do "A" que falta — como cada vídeo tem uma largura NATIVA diferente (ver
   fitDetailPhotoBox em work.js), não dava pra confiar num recorte fixo de
   viewBox pro "A" (só funcionaria pra UM formato de vídeo específico); em
   vez disso, "PAKI" é reposicionado em JS (layoutDetailMedia) sempre logo
   depois de onde o vídeo daquela vez termina — funciona pra qualquer
   proporção de vídeo, sempre lendo "P [vídeo] PAKI" da esquerda pra
   direita. */
.work-detail-wordmark {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 52.5vh;
  width: auto;
  pointer-events: none;
  user-select: none;
}
.work-detail-wordmark-p { left: var(--edge); }
/* "left" de verdade calculado em JS (layoutDetailMedia) — aqui é só um
   valor inicial, pra não ficar em cima do "P" antes do JS rodar */
.work-detail-wordmark-paki { left: 40vh; }
/* wordmark "papaki" cheio, só mobile (Figma node 14043:1777) — ver
   @media(max-width:720px) abaixo pro estilo de verdade; escondido no
   desktop, onde o "P"/"PAKI" divididos acima continuam do jeito que
   sempre foram */
.work-detail-wordmark-mobile { display: none; }
.work-back {
  position: absolute;
  left: clamp(16px, 1.5vw, 29px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-menu);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--menu-fg);
  opacity: .85;
  z-index: 2;
}
.work-back:hover { opacity: 1; }
.chevron { width: 20px; height: 20px; }
.chevron--right { transform: rotate(180deg); }

.work-detail-header {
  position: absolute;
  left: clamp(24px, 12.2%, 320px);
  top: clamp(60px, 12.7%, 160px);
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
.work-detail-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 40px);
  text-transform: uppercase;
  color: var(--menu-fg);
  line-height: 1;
  /* .work-detail-name é o container agora — mostra o LOGO da produtora (ver
     .work-detail-logo, montado via buildLogoEl em work.js) no lugar do nome
     em texto; item sem logo cai de volta pro nome mesmo, herdando esse
     estilo de texto normalmente */
  display: flex;
  align-items: flex-end;
}
/* mesma "caixa" de logo usada no hover do grid (.work-card-logo-box, altura
   clamp(56px,7.6vw,140px) — igual .client-logo na home), pra aparecer no
   cabeçalho da página de detalhe EXATAMENTE do tamanho que aparece na home
   (pedido do usuário — antes tinha um tamanho próprio, maior, que ficava
   grande demais). Só max-width como salvaguarda, pra um logo bem largo não
   invadir o resto do cabeçalho. */
.work-detail-logo {
  max-width: min(416px, 52vw);
}
/* só quando o item tem "link" (ver work-data.js) o buildLogoEl monta essa
   caixa como <a> em vez de <span> (mesmo padrão de CLIENT_LOGOS/.client-logo
   na home) — feedback de hover só faz sentido pro caso clicável, por isso o
   seletor "a." em vez de aplicar em ".work-detail-logo" genérico (que
   também cobre os itens sem link, só decorativos) */
a.work-detail-logo:hover { opacity: .8; }
/* posicionado logo depois do "P" de "PAPAKI" no fundo (ver
   .work-detail-wordmark-p acima). A LARGURA vem da proporção NATIVA de cada
   vídeo/foto (nunca cortado, object-fit:contain abaixo). A ALTURA
   normalmente bate com a altura do texto (52.5% da tela) — só fica MENOR
   que isso quando um vídeo muito largo (ex.: "rebolucion_01") faria o
   conjunto todo (P + vídeo + PAKI) passar da largura da tela; nesse caso o
   conjunto inteiro encolhe junto (ver layoutDetailMedia em work.js), pra
   "PAKI" nunca ficar cortado. "left"/"top"/"width"/"height" de verdade são
   todos calculados em JS assim que os metadados carregam — os valores aqui
   embaixo são só um placeholder inicial. */
.work-detail-photo {
  position: absolute;
  left: 40vh;
  top: 23.75vh;
  width: 30vh;
  height: 52.5vh;
  border-radius: 6px;
  overflow: hidden;
  z-index: 1;
  /* quando o vídeo/foto muda de proporção (troca de item ou, num item com
     mais de um vídeo, troca pelos pontinhos — ver layoutDetailMedia em
     work.js, que recalcula left/top/width/height toda vez), a moldura
     anima em vez de simplesmente "pular" pro tamanho novo — pedido do
     usuário. Suprimida especificamente durante resize de janela (ver o
     listener de "resize" em work.js), senão arrastar a borda da janela
     ficaria com a caixa "correndo atrás" do tamanho com atraso. */
  transition: left .45s cubic-bezier(.19,1,.22,1), top .45s cubic-bezier(.19,1,.22,1),
    width .45s cubic-bezier(.19,1,.22,1), height .45s cubic-bezier(.19,1,.22,1);
  /* a caixa é dimensionada pela proporção do VÍDEO (ver layoutDetailMedia em
     work.js), mas antes do play quem aparece é o pôster (foto separada,
     "poster" no <video> — ver showDetailVideo) — se a proporção da foto não
     bater exatamente com a do vídeo (ex.: "other-guyz", "kaus"), sobra uma
     faixa vazia dentro da caixa (object-fit:contain não estica pra
     preencher). Fundo preto aqui garante que essa faixa nunca mostra o que
     tem atrás (o texto "papaki" de fundo) — igual às barras pretas comuns
     de player de vídeo. Depois que o play começa, o próprio vídeo preenche
     a caixa inteira (a proporção bate exata, foi calculada a partir dele
     mesmo), então o preto fica coberto/invisível por trás */
  background: #000;
}
/* moldura de verdade da "galeria": o tamanho/posição (calculados em JS,
   ver .work-detail-photo acima) e o overflow:hidden ficam SEMPRE fixos
   aqui — quem anima na troca de item (ver navigateDetail em work.js) é só
   esse elemento de dentro, via transform. Sem essa separação, animar a
   caixa de fora inteira (que tinha tamanho/posição E overflow:hidden juntos)
   fazia o vídeo saindo/entrando aparecer fora do próprio espaço dele
   enquanto deslizava — cruzando por cima de outras partes da tela — em vez
   de ficar mascarado dentro de uma janela fixa, como uma galeria de
   verdade. */
.work-detail-photo-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.work-detail-photo img,
.work-detail-photo video {
  width: 100%;
  height: 100%;
  /* contain (não cover): o vídeo/foto aparece inteiro, na proporção
     nativa dele, sem cortar nada */
  object-fit: contain;
  display: block;
  pointer-events: none;
}
.work-detail-photo img[hidden],
.work-detail-photo video[hidden] { display: none; }

/* play/pause + mute/unmute do vídeo — autoplay com som não é permitido pelos
   navegadores, então o vídeo começa sempre pausado (ver showDetailVideo() em
   work.js) e só toca quando o usuário clica; por isso os controles nativos
   não são usados (sem "controls" no <video>), só esses dois botões. Clicar em
   qualquer parte do vídeo também alterna play/pause (ver work.js) — o botão
   de play grande já é só a versão "visível" desse mesmo gesto: ele some
   quando o vídeo está tocando (padrão de player de vídeo). */
/* play/pause + mute (abaixo) ficam sempre pretos translúcidos + ícone
   branco, em QUALQUER tema — de propósito, não é esquecimento: são
   controles de vídeo por cima do vídeo/foto em si (cor imprevisível,
   qualquer cena), não do fundo "--menu-bg" da página — mesma convenção
   universal de player de vídeo (YouTube etc.), que também não muda com o
   tema do site em volta */
.work-detail-play-btn {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .95;
  transition: opacity .25s ease, background .2s ease, transform .2s ease;
}
.work-detail-play-btn[hidden] { display: none; }
.work-detail-play-btn:hover { background: rgba(0,0,0,.65); transform: translate(-50%, -50%) scale(1.06); }
.work-detail-play-btn svg { width: 24px; height: 24px; margin-left: 3px; }
.work-detail-play-btn.is-playing { opacity: 0; pointer-events: none; }

.work-detail-mute-btn {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .9;
  transition: opacity .2s ease, background .2s ease;
}
.work-detail-mute-btn[hidden] { display: none; }
.work-detail-mute-btn:hover { opacity: 1; background: rgba(0,0,0,.65); }
.work-detail-mute-btn svg { width: 16px; height: 16px; }
.work-detail-mute-btn .icon-muted { display: none; }
.work-detail-mute-btn.is-muted .icon-unmuted { display: none; }
.work-detail-mute-btn.is-muted .icon-muted { display: block; }

/* pontinhos pra trocar entre os vídeos de um mesmo case (quando ele tem mais
   de um, ex.: "_01"/"_02") — só aparecem nesses casos, ver renderDetail() */
.work-detail-photo-dots {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.work-detail-photo-dots[hidden] { display: none; }
.work-detail-photo-dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  transition: background .2s ease, transform .2s ease;
}
.work-detail-photo-dots button:hover { background: rgba(255,255,255,.7); }
.work-detail-photo-dots button.is-active {
  background: #fff;
  transform: scale(1.3);
}

.work-detail-info {
  position: absolute;
  left: 68%;
  top: 30%;
  width: min(260px, 20vw);
  z-index: 2;
}
.work-detail-desc {
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.9;
  color: rgba(var(--menu-fg-rgb), .75);
  margin: 0 0 1.6em;
}
.work-detail-handle {
  font-family: var(--font-menu);
  font-weight: 800;
  font-size: 16px;
  color: var(--menu-fg);
}
.work-detail-handle:hover { opacity: .8; }

.work-detail-nav {
  /* left/width/top vêm de layoutDetailMedia() em work.js — alinhados com o
     início e o fim reais do vídeo/foto (que mudam de posição e tamanho
     conforme a proporção de cada vídeo), não um percentual fixo chutado.
     Mesma transition da moldura do vídeo (.work-detail-photo) — os botões
     acompanham a animação de tamanho/posição em vez de "pular" na frente */
  position: absolute;
  display: flex;
  justify-content: space-between;
  z-index: 2;
  transition: left .45s cubic-bezier(.19,1,.22,1), top .45s cubic-bezier(.19,1,.22,1),
    width .45s cubic-bezier(.19,1,.22,1);
}
.work-detail-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-menu);
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--menu-fg);
  opacity: .85;
}
.work-detail-nav-btn:hover { opacity: 1; }

/* --- menu inferior fixo (sempre visível nesta página) --- */
.work-bottom-menu {
  position: fixed;
  left: 50%;
  bottom: clamp(20px, 4.7vh, 56px);
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 18px);
}
.work-bottom-menu .menu-link {
  /* ".menu-link" (style.css) virou "color:var(--menu-fg)" de propósito —
     pensado pro overlay do hambúrguer, onde o fundo É "--menu-bg". Esta
     barra inferior não é um overlay, fica sempre visível direto em cima do
     canvas (fundo "--bg" comum, não "--menu-bg") — reescreve pra "--fg"
     aqui, senão a cor ficaria errada pro fundo de verdade por trás no modo
     claro */
  color: var(--fg);
  position: relative;
  top: auto;
  display: inline-block;
  transform: none;
  white-space: nowrap;
  font-size: clamp(12px, .9vw, 14px);
  opacity: .6;
}
.work-bottom-menu .menu-link.is-active {
  opacity: 1;
  padding: 13px 18px;
  margin-right: 0;
}
/* colchete acima do item ativo (Work) envolvendo a palavra inteira com uma
   folga fixa pra fora da caixa (mais generoso que o padding sozinho) */
.work-bottom-menu .menu-link.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid var(--fg);
  border-bottom: none;
}

/* grupo Services/About/Contact envolvido por um colchete invertido (aberto
   em cima, em vez de embaixo como o do Work) */
.menu-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 44px);
  padding: 13px 16px;
}
.menu-group::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 4px solid var(--fg);
  border-top: none;
}
.menu-group .menu-link { opacity: .6; }

@media (max-width: 720px) {
  /* página de detalhe no mobile (Figma node 14043:1777, popup-in, frame
     393×852) — a página tinha 4 elementos em position:absolute com
     percentuais chutados (header/foto/info/nav) que colidiam todos na mesma
     faixa vertical no mobile, sem nenhuma referência de design. Em vez de
     tentar acertar percentuais que quebram de novo se o texto mudar de
     tamanho (PT/EN têm tamanhos diferentes), troca pra um fluxo normal em
     coluna via flexbox (só os filhos "estáticos" entram nesse fluxo —
     ".work-back"/".site-controls"/os wordmarks continuam
     position:absolute/fixed, fora do flex, then ganham posições próprias
     abaixo), reordenado com "order" pra bater com a ordem visual do Figma
     (cabeçalho → logo → vídeo → anterior/próximo → descrição → assinatura
     sobre o wordmark) — MUITO diferente da ordem no HTML (que segue a ordem
     do desktop, onde não importa por causa do position:absolute). Valores
     de margem/altura em vh vêm direto das proporções do frame do Figma
     (852px de altura) — mesma técnica já usada pro vídeo do hero na home. */
  .work-detail {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .work-back {
    left: 16px;
    top: 16px;
    transform: none;
  }
  /* "flex-shrink:0" nos 4 (aqui + ".work-detail-photo" abaixo) — sem isso,
     o flexbox encolhia todo mundo proporcionalmente pra caber dentro dos
     "100%" de altura de ".work-detail" (que é position:fixed, uma altura
     BEM definida) mesmo com "overflow-y:auto" ligado — "overflow" só decide
     o que fazer DEPOIS que o tamanho final é calculado, não impede o
     encolhimento em si. Foi assim que a caixa do vídeo VERTICAL (ver
     WORK_MOBILE_VERTICAL_VH em work.js) nunca conseguia ficar mais alta que
     ~27vh de verdade, não importa o valor calculado — o flex comprimia ela
     de volta pra caber. Com "flex-shrink:0", o conteúdo pode ficar mais
     alto que a tela sem problema — ".work-detail" rola (overflow-y:auto)
     pra mostrar o resto. */
  .work-detail-header,
  .work-detail-info,
  .work-detail-nav {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    flex-shrink: 0;
  }
  .work-detail-header { order: 1; margin: 12.5vh 6% 0; }
  /* fica "relative" (não "static" como os outros blocos) porque os pontinhos
     de troca de vídeo (.work-detail-photo-dots) são posicionados absoluto
     em relação a este container. Cheio (sem os 6% de margem lateral dos
     outros blocos) e sem cantos arredondados — Figma mostra o vídeo/foto
     ocupando a largura inteira da tela, ponta a ponta. */
  .work-detail-photo {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 27.7vh;
    margin: 3vh 0 0;
    border-radius: 0;
    flex-shrink: 0;
  }
  .work-detail-nav { order: 3; margin: 2vh 6% 0; }
  /* recuado da esquerda (não gruda na margem como os outros blocos) — no
     Figma o parágrafo começa em ~41% da largura da tela, meio pra direita,
     não alinhado com cabeçalho/vídeo/nav. Sem a assinatura mais (ela virou
     position:absolute, ver ".work-detail-handle" abaixo — pedido do
     usuário: sempre colada no rodapé, centralizada no wordmark "papaki",
     não mais fazendo parte do fluxo normal da descrição) */
  .work-detail-info { order: 4; margin: 4vh 6% 0 41%; padding-bottom: 45vw; }
  /* watermark "PAPAKI" cheio (ver comentário no HTML) — position:absolute
     grudado no fundo da TELA (bottom:0 relativo a ".work-detail", que é
     position:fixed — o "containing block" de verdade aqui), não mais item
     de fluxo normal: pedido do usuário, sempre "colado na parte inferior
     da tela", não só no fim do conteúdo. A opacidade de 5% já embutida no
     SVG garante que qualquer conteúdo que role por baixo dele continua
     legível (é só uma decoração bem sutil por cima) — e ".work-detail-info"
     acima ganhou um padding-bottom do tamanho do wordmark (45vw, ver
     comentário no ".work-detail-handle") pra garantir uma folga mínima
     antes do rodapé, mesmo em itens sem descrição nenhuma. */
  .work-detail-wordmark-p,
  .work-detail-wordmark-paki { display: none; }
  .work-detail-wordmark-mobile {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    pointer-events: none;
    user-select: none;
  }
  /* assinatura ("rebolucion.com") — pedido do usuário: sempre no rodapé,
     centralizada verticalmente NO wordmark "papaki" (não mais abaixo da
     descrição), podendo começar por volta do 2º "P" de "PAPAKI". Vira
     position:absolute (independente do fluxo/order de ".work-detail-info",
     que só sobrou com a descrição agora) — "left" na posição x do 2º "P"
     dentro do wordmark (146.54 de 393px de largura no frame do Figma =
     37.29%). "height" bate com a altura de VERDADE do wordmark renderizado
     (proporção do próprio SVG, viewBox 1819.56×818.8 → 818.8/1819.56 ≈
     0.45 da largura da tela = "45vw", mesmo valor usado no padding-bottom
     acima) — como os dois (".work-detail-wordmark-mobile" e este) usam
     "width:100%"/"bottom:0" e essa MESMA altura, o texto centralizado por
     "align-items:center" cai certinho no meio vertical do wordmark. */
  .work-detail-handle {
    position: absolute;
    left: 40.3%;
    right: 6%;
    bottom: 0;
    height: 45vw;
    margin: 0;
    display: flex;
    align-items: center;
  }
  .work-bottom-menu { gap: 10px; }
  .work-bottom-menu .menu-link { font-size: 11px; }
  .menu-group { gap: 10px; padding: 8px 10px 10px; }

  /* --- grade principal no mobile (Figma node 14043:1562): tira o menu fixo
     embaixo (vira o menu hambúrguer de sempre, ver ".menu-overlay" acima no
     HTML) e põe o logo "papaki" colado no canto superior esquerdo, igual ao
     "atual" do Figma (frame 393×852, logo em x:0,y:0, ~130px de largura) ---*/
  .work-bottom-menu { display: none; }
  .work-page .site-controls.left { display: flex; }
  .work-brand {
    left: 0;
    top: 0;
    transform: none;
    width: clamp(110px, 33.27vw, 148px);
  }

  /* a página de detalhe (".work-detail", aberta ao clicar num trabalho) tem
     seu próprio par de ícones modo/idioma (ids "...Detail"). Enquanto ela
     estiver FECHADA, força esses ícones escondidos/sem capturar clique
     (redundante de propósito com ".work-detail{visibility:hidden}" do
     estado fechado normal — necessário porque a regra genérica do menu
     "body:has(.menu-overlay.open) .site-controls.right{visibility:visible}"
     reverteria essa herança em QUALQUER ".site-controls.right" da página,
     inclusive esse aqui dentro, sempre que o menu abrisse (mesmo abrindo
     direto da grade, sem nunca ter passado pela página de detalhe) — bug
     de "fantasma invisível mas clicável" encontrado testando o hambúrguer
     no mobile, documentado em detalhe no PROJECT_NOTES.md). */
  body:has(.menu-overlay) .work-detail:not(.is-open) .site-controls.right {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  /* Diferente da versão anterior desta tarefa, NÃO força mais esses ícones
     sempre visíveis enquanto a página de detalhe está aberta — agora que
     ela ganhou seu PRÓPRIO hambúrguer (".menuToggleDetail" acima, Figma
     node 14043:1777, que só mostra o hambúrguer no topo, sem ícones de
     modo/idioma ao lado), eles colidiam na mesma posição (os dois viram
     "direita" no mobile). Modo/idioma continuam alcançáveis de dentro da
     página de detalhe do mesmo jeito que em QUALQUER outra página do site:
     clica no hambúrguer (que aqui fecha a página de detalhe E abre o menu
     junto, ver work.js) → ícones aparecem dentro do menu — sem regra
     especial nenhuma, só a genérica de sempre. */
}