/* ══════════════════════════════════════════════════════════════════════
   SISTEMA — prancha técnica
   Uma cor, um trabalho. É o que faz a paleta ler como sistema e não
   como decoração:
     papel    superfície, e só
     tinta    todo o texto
     marinho  nome legado do violeta de estrutura e títulos secundários
     roxo     marcadores, estado atual, links de entrada e interações
   Contraste medido sobre o papel #eee5d6:
     tinta #2d2832 11.5:1 · roxo #7444a5 5.4:1
     cinza #645c65 5.2:1
   ESCALA — tudo deriva de φ = 1.618. Nenhum número solto.
   ══════════════════════════════════════════════════════════════════════ */
:root{
  --phi:1.618;
  /* `calc()` NÃO aceita `fr` em grid — `calc(1fr * var(--phi))` invalida a
     declaração inteira e o grid vira coluna única, sem erro nenhum. A razão
     áurea entre colunas só entra como token pronto. */
  --fr-phi:1.618fr;

  --papel:#eee5d6;
  --papel-2:#e5d9c6;
  --tinta:#2d2832;
  --marinho:#6b4f82;
  --cinza:#645c65;
  --roxo:#7444a5;
  --roxo-luz:#c5a5ed;   /* acento sobre a prancha invertida — 6.8:1 na tinta */
  --preto:#17121e;

  --fio:rgba(107,79,130,.16);
  --fio-2:rgba(107,79,130,.32);
  --malha-cor:rgba(107,79,130,.055);

  /* ── TIPOGRAFIA ──────────────────────────────────────────────────────
     Os degraus de display seguem φ. Os dois de baixo NÃO: `--t--2` e
     `--t--1` são rótulo, e rótulo em versalete monoespaçado precisa de
     mais corpo que a razão entrega para continuar legível. Estavam em
     8,7px e 11,5px — tamanho de nota de rodapé de contrato.

     REGRA DE ATRIBUIÇÃO, que é o que estava errado e não a escala:
       corpo    prosa. NÃO declara tamanho — herda do `body`, e o `body`
                é a única fonte da medida de leitura.
       --t--1   rótulo com palavra: `REV.`, `ALT · 01`, `Em preparo`.
       --t--2   micro-rótulo, sempre monoespaçado e em caixa alta.
     Quase toda a prosa do site estava em `--t--1`: a legenda de cada
     prancha, o que cada projeto É, a trajetória inteira, a biblioteca,
     as portas, a Carta. Texto para ler, diagramado como etiqueta.

     E subir a prosa sozinha é MEIA correção — foi o que a primeira versão
     desta mudança fez, e inverteu a hierarquia em três lugares: o nome do
     autor ficou menor que a descrição dele, o cabeçalho de coluna menor
     que a lista que ele encabeça, e o ano da trajetória mais fraco que a
     entrada que ele indexa. Âncora tem de subir junto com o que ela
     ancora; senão o que se ganha em legibilidade se perde em leitura. */
  --t--2:.66rem; --t--1:.82rem; --t-0:1rem;
  --t-1:1.618rem; --t-2:2.618rem; --t-3:4.236rem; --t-4:6.854rem;

  /* espaço em φ */
  --e-1:.618rem; --e-2:1rem; --e-3:1.618rem; --e-4:2.618rem;
  --e-5:4.236rem; --e-6:6.854rem; --e-7:11.09rem;

  --serif:"EB Garamond",Georgia,serif;
  --sans:"Manrope",-apple-system,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;

  --larg:96rem;
  --marg:clamp(var(--e-3),4vw,var(--e-5));
  --medida:66ch;   /* a folha ficou larga: a linha de texto não acompanha */

  /* ── TEMPO EM φ ──────────────────────────────────────────────────────
     A tabela de convenções do spine diz "tudo deriva de φ, nenhum número
     solto no CSS" — e valia para espaço e tipografia, nunca para tempo.
     Havia 33 durações soltas aqui (.2s, .22s, .25s, .3s, .35s, .5s, .7s):
     seis valores para dizer "rápido" e nenhuma razão para a diferença.
     A mesma escala φ, agora aplicada ao tempo:

       --d--1  .191s  troca de cor, de borda, de estado dentro de um botão
       --d-0   .309s  troca de superfície (fundo de ficha, de linha, de porta)
       --d-1   .5s    revelação de matéria (filtro, retícula, foto)
       --d-2   .809s  deslocamento de bloco — entrada na tela
       --d-3   1.309s  só sequência encadeada; nada isolado dura tanto

     Passar de um degrau para o outro é decisão visível. Escolher .28s
     porque .25s "ficou meio rápido" não é.
     ────────────────────────────────────────────────────────────────── */
  --d--2:.118s; --d--1:.191s; --d-0:.309s; --d-1:.5s; --d-2:.809s; --d-3:1.309s;
  /* `--d--2` não é duração de nada: é o PASSO do escalonamento. Três blocos
     entrando com 118 ms entre eles leem como uma sequência; com 30 ms leem
     como um erro de sincronia, e com 300 ms como uma fila de espera. */

  /* Duas curvas, e só duas. `--saida` para tudo que CHEGA (desacelera ao
     pousar, como instrumento estabilizando); `--entrada` para o pouco que
     SAI (acelera ao ir embora). Uma terceira curva não descreveria um
     terceiro comportamento — descreveria indecisão. Nada aqui quica:
     overshoot em prancha técnica mente sobre a massa do objeto. */
  --saida:cubic-bezier(.2,.7,.3,1);
  --entrada:cubic-bezier(.6,0,.9,.4);

  /* Orçamento de deslocamento. Era `--e-1` (.618rem) — assentar, não entrar.
     Passou a `--e-3` por decisão do autor em 08/09: o site deve SER animado,
     não apenas não incomodar. A escala continua sendo a régua; o que mudou é
     o degrau escolhido dentro dela, e ele continua sendo um degrau de φ e não
     um número inventado. */
  --desloc:var(--e-3);

  /* O acervo é a única coisa que se move sozinha (e por isso tem botão de
     pausa). As duas faixas guardam φ entre si: sem isso o olho encontra o
     compasso comum e o laço aparece. */
  --d-acervo:96s;
}
*{box-sizing:border-box}
/* `color-scheme:light` é declaração, não omissão: o papel é a matéria do
   sistema e não existe versão escura dele. Sem isto o navegador pinta
   controle nativo (barra, campo, seleção de data) em escuro sobre papel
   claro, e o único lugar do site que fica fora do sistema é justamente o
   que o sistema não desenhou. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth;
  color-scheme:light;scrollbar-color:var(--fio-2) transparent;
  scrollbar-gutter:stable}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--sans);
  font-size:clamp(1rem,.34vw + .92rem,1.14rem);line-height:var(--phi);overflow-x:hidden;
  /* aspas e travessões pendurados na margem: a coluna de texto ganha a
     borda reta que uma prancha impressa tem. Ignorado onde não existe. */
  hanging-punctuation:first last}
h1,h2,h3,h4,p,figure,dl,dd{margin:0} h1,h2,h3,h4{font-weight:400;text-wrap:balance}
/* `balance` para título (poucas linhas, quebra ótima) e `pretty` para prosa
   (barato, e o que ele resolve é a linha órfã de uma palavra no fim do
   parágrafo — o defeito tipográfico mais visível numa medida de 66ch). */
p,li,dd,figcaption{text-wrap:pretty}
a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
::selection{background:var(--roxo);color:#fff}

/* ── transição entre pranchas ──
   Cross-document view transition: nativa, declarativa, zero JavaScript, e
   silenciosamente ignorada por quem não implementa. Atravessar de `index`
   para uma prancha deixa de piscar branco. A regra de movimento reduzido
   lá embaixo desliga isto junto com o resto — por isso ela mora aqui e não
   dentro de um bloco de script. */
@view-transition{navigation:auto}
::view-transition-group(root){animation-duration:var(--d-0)}
::view-transition-old(root){animation-timing-function:var(--entrada)}
::view-transition-new(root){animation-timing-function:var(--saida)}

/* ═══ A GRADE DE 12 COLUNAS, SEMPRE VISÍVEL ═══
   Mesmo box model do conteúdo (.folha), por isso alinha sem cálculo. */
.malha{position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;max-width:var(--larg);margin:0 auto;padding:0 var(--marg);
  display:grid;grid-template-columns:repeat(12,1fr)}
.malha i{border-left:1px solid var(--malha-cor)}
.malha i:last-child{border-right:1px solid var(--malha-cor)}
@media (max-width:820px){.malha i:nth-child(n+5){display:none}
  .malha{grid-template-columns:repeat(4,1fr)}}

.folha{position:relative;width:100%;max-width:var(--larg);margin:0 auto;padding:0 var(--marg)}
/* `overflow-x:clip` e NUNCA `hidden`: os dois cortam igual, mas `hidden` cria
   um contêiner de rolagem — e um contêiner de rolagem aqui quebraria o
   `position:sticky` do `.aparte` e deixaria o navegador rolar a caixa
   lateralmente ao focar algo dentro dela. `clip` corta sem nada disso.

   Existe porque movimento tem largura: um `rotateX` sob perspectiva projeta
   a borda de perto para fora da caixa, e a entrada lateral da trajetória
   nasce 26px à esquerda. São transforms — não mexem no layout, mas ESTENDEM
   a região de overflow rolável do documento. Medido: 0px de estouro antes,
   22px depois. O corte é no `main`, que tem exatamente a largura da tela; o
   `.rompe` e o `.acervo` full-bleed continuam inteiros porque nunca passam
   dela. */
main{position:relative;z-index:1;overflow-x:clip}

/* rótulo técnico — a voz do documento */
.rot{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--cinza)}
.rot b{color:var(--roxo);font-weight:400}
.num{font-family:var(--mono);color:var(--roxo);font-variant-numeric:tabular-nums}

.prog{position:fixed;top:0;left:0;height:2px;z-index:90;width:0;background:var(--roxo)}

/* ═══ CABEÇALHO ═══ */
.topo{position:fixed;top:0;left:0;right:0;z-index:80;
  background:linear-gradient(to bottom,var(--papel) 62%,rgba(238,229,214,0));
  border-bottom:1px solid transparent;transition:border-color var(--d-0) ease-out}
.topo.fix{border-bottom-color:var(--fio);background:var(--papel)}
.topo .folha{display:flex;justify-content:space-between;align-items:center;
  gap:var(--e-3);padding-top:var(--e-2);padding-bottom:var(--e-2)}
.topo .marca{font-family:var(--serif);font-size:var(--t-0);letter-spacing:.01em}
.topo ul{display:flex;gap:var(--e-3);list-style:none;margin:0;padding:0}
.topo a{text-decoration:none;font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza);padding-bottom:2px;
  border-bottom:1px solid transparent;transition:color var(--d--1) ease-out,border-color var(--d--1) ease-out}
.topo a:hover,.topo a[aria-current="true"]{color:var(--tinta);border-bottom-color:var(--roxo)}
/* ── navegação no celular ──
   Medido a 360px: a página tem 17 telas de altura, e antes o menu
   simplesmente sumia — dezessete telas sem nenhuma forma de navegar.
   O controle nativo também permanece alcançável em desktop. */
/* Um details fechado oculta o conteúdo também em desktop. O menu fica
   disponível como disclosure nativo em todas as larguras. */

  .pranchas summary{display:flex;align-items:center;gap:var(--e-1);
    list-style:none;cursor:pointer;padding:.3rem .6rem;
    border:1px solid var(--fio-2);
    font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
    text-transform:uppercase;color:var(--cinza)}
  .pranchas summary::-webkit-details-marker{display:none}
  .pranchas summary svg{width:1em;height:1em}
  .pranchas summary b{color:var(--roxo);font-weight:400;font-variant-numeric:tabular-nums}
  .pranchas[open] summary{border-color:var(--roxo);color:var(--tinta)}
  .topo ul{position:absolute;right:var(--marg);top:100%;z-index:81;
    display:grid;gap:0;min-width:13rem;
    background:var(--papel);border:1px solid var(--fio-2)}
  .topo ul li + li{border-top:1px solid var(--fio)}
  .topo ul a{display:block;padding:var(--e-1) var(--e-2);border-bottom:0}
  .topo ul a:hover,.topo ul a[aria-current="true"]{background:var(--papel-2);color:var(--tinta)}
  .pranchas:not([open]) ul{display:none}
/* Medido a 390px: marca (95px) + menu (260px) + "REV. 2026.08" (90px) não
   cabem, e o navegador resolvia quebrando "Mateus Abreu" em duas linhas — a
   barra fixa passava a comer 130px de altura numa tela de 844. A revisão já
   está impressa no rodapé de toda página, então ela é o que sai. Subtração,
   não redução de corpo: encolher a marca resolveria a largura e estragaria a
   hierarquia. */
@media (max-width:560px){
  .topo .rot{display:none}
  .topo .marca{white-space:nowrap}
}

/* ═══ PRANCHA — a unidade da página ═══
   `padding-block`, nunca o shorthand: `.prancha` divide o elemento com `.folha`,
   e `padding: X 0` zeraria o recuo lateral dela — o texto sairia da grade. */
.prancha{padding-block:var(--e-4);position:relative}
/* A barra é fixa, então o recuo mora na rolagem (`scroll-padding` no html) e
   não em cada alvo (`scroll-margin`): âncora e foco por teclado rolam pela
   mesma regra. Com o recuo só nas pranchas, Shift+Tab deixava o link focado
   inteiro sob a barra — medido em 25/09: "Conhecer o projeto" a 1440 e dois
   atalhos da capa a 390 (WCAG 2.4.11). Mesma medida de antes: a âncora pousa
   onde pousava. */
html{scroll-padding-top:var(--e-5)}
@media (max-width:640px){.prancha{padding-block:var(--e-3)}}
.cab{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-3);
  padding-bottom:var(--e-1);border-bottom:1px solid var(--fio-2);margin-bottom:var(--e-3)}
.cab .id{display:flex;align-items:baseline;gap:var(--e-2)}
.cab .id b{font-family:var(--mono);font-size:var(--t-1);color:var(--roxo);
  font-weight:400;font-variant-numeric:tabular-nums;line-height:1}
.cab .id span{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.2em;
  text-transform:uppercase}
.tese{font-family:var(--serif);font-size:clamp(var(--t-1),4.4vw,var(--t-3));line-height:1.04;
  letter-spacing:-.012em;max-width:20ch}

/* ═══ O CABEÇALHO DA PRANCHA, SOBRE A GRADE ═══
   A malha de 12 colunas está impressa na tela desde sempre, mas o conteúdo
   não se apoiava nela: medido, o título ocupava 5,3 colunas e a legenda 5,1
   — nenhum número inteiro. Uma grade visível que o conteúdo ignora não é
   sistema, é papel pautado.

   E a legenda vinha EMBAIXO do título, o que deixava 51% da folha vazia à
   direita, nove vezes na mesma página. Vazio é do vocabulário da prancha;
   vazio pela metade da folha, repetido nove vezes, é desperdício.

   Agora é a divisão de uma prancha de verdade: BLOCO DE TÍTULO à esquerda
   (6 colunas), VÃO de uma coluna, COLUNA DE NOTAS à direita (5). O vão não
   é sobra — é o que separa as duas leituras sem precisar de fio.
   `align-self:end` assenta a legenda na base do título: as duas terminam na
   mesma linha, como cota e legenda terminam numa folha desenhada.

   Só acima de 940px. Abaixo disso as 12 colunas viram 4 e a folha não tem
   largura para duas leituras lado a lado — volta a empilhar, que é o certo. */
@media (min-width:941px){
  .folha.prancha{display:grid;grid-template-columns:repeat(12,1fr);
    column-gap:0;align-items:start}
  /* tudo atravessa as 12 por padrão: só o cabeçalho se divide */
  .folha.prancha > *{grid-column:1 / -1;min-width:0}
  .folha.prancha > .tese{grid-column:1 / span 6}
  .folha.prancha > .legenda{grid-column:8 / span 5;align-self:end;
    max-width:none;margin-top:0;padding-bottom:.14em}
}
.tese em{font-style:italic}
.legenda{color:var(--cinza);max-width:52ch;margin-top:var(--e-2)}
/* legenda de mais de um parágrafo: o reset zera a margem do <p> */
.legenda p + p{margin-top:var(--e-1)}
/* Método: o parágrafo que apresenta as quatro lentes fica no fluxo, logo antes delas */
.lentes-intro{color:var(--cinza);max-width:52ch;margin-top:var(--e-3)}
/* a folha foi para 96rem — sem trava a linha de texto passa de 120 caracteres
   e o olho perde o retorno. A largura da folha é do desenho, não da leitura. */
.linha p,.ficha .oq,.porta p,.agora li,.grade4 li{max-width:var(--medida)}
/* deslocamento por rolagem: só transform, nunca top/margin */
.parx{will-change:transform}
/* o contador precisa de dígito de largura fixa, senão o número treme ao subir */
.conta{font-variant-numeric:tabular-nums}

/* A RUPTURA: um elemento por prancha sai da margem, dos dois lados. Só um. */
@media (min-width:1100px){ .rompe{margin-inline:calc(var(--marg) * -1)} }

/* ═══ 00 · IDENTIFICAÇÃO ═══ */
.capa{padding-block:calc(var(--e-6) + var(--e-2)) var(--e-4)}
.capa h1{font-family:var(--serif);font-size:clamp(3.4rem,13vw,var(--t-4));
  line-height:.86;letter-spacing:-.028em}
.capa h1 i{display:block;font-style:italic;color:var(--marinho)}
.capa .sub{font-family:var(--serif);font-style:italic;
  font-size:clamp(var(--t-0),2.4vw,var(--t-1));color:var(--marinho);
  margin-top:var(--e-2);max-width:32ch}
.capa .fig{margin-top:var(--e-3)}
.capa .meta{grid-template-columns:repeat(4,1fr)}
@media (max-width:820px){.capa .meta{grid-template-columns:repeat(2,1fr)}}
/* ficha de metadados — a página se apresenta como documento, não como perfil */
.meta{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--e-1) var(--e-3)}
.meta div{padding-top:var(--e-1);border-top:1px solid var(--fio)}
.meta dt{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza)}
.meta dd{margin:0;font-size:.94em;line-height:1.5}

/* O retrato tem sua própria área; identificação e legenda ficam fora da foto. */
.especime{min-width:0}
.especime img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 0;
  filter:grayscale(1) contrast(1.12) brightness(1.04);border:1px solid var(--fio-2)}
.especime .cap{margin-top:var(--e-1);font-family:var(--mono);font-size:var(--t--2);
  letter-spacing:.16em;text-transform:uppercase;color:var(--cinza)}

/* Título, imagens e apresentação também têm uma ordem de leitura no HTML.
   A coluna fotográfica acompanha o texto no desktop e vem depois do nome no celular. */
.abertura{display:grid;grid-template-columns:minmax(0,var(--fr-phi)) minmax(0,1fr);
  grid-template-areas:"nome fotos" "texto fotos";grid-template-rows:auto 1fr;
  gap:var(--e-3) var(--e-4);align-items:start}
.identificacao{grid-area:nome;min-width:0}
.apresentacao{grid-area:texto;min-width:0}
.capa .entrada{max-width:var(--medida);font-size:.94em}
.capa .entrada + .entrada{margin-top:var(--e-2)}
.atalhos-projetos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:var(--e-3);
  border-block:1px solid var(--fio-2)}
.atalhos-projetos a{position:relative;padding:var(--e-2) var(--e-1);text-decoration:none;min-width:0}
.atalhos-projetos a:first-child{padding-left:0}
.atalhos-projetos a + a{border-left:1px solid var(--fio)}
.atalhos-projetos a:hover{background:var(--papel-2)}
.atalhos-projetos span{display:block;font-family:var(--mono);font-size:var(--t--2);color:var(--cinza)}
.atalhos-projetos strong{display:block;font-family:var(--serif);font-size:var(--t-1);font-weight:400}
.atalhos-projetos i{font-style:normal;position:absolute;right:var(--e-1);top:var(--e-1);color:var(--marinho)}
.entrada-acoes{display:flex;flex-wrap:wrap;gap:var(--e-1) var(--e-3);margin-top:var(--e-2);font-size:var(--t--1)}
.entrada-acoes a{color:var(--roxo);text-underline-offset:.25em;min-height:24px}
/* Fotografias como uma colagem de arquivo: o retrato ancora; os recortes
   se cruzam embaixo, com legenda e rosto em áreas livres. */
.arquivo-capa{grid-area:fotos;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--e-1) 0;align-items:start;min-width:0;padding:var(--e-1) var(--e-1) var(--e-3)}
.arquivo-capa .especime{grid-area:1 / 2 / 2 / -1}
.arquivo-capa .especime .cap{width:50%;margin-left:auto;text-align:right}
.recorte{min-width:0;position:relative;padding:var(--e-1);background:var(--papel-2);
  border:1px solid var(--fio-2);box-shadow:0 var(--e-1) var(--e-3) rgba(45,40,50,.12)}
.recorte a{display:block}
.recorte img{width:100%;aspect-ratio:var(--phi);object-fit:cover}
.recorte figcaption{padding-top:var(--e-1);font-family:var(--mono);font-size:var(--t--2);line-height:1.4;color:var(--cinza)}
.recorte-cultura{grid-area:2 / 1 / 3 / 7;rotate:-7deg;margin-top:calc(var(--e-5) * -1);z-index:2}
.recorte-cultura img{aspect-ratio:4/5;object-position:50% 25%}
.recorte-cultura figcaption{max-width:75%}
.recorte-palco{grid-area:2 / 6 / 3 / -1;rotate:6deg;margin-top:var(--e-4);z-index:3}
@media (max-width:1100px){
  .abertura{column-gap:var(--e-3)}
  .capa h1{font-size:clamp(3.4rem,8vw,var(--t-4))}
  .atalhos-projetos strong{font-size:1.3rem}
}
@media (max-width:820px){
  .abertura{grid-template-columns:1fr;grid-template-areas:"nome" "fotos" "texto";
    grid-template-rows:auto;row-gap:var(--e-3)}
  .capa h1{font-size:clamp(3.4rem,13vw,var(--t-4))}
  .arquivo-capa{width:min(100%,32rem);justify-self:center}
}
@media (max-width:560px){
  .recorte-cultura{rotate:-6deg}
  .recorte-palco{rotate:5deg;margin-top:var(--e-3)}
}
@media (max-width:560px){
  .cab{flex-wrap:wrap;row-gap:var(--e-1)}
  .capa{padding-top:calc(var(--e-5) + var(--e-3))}
  .atalhos-projetos{grid-template-columns:1fr}
  .atalhos-projetos a{padding:var(--e-1) var(--e-2) var(--e-1) 0}
  .atalhos-projetos a + a{border-left:0;border-top:1px solid var(--fio)}
  .atalhos-projetos strong{font-size:var(--t-1)}
  .atalhos-projetos span{display:inline-block;width:46%;vertical-align:middle}
  .atalhos-projetos strong{display:inline-block;vertical-align:middle}
  .atalhos-projetos i{top:50%;translate:0 -50%;right:0}
  .capa .meta{gap:var(--e-1) var(--e-2)}
}

/* ═══ 01 · MÉTODO ═══ */
.metodo{display:grid;grid-template-columns:1fr var(--fr-phi);gap:var(--e-5);
  align-items:center;margin-top:var(--e-4)}
/* Na prancha 01 a régua e a placa começam na mesma linha — centralizar a régua
   contra uma imagem quadrada e alta abre um vazio que não quer dizer nada.
   Na 02 o centro continua certo, porque o diagrama é redondo. */
#metodo .metodo{align-items:start;grid-template-columns:var(--fr-phi) 1fr;gap:var(--e-4)}
#metodo .placa img{aspect-ratio:var(--phi)}
#metodo .regua p{grid-column:2 / -1;font-size:.9em;line-height:1.5;color:var(--cinza);max-width:var(--medida)}
#metodo .regua div{row-gap:var(--e-1)}
@media (max-width:900px){#metodo .metodo{grid-template-columns:1fr}}
@media (max-width:900px){.metodo{grid-template-columns:1fr;gap:var(--e-4)}}
.placa{position:relative;border:1px solid var(--fio-2);background:var(--papel-2);overflow:hidden}
/* a escala de base dá folga para o deslocamento por rolagem sem abrir borda */
.placa img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.1);
  transform:scale(1.12)}
.placa figcaption{display:flex;justify-content:space-between;gap:var(--e-2);
  padding:var(--e-1) var(--e-2);border-top:1px solid var(--fio-2);
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza)}
/* quatro lentes numa régua — não em caixas soltas */
.regua{border-top:1px solid var(--fio-2);border-bottom:1px solid var(--fio-2)}
.regua div{display:grid;grid-template-columns:2.6rem 1fr auto;gap:var(--e-2);align-items:baseline;
  padding:var(--e-2) 0;border-bottom:1px solid var(--fio)}
.regua div:last-child{border-bottom:0}
.regua b{font-family:var(--mono);font-size:var(--t--1);color:var(--roxo);font-weight:400;
  font-variant-numeric:tabular-nums}
.regua h3{font-family:var(--serif);font-size:var(--t-1);line-height:1}
.regua span{font-size:var(--t--1);color:var(--cinza);text-align:right}

/* ═══ 02 · ARQUITETURA — o esquema orbital ═══
   Órbitas paradas. Um esquema não gira: gira quem o lê. */
.esquema{position:relative;width:100%;max-width:32rem;aspect-ratio:1;margin:0 auto;
  display:grid;place-items:center}
.aro{position:absolute;top:50%;left:50%;translate:-50% -50%;border-radius:50%;
  border:1px dashed var(--fio-2)}
.r1{width:56%;aspect-ratio:1} .r2{width:92%;aspect-ratio:1}
.nucleo{position:relative;z-index:4;width:33%;aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;text-align:center;cursor:pointer;
  background:var(--papel);border:1px solid var(--tinta);
  transition:background-color var(--d-0) ease-out}
.nucleo:hover,.nucleo[aria-selected="true"]{background:var(--tinta);color:var(--papel)}
.nucleo b{display:block;font-family:var(--serif);font-size:var(--t-1);font-weight:400;line-height:1}
.nucleo span{display:block;font-family:var(--mono);font-size:var(--t--2);letter-spacing:.16em;
  text-transform:uppercase;margin-top:.3rem;opacity:.7}
.nucleo > span{opacity:1}
/* Nós por braço rotacionado: `--r` é ALTURA, e altura em % resolve contra o pai —
   ao contrário de % dentro de `translate`, que resolve contra a própria caixa e
   colapsa os três nós no centro.

   `--giro` é escrito pelo motor, preso à rolagem. O braço soma o giro; o botão
   subtrai a MESMA soma. É o que faz o esquema girar com os rótulos sempre em
   pé — um mostrador de instrumento, não um carrossel. Nasce em 0deg: sem
   JavaScript o esquema fica parado no ângulo desenhado, que é o estado
   correto. */
.esquema{--giro:0deg}
.no{position:absolute;top:calc(50% - var(--r));left:50%;height:var(--r);width:0;z-index:5;
  transform-origin:bottom center;transform:rotate(calc(var(--a) + var(--giro)))}
.no button{position:absolute;top:0;left:50%;translate:-50% -50%;
  transform:rotate(calc((var(--a) + var(--giro)) * -1));
  display:grid;place-items:center;gap:.1rem;min-width:5.2rem;padding:var(--e-1) var(--e-2);
  background:var(--papel);border:1px solid var(--fio-2);
  transition:border-color var(--d--1) ease-out,background-color var(--d--1) ease-out,color var(--d--1) ease-out}
.no button:hover,.no button[aria-selected="true"]{border-color:var(--roxo);
  background:var(--roxo);color:#fff}
.no em{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.16em;font-style:normal;
  text-transform:uppercase;opacity:.76}
.no strong{font-family:var(--serif);font-size:var(--t-0);font-weight:400;line-height:1.1}

/* No telefone o esquema não se lê: um nó a 46% do raio com rótulo escrito
   sempre estoura a caixa (medido: 429px num viewport de 390). Então ele deixa
   de ser desenho e vira seletor. A informação é idêntica — só o desenho não cabe. */
@media (max-width:820px){
  .esquema{display:flex;flex-wrap:wrap;gap:var(--e-1);aspect-ratio:auto;max-width:none;
    place-items:stretch;margin-bottom:var(--e-3)}
  .aro{display:none}
  .no{position:static;height:auto;width:auto;transform:none;flex:1 1 8.5rem}
  .no button{position:static;translate:none;transform:none;width:100%;min-width:0}
  .nucleo{order:-1;flex:1 1 100%;width:auto;aspect-ratio:auto;border-radius:0;
    padding:var(--e-1) var(--e-2)}
  .nucleo b{font-size:var(--t-0)}
  #arquitetura .esquema{order:-1}
}

.painel{border-top:2px solid var(--roxo);padding-top:var(--e-2);min-height:15rem}
.painel .n{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.18em;color:var(--roxo)}
.painel h3{font-family:var(--serif);font-size:clamp(var(--t-1),3vw,var(--t-2));
  margin:var(--e-1) 0 var(--e-2);line-height:1.02}
.painel p{color:var(--cinza);max-width:44ch}
.painel ul{list-style:none;margin:var(--e-2) 0 0;padding:0;display:flex;gap:var(--e-1);flex-wrap:wrap}
.painel li{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .6rem;border:1px solid var(--fio-2);color:var(--cinza)}
.painel .entradas{margin-top:var(--e-2)}
.painel .entradas a{text-underline-offset:.25em}

/* ═══ 03 · CONSTRUÇÕES — fichas técnicas ═══
   Arquivo institucional: código, ano, estado, número verificado, procedência.
   Não é vitrine de imagem; é registro rastreável. */
.fichas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fio-2);
  border:1px solid var(--fio-2)}
@media (max-width:940px){.fichas{grid-template-columns:1fr}}
.ficha{background:var(--papel);padding:var(--e-3);display:flex;flex-direction:column;
  gap:var(--e-2);transition:background-color var(--d-0) ease-out}
.ficha:hover{background:var(--papel-2)}
.ficha .carimbo{display:flex;justify-content:space-between;align-items:baseline;gap:var(--e-2);
  padding-bottom:var(--e-1);border-bottom:1px solid var(--fio)}
.ficha .cod{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.16em;color:var(--roxo)}
.ficha .est{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.16em;text-transform:uppercase;
  color:var(--cinza);border:1px solid var(--fio-2);padding:.16rem .48rem}
.ficha h3{font-family:var(--serif);font-size:var(--t-2);line-height:1}
.ficha .oq{color:var(--cinza)}
.ficha img{width:100%;aspect-ratio:calc(var(--phi));object-fit:cover;
  filter:grayscale(1) contrast(1.08);border:1px solid var(--fio)}
/* Constelação escolhida por Mateus: as fotografias convivem inteiras.
   A rotação é autoral; `transform` pertence ao gesto do Motion/ao fallback.
   A folga no palco protege as pontas inclinadas e o foco do teclado. */
.ficha--constelacao{min-width:0}
.constelacao{position:relative;isolation:isolate;align-self:center;
  width:calc(100% - var(--e-2));height:clamp(19.375rem,28vw,25rem);
  margin:var(--e-1) 0;overflow:visible}
.constelacao-foto{position:absolute;display:block;rotate:var(--inclinacao);
  border:2px solid color-mix(in srgb,var(--papel) 85%,transparent);
  border-radius:8px;overflow:hidden;background:var(--papel-2);
  box-shadow:0 8px 22px #2d283214,0 1px 4px #2d28320a}
.ficha--constelacao .constelacao-foto img{width:100%;height:100%;aspect-ratio:auto;
  object-fit:contain;filter:none;border:0;border-radius:6px}
.constelacao-foto:hover,.constelacao-foto:focus-visible{z-index:10!important}
.constelacao-foto:hover{box-shadow:0 10px 26px #2d28321c,0 1px 5px #2d28320d}
.constelacao-foto:focus-visible{outline:3px solid var(--roxo);outline-offset:4px}
@media (max-width:940px){.constelacao{max-width:32rem;height:26.875rem}}
@media (max-width:480px){.constelacao{height:22.5rem}}
/* No celular, as sete fotos do OS precisam de espaço para ser vistas.
   A foto de voo abre a prancha; as demais convivem em pares, com a própria
   proporção e inclinação. O reset substitui só as coordenadas inline da
   colagem ampla, sem recortar nem esconder fotografias. */
@media (max-width:940px){
  .ficha[data-projeto="os"] .constelacao{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--e-2);height:auto;padding:var(--e-1) 0}
  .ficha[data-projeto="os"] .constelacao-foto{position:relative;inset:auto!important;
    width:auto!important;height:auto!important;align-self:start}
  .ficha[data-projeto="os"] .constelacao-foto:first-child{grid-column:1/-1}
  .ficha[data-projeto="os"] .constelacao-foto img{height:auto;aspect-ratio:1}
  /* Reservar a proporção antes do lazy-load evita que a prancha cresça
     de repente. As razões vêm das dimensões declaradas nas sete fotos. */
  .ficha[data-projeto="os"] .constelacao-foto:first-child img{aspect-ratio:1200/901}
  .ficha[data-projeto="os"] .constelacao-foto:nth-child(2) img,
  .ficha[data-projeto="os"] .constelacao-foto:nth-child(4) img,
  .ficha[data-projeto="os"] .constelacao-foto:nth-child(6) img{aspect-ratio:3/4}
  .ficha[data-projeto="os"] .constelacao-foto:nth-child(5) img{aspect-ratio:970/1123}
}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.28rem var(--e-2);
  padding-top:var(--e-1);border-top:1px solid var(--fio);font-size:.94em}
.ficha dt{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.12em;text-transform:uppercase;
  color:var(--cinza)}
.ficha dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.ficha dd b{color:var(--roxo);font-weight:500}
/* ranhura de link: vira link real trocando uma entrada no mapa PAGINAS */
.lig{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:var(--e-2);
  padding-top:var(--e-2);border-top:1px solid var(--fio);text-decoration:none;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase}
.lig[aria-disabled="true"]{color:var(--cinza);cursor:default}
.lig[href]:not([aria-disabled="true"]){color:var(--roxo)}
.lig svg{width:1em;height:1em;flex:none}
.lig[href]:not([aria-disabled="true"]):hover svg{transform:translateX(.24em)}
.lig svg{transition:transform var(--d-0) var(--saida)}

.fichas{margin-top:var(--e-3)}
.destino{font-size:var(--t--1);text-underline-offset:.25em;min-height:24px}
.destino small{display:block;color:var(--cinza);font-size:inherit}
.vitrine{display:grid;grid-template-columns:var(--fr-phi) 1fr;gap:var(--e-4);align-items:center;
  margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px solid var(--fio-2)}
.vitrine figure{min-width:0;width:calc(100% - var(--e-3));justify-self:center}
.vitrine img{width:100%;aspect-ratio:var(--phi);object-fit:cover;rotate:2deg;
  padding:var(--e-1);background:var(--papel-2);border:1px solid var(--fio-2);
  box-shadow:0 var(--e-1) var(--e-3) rgba(45,40,50,.10)}
.vitrine figure figcaption{padding-top:var(--e-3)}
.vitrine figcaption,.album-vida figcaption{font-family:var(--mono);font-size:var(--t--2);
  color:var(--cinza);padding-top:var(--e-1)}
.vitrine h3{font-family:var(--serif);font-size:var(--t-2);line-height:1.1;margin-block:var(--e-1) var(--e-2)}
.vitrine p{max-width:var(--medida);color:var(--cinza);margin-bottom:var(--e-2)}
.trajetoria-corpo{display:grid;grid-template-columns:var(--fr-phi) 1fr;gap:var(--e-4);margin-top:var(--e-3)}
.album-vida{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-2);align-content:start}
.album-vida figure:first-child{grid-column:1 / -1;width:95%;margin-left:var(--e-1)}
.album-vida figure:first-child img{rotate:-3deg}
.album-vida figure:first-child figcaption{padding-top:var(--e-3)}
.album-vida figure:first-child figcaption{max-width:calc(50% - var(--e-2))}
.album-vida figure:nth-child(2){grid-column:2;rotate:5deg;margin-top:calc(var(--e-5) * -1);background:var(--papel);
  padding:var(--e-1);border:1px solid var(--fio-2)}
.album-vida img{width:100%;aspect-ratio:var(--phi);object-fit:cover}
.album-vida figure:nth-child(2) img{aspect-ratio:1;object-position:50% 30%}
.album-vida p{grid-column:1 / -1;font-size:var(--t--1);color:var(--cinza);max-width:45ch}
@media (max-width:820px){
  .vitrine,.trajetoria-corpo{grid-template-columns:1fr;gap:var(--e-3)}
}

/* ═══ 04 · TRAJETÓRIA — régua de anos ═══
   O fio da goteira é a régua sendo traçada: `--tracado` vai de 0 a 1 preso
   à rolagem, então a linha cresce na exata medida em que a pessoa desce por
   ela. Nasce em 1 — sem JavaScript a régua já está inteira, que é o estado
   correto (AD-2). Fica na margem (left negativo) para não empurrar nem uma
   coluna do grid de anos. */
.linha{position:relative;border-top:1px solid var(--fio-2)}
.linha::before{content:"";position:absolute;left:calc(var(--e-2) * -1);top:0;
  width:1px;height:100%;background:var(--roxo);
  transform:scaleY(var(--tracado,1));transform-origin:top;
  pointer-events:none}
@media (max-width:640px){.linha::before{display:none}}
.linha div{display:grid;grid-template-columns:5.4rem 1fr;gap:var(--e-3);align-items:start;
  padding:var(--e-2) 0;border-bottom:1px solid var(--fio);transition:background-color var(--d--1) ease-out}
.linha div:hover{background:var(--papel-2)}
.linha b{font-family:var(--mono);font-size:1em;color:var(--roxo);font-weight:400;
  font-variant-numeric:tabular-nums;letter-spacing:.06em}
.linha p{font-size:1em}
.linha p i{font-style:normal;color:var(--cinza)}
@media (max-width:640px){.linha div{grid-template-columns:1fr;gap:.2rem}}

/* ═══ 05 · ACERVO — contact sheet infinito ═══
   Portado de dois componentes do 21st.dev (Julien Thibeaut): o Infinite Slider
   dá o movimento, o Progressive blur resolve a borda. A faixa é duplicada e
   corre -50%: no instante em que a cópia chega, a original está no mesmo pixel,
   então o laço não tem emenda. É um contact sheet de arquivo que nunca acaba. */
.acervo{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;
  display:grid;gap:var(--e-1);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.faixa{display:flex;gap:var(--e-1);width:max-content}
.faixa > *{flex:none}
.faixa-a{animation:corre var(--d-acervo) linear infinite}
.faixa-b{animation:corre calc(var(--d-acervo) * var(--phi)) linear infinite reverse}
.acervo:hover .faixa{animation-play-state:paused}
@keyframes corre{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* Sem o laço montado pelo JS (sem JS, ou sem o sistema.js) a faixa tem uma
   cópia só, e correr -50% com ela abre vão e salto: fica parada e rolável,
   o mesmo estado que o botão liga. A marca `data-laco` é posta pelo JS. */
.acervo:not([data-laco]) .faixa{animation:none}

/* PARADO — o estado que o botão liga. Não é só congelar: a faixa vira
   rolável, então as 18 figuras ficam alcançáveis uma a uma. Congelar sem
   isso deixaria 13 delas fora de alcance para sempre. */
.acervo.parado,.acervo:not([data-laco]){overflow-x:auto;scrollbar-width:thin;
  -webkit-mask-image:none;mask-image:none;
  scroll-snap-type:x proximity}
.acervo.parado .faixa{animation-play-state:paused}
.acervo.parado .quadro,.acervo:not([data-laco]) .quadro{scroll-snap-align:center}

/* controle de pausa: visível, alcançável por teclado, com estado declarado.
   Ícone em SVG e nunca emoji — herda currentColor e escala com o texto. */
.ctrl{display:inline-flex;align-items:center;gap:var(--e-1);
  padding:.24rem .6rem;border:1px solid var(--fio-2);
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza);
  transition:border-color var(--d--1) ease-out,color var(--d--1) ease-out,background-color var(--d--1) ease-out}
/* `display:inline-flex` acima vence o `hidden` do navegador: sem esta linha o
   botão escondido pelo JS (movimento reduzido) continuava na tela. */
.ctrl[hidden]{display:none}
.ctrl:hover{border-color:var(--roxo);color:var(--tinta)}
.ctrl svg{width:.9em;height:.9em;flex:none}
.ctrl .pausar{display:inline} .ctrl .tocar{display:none}
.ctrl[aria-pressed="true"]{border-color:var(--roxo);color:var(--tinta)}
.ctrl[aria-pressed="true"] .pausar{display:none}
.ctrl[aria-pressed="true"] .tocar{display:inline}

/* o quadro: cinza em repouso, cor ao alcançar. O acervo inteiro tem um estado
   só — a cor é a recompensa de olhar, não o ruído de fundo. */
.quadro{--quadro-largura:clamp(16rem,26vw,26rem);position:relative;
  width:var(--quadro-largura);height:calc(var(--quadro-largura) / var(--phi));flex-shrink:0;
  border:1px solid var(--fio-2);overflow:hidden;background:var(--papel-2)}
.quadro.retrato{width:calc(var(--quadro-largura) / var(--phi))}
.quadro.panorama{width:calc(var(--quadro-largura) * 1.25)}
.quadro img{width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);transition:filter var(--d-1) ease-out,transform var(--d-2) var(--saida)}
.quadro:hover img,.quadro:focus-within img{filter:grayscale(0) contrast(1)}
.quadro figcaption{position:absolute;left:0;bottom:0;padding:.24rem .5rem;
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.14em;
  color:var(--papel);background:rgba(45,40,50,.72)}
@media (prefers-reduced-motion:reduce){.faixa{animation:none!important}
  .acervo{overflow-x:auto}}

/* O caderno abre a leitura: um texto em destaque, seguido por um índice compacto.
   A imagem mantém o enquadramento inteiro e acompanha o tema do trecho. */
.leitura-destaque{display:grid;grid-template-columns:var(--fr-phi) 1fr;
  gap:var(--e-4);align-items:center;margin-top:var(--e-3);padding-block:var(--e-3);
  border-block:1px solid var(--fio-2)}
.leitura-destaque h3{font-family:var(--serif);font-size:var(--t-2);font-weight:400;
  line-height:1.14;max-width:22ch;margin-block:var(--e-1) var(--e-3)}
.leitura-destaque h3 a{text-decoration:none}
.leitura-destaque h3 a:hover{text-decoration:underline;text-underline-offset:.15em}
.leitura-destaque p{max-width:var(--medida)}
.leitura-destaque .continuar{color:var(--roxo);display:inline-block;margin-top:var(--e-3);
  padding-block:var(--e-1);text-underline-offset:.25em}
.leitura-destaque figure{width:calc(100% - var(--e-3));min-width:0;justify-self:center}
.leitura-destaque img{width:100%;height:auto;border:1px solid var(--fio-2);rotate:-3deg;
  padding:var(--e-1);background:var(--papel-2);box-shadow:0 var(--e-1) var(--e-3) rgba(45,40,50,.10)}
.leitura-destaque figcaption{font-family:var(--mono);font-size:var(--t--1);
  color:var(--cinza);line-height:1.5;margin-top:var(--e-3)}
@media (max-width:640px){
  .leitura-destaque{grid-template-columns:1fr;gap:var(--e-3);margin-top:var(--e-3)}
  .leitura-destaque h3{font-size:var(--t-1)}
}

/* ═══ ENSAIOS · ÍNDICE ═══ */
.ensaio{display:grid;grid-template-columns:2.6rem 1fr auto;gap:var(--e-2) var(--e-3);
  align-items:baseline;padding:var(--e-3) 0;border-bottom:1px solid var(--fio);
  text-decoration:none;transition:transform var(--d-0) var(--saida),color var(--d-0) ease-out}
.ensaio:first-of-type{border-top:1px solid var(--fio-2)}
.ensaio:hover{transform:translateX(var(--e-1));color:var(--roxo)}
.ensaio b{font-family:var(--mono);font-size:var(--t--1);color:var(--roxo);font-weight:400;
  font-variant-numeric:tabular-nums}
.ensaio h3{font-family:var(--serif);font-size:clamp(var(--t-0),2.4vw,var(--t-1));
  line-height:1.14;max-width:38ch}
.ensaio .meta{font-family:var(--mono);font-size:var(--t--1);color:var(--cinza);white-space:nowrap}
@media (max-width:640px){.ensaio{grid-template-columns:2.2rem 1fr}.ensaio .meta{grid-column:2}}

/* ═══ 07 · BIBLIOTECA ═══ */
.grade4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fio-2);
  border:1px solid var(--fio-2)}
@media (max-width:900px){.grade4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grade4{grid-template-columns:1fr}}
.grade4 > div{background:var(--papel);padding:var(--e-3) var(--e-2)}
/* rótulo é rótulo: tinta. O roxo fica reservado a número — se marcar título
   também, para de significar "dado verificado" e vira só cor bonita. */
.grade4 h3{font-family:var(--mono);font-size:var(--t-0);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tinta);padding-bottom:var(--e-1);border-bottom:1px solid var(--tinta);margin-bottom:var(--e-2)}
.grade4 ul{list-style:none;margin:0;padding:0}
.grade4 li{padding:var(--e-1) 0;border-bottom:1px solid var(--fio);color:var(--cinza)}
.grade4 li:last-child{border-bottom:0}
.grade4 li b{display:block;color:var(--tinta);font-weight:500;font-family:var(--serif);
  font-size:1.14em;line-height:1.2}

/* ═══ 08 · AGORA ═══ */
.agora{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e-4)}
@media (max-width:820px){.agora{grid-template-columns:1fr;gap:var(--e-3)}}
.agora h3{font-family:var(--mono);font-size:var(--t-0);letter-spacing:.16em;text-transform:uppercase;
  padding-bottom:var(--e-1);border-bottom:1px solid var(--tinta);margin-bottom:var(--e-2)}
.agora ul{list-style:none;margin:0;padding:0}
.agora li{padding:var(--e-1) 0;border-bottom:1px solid var(--fio)}
.agora li:last-child{border-bottom:0}
.agora .sub h3{border-bottom-color:var(--fio-2);color:var(--cinza)}
.agora .sub li{color:var(--cinza);text-decoration:line-through;text-decoration-color:var(--fio-2)}

/* ═══ 08 · CARTA — a página inteira inverte aqui ═══
   Uma prancha escura no meio do papel. É a herança da versão anterior, e ela
   ganha o lugar onde escurecer compra alguma coisa: o único ponto de conversão.
   A tinta ameixa vira superfície aqui, com acentos lilás de maior contraste. */
.carta{position:relative;background:var(--tinta);color:var(--papel);padding:var(--e-5) var(--e-4);
  display:grid;grid-template-columns:var(--fr-phi) 1fr;gap:var(--e-4);align-items:center}
/* a grade de 12 colunas continua correndo por baixo — aqui em negativo */
.carta::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(238,229,214,.06) 0 1px,transparent 1px calc(100% / 12))}
@media (max-width:820px){.carta{grid-template-columns:1fr;padding:var(--e-4) var(--e-3)}}
.carta > *{position:relative}
.carta h2{font-family:var(--serif);font-size:clamp(var(--t-1),3.4vw,var(--t-2));line-height:1.02}
.carta p{color:rgba(238,229,214,.72);margin-top:var(--e-1);max-width:40ch}
.carta form{display:flex;gap:var(--e-1);flex-wrap:wrap}
.carta input{min-height:2.618rem;padding:var(--e-1) var(--e-2);min-width:12rem;flex:1;
  border:1px solid rgba(238,229,214,.45);background:transparent;font:inherit;
  font-size:var(--t--1);color:var(--papel)}
.carta input::placeholder{color:rgba(238,229,214,.72)}
.carta input:focus{outline:none;border-color:var(--roxo-luz)}
.carta .btn.p{background:var(--roxo-luz);border-color:var(--roxo-luz);color:var(--preto)}
.carta .btn.p:hover{background:var(--papel);border-color:var(--papel);color:var(--tinta)}
.btn{display:inline-flex;align-items:center;gap:var(--e-1);min-height:2.618rem;
  padding:var(--e-1) var(--e-3);border:1px solid var(--tinta);text-decoration:none;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;text-transform:uppercase;
  transition:background-color var(--d--1) ease-out,color var(--d--1) ease-out,border-color var(--d--1) ease-out}
.btn:hover{background:var(--tinta);color:var(--papel)}
.btn.p{background:var(--roxo);border-color:var(--roxo);color:#fff}
.btn.p:hover{background:var(--tinta);border-color:var(--tinta)}

/* ═══ 09 · PORTAS ═══ */
.portas{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--fio-2);
  border:1px solid var(--fio-2)}
@media (max-width:900px){.portas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.portas{grid-template-columns:1fr}}
.porta{background:var(--papel);padding:var(--e-3);text-decoration:none;display:flex;
  flex-direction:column;gap:var(--e-1);position:relative;transition:background-color var(--d-0) ease-out}
.porta:hover{background:var(--papel-2)}
.porta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--roxo);
  transform:scaleY(0);transform-origin:top;transition:transform var(--d-0) var(--saida)}
.porta:hover::before{transform:scaleY(1)}
.porta .q{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.18em;text-transform:uppercase;
  color:var(--cinza)}
.porta h3{font-family:var(--serif);font-size:var(--t-1);line-height:1.04}
.porta p{color:var(--cinza)}
.porta .s{margin-top:auto;padding-top:var(--e-2);font-family:var(--mono);font-size:var(--t--1);
  color:var(--cinza);display:flex;justify-content:space-between;gap:var(--e-1)}
.porta:hover .s{color:var(--roxo)}

/* ═══ RODAPÉ ═══ */
footer{position:relative;z-index:1;border-top:1px solid var(--tinta);margin-top:var(--e-5)}
footer .folha{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--e-3);
  flex-wrap:wrap;padding-top:var(--e-3);padding-bottom:var(--e-5)}

/* AD-2 (issue #10): o `.rv` NASCE VISÍVEL. Antes o padrão era opacidade 0,
   e quem chegava sem JavaScript — ou perdia o `sistema.js` na rede — via a
   capa em branco, com o texto inteiro no DOM. Esconder para revelar é
   estado transitório: só vale depois que o `sistema.js` pôs o observador
   de pé e marcou <html data-revela>, porque é ele quem garante voltar a 1.
   `:not(.on)` dispensa disputa de ordem com `.rv.on`, e `no-preference`
   deixa quem pediu movimento reduzido fora do esconde — inclusive se a
   preferência mudar com a página aberta. */
.rv{transition:opacity var(--d-2) var(--saida),transform var(--d-2) var(--saida)}
@media (prefers-reduced-motion:no-preference){
  [data-revela] .rv:not(.on){opacity:0;transform:translateY(var(--desloc))}
}
.rv.on{opacity:1;transform:none}

/* Foco roxo sobre papel (5.4:1), lilás nas superfícies invertidas
   (6.8:1). A mudança de fundo mantém o indicador de teclado legível. */
:focus-visible{outline:2px solid var(--roxo);outline-offset:3px}
.carta :focus-visible,.limite :focus-visible,
.carta.rompe:focus-visible{outline-color:var(--roxo-luz)}
.carta ::selection{background:var(--roxo-luz);color:var(--preto)}

/* ══════════════════════════════════════════════════════════════════════
   MIRA — o cursor de instrumento
   Uma prancha técnica tem mira e cota. O ponteiro do sistema vira retículo
   com leitura de coordenada: é a peça que mais declara "isto é um
   instrumento" e a que menos custa (dois elementos, transform e opacity).

   Só existe onde há ponteiro FINO — `hover:hover` e `pointer:fine`. Em
   toque não é criada, e o cursor nativo nunca é escondido em quem depende
   dele. O cursor real continua visível por baixo: a mira acompanha, não
   substitui. Esconder o cursor do sistema é o erro clássico deste efeito.
   ══════════════════════════════════════════════════════════════════════ */
.mira{position:fixed;left:0;top:0;z-index:95;pointer-events:none;
  --mira-tamanho:calc(var(--e-4) * .7);
  width:var(--mira-tamanho);height:var(--mira-tamanho);
  margin:calc(var(--mira-tamanho) / -2) 0 0 calc(var(--mira-tamanho) / -2);
  opacity:0;mix-blend-mode:multiply}
.mira::before,.mira::after{content:"";position:absolute;background:var(--roxo)}
/* cruz de retículo: dois fios de 1px, com uma falha no centro para não
   tapar o que está sendo mirado */
.mira::before{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:linear-gradient(var(--roxo) 0 38%,transparent 38% 62%,var(--roxo) 62% 100%)}
.mira::after{top:50%;left:0;right:0;height:1px;margin-top:-.5px;
  background:linear-gradient(90deg,var(--roxo) 0 38%,transparent 38% 62%,var(--roxo) 62% 100%)}
/* a cota: leitura de coordenada, como a de um paquímetro */
.mira b{position:absolute;left:calc(100% + .3rem);top:50%;translate:0 -50%;
  font-family:var(--mono);font-size:var(--t--2);letter-spacing:.12em;
  color:var(--roxo);white-space:nowrap;font-weight:400;font-variant-numeric:tabular-nums}
/* sobre alvo interativo o retículo abre e vira alvo de aquisição */
.mira.trava{mix-blend-mode:normal}
.mira.trava::before,.mira.trava::after{background:var(--roxo)}

/* ── revelação de linha por máscara ──
   O SplitText embrulha cada linha e a máscara corta o excesso: a linha sobe
   de dentro do próprio corpo tipográfico em vez de aparecer por opacidade.
   `overflow:clip` e não `hidden`: `hidden` cria contexto de rolagem e o
   navegador passa a poder rolar a caixa ao focar algo dentro dela. */
.linha-mask{overflow:clip;display:block}

/* perspectiva para a entrada das fichas — sem ela `rotateX` é achatado */
.fichas,.portas,.grade4,.irmas{perspective:1400px}

/* ══════════════════════════════════════════════════════════════════════
   HANDOVER — quando o motor assume
   `movimento.js` marca <html data-motor="gsap"> só DEPOIS que o bundle
   carregou e ligou. Até lá — e para sempre, se ele nunca carregar — o que
   vale é a transição CSS acima, dirigida pelo IntersectionObserver do
   sistema.js. Nada aqui é condição para a página estar certa: é condição
   para não haver DOIS donos da mesma propriedade.

   Sem esta trava, GSAP escreve `opacity` inline a cada quadro enquanto a
   `transition` de .809s tenta interpolar por cima — o mesmo defeito de dois
   donos que acabou de sair do `.quadro`, só que 31 vezes por página.
   ══════════════════════════════════════════════════════════════════════ */
[data-motor] .rv{transition:none}
[data-motor] .parx{transition:none}
/* O motor assume a faixa do acervo para reagir à velocidade de rolagem. A
   animação CSS precisa sair, senão são dois donos do mesmo `transform` — o
   defeito que originou tudo isto. O `:hover` que pausava também sai: quem
   pausa passa a ser só o botão, que é o que a WCAG 2.2.2 pede e o que
   funciona no toque e no teclado. */
[data-motor] .faixa{animation:none}
[data-motor] .acervo:hover .faixa{animation-play-state:running}
/* A inclinação sai das 36 MOLDURAS e vai para as 2 FAIXAS quando o motor
   assume. Medido: `.quadro` carregava `will-change:transform`, e o JS
   duplica a faixa para fechar o laço — são 36 elementos com camada de
   compositor promovida permanentemente, para um efeito que a faixa inteira
   entrega igual. `will-change` em 36 elementos não é otimização, é o
   anti-padrão que o nome do atributo convida a cometer.
   Na faixa quem escreve é o GSAP (que já é dono do `transform` dela por
   causa do `xPercent`), então continua UM dono por propriedade. Sem motor,
   a regra de cima vale e a moldura inclina como sempre. */
[data-motor] .quadro{transform:none}
/* Deslocamento por rolagem precisa de FOLGA, senão a foto sai da moldura:
   medido, a imagem escapava 20px por cima e abria 20px de vão por baixo. É
   o mesmo motivo do `scale(1.12)` que a `.placa` já carregava desde sempre —
   só que ali a folga era do desenho e aqui precisa nascer com o motor.
   `scale:` como propriedade independente, e não dentro de `transform`: o
   `transform` é do GSAP, e dois donos na mesma propriedade é o defeito que
   este arquivo inteiro existe para não repetir. */
[data-motor] .ficha:not(.ficha--constelacao) figure,[data-motor] .figura-ensaio{overflow:clip}
[data-motor] .ficha:not(.ficha--constelacao) figure img,[data-motor] .figura-ensaio img{scale:1.18}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .quadro{transform:none!important}
  .aberra{text-shadow:none}
  .linha::before{transform:none!important}
  .mira{display:none}
  .esquema{--giro:0deg!important}
  @view-transition{navigation:none}
  /* Uma duração mínima ainda cria transições durante a restauração do
     motor. Sem transição, o conteúdo retorna inteiro no mesmo quadro. */
  *{transition:none!important;animation:none!important}
}

/* Em `prefers-contrast: more` a retícula e as bordas de 14% de opacidade
   são a primeira coisa a sumir para quem pediu mais contraste. Elas são
   estrutura, não enfeite: se somem, a prancha perde a grade. Sobem. */
@media (prefers-contrast:more){
  :root{--fio:rgba(45,40,50,.34);--fio-2:rgba(45,40,50,.62);
        --malha-cor:rgba(45,40,50,.12);--cinza:#49404f}
  .trama::after{opacity:0}
}

/* ══════════════════════════════════════════════════════════════════════
   IMPRESSO — uma prancha técnica que não imprime é meia prancha.
   Sem isto a página sai com 17 telas de fundo, o cabeçalho fixo carimbado
   em cima do texto, o acervo cortado ao meio e todo link sem destino.
   ══════════════════════════════════════════════════════════════════════ */
@media print{
  :root{--papel:#fff;--papel-2:#fff;--malha-cor:transparent}
  html{scroll-behavior:auto}
  body{font-size:10pt;overflow:visible}
  .malha,.prog,.campo,.pular,.ctrl,.topo{display:none}
  .rv{opacity:1!important;transform:none!important}
  .prancha{padding-block:var(--e-3);break-inside:avoid}
  .cab{break-after:avoid}
  .tese,h1,h2,h3{break-after:avoid}
  .acervo{display:none}          /* faixa infinita não tem primeira página */
  .carta,.limite{background:#fff;color:#000;border:1pt solid #000}
  .carta p,.limite p{color:#000}
  .fichas,.portas,.grade4,.irmas{background:#fff;gap:0}
  .aberra{text-shadow:none}
  /* Papel não tem hyperlink: o endereço vira nota, e só para link externo —
     imprimir "alternamente.html" ao lado de cada âncora interna é ruído. */
  a[href^="http"]::after{content:" (" attr(href) ")";
    font-family:var(--mono);font-size:8pt;color:#444;word-break:break-all}
  .especime img,.ficha img,.placa img{filter:grayscale(1) contrast(1.1)}
}

/* ══════════════════════════════════════════════════════════════════════
   VIVOS E REATIVOS
   O psicodélico daqui é o do anexo: techno-organic glitch — retícula,
   ruído e deslocamento, na paleta que já existe. Nenhuma cor nova entra.
   Arco-íris quebraria o sistema; deslocamento cromático em marinho e roxo
   É o sistema, aplicado com força.
   ══════════════════════════════════════════════════════════════════════ */

/* ── campo reativo: pontos que se afastam do ponteiro ──
   Canvas 2D, tinta sobre papel. Fica atrás de tudo e não recebe evento. */
.campo{position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.55;mix-blend-mode:multiply}
/* `:not(.campo)` não é preciosismo: sem ele esta regra empata em
   especificidade com `.campo`, vence por vir depois, e devolve o canvas ao
   fluxo — medido, 32px de estouro horizontal e a capa mais alta. E o seletor
   por atributo faz valer para a capa e para as complementares de uma vez. */
[data-campo]{position:relative;isolation:isolate}
[data-campo] > *:not(.campo){position:relative;z-index:1}

/* ── aberração cromática ──
   `text-shadow` sem desfoque nenhum: é deslocamento, não brilho. E funciona
   com qualquer marcação interna, porque herda por trecho de texto — que é o
   motivo de não ter virado pseudo-elemento com attr().

   Antes o efeito era SÓ no hover: no celular — onde a página tem 17 telas de
   altura e ninguém tem ponteiro — ele simplesmente não existia. Agora o
   deslocamento é lido de `--vel`: rolar rápido separa os canais, parar
   recompõe. É a mesma tese do acervo ("a cor é o que se ganha ao olhar")
   aplicada ao texto, e vale para toque, teclado e mouse igualmente.

   Sem `transition`, de propósito: `--vel` já decai suave a cada quadro, e
   transicionar por cima de um valor que muda 60 vezes por segundo é o
   defeito que acabou de sair do `.quadro`. Custo em JS: zero — o mesmo
   `--vel` que a moldura já usa.

   .0009em × 60 (o teto de --vel) = .054em de separação máxima: acima disso
   o texto deixa de ser legível durante a rolagem, e ilegível não é estilo. */
.aberra{text-shadow:calc(var(--vel,0) * -.0009em) 0 var(--marinho),
                    calc(var(--vel,0) * .0009em) 0 var(--roxo)}
.aberra:hover{text-shadow:-.038em 0 var(--marinho),.038em 0 var(--roxo);
  transition:text-shadow var(--d--1) ease-out}

/* ── retícula de impressão ──
   O DITHER/THRSHLD do Glitché, virado sistema: a figura nasce reticulada
   como chapa impressa e revela ao alcance. É o gesto de revelar, não um
   filtro por cima. */
.trama{position:relative}
.trama::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:radial-gradient(var(--tinta) .5px,transparent .6px);
  background-size:3px 3px;opacity:.5;mix-blend-mode:multiply;
  transition:opacity var(--d-1) ease-out}
.trama:hover::after,.trama:focus-within::after{opacity:0}

/* ── inclinação por velocidade de rolagem ──
   `--vel` é escrita uma vez por quadro (pelo sistema.js, ou pelo motor
   quando ele assume). Rolagem rápida inclina o acervo; parada, ele volta
   ao prumo.

   DEFEITO CORRIGIDO — a inclinação morava em `.quadro img`, que é o mesmo
   elemento que recebe `transform:scale(1.04)` no hover E uma `transition`
   de transform de .809s. Três consequências, todas medidas:
     1. o skew chegava com .8s de atraso e virava borracha, não velocidade;
     2. entrar com o ponteiro zerava o skew, sair devolvia — piscando;
     3. o `scale` do hover e o `skewY` da rolagem escreviam a MESMA
        propriedade e o último a ganhar apagava o outro.
   O conserto não é ajustar número: é separar os elementos. A MOLDURA
   inclina (sem transição — `--vel` já decai sozinho); a FOTO escala. Duas
   propriedades, dois donos, nenhuma disputa. */
.quadro{transform:skewY(calc(var(--vel,0) * .012deg));transform-origin:center}
.quadro img{transform:scale(1)}
.quadro:hover img,.quadro:focus-within img{transform:scale(1.04)}

/* ── ímã: o elemento inclina na direção do ponteiro ── */
.ima{transition:transform var(--d-0) var(--saida)}

/* ── embaralho: o rótulo técnico se resolve ao entrar, como leitura de
      instrumento estabilizando. Largura fixa, senão o texto pula. ── */
.embaralha{font-variant-numeric:tabular-nums}

/* ══════════════════════════════════════════════════════════════════════
   PÁGINAS COMPLEMENTARES
   ══════════════════════════════════════════════════════════════════════ */
.volta{display:inline-flex;align-items:center;gap:var(--e-1);text-decoration:none;
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;color:var(--cinza);transition:color var(--d--1) ease-out}
.volta:hover{color:var(--roxo)}
.volta svg{width:1em;height:1em;transition:transform var(--d-0) var(--saida)}
.volta:hover svg{transform:translateX(-.24em)}

.capa-sub{padding-block:calc(var(--e-6) + var(--e-2)) var(--e-4)}
.capa-sub .cod{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.2em;
  color:var(--roxo);display:block;margin-bottom:var(--e-2)}
.capa-sub h1{font-family:var(--serif);font-size:clamp(2.6rem,9vw,var(--t-4));
  line-height:.9;letter-spacing:-.026em}
.capa-sub .sub{font-family:var(--serif);font-style:italic;color:var(--marinho);
  font-size:clamp(var(--t-0),2.4vw,var(--t-1));margin-top:var(--e-2);max-width:36ch}

/* φ com o lado maior no texto: quem lê ocupa 1.618, a ficha ocupa 1.
   Invertido, a ficha ficava larga e vazia e a leitura espremida. */
.artigo{display:grid;grid-template-columns:var(--fr-phi) 1fr;gap:var(--e-5);
  align-items:start;margin-top:var(--e-4)}
@media (max-width:1000px){.artigo{grid-template-columns:1fr;gap:var(--e-4)}}
/* O índice do caderno antecede os textos no DOM e no celular, mantendo
   a ficha à direita na prancha ampla. Há uma única navegação, sem clone. */
.caderno-artigo{grid-template-areas:"texto ficha"}
.caderno-artigo > .corpo{grid-area:texto}
.caderno-artigo > .aparte{grid-area:ficha}
.caderno-artigo .aparte h2{font-family:var(--mono);font-size:var(--t--1);
  letter-spacing:.18em;text-transform:uppercase;color:var(--roxo);margin:0}
.caderno-indice{margin-top:var(--e-2)}
.caderno-indice ol{margin:0;padding-left:var(--e-3)}
.caderno-artigo .retorno-indice{font-family:var(--mono);font-size:var(--t--1)}
@media (max-width:1000px){.caderno-artigo{grid-template-areas:"ficha" "texto"}}
.artigo .corpo > * + *{margin-top:var(--e-3)}
.artigo p{max-width:64ch}
.artigo h2{font-family:var(--serif);font-size:clamp(var(--t-1),2.6vw,var(--t-2));
  line-height:1.04;margin-top:var(--e-5)}
.artigo h3:not(.aparte h3){font-family:var(--mono);font-size:var(--t--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--cinza);margin-top:var(--e-4)}
.artigo ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--fio-2)}
.artigo li{padding:var(--e-2) 0;border-bottom:1px solid var(--fio);max-width:64ch}
.artigo li b{font-family:var(--serif);font-size:var(--t-0);display:block}
.artigo strong{font-weight:600}
.artigo em{font-style:italic}
.projetos-menores .rot{display:block;color:var(--roxo);margin-block:var(--e-1)}
.detalhe-os{border-block:1px solid var(--fio-2);padding-block:var(--e-2)}
.detalhe-os summary{cursor:pointer;font-family:var(--serif);font-size:var(--t-1);color:var(--marinho)}
.detalhe-os > * + *{margin-top:var(--e-3)}

/* Mateus OS: motivos em primeiro plano; ferramentas como notas abertas. */
.os-abertura,.os-historia,.os-fecho,.os-bancada-cab{display:grid;
  grid-template-columns:minmax(0,var(--fr-phi)) minmax(0,1fr);
  gap:var(--e-5);align-items:start}
.os-abertura{margin-block:var(--e-4) var(--e-5)}
.os-abertura p,.os-texto p,.os-fecho p{max-width:var(--medida)}
.os-abertura p+p,.os-texto p+p,.os-fecho p+p{margin-top:var(--e-3)}
.os-entrada{font-family:var(--serif);font-size:var(--t-1);line-height:1.3}
.os-indice{display:grid;align-self:center;border-top:1px solid var(--fio-2)}
.os-indice a{display:grid;grid-template-columns:var(--e-4) 1fr auto;
  align-items:center;gap:var(--e-1);padding-block:var(--e-1);
  border-bottom:1px solid var(--fio-2);font:var(--t-1)/1.4 var(--serif);text-decoration:none}
.os-indice a span{color:var(--roxo);font:var(--t--1)/1 var(--mono)}
.os-indice a:hover,.os-link:hover{color:var(--roxo)}
.os-frente{font:var(--t--1)/var(--phi) var(--mono);color:var(--roxo);letter-spacing:.06em}
.os-historia{padding-block:var(--e-4) var(--e-5);border-top:1px solid var(--fio-2);align-items:center}
.os-texto h2{font:clamp(var(--t-2),3.6vw,var(--t-3))/1.04 var(--serif);
  letter-spacing:-.02em;max-width:22ch;margin-block:var(--e-1) var(--e-3)}
.os-texto h2 em{color:var(--marinho)}
.os-link{display:inline-block;color:var(--marinho);margin-top:var(--e-3);
  text-underline-offset:.2em;text-decoration-thickness:1px}
.os-nota{border-left:2px solid var(--roxo);padding-left:var(--e-3)}
.os-pergunta{font:var(--t-1)/1.2 var(--serif);color:var(--marinho);max-width:23ch}
.os-nota dl{margin-top:var(--e-3);display:grid;gap:var(--e-2)}
.os-nota dl div{border-top:1px solid var(--fio-2);padding-top:var(--e-2)}
.os-nota dt{font:var(--t-1)/1.2 var(--serif);margin-bottom:var(--e-1)}
.os-nota .os-contexto{color:var(--cinza);margin-top:var(--e-3)}
.os-criacao{grid-template-columns:minmax(0,1fr) minmax(0,var(--fr-phi))}
.os-criacao .os-texto{grid-column:2;grid-row:1}
.os-criacao .os-foto{grid-column:1;grid-row:1;justify-self:start}
.os-foto{width:100%;max-width:calc(var(--e-7) * 2);justify-self:end;
  padding:var(--e-1);background:var(--papel-2);border:1px solid var(--fio-2)}
.os-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.os-criacao .os-foto{rotate:-2deg}
.os-criacao .os-foto img{object-position:center 60%}
.os-vida .os-foto{rotate:2deg}
.os-foto figcaption{font-size:var(--t--1);line-height:1.4;color:var(--cinza);padding-top:var(--e-1)}
.os-bancada{border-top:2px solid var(--roxo);padding-top:var(--e-4)}
.os-bancada-cab{grid-template-columns:1fr var(--fr-phi);gap:var(--e-4);margin-bottom:var(--e-4)}
.os-bancada h2{font:clamp(var(--t-1),3vw,var(--t-2))/1.1 var(--serif);margin-top:var(--e-1)}
.os-chamada{font:var(--t-1)/1.2 var(--serif);margin-bottom:var(--e-2)}
.os-grupos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--e-4) var(--e-5)}
.os-grupo h3{font:var(--t-1)/1.2 var(--serif);color:var(--marinho);margin-bottom:var(--e-2)}
.os-grupo .projetos-menores{list-style:none;padding:0;margin:0;border-top:1px solid var(--fio-2)}
.os-grupo li{border-bottom:1px solid var(--fio-2)}
.os-projeto summary{position:relative;list-style:none;cursor:pointer;
  padding:var(--e-2) var(--e-4) var(--e-2) 0}
.os-projeto summary::-webkit-details-marker{display:none}
.os-projeto summary b{display:block;font:var(--t-1)/1.1 var(--serif)}
.os-motivo{display:block;color:var(--cinza);margin-top:var(--e-1)}
.os-sinal{position:absolute;right:var(--e-1);top:var(--e-3);width:var(--e-2);height:var(--e-2);color:var(--roxo)}
.os-sinal::before,.os-sinal::after{content:"";position:absolute;background:currentColor}
.os-sinal::before{width:100%;height:1px;top:50%}
.os-sinal::after{height:100%;width:1px;left:50%}
.os-projeto[open] .os-sinal::after{display:none}
.os-projeto summary:hover b,.os-projeto[open] summary b{color:var(--roxo)}
.os-projeto-detalhe{padding-bottom:var(--e-3);max-width:58ch}
.os-projeto-detalhe .rot{margin-top:0;letter-spacing:.08em}
.os-projeto-detalhe .os-link{margin-top:var(--e-2)}
.os-fecho{border-top:1px solid var(--fio-2);margin-top:var(--e-5);padding-top:var(--e-4)}
.os-fecho .cit{margin-block:var(--e-3);font-size:clamp(var(--t-1),3vw,var(--t-2))}
.os-limites h3{font:var(--t-1)/1.2 var(--serif);margin-block:var(--e-3) var(--e-2)}
.os-limites p{color:var(--cinza)}
.os-limites .detalhe-os ul{list-style:none;padding:0}
.os-limites .detalhe-os li{padding-block:var(--e-1);border-bottom:1px solid var(--fio)}
.os-limites .detalhe-os b{display:block}
.os-conversa{margin-top:var(--e-5);padding-block:var(--e-3);border-block:1px solid var(--fio-2);
  display:flex;align-items:center;justify-content:space-between;gap:var(--e-4)}
.os-conversa h2{font:var(--t-1)/1.2 var(--serif);margin-bottom:var(--e-1)}
.os-conversa p{max-width:58ch}
.os-conversa .btn{flex-shrink:0}
@media(max-width:1000px){
  .os-abertura,.os-historia,.os-fecho{gap:var(--e-4)}
  .os-texto h2{font-size:var(--t-2)}
  .os-grupos{gap:var(--e-4)}
}
@media(max-width:760px){
  .os-abertura,.os-historia,.os-fecho,.os-bancada-cab,.os-grupos{grid-template-columns:minmax(0,1fr)}
  .os-abertura{margin-bottom:var(--e-4)}
  .os-indice{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--e-3)}
  .os-indice a{grid-template-columns:auto 1fr auto;font-size:var(--t-0);padding-block:var(--e-2);gap:var(--e-1)}
  .os-historia{padding-bottom:var(--e-4)}
  .os-criacao .os-texto,.os-criacao .os-foto{grid-column:auto;grid-row:auto}
  .os-foto{width:calc(100% - var(--e-3));max-width:calc(var(--e-7) * 2)}
  .os-texto h2{font-size:clamp(var(--t-1),8vw,var(--t-2))}
  .os-bancada-cab{gap:var(--e-3)}
  .os-grupos{gap:var(--e-4)}
  .os-conversa{align-items:start;flex-direction:column;gap:var(--e-3)}
}


.figura-ensaio img{aspect-ratio:var(--phi);transform:none}
.acao-ensaio{margin-top:var(--e-4);display:flex;gap:var(--e-2);flex-wrap:wrap}

/* aparte lateral: onde entra o que é ressalva, fonte ou limite declarado */
.aparte{position:sticky;top:5rem;border-top:2px solid var(--roxo);padding-top:var(--e-2)}
.aparte h3{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--roxo)}
.aparte dl{margin:var(--e-2) 0 0;display:grid;gap:var(--e-1)}
.aparte div{padding-top:var(--e-1);border-top:1px solid var(--fio)}
.aparte dt{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.16em;
  text-transform:uppercase;color:var(--cinza)}
.aparte dd{margin:0;font-size:.94em}
@media (max-width:1000px){.aparte{position:static}}

/* citação: uma por página, e ela quebra a margem */
.cit{font-family:var(--serif);font-size:clamp(var(--t-1),3.4vw,var(--t-2));
  line-height:1.1;border-left:2px solid var(--roxo);padding-left:var(--e-3);
  margin-block:var(--e-5);max-width:26ch}
.cit em{font-style:italic}

/* limite declarado: o que a página NÃO afirma. Fundo invertido, curto. */
.limite{background:var(--tinta);color:var(--papel);padding:var(--e-3) var(--e-4);
  margin-top:var(--e-5)}
.limite h3{font-family:var(--mono);font-size:var(--t--1);letter-spacing:.18em;
  text-transform:uppercase;color:var(--roxo-luz);margin-bottom:var(--e-1)}
.limite p{color:rgba(238,229,214,.78);max-width:70ch}

/* navegação entre complementares */
.irmas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--fio-2);
  border:1px solid var(--fio-2);margin-top:var(--e-6)}
@media (max-width:760px){.irmas{grid-template-columns:1fr}}
.irma{background:var(--papel);padding:var(--e-3);text-decoration:none;display:block;
  transition:background-color var(--d-0) ease-out}
.irma:hover{background:var(--papel-2)}
.irma .c{font-family:var(--mono);font-size:var(--t--2);letter-spacing:.18em;color:var(--roxo)}
.irma h3{font-family:var(--serif);font-size:var(--t-1);margin-top:var(--e-1)}
.irma p{color:var(--cinza);margin-top:.2rem}
.irma[aria-current="page"]{background:var(--papel-2);cursor:default}

@media (prefers-reduced-motion:reduce){
  .campo{display:none}
  .quadro img{transform:none!important}
}

/* ── link de pular ──
   Fora da tela até receber foco. Quem usa teclado não deve atravessar oito
   links de menu em toda página para chegar ao texto. */
.pular{position:absolute;left:-9999px;top:0;z-index:100;
  padding:var(--e-1) var(--e-2);background:var(--tinta);color:var(--papel);
  font-family:var(--mono);font-size:var(--t--1);letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none}
.pular:focus{left:var(--marg);top:var(--e-1)}
#conteudo:focus{outline:none}

/* ── estado dentro do botão ──
   O domínio da clínica serve página de estacionamento. Mandar alguém que
   busca cuidado para uma porta fechada sem avisar é o único defeito do site
   capaz de prejudicar uma pessoa. O rótulo passa a dizer o que ele vai achar. */
.est-btn{font-size:var(--t--2);letter-spacing:.14em;padding:.1rem .4rem;
  border:1px solid currentColor;opacity:.76;margin-left:.4em}