/* ==========================================================================
   DRAWER LATERAL — prefixo drw-
   Grade de itens + UM painel <dialog> que desliza da direita ocupando uma
   faixa da tela. O detalhe do item entra dentro dele; a página fica visível,
   escurecida, atrás.

   Tokens usados:
     --accent           monograma, realce do card, botão do rodapé (via .btn)
     --bg               fundo do painel — vem do .sec-deep declarado no markup
     --veil             véu do ::backdrop — pintado pela .dialog-casca do core
     --display          nome do item, título do painel, rótulos internos
     --sans             corpo de texto
     --ease --dur       curva do projeto
     --fg --fg-2        tinta do título e do texto
     --fg-muted         cargo, rótulos, ressalva
     --rule --rule-2    filete do cabeçalho/rodapé e do monograma
     --radius-media     canto do card
     --radius-pill      via .pill e .btn-disc do core

   Parafusos do próprio componente (§3: local não pede conversa):
     --drw-w      largura do painel no desktop
     --drw-pad    respiro interno do painel — NÃO é o --pad do grid, que só
                  o .wrap consome
     --drw-dur    tempo do deslize; o script tem a mesma constante em ms
     --drw-faixa  passo do escalonamento entre cabeça, corpo e pé

   Parafuso da primitiva que este componente ajusta:
     --dialog-blur  desfoque do ::backdrop, 7px aqui contra os 6px do padrão

   Primitivas consumidas do core, nunca recopiadas: .wrap, .sec-pad,
   .sec-head, .eyebrow, .sec-title, .sec-lead, .glass/.glass-hover, .pill,
   .btn/.btn-primary, .btn-disc e a .dialog-casca — que zera a caixa que o
   navegador dá ao <dialog> e pinta o ::backdrop com --veil.

   A REGRA QUE ORGANIZA O ARQUIVO: nada aqui esconde os perfis. Quem esconde
   é o script, com [hidden], depois de tudo ligado. Sem JavaScript o CSS
   entrega a grade e os perfis em texto corrido, que é o que se quer.
   ========================================================================== */

/* ---- A grade de itens ---------------------------------------------------- */

.drw-grade{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-block-start:54px;
}

.drw-card{
  inline-size:100%;
  display:grid;
  justify-items:start;
  gap:6px;
  padding:26px 24px 22px;
  border-radius:var(--radius-media);
  text-align:start;
  color:var(--fg);
  cursor:pointer;
  /* A borda e o fundo vêm do .glass. Aqui só o que é do card. */
}
/* HOVER NÃO MEXE NO CARD (CLAUDE.md §6, regra de 2026-09-29). Ele subia 3px
   sob o ponteiro, e saiu: card que se desloca no hover é a mesma família do
   zoom de foto, e é o que quebra a página quando a grade é colada noutro
   lugar. O retorno fica na borda do .glass-hover e no disco do monograma,
   logo abaixo. */

.drw-mono{
  display:grid;
  place-items:center;
  inline-size:50px;
  block-size:50px;
  margin-block-end:14px;
  border:1px solid var(--rule-2);
  border-radius:var(--radius-pill);
  font-family:var(--display);
  font-weight:700;
  font-size:14px;
  letter-spacing:.08em;
  color:var(--accent);
  transition:border-color .45s var(--ease);
}
.drw-card:hover .drw-mono,
.drw-card:focus-visible .drw-mono{border-color:var(--accent)}

.drw-nome{
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-.015em;
  line-height:1.2;
  color:var(--fg);
}
.drw-cargo{font-size:13.5px;line-height:1.45;color:var(--fg-2)}
.drw-areas{
  margin-block-start:2px;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

/* O rótulo de ação nasce VISÍVEL, não no hover: toque não tem hover, e sem
   ele o card não avisa que abre alguma coisa (§3 do brief). O hover só
   desloca a seta. */
.drw-mais{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-block-start:16px;
  padding-block-start:16px;
  border-block-start:1px solid var(--rule);
  inline-size:100%;
  font-family:var(--display);
  font-weight:700;
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fg-2);
  transition:color .35s var(--ease);
}
.drw-card:hover .drw-mais,
.drw-card:focus-visible .drw-mais{color:var(--accent)}
.drw-mais svg{transition:transform .35s var(--ease)}
.drw-card:hover .drw-mais svg,
.drw-card:focus-visible .drw-mais svg{transform:translate(2px,-2px)}
@media(prefers-reduced-motion:reduce){
  .drw-mais svg{transition:none}
  .drw-card:hover .drw-mais svg,
  .drw-card:focus-visible .drw-mais svg{transform:none}
}

/* ---- As fontes: o conteúdo sem JavaScript -------------------------------- */

.drw-fontes{
  display:grid;
  gap:40px;
  margin-block-start:60px;
  padding-block-start:40px;
  border-block-start:1px solid var(--rule);
}
/* §6.5 do contrato: quem dá `display` a um bloco que às vezes é [hidden] tem
   de desligá-lo à mão — a regra de autor vence o display:none da folha do
   agente do usuário, e o bloco continuaria na tela com o atributo posto. */
.drw-fontes[hidden]{display:none}

.drw-fontes-titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-.015em;
  color:var(--fg);
}
.drw-fontes-nota{margin-block-start:8px;font-size:14px;color:var(--fg-muted);max-width:62ch}

.drw-fonte{display:grid;gap:4px}
.drw-fonte-nome{
  font-family:var(--display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.015em;
  color:var(--fg);
}
.drw-fonte-cargo{font-size:13.5px;color:var(--fg-muted)}

/* ---- O miolo do detalhe -------------------------------------------------
   Estas regras valem NOS DOIS lugares: no bloco de texto corrido da página
   (sem script) e dentro do painel (com script). É por isso que nenhuma delas
   se pendura em .drw-corpo — o mesmo nó vive nos dois contextos, e duplicar
   a folha por contexto seria manter duas verdades. */

.drw-fonte-corpo{
  display:grid;
  gap:16px;
  margin-block-start:16px;
  max-width:64ch;
  color:var(--fg-2);
  font-size:15.5px;
  line-height:1.62;
}

.drw-tags{display:flex;flex-wrap:wrap;gap:8px}

.drw-frase{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(17px,1.5vw,20px);
  line-height:1.32;
  letter-spacing:-.015em;
  color:var(--fg);
  padding-inline-start:16px;
  border-inline-start:1px solid var(--accent);
  text-wrap:balance;
}

.drw-rot{
  margin-block-start:6px;
  font-family:var(--sans);
  font-weight:400;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-muted);
}

.drw-lista{display:grid;gap:9px}
.drw-lista li{position:relative;padding-inline-start:18px}
.drw-lista li::before{
  content:"";
  position:absolute;
  inset-block-start:.72em;
  inset-inline-start:0;
  inline-size:8px;
  block-size:1px;
  background:var(--accent);
}

/* A ressalva fica ONDE A PESSOA LÊ, colada ao texto, e não num rodapé de
   página que ninguém abre. */
/* Tipografia pela primitiva .nota do core; margem e filete são posição.
   --nota-max:none porque a MESMA ressalva serve dois contêineres de largura
   oposta — o painel estreito e o texto corrido da página, quando não há
   JavaScript. Quem manda na medida é o contêiner, não um teto fixo. */
.drw-nota{
  margin-block-start:4px;
  padding-block-start:14px;
  border-block-start:1px solid var(--rule);
  --nota-max:none;
}

/* ==========================================================================
   O PAINEL
   ========================================================================== */

/* O <dialog> nasce display:none na folha do agente do usuário e só aparece
   com [open]. Declarar `display:flex` aqui, sem o [open], deixaria o painel
   visível o tempo todo com a página rolando por baixo — é a mesma armadilha
   do §6.5, na versão do elemento nativo. Por isso o display mora na regra do
   [open], e não aqui. */
.drw{
  --drw-w:520px;
  --drw-pad:clamp(22px,3vw,34px);
  --drw-dur:.44s;
  --drw-faixa:.09s;

  /* O <dialog> modal já é fixed no topo da pilha; repetir aqui é o que
     permite reescrever a posição sem depender do valor do agente do usuário.
     inset:0 + margin-inline-start:auto com largura fixa cola o painel na
     borda direita; block-size:100% o estica na altura. É assim que o
     elemento centralizado por padrão vira uma faixa lateral, sem forçar
     prioridade na declaração e sem tocar no core. */
  position:fixed;
  inset:0;
  margin:0 0 0 auto;
  inline-size:min(var(--drw-w),100%);
  block-size:100%;
  /* Padding, borda e os limites de max-content são da .dialog-casca. Estas
     duas NÃO são: aqui o <dialog> É o painel, e não um palco transparente com
     um painel dentro. A primitiva devolve `background:transparent` e
     `color:inherit` para zerar a caixa do navegador; a superfície e a tinta
     vêm do escopo de tom que o markup declara no próprio diálogo, e por isso
     continuam escritas. */
  background:var(--bg);
  color:var(--fg);
  /* `hidden` e não o `visible` da primitiva, e a diferença é visível: cabeça,
     corpo e pé entram com filter:blur(12px), e o desfoque de um item que
     ocupa a largura inteira da faixa pinta PARA FORA dela — sobre o véu, à
     esquerda da borda do painel. Clipar na caixa do diálogo é o que mantém o
     deslize com uma borda só. */
  overflow:hidden;
  /* Fecha por arrasto horizontal no toque sem roubar a rolagem vertical do
     corpo: pan-y devolve ao navegador o gesto vertical e entrega ao script
     só o horizontal. pinch-zoom fica declarado para não desligar o zoom de
     acessibilidade, que `pan-y` sozinho tiraria. */
  touch-action:pan-y pinch-zoom;
  transform:translateX(100%);
  transition:transform var(--drw-dur) var(--ease);
}
.drw[open]{display:flex;flex-direction:column}
.drw.is-aberto{transform:none}
/* Durante o arrasto o transform vem por style inline, quadro a quadro: uma
   transição aqui atrasaria o painel em relação ao dedo. */
.drw.is-arrastando{transition:none}

/* O véu e o desfoque são da .dialog-casca. Sobram aqui duas coisas: o grau do
   desfoque e a coreografia de opacidade, que a primitiva não cobre.

   O VÉU ESCURECIA 74% E PASSOU AOS 78% DO TOKEN, e a decisão foi medida, não
   dada: esta peça existe para manter o contexto visível atrás, então adotar um
   véu mais fundo tinha de ser conferido. Fotografada a faixa de 905x900 que
   fica à esquerda do painel, a 1440x900: a mediana da página atrás fica no
   cinza 12 nos dois graus, e o 0,1% mais claro dela cai do cinza 40 para o 36
   — quatro níveis em 255. O contraste interno do que se vê atrás vai de 1,33
   para 1,26, e nos dois casos está muito abaixo de qualquer limite de leitura:
   ali a página é PRESENÇA, não texto. E o fundo do próprio painel é o cinza 24,
   entre a mediana e o pico — ou seja, a página continua se lendo atrás dele.
   Quatro pontos por um número que deixa de viver em dois lugares.

   O --dialog-blur é declarado NO PSEUDO-ELEMENTO, e não no .drw: até o Chrome
   121 o ::backdrop não herdava custom property do <dialog> de origem, e um
   valor posto no diálogo chegaria vazio — o desfoque cairia no default de 6px
   sem avisar. Declarado na própria regra do ::backdrop, não há herança no
   caminho. (O --veil da primitiva ainda depende dela; ver ficha.md.) */
.drw::backdrop{
  --dialog-blur:7px;
  opacity:0;
  transition:opacity var(--drw-dur) var(--ease);
}
.drw.is-aberto::backdrop{opacity:1}

/* ---- Cabeçalho parado, corpo rolando, rodapé parado ---------------------- */

.drw-cabeca{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:26px var(--drw-pad) 20px;
  border-block-end:1px solid var(--rule);
}
.drw-cabeca-txt{min-inline-size:0}
.drw-olho{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--fg-muted);
}
.drw-titulo{
  margin-block-start:8px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(24px,2.4vw,30px);
  line-height:1.14;
  letter-spacing:-.022em;
  color:var(--fg);
}
.drw-fechar{--disc-size:40px;margin-block-start:2px}

.drw-corpo{
  flex:1 1 auto;
  /* Sem isto o item de flex nunca encolhe abaixo do conteúdo, o painel
     estica além da janela e quem rola é a página, não o corpo. */
  min-block-size:0;
  overflow-y:auto;
  /* A rolagem do corpo não empurra a página atrás quando chega na ponta. */
  overscroll-behavior:contain;
  scrollbar-width:thin;
  padding:26px var(--drw-pad) 30px;
  /* O corte do corpo é indicado por máscara, não por sombra: a folha do
     projeto é flat, e sombra ali leria como caixa dentro de caixa. */
  mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 34px),transparent 100%);
}
.drw-corpo:focus{outline:none}
.drw-corpo:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

.drw-pe{
  flex:0 0 auto;
  display:grid;
  justify-items:start;
  gap:12px;
  padding:20px var(--drw-pad) 24px;
  border-block-start:1px solid var(--rule);
}
/* .drw-pe-nota não tem regra própria: a primitiva .nota do core entrega a
   tipografia inteira e a posição é do .drw-pe, que é um grid. A classe fica
   no markup como gancho para quem consumir a peça. */

/* ---- A entrada do conteúdo, em três faixas ------------------------------
   Nada entra seco (§5): as três regiões do painel entram com blur indo a
   zero, escalonadas.

   O ESCOPO `.drw` NA FRENTE NÃO É ENFEITE. O estado de repouso é invisível,
   e o corpo do detalhe também vive FORA do painel, na página, quando não há
   script. Se estas regras não estivessem presas ao painel, a página sem
   JavaScript renderizaria os quatro perfis em opacity:0 — conteúdo montado,
   correto e invisível, que é exatamente o bug que o @media(scripting:none)
   do core existe para evitar. */
.drw .drw-cabeca,
.drw .drw-corpo,
.drw .drw-pe{
  opacity:0;
  filter:blur(12px);
  transform:translateY(12px);
  transition:opacity .55s var(--ease),filter .6s var(--ease),transform .55s var(--ease);
}
.drw.is-aberto .drw-cabeca,
.drw.is-aberto .drw-corpo,
.drw.is-aberto .drw-pe{opacity:1;filter:blur(0);transform:none}
.drw.is-aberto .drw-corpo{transition-delay:var(--drw-faixa)}
.drw.is-aberto .drw-pe{transition-delay:calc(var(--drw-faixa) * 2)}

@media(prefers-reduced-motion:reduce){
  /* O painel continua abrindo e fechando — foi pedido. Some só a
     coreografia: nem deslize, nem blur, nem escalonamento.
     Os dois grupos de seletor estão escritos porque a regra de abertura
     vale (0,3,0) e uma versão curta aqui, de (0,2,0), perderia em silêncio
     — e `blur(0)` ainda é filtro, com tudo que isso implica. */
  .drw{transform:none;transition:none}
  .drw .drw-cabeca,
  .drw .drw-corpo,
  .drw .drw-pe,
  .drw.is-aberto .drw-cabeca,
  .drw.is-aberto .drw-corpo,
  .drw.is-aberto .drw-pe{
    opacity:1;filter:none;transform:none;transition:none;transition-delay:0s;
  }
}

/* ---- Mobile ------------------------------------------------------------- */

@media(max-width:1080px){
  .drw-grade{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
  .drw{--drw-w:100%}
  .drw-grade{grid-template-columns:minmax(0,1fr);gap:12px;margin-block-start:40px}
  .drw-card{padding:22px 20px 20px}
  .drw-mono{inline-size:44px;block-size:44px;margin-block-end:12px}
  .drw-cabeca{padding-block-start:22px}
  .drw-fontes{gap:32px}
}