/* ---------------------------------------------------------------------------
   copy.css — a Maxeville Tekst em tudo abaixo de 18 pt.

   REGRA DA CASA: a Tekst é a tipografia PRINCIPAL para qualquer tamanho
   abaixo de 18 pt (= 24 px). Construct e Regular são cortes de display e
   valem acima desse limiar. O transform.mjs marca com [data-copy] todo <p>
   cujo --framer-font-size inline fica abaixo de 24 px — nos exports isso é
   12, 13 e 14 px (copy, rótulos, nav, menu); o primeiro tamanho acima do
   limiar é 32 px.

   POR QUE UM ARQUIVO PRÓPRIO E NÃO tokens.css: as páginas do Framer NÃO
   carregam tokens.css (verificado: zero ocorrências em cada.html e
   index.html) — ele só entra nas páginas geradas pela loja. Os @font-face que
   as páginas de projeto usam vêm inline, no CSS que o Framer exporta. Então
   este arquivo é injetado pelo transform.mjs junto com os outros, e traz o
   @font-face consigo, sem depender de tokens.css.

   Antes o critério era "copy longo" (tamanho + mais de 60 caracteres), o que
   deixava rótulos e nav de 12-14px na Regular. A regra da casa não faz essa
   distinção: abaixo de 18 pt é texto, e texto é Tekst.

   UMA EXCEÇÃO: rótulo de botão fica na Construct — "a tipografia com os
   espaços". Não vale a pena listar quais: esses <p> já declaram a Construct
   no style inline do Framer, e o transform respeita essa declaração. Ou seja,
   a nav, o SELECTED WORK e os títulos de seção não são marcados.
   --------------------------------------------------------------------------- */

@font-face {
  font-family: 'Maxeville Tekst';
  src: url('/fonts/maxeville-tekst.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;   /* nunca esconde o copy esperando a fonte */
}

/* Marcado pelo build (transform.mjs) nos parágrafos que passam no critério de
   tamanho e comprimento — não por seletor de hash do Framer, que muda a cada
   re-export. A regra usa a família diretamente, com a Regular como primeiro
   fallback: se o woff2 falhar, o copy volta ao que era, não a uma serifada
   de sistema. */
/* A classe é repetida e o seletor casa com a do Framer de propósito.
   Medido: o Framer aplica `p.framer-text { font-family: var(--framer-font-family…) }`
   — especificidade (0,1,1) — e o faz num <style> inline que o export coloca
   DEPOIS dos nossos <link> no <head> (folhas 7 e 8, contra copy.css em 6).
   Empate de especificidade resolve pelo último a aparecer, então a regra do
   Framer vencia e o copy continuava em Regular.

   `p[data-copy][data-copy]` = (0,2,1), ganha sem depender de ordem e sem
   !important — que eu não teria como desfazer depois se você quiser voltar. */
p[data-copy][data-copy],
[data-copy][data-copy] {
  font-family: 'Maxeville Tekst', 'Maxeville Regular', 'General Sans', sans-serif;
}

/* ---------------------------------------------------------------------------
   Accordions de case study (espelho do Framer, com motion melhorada).

   Comportamento medido no site ao vivo (gravação 2026-09-02):
     · clique no título abre UM painel por vez (os outros fecham)
     · altura cresce e empurra os irmãos para baixo
     · marcador: quadrado de 7px, preto a 10% fechado → preto cheio aberto
     · corpo do texto some/aparece com a altura

   A variante closed do Framer trava height:40px (.framer-v-asecgf). Sem React
   o toggle mora em runtime.js (altura medida em px + transition). A classe
   .fel-accordion-open é o estado aberto; !important ganha da regra fechada.
   --------------------------------------------------------------------------- */
.framer-FNcnB[data-fel-acc] {
  overflow: hidden !important;
  will-change: height;
}

.framer-FNcnB.fel-accordion-open {
  height: min-content !important;
}

/* Corpo: some fechado, entra com a abertura.
   !important: o markReveals/motion pode deixar opacity:0 inline no data-reveal. */
.framer-FNcnB[data-fel-acc]:not(.fel-accordion-open) .framer-g68n0c {
  opacity: 0 !important;
  transition: opacity var(--m-dur-acc, 880ms) var(--m-ease-acc, cubic-bezier(.4, 0, .15, 1));
}
.framer-FNcnB.fel-accordion-open .framer-g68n0c {
  opacity: 1 !important;
  transition: opacity var(--m-dur-acc, 880ms) var(--m-ease-acc, cubic-bezier(.4, 0, .15, 1));
}

/* CREDITS: lista diagramada, não parágrafo. Papel em cima (Tekst
   pequena, caixa alta — abaixo de 18 pt a casa não usa Construct),
   nomes na linha de baixo. O vão é entre os papéis, não entre as
   palavras. Tudo span: o acordeão só tem um `<p>`. */
.framer-FNcnB[data-fel-acc] .framer-g68n0c .fel-credits {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}
.framer-FNcnB[data-fel-acc] .framer-g68n0c .fel-credit {
  display: block;
}
.framer-FNcnB[data-fel-acc] .framer-g68n0c .fel-credit-role {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.72);
  margin-bottom: 0.12em;
}
.framer-FNcnB[data-fel-acc] .framer-g68n0c .fel-credit-names {
  display: block;
  line-height: 1.35;
}

/* O MARCADOR DEIXA DE SER UM ÍCONE (12/09).
   ---------------------------------------------------------------------------
   "Eu não quero esse mais aparecendo como um ícone. Deixa selecionado como
   esse, preto 100%, e os que não estão selecionados ainda, preto 10% — assim
   como estava no site anterior."

   Era um `+` cinza fechado que virava quadrado preto aberto: DUAS FORMAS
   diferentes para dois estados da mesma coisa. Um `+` é um convite ("abre"),
   um quadrado é um índice ("é este") — a peça trocava de vocabulário no meio
   da interação, e ainda pedia que se lesse uma forma nova a cada linha.

   Agora é uma forma só, variando na TINTA: o mesmo quadrado de 7px, preto
   cheio na seção aberta e a 10% nas fechadas. O olho passa a ler a lista como
   uma coluna de marcas de intensidade — qual está acesa é imediato, sem
   comparar desenhos. É a mesma lógica que já rege o chip da câmera e a nav:
   a forma fica, a tinta é que diz o estado.

   Os 10% saem do pedido dele, e são o valor do site anterior. Sobre o
   #f5f5f5 da página o quadrado compõe ~rgb(221,221,221): é uma marca de
   presença, não de leitura — quem precisa saber o que a seção diz lê o
   TÍTULO, que continua em preto cheio nos dois estados. */
.framer-FNcnB[data-fel-acc] .framer-1fb8scs {
  background-color: rgba(0, 0, 0, 0.1) !important;
  width: 7px !important;
  height: 7px !important;
  transition: background-color var(--m-dur-acc, 880ms) var(--m-ease-acc, cubic-bezier(.4, 0, .15, 1));
}
.framer-FNcnB[data-fel-acc] .framer-1fb8scs::before,
.framer-FNcnB[data-fel-acc] .framer-1fb8scs::after {
  content: none;
}
.framer-FNcnB.fel-accordion-open .framer-1fb8scs {
  background-color: #000 !important;
}

@media (prefers-reduced-motion: reduce) {
  .framer-FNcnB[data-fel-acc] .framer-g68n0c,
  .framer-FNcnB[data-fel-acc] .framer-1fb8scs {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   FOUC do acordeão nas páginas de case.

   O intro ("DESIGN by FEL") NÃO é um overlay de tela cheia nestas páginas:
   .framer-nQ9AK é position:relative, sem o shell .framer-32eczs-container da
   home. O First Block (acordeão sticky + mosaico) pinta ao mesmo tempo, e o
   ABOUT chega aberto no SSR (data-framer-name="Open"). Resultado: a pilha
   branca aparece por cima da cortina no first paint.

   html.fel-intro-done entra quando a cortina termina (runtime.js). Páginas
   sem intro (geonav, jbs…) já nascem com a classe no <html>, via transform.
   O <style id="fel-acc-boot"> no <head> é a mesma regra, inline, para não
   esperar o <link> do copy.css.
   --------------------------------------------------------------------------- */
html:not(.fel-intro-done) body[data-project-page] .framer-FNcnB,
html:not(.fel-intro-done) body[data-project-page] [data-framer-name="ABOUT MAIN"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.fel-intro-done) body[data-project-page] .framer-FNcnB,
  html:not(.fel-intro-done) body[data-project-page] [data-framer-name="ABOUT MAIN"] {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Coluna esquerda sticky (Menu = nav FEL/WORK/ABOUT + acordeão).

   O Framer já declara position:sticky;top:0 nela. Dois fatores desgrudavam:
     1. motion.js etiquetava essa coluna como [data-site-nav]. Ao rolar,
        html.m-nav-hidden faz translate(-100% - 80px) + opacity:0 — a pilha
        inteira some e sobra o vão branco de 30% ao lado do mosaico.
     2. Em ≥1920px o Framer troca a coluna para align-self:stretch / height:auto,
        então o sticky fica tão alto quanto o mosaico e não tem onde grudar.

   Mobile (max 809.98px): o Menu leva hidden-* (display:none) e o First Block
   vira coluna — não forçamos sticky, senão cobriria o mosaico.

   O BURACO DOS 810–1199 (13/09).
   ---------------------------------------------------------------------------
   A regra de 30% abaixo já tratava essa faixa como desktop — acordeão à
   esquerda, mosaico ao lado. O Framer, porém, só vira fileira acima de
   1199.98px. Entre 810 e 1200 ele ainda é o tablet: First Block em column,
   Mosaic travado em 380px, Menu com order:1 (vai PARA BAIXO). A coluna de
   30% sozinha, nesse empilhamento, não monta o desktop — só encolhe o
   Menu e deixa o mosaico numa tira estreita com um vão branco do tamanho
   da página. É o "grid desconfigurado" das páginas de projeto.

   Nasceu cruzado: a sticky de 30% veio da loja (Tekst / coluna que não
   colapsa) assumindo a fileira; o breakpoint de 1200 do Framer nunca foi
   puxado junto. Completar o que a regra já prometia — fileira, ordem
   zerada, mosaico nos 70% — não inventar outro layout.
   --------------------------------------------------------------------------- */
@media (min-width: 810px) {
  body[data-project-page] [data-framer-name="First Block"] {
    flex-direction: row;
    gap: 0;
  }
  body[data-project-page] [data-framer-name="First Block"] > [data-framer-name="Menu"] {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    height: min-content !important;
    /* Geonav (e ≥1920 na Perzona) usa flex:1 0 0 + width:1px para encher a
       fileira. Sem uma base de 30% a coluna colapsa (~9px), o copy empilha na
       vertical e o sticky fica tão alto quanto o mosaico — some ao rolar. */
    flex: 0 0 30% !important;
    width: 30% !important;
    overflow: visible !important;
    z-index: 4;
    order: 0;
  }
  body[data-project-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] {
    flex: 1 1 70%;
    width: 70%;
    min-width: 0;
    order: 0;
  }

  /* O HEADER DO MOSAICO (chip da marca + tags) É A MESMA FILEIRA.
     CADA/Geonav/a maioria só empilha abaixo de 810. B3 Digitas (e o
     breakpoint 1200 de algumas irmãs) ainda trata 810–1199 como tablet:
     `.framer-ukpyh6` vira column, as tags ganham width:100% e caem
     DEBAIXO do chip — o "header desconfigurado" do print. Não é layout
     novo: é o space-between que o Framer já declara no desktop. */
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    height: 70px !important;
    gap: 8px !important;
    /* Gruda na altura em que já nasce (5px, o padding do mosaico — a mesma
       linha do FEL). top:0 puxava a fileira 5px para cima no primeiro scroll. */
    position: sticky !important;
    top: 5px !important;
    z-index: 5 !important;
    background: none !important;
    overflow: visible !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* O blur mora num véu ATRÁS dos botões e dissolve para baixo. Sem chapa:
     a máscara é que faz o degradê, do nítido sob o chip até sumir. */
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 0;
    right: -5px;
    top: -5px;
    height: 128px;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(245, 245, 245, 0.28) 0%,
      rgba(245, 245, 245, 0.08) 38%,
      rgba(245, 245, 245, 0) 100%
    );
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
    /* O corte vertical na coluna do menu virava um filete. A máscara da
       esquerda abre o blur ao longo de 40px; a de baixo continua o degradê. */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0px, #000 40px),
      linear-gradient(to bottom, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 52%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0px, #000 40px),
      linear-gradient(to bottom, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 52%, transparent 100%);
    -webkit-mask-composite: destination-in;
    mask-composite: intersect;
    /* No topo não há nada atrás dos botões: o véu nasce invisível e só
       entra nos primeiros 80px de rolagem. De volta ao topo, some de novo. */
    opacity: 0;
  }
  @supports (animation-timeline: scroll()) {
    body[data-project-page] [data-framer-name="Mosaic"] > :first-child::before {
      animation: fel-veu-nav linear both;
      animation-timeline: scroll(root);
      animation-range: 0px 80px;
    }
  }
  @supports not (animation-timeline: scroll()) {
    body[data-project-page] [data-framer-name="Mosaic"] > :first-child::before {
      opacity: 1;
    }
  }
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child a {
    position: relative;
    z-index: 1;
  }
  /* 2 filhos: o segundo é as tags. 3 filhos: o último é uma variante SSR
     0×0 (ABOUT MAIN no Teva) e as tags são o do meio. `*:last-child`
     pegava o fantasma — as tags continuavam `wrap` e o overflow:hidden
     não encostava nelas. CUSTOM TOOL saía fatiado a 1000px. */
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child > *:nth-child(2) {
    position: relative;
    z-index: 1;
    flex: 1 0 0px !important;
    width: 1px !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
}

@keyframes fel-veu-nav {
  from { opacity: 0; }
  to { opacity: 1; }
}

html.m-nav-hidden body[data-project-page] [data-site-nav][data-site-nav] {
  translate: none;
  opacity: 1;
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   ABOUT — página escura, retrato 4:5, CURRENTLY | PREVIOUSLY em duas colunas.

   Pedido (14/09): inverter. O export nasce branco; home e /projects são
   pretas. A About era a única clara. Painéis #eee viram #121212; a tinta
   dos mosaicos vai a #eee. Os rótulos já são barra preta + tipo branco —
   no fundo preto eles continuam, sem virar faixa branca. A foto não
   inverte: é retrato, não chrome.
   --------------------------------------------------------------------------- */
html:has(body[data-about-page]),
body[data-about-page] {
  background: #000 !important;
  color-scheme: dark;
}
body[data-about-page] {
  /* Só o painel. A tinta #121212 e o chip LIGHT da nav ficam: no preto
     da página o chip claro ainda lê, e se a tinta virasse #eee o
     FEL/WORK/ABOUT lavava em cima dele. */
  --token-b893d6f3-1bd1-4fae-bf45-10597a5c5221: #121212;
}
body[data-about-page] [data-framer-root],
body[data-about-page] [data-framer-root] > div {
  background-color: #000 !important;
}
body[data-about-page] [data-framer-name="Menu"] {
  background-color: #000 !important;
}
body[data-about-page] [data-framer-name="Mosaic"] {
  background-color: #000 !important;
}
body[data-about-page] [data-framer-name="Mosaic"] > * {
  background-color: #121212 !important;
}
body[data-about-page] [data-framer-name="Mosaic"] .framer-text {
  color: #eee !important;
}
body[data-about-page] [data-framer-name="Mosaic"] a.framer-text,
body[data-about-page] [data-framer-name="Mosaic"] a:not(:has([data-framer-name])) {
  color: #eee !important;
  text-decoration: none !important;
  text-underline-offset: 0.18em;
  outline: none;
}
/* Pedido (16/09): o hiperlink lê como texto corrido; no hover (e no
   foco de teclado) o sublinhado denuncia que é âncora. */
body[data-about-page] [data-framer-name="Mosaic"] a.framer-text:hover,
body[data-about-page] [data-framer-name="Mosaic"] a.framer-text:focus-visible,
body[data-about-page] [data-framer-name="Mosaic"] a:not(:has([data-framer-name])):hover,
body[data-about-page] [data-framer-name="Mosaic"] a:not(:has([data-framer-name])):focus-visible {
  text-decoration: underline !important;
}

/* FIRST BLOCK — nav, chip do nome e retrato na mesma linha de teto.
   O Framer alinha o retrato com um header de 70px (vão de 45px na coluna
   da Menu). Depois da inversão o header virou um laje #121212 e o chip
   DARK (também #121212) desapareceu nele: só restava um retângulo cinza
   à esquerda (o topo do retrato, parede) e um FELIPE SOUZA ilegível. */
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Menu"] {
  gap: 8px !important;
  row-gap: 8px !important;
}
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] {
  gap: 8px !important;
  row-gap: 8px !important;
}
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] > :first-child {
  background-color: transparent !important;
  height: auto !important;
  min-height: 26px !important;
  align-items: center !important;
}
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] > :first-child [data-framer-name="DARK"] {
  background-color: var(--glass-face-light, rgba(238, 238, 238, 0.9)) !important;
}
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] > :first-child [data-framer-name="DARK"] .framer-text {
  color: #111 !important;
}
body[data-about-page] [data-framer-name="First Block"] > [data-framer-name="Mosaic"] > :nth-child(2) {
  overflow: visible !important;
  min-width: 0;
}

/* CURRENTLY | PREVIOUSLY. O transform troca o parágrafo empilhado por
   `.fel-xp`. `pre-wrap` do RichTextContainer do Framer ficaria entre as
   colunas — normaliza. Tekst: os dois lados estão abaixo de 18 pt. */
body[data-about-page] .fel-xp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 32px;
  width: 100%;
  white-space: normal;
  font-family: 'Maxeville Tekst', 'Maxeville Regular', sans-serif;
  font-size: 13px;
  line-height: 1.3;
  color: #eee;
}
body[data-about-page] .fel-xp-label {
  margin: 0 0 0.55em;
}
body[data-about-page] .fel-xp-names {
  margin: 0;
  line-height: 1.35;
}
/* Pedido (15/09): o nome continua âncora, mas sem sublinhado e sem
   contorno. O país sai da sigla e vira a bandeira, alinhada ao x-height. */
body[data-about-page] .fel-xp a,
body[data-about-page] [data-framer-name="Mosaic"] .fel-xp a.framer-text {
  color: inherit !important;
  text-decoration: none !important;
  outline: none;
  box-shadow: none;
}
body[data-about-page] .fel-xp a:focus,
body[data-about-page] .fel-xp a:focus-visible {
  outline: none;
  box-shadow: none;
  color: #fff !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}
body[data-about-page] .fel-xp a:hover {
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}
body[data-about-page] .fel-xp-flags {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 0.45em;
  vertical-align: 0.08em;
}
body[data-about-page] .fel-xp-flag {
  display: block;
  width: 16px;
  height: 11px;
  flex: none;
  border-radius: 1px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(238, 238, 238, 0.28);
}

/* ---------------------------------------------------------------------------
   FAIXA DE PROJETOS — o rodapé "RELATED PROJECTS".

   O card é o que o Framer já desenha ali: chapa #f5f5f5, 5px de respiro,
   foto com corte, rótulo preto embaixo à esquerda. A altura da foto segue
   a família que os três cards já usavam (180 / 220 / 300), pela razão da
   capa — retrato alto, paisagem baixa. A largura fica em 260, a medida do
   card de hoje.

   A pista é mais larga que a página. `min-width: 0` é o que impede o flex
   do Framer de abrir a página na horizontal: sem isso o mínimo do item é
   a largura da pista inteira e nasce uma barra de rolagem.
   --------------------------------------------------------------------------- */
body[data-project-page] [data-framer-name="OTHER PROJECTS"].fel-rel-area {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  overflow: clip !important;
  padding: 8px 0 16px !important;
  cursor: grab;
  touch-action: pan-y;
}
body[data-project-page] [data-framer-name="OTHER PROJECTS"].fel-rel-area.is-arraste {
  cursor: grabbing;
}
.fel-rel-pista,
.fel-rel-set {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  width: max-content;
}
.fel-rel-pista {
  will-change: transform;
}
.fel-rel {
  flex: none;
  width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 5px;
  background: #121212;
  text-decoration: none;
  color: #fff;
  user-select: none;
}
.fel-rel img {
  display: block;
  width: 100%;
  height: var(--fel-rel-h, 220px);
  object-fit: cover;
  pointer-events: none;
}
.fel-rel span {
  display: block;
  padding: 4px 8px;
  background: #000;
  color: #fff;
  font-family: "Maxeville Construct", "Maxeville Construct Placeholder", sans-serif;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}
.fel-rel:focus-visible {
  outline: 1px solid #eee;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  body[data-project-page] [data-framer-name="OTHER PROJECTS"].fel-rel-area {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    cursor: auto;
    scroll-snap-type: x mandatory;
  }
  .fel-rel-pista { transform: none !important; }
  .fel-rel { scroll-snap-align: start; }
}

/* ---------------------------------------------------------------------------
   CASES — o site é 100% escuro (03/10).

   "Agora o site tem que ser 100% dark mode. Alguns projetos estão sendo
   abertos no light mode." Home, /projects e /about já eram pretos; as 15
   páginas de case ainda saíam com o tema claro do export (fundo branco,
   acordeão #f5f5f5, tags claras). Mesma régua da About:

     fundo     #000      — página, raiz do Framer, colunas
     painel    #121212   — acordeão, tags, cards de outros projetos
     tinta     #eee      — título e copy dos painéis
     marcador  #eee cheio aberto, a 10% fechado (a regra de 12/09, invertida)

   O chip LIGHT da nav (FEL/WORK/ABOUT) fica claro, como na About: no preto
   ele ainda lê e é o mesmo vidro da home. As imagens dos cases não invertem —
   são o trabalho, não chrome.
   --------------------------------------------------------------------------- */
html:has(body[data-project-page]),
body[data-project-page] {
  background: #000 !important;
  color-scheme: dark;
}
/* Só a raiz e as colunas — NÃO `[data-framer-root] > div` como na About:
   aqui um dos filhos diretos é o contêiner fixo da cortina de intro
   (1440×900, z10, transparente depois da entrada). Pintá-lo cobre o case. */
body[data-project-page] [data-framer-root],
body[data-project-page] [data-framer-name="First Block"],
body[data-project-page] [data-framer-name="Menu"],
body[data-project-page] [data-framer-name="Mosaic"] {
  background-color: #000 !important;
}

/* Acordeão: painel e tinta. */
body[data-project-page] .framer-FNcnB[data-fel-acc] {
  background-color: #121212 !important;
}
body[data-project-page] .framer-FNcnB[data-fel-acc] .framer-text {
  color: #eee !important;
}
body[data-project-page] .framer-FNcnB[data-fel-acc] .framer-1fb8scs {
  background-color: rgba(238, 238, 238, 0.1) !important;
}
body[data-project-page] .framer-FNcnB.fel-accordion-open .framer-1fb8scs {
  background-color: #eee !important;
}
body[data-project-page] .framer-FNcnB[data-fel-acc] .framer-g68n0c .fel-credit-role {
  color: rgba(238, 238, 238, 0.6);
}
body[data-project-page] .framer-FNcnB[data-fel-acc] a.framer-text {
  color: #eee !important;
}

/* Tags do header: a mesma pílula #121212 de /projects. */
body[data-project-page] [data-framer-name="Tags"] {
  background-color: #121212 !important;
}
body[data-project-page] [data-framer-name="Tags"] .framer-text {
  color: #eee !important;
}

/* O véu sob o header rolado era um branco a 28%; no preto vira preto. */
@media (min-width: 810px) {
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child::before {
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.15) 38%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

/* RELATED PROJECTS: o export pinta o bloco com um degradê inline branco→preto
   (CARDS-n, CARDS-n-MOB e, no Geonav, "Variant 12"). No site escuro ele
   virava uma faixa clara de 200px entre o case e os cards. Fica preto, e o
   rótulo vai para o cinza de legenda (#828282, o token-788313b6 do Framer).
   O seletor é o próprio degradê, não o nome da camada — o nome muda de case
   para case e a cada re-export. */
body[data-project-page] [style*="linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%)"] {
  background: #000 !important;
}
body[data-project-page] [style*="linear-gradient(180deg, rgb(255, 255, 255) 0%, rgb(0, 0, 0) 100%)"] [data-framer-name="Tag"] .framer-text {
  color: #828282 !important;
}

/* Responsive case header: reserve the project name before fitting tags.
   SSR wrappers use display:contents, so protect the painted chip as well. */
body[data-project-page] [data-framer-name="Mosaic"] > :first-child {
  min-width: 0 !important;
  isolation: isolate;
}
body[data-project-page] [data-framer-name="Mosaic"] > :first-child > :first-child {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
}
body[data-project-page] [data-framer-name="Mosaic"] > :first-child > :first-child a {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  position: relative;
  z-index: 2 !important;
}
@media (min-width:810px) {
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child {
    z-index: 60 !important;
  }
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child > :nth-child(2) > * {
    flex-shrink: 0 !important;
  }
}
@media (max-width:809.98px) {
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    height: auto !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
  }
  body[data-project-page] [data-framer-name="Mosaic"] > :first-child > :nth-child(2) {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}