@charset "UTF-8";

/* ====================================================================
   CLOSE-UP 2026 · v2
   ====================================================================
   A v1 dita bem. Mesma saída, ficheiro novo, escrito de cima para
   baixo. A prova é o computado: 500 elementos × 10 rotas × 36
   propriedades, diff zero contra a v1.

   A cascata é nossa: sem legado, a ordem entre regras de igual
   especificidade deixa de depender da linha e passa a depender da
   camada.

   A história vive no `carril-feito.md`. Aqui, uma linha por bloco. */

/* ════════ OS TRÊS CORTES, À LETRA E POR ESCRITO ════════════════════
   Uma media query NÃO lê `var()` — não há `@custom-media` em produção —
   portanto os cortes vivem escritos nas `@media` e mais nada. Tê-los
   também como tokens era um registo que ninguém consultava: declarados
   uma vez, lidos ZERO. Saem, e a lista fica aqui, que é onde se vem ver
   quantos são e porquê.

     760    a GRELHA muda           as barras passam a uma coluna
    1000    o CABEÇALHO muda        é onde o menu deixa de caber
    1040    o TÍTULO muda           medido em `paisagens-tematicas`: a
                                    folga entre o fim do título de 89 e
                                    o início do texto cresce 0,45px por
                                    pixel de largura —
                                      1000  −14  sobrepõe
                                      1020   −5  sobrepõe
                                      1031    0  o zero, interpolado
                                      1040   +4  não sobrepõe
                                    o primeiro degrau redondo acima do
                                    zero. Amarrá-lo ao 1000 do cabeçalho
                                    era elegante e era coincidência: são
                                    duas medidas de duas coisas.

   Se um mudar, procura-se o número na folha. São três.
   ══════════════════════════════════════════════════════════════════ */

@layer tokens, base, componentes, paginas, estados, movimento;

/* >>> O CORTE TEM UMA GRAFIA DE CADA LADO, e não quatro — 12 Set.
   A folha tinha `max-width:759.98px`, `max-width:760px`,
   `max-width:759px` e `min-width:760px`, e as duas do meio PARTILHAM O
   PIXEL 760: a exactamente 760 disparavam os dois lados ao mesmo tempo.
   Daí vinham quatro sintomas — o título de secção por cima do
   parágrafo, o hambúrguer morto, o menu cortado.

   Passa a **sintaxe de intervalo**, que não tem meio pixel nem
   centésima:

     abaixo   @media (width < 760px)
     acima    @media (width >= 760px)

   O `<` exclui o 760 e o `>=` inclui-o: exactamente um lado activo em
   qualquer largura, por construção e não por aritmética.

   Medido nos dois motores, com render e não só com `supports`:

     Firefox 153      (width < N) sim   ·  (width >= N) sim
     Chromium 148     (width < N) sim   ·  (width >= N) sim

   >>> E os cortes NÃO ganham nome em `tokens` — 15 Set. Tiveram-no e
   saiu: uma media query não lê `var()`, portanto o token era um registo
   a duplicar o número sem ninguém o consultar. A lista dos três está no
   topo da folha, com a razão de cada um. <<< */

/* ---------------------------------------------------------------- */
@layer tokens{
:root{
  /* paleta — quatro opacas. Sobre sangue só papel (7,32) ou osso
     (6,12); tinta sobre sangue é 2,10 e não se usa. */
  --cu-papel:#F8F4EA;
  --cu-osso:#E7E0D1;
  --cu-sangue:#9C1E17;
  --cu-tinta:#221C17;

  /* famílias */
  --cu-display:'PT Serif', Georgia, serif;
  --cu-texto:'Roboto', system-ui, sans-serif;
  --cu-caps:'Roboto Condensed', system-ui, sans-serif;
  --cu-dados:'Roboto Mono', ui-monospace, monospace;

  /* escala — pares tamanho/entrelinha, base 34 */
  --t-peq:18px;    --l-peq:34px;
  --t-corpo:21px;  --l-corpo:34px;
  --t-med:34px;    --l-med:55px;
  --t-gr:89px;     --l-gr:89px;

  /* espaço e grelha */
  --cu-base:34px;
  --cu-goteira-cab:21px;
  --cu-goteira:55px;
  --cu-goteira-filete:5px;
  --cu-meia:8px;
  --cu-curto:13px;
  --cu-margem:clamp(13px, 4.5vw, 68px);
  --cu-medida:1280px;
  --cu-colunas:6;
  --cu-cabeca:68px;
  --cu-leitura:68ch;

  /* tokens de componente */
  --cu-miniatura:55px;
  --cu-miniatura-gr:110px;
  --cu-marca:26px;
  --cu-junta:1ch;
  --cu-corrida-min:3ch;
  --cu-separa:2ch;
  /* O AR DA FAIXA DE REALCE — 13 Set. É o espaço que já existe por
     baixo da tinta de uma barra, do último traço ao bordo da caixa,
     e mede-se igual nas duas barras que o definem:
       barra de 55 (o dia)          tinta de y+9 a y+38, ar em baixo 16
       barra de 77 (o convidado)    tinta de y+0 a y+60, ar em baixo 16
     Medido em píxeis, não estimado. A faixa estende-se o mesmo por
     cima da caixa e o texto fica com ar dos dois lados. */
  /* A FAIXA, em dois valores: o de cima tem de caber no intervalo entre
     barras, que é o `row-gap` de 8; o de baixo não tem vizinho por baixo
     e fica no que era. Meia base para cima — 4 — deixa 4 de ar até à
     barra anterior. */
  --cu-faixa-cima:4px;
  --cu-faixa-baixo:16px;
  /* O SINAL — `+`, `−`, `→`, `↑`. Quatro glifos de Roboto Mono, todos
     do mesmo tamanho, e **+50% do original**: o original eram os 34
     das listagens, portanto 51. O dobro esteve cá uma leva e era
     demais — enchia a linha do rodapé e comia-lhe as folgas.
     >>> No rodapé o original era 18, portanto para ele isto não é
     +35%, é +155%. O token unifica-os de propósito: o sinal é o mesmo
     objecto em todo o lado, e o tamanho é do objecto e não do sítio.
     O factor esteve a 2 e a 1,5; fica em **1,35**. <<< */
  --cu-sinal:calc(1.35 * var(--t-med));
  /* >>> UM NÚMERO POR GLIFO — 12 Set, à noite. O `--cu-sinal` dá a
     todos o mesmo `font-size`, e o mesmo `font-size` NÃO dá a mesma
     mancha: cada glifo ocupa o que quer dentro do corpo. Medido em
     canvas, a 45,9 de Roboto Mono 400, altura de tinta em píxeis:

           +   24     −    4     →   16     ↑   25

     A `→` tem dois terços da mancha do `+` e a `↑` tem mais um. Os dois
     factores que as igualam são `1,5` e `0,96`, e é isso que estes dois
     tokens escrevem. O `+` e o `−` ficam no valor base: o `−` é a
     espessura de um traço e igualá-lo seria fazer dele outra coisa. */
  --cu-sinal-seta:calc(1.5 * var(--cu-sinal));
  /* >>> O RECORTE DA CAUDA — 13 Set. A escala igualou a MANCHA EM
     ALTURA e deixou a `→` com cauda: medido em canvas, a 68,85 ela tem
     **38px de tinta** contra os **23 do `+`**. Quinze a mais, todos de
     haste. A `↑` a 44,06 tem 24 de altura contra 24 — essa já bate.

     Corta-se pela ESQUERDA, que é onde a haste está: fica a ponta e o
     que couber. E é `clip-path` e não `overflow:hidden` — a razão está
     medida no ponto 3 desta mesma leva: `overflow:hidden` faz a caixa
     sintetizar a base pelo fundo, e a corrida acabou de sair desse
     buraco. O `clip-path` corta a PINTURA e não mexe na linha nem na
     base. A margem negativa traz a ponta de volta à coluna. <<< */
  --cu-sinal-cauda:15px;
  /* >>> E O DESCAÍDO QUE PÕE A TINTA NA BASE DOS UNS. Alinhar pela
     linha de base junta as BASES ALFABÉTICAS, e a tinta de cada glifo
     não assenta nela: medido, o `1` da corrida fica 1px acima e o `+`
     4px. Sobram 3px, e é isso que se vê nas capturas — o sinal a
     flutuar acima da linha dos uns. Três píxeis para baixo, e as duas
     tintas ficam na mesma linha.
     O `−` desce os mesmos 3 por ser o MESMO pseudo com outro `content`,
     e continua 11px acima da base: é o eixo de matemática, que é onde
     um sinal de menos mora. <<< */
  --cu-sinal-base:3px;
  /* a goteira entre os blocos de uma linha de filme: 0,6 do avanço da
     mono, contra os 21 fixos que lá estavam. Ver a nota na linha. */
  --cu-junta-linha:.6ch;
  /* >>> A COLUNA DO SINAL, RESERVADA — 12 Set. Era `auto` nas seis
     listas, e uma coluna `auto` cede quando o resto aperta: a 320 o `+`
     do programa saía cortado pela direita. Passa a largura fixa, que é o
     AVANÇO do glifo — 27,60px, medido em canvas a 45,9 de Roboto Mono, e
     é o mesmo para os quatro sinais porque a Mono é de avanço fixo. A
     corrida deixa de lhe poder comer a célula. <<< */
  --cu-sinal-col:27.6px;
  /* OS DOIS CORTES, por escrito. Registo e não fonte — uma media query
     não lê `var()` — e é aqui que se vem ver quantos são e quais. */
  /* OS DOIS MULTIPLICADORES DO HERÓI, com nome. Estavam soltos em
     `calc()` e só o comentário os explicava:
       a caixa do `11`   = marca × 1,404494
       o triângulo       = caixa × 0,95235   →  marca × 1,337653
     e a marca sai do inverso: 102 × 0,747577. */
  --cu-caixa-heroi:1.404494;
  --cu-triangulo-heroi:0.747577;
  /* O TEMPO do realce: cor, escala, miniatura e faixa. Era .15s e
     lia-se como um estalo; .25 é o mesmo passo do acordeão. */
  --cu-tempo:.25s;
  /* >>> E OS OUTROS TRÊS TEMPOS GANHAM NOME — 15 Set. Estavam à letra,
     e o relatório chamou-lhes «literal onde há token». Medi e não é
     isso: `var(--cu-tempo-menu)`, `var(--cu-tempo-painel)` e `var(--cu-tempo-entrada)` não são grafias do `--cu-tempo` (.25s)
     nem do `--cu-tempo-acordeao` (.5s) — são três valores próprios, e
     trocá-los pelos tokens mudava durações. O que faltava era nome, não
     substituição. O valor de cada um fica exactamente o que era. <<< */
  --cu-tempo-menu:.12s;      /* a cor dos rótulos do menu */
  --cu-tempo-painel:.3s;     /* o painel a abrir e a fechar */
  --cu-tempo-entrada:.35s;   /* a entrada dos cartões e a troca da miniatura */
  /* >>> O TEMPO DO ACORDEÃO É SEU, e não o `--cu-tempo` do
     realce. Meio segundo: o miolo do dia abre 548px a 360 e 242 a
     1265, e a .25s do realce lê-se como um salto. <<< */
  --cu-tempo-acordeao:.5s;
  /* A PERNA — a profundidade do descendente das duas famílias dos
     títulos, medida em Firefox 153 contra a base do `H`, a 200px:

                        g       p       ç       Ç
       PT Serif 700     0,2200  0,2050  0,2600  0,2900
       Roboto Cond 700  0,2100  0,2050  0,2300  0,2300

     0,26 é o mais fundo do conjunto MINÚSCULO, que é o que a metade
     serifada dos títulos escreve; a metade em Condensed é caixa alta
     e não passa de 0,23. Fica 0,26.
     >>> Um `Ç` em serifa pediria 0,29 e hoje não existe em título
     nenhum. Se aparecer, é trocar o número aqui. <<< */
  --cu-perna:0.26em;
  --cu-riscas:"____________________________________________________________________________________________________________________________________________";
  --cu-uns:"11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111";
}
}

/* ---------------------------------------------------------------- */
@layer base{

/* >>> O CAMPO É OSSO desde 13 Set, decisão do Pedro. O papel deixa de
   ser o fundo e passa a ser SÓ o realce: é ele que acende debaixo do
   rato. Contrastes remedidos com o corpo a osso:
     tinta  / osso   12,82   texto e títulos
     sangue / osso    6,12   uns, sinais, dados, hover de texto
     papel  / osso    1,20   o realce — diferença de campo, não de texto
   Varridas as treze declarações de `--cu-papel` da folha: NENHUMA
   assenta no corpo. As quatro do cabeçalho, painel e rodapé assentam
   em sangue (7,32); as quatro do módulo do blog e a do campo do título
   de secção assentam em tinta (15,34). Nada mudou de legibilidade —
   o que mudou foi o que está À VOLTA delas. <<< */
html{ scroll-behavior:smooth; background:var(--cu-osso) }

*,::before,::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--cu-osso);
  color:var(--cu-tinta);
  font-family:var(--cu-texto);
  font-weight:400;
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  text-rendering:optimizeLegibility;
}

img,svg{ display:block; max-width:100%; height:auto }

a{ color:inherit; text-decoration:none }

h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:400;
  line-height:1.15;
  text-wrap:balance;
}

p{ margin:0 0 var(--cu-base) }
p:last-child{ margin-bottom:0 }

/* o contentor: grelha de seis, margem fluida, medida máxima */
#page-wrapper,#start,#embrulho,section{ width:100% }

#body-wrapper,
#footer{
  width:100%;
  max-width:var(--cu-medida);
  margin-inline:auto;
  padding-inline:var(--cu-margem);
}

#body-wrapper{
  display:grid;
  grid-template-columns:repeat(var(--cu-colunas), 1fr);
  column-gap:var(--cu-goteira);
  padding-block:var(--cu-base);
}

#body-wrapper > *{
  grid-column-start:1;
  grid-column-end:-1;
  min-width:0;
}

#footer{ padding-block:var(--cu-base) }

/* >>> AS TRES LINHAS DE TELEMOVEL — 12 Set. Nenhuma muda o desenho; as
   tres tiram comportamentos por omissão que só aparecem no toque.

   `text-size-adjust:100%` impede o WebKit de inflar o corpo quando o
   telefone roda para paisagem: sem isto a folha inteira cresce ~18% e
   os cortes deixam de querer dizer o que dizem.
   `tap-highlight-color:transparent` tira o quadrado azul do toque, que
   não é desta paleta.
   `touch-action:manipulation` tira o atraso de 300ms que o browser
   guarda para ver se vem um duplo toque.

   >>> Medido nos dois motores: o Chromium 148 diz sim às três; o
   Firefox 153 diz sim só ao `touch-action` — as outras duas são
   propriedades de WebKit/Blink, e é lá que o problema existe. Ficam
   porque o alvo delas é o telemóvel, que é Blink e WebKit. <<< */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100% }

a,
button,
[role=button]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}

/* >>> O QUINTO CINZA NÃO EXISTE — 12 Set. Sem isto o browser pinta os
   links visitados no seu próprio roxo escuro, `#201A1D`, e a paleta
   passa de quatro cores a cinco sem ninguém a declarar.
   >>> NÃO SE MEDE por `getComputedStyle`: os motores mentem de
   propósito no `:visited`, por privacidade, e devolvem sempre a cor do
   não-visitado. O que se verifica é a cascata. <<< */
a:visited{ color:inherit }

/* foco — o anel, e o filete de underscores que o legado impedia */
:focus-visible{ outline:2px solid var(--cu-sangue); outline-offset:3px }

/* >>> E O MESMO FILETE NO HOVER — 12 Set, à noite, nos dois sítios que
   a nota nomeia: os rótulos do menu e os `h5` do rodapé. Não é uma
   regra nova, é a MESMA: o filete do foco ganha mais quatro selectores
   e nada se duplica. Se fosse regra à parte eram quinze declarações
   escritas duas vezes, e duas coisas para manter em vez de uma.

   Fica de fora todo o resto dos links: um filete debaixo de cada `a`
   da página ao passar o rato seria outra folha. <<< */
a:focus-visible{ position:relative }

/* >>> UM FILETE, NÃO DOIS — 13 Set. O selector era
   `li span:not(.cu-corrida)` **descendente**, e isso apanhava o
   `.cu-uns` de dentro da corrida: com o rato no rótulo saíam dois
   filetes, o do `a` e o do span de dentro. É a TERCEIRA vez que o
   descendente morde, depois do `flex:0 0 auto` de 12 Set e do
   Condensed 34 de 13. `>` e mais nada.

   E o `.active` sai da lista: ele é `.cu-aqui` quando é a página
   corrente — e aí não reage por decisão — e quando é o nível acima é um
   `<a>`, que a primeira linha já apanha. <<< */
@media (hover:hover){
.dropmenu ul li > a:hover,
#footer #rodape .caixa-info > div:not(.topo) h5:hover{ position:relative }
}

a:focus-visible::after{
  content:var(--cu-riscas);
  position:absolute;
  left:0;
  right:0;
  /* −0,17em: põe a tinta do underscore 7px abaixo da do rótulo e 4px
     abaixo da cedilha do Ç, que é o descendente mais fundo do menu. */
  bottom:-.17em;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--cu-dados);
  font-weight:400;
  /* >>> UM TAMANHO FIXO, E É O DOS UNS — 13 Set. Era `1em` e saía ao
     corpo do rótulo: debaixo de um rótulo de 34 o underscore era um
     traço gordo que não se lia como ASCII. A 18 — o corpo dos uns da
     corrida — o filete é da mesma escala em todo o lado, seja qual for
     o rótulo que sublinha. <<< */
  font-size:var(--t-peq);
  /* 1,6 e não 1: com 1 a caixa fica mais baixa do que a altura de
     conteúdo da fonte e o overflow corta o underscore, que vive abaixo
     da linha de base. */
  line-height:1.6;
  letter-spacing:normal;
  color:var(--cu-sangue);
  pointer-events:none;
  user-select:none;
}

@media (hover:hover){
.dropmenu ul li > a:hover::after,
#footer #rodape .caixa-info > div:not(.topo) h5:hover::after{
  content:var(--cu-riscas);
  position:absolute;
  left:0;
  right:0;
  /* −0,17em: põe a tinta do underscore 7px abaixo da do rótulo e 4px
     abaixo da cedilha do Ç, que é o descendente mais fundo do menu. */
  bottom:-.17em;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--cu-dados);
  font-weight:400;
  /* o mesmo 18 da outra metade desta regra — ver a nota lá em cima. A
     regra está partida em duas desde 12 Set, para o foco ficar fora da
     guarda de hover, e é preciso mudar as duas. */
  font-size:var(--t-peq);
  /* 1,6 e não 1: com 1 a caixa fica mais baixa do que a altura de
     conteúdo da fonte e o overflow corta o underscore, que vive abaixo
     da linha de base. */
  line-height:1.6;
  letter-spacing:normal;
  color:var(--cu-sangue);
  pointer-events:none;
  user-select:none;
}
}

/* nos dois campos de sangue o filete é papel */
#header a:focus-visible::after,
#overlay a:focus-visible::after,
#footer a:focus-visible::after{ color:var(--cu-papel) }

@media (hover:hover){
#header .dropmenu ul li > a:hover::after,
#overlay .dropmenu ul li > a:hover::after,
#footer #rodape .caixa-info > div:not(.topo) h5:hover::after{ color:var(--cu-papel) }
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* ================================================================
   A CORRIDA — de nove pseudos a uma classe. 12 Set.
   ================================================================
   Era o mesmo filete escrito nove vezes, com as mesmas doze
   declarações e duas ou três diferenças cada. Passa a um
   `<span class="cu-corrida">` que o `armarCorridas()` põe no sítio
   onde o pseudo estava — e a folha fica com UMA regra e uma
   declaração por sítio onde difere.

   >>> O QUE ISTO DESBLOQUEIA, e é a razão de ser da mudança: um
   pseudo-elemento **pode** consultar o elemento de origem — medido,
   com uma sonda de `@container` — mas nenhum elemento da folha tem a
   largura da corrida: os donos dos quatro pseudos das barras são
   `display:contents`, que não gera caixa e não pode ser contentor.
   Como ELEMENTO, a corrida é o seu próprio contentor. <<<

   Os uns continuam a vir do CSS: o span não leva texto, leva o
   `::before`. E é `aria-hidden` e não focável — o `Tab` não muda. */
/* >>> OS UNS SAO UM OBJECTO, E LEVAM O TIPO CONSIGO — 13 Set. É a
   TERCEIRA vez que uma corrida parte por herança de quem a envolve, e
   por isso deixa de se defender por exclusões:

     12 Set   o menu punha `flex:0 0 auto` e Condensed nos `span` dos
              rótulos, e o span novo da corrida caía lá: largura zero
              em cinco corridas. Resolvido com `:not(.cu-corrida)`.
     13 Set   a mesma regra apanhou o `.cu-uns` de dentro, que o
              `:not(.cu-corrida)` não cobre — «111» a Condensed 34 no
              menu.

   Um `:not()` protege o que ele nomeia e nada mais; cada peça nova da
   corrida precisava de ser acrescentada a ele, e uma exclusão que
   precisa de manutenção não é protecção. **Os uns declaram o tipo
   deles, e declaram-no com peso que ganha a quem os envolva.** É o
   mesmo princípio da corrida, que já declara a família por si.

   `#body-wrapper .cu-uns, #header .cu-uns, #overlay .cu-uns, #footer
   .cu-uns` — um id em cada, que é o que os cinco contextos da folha
   usam para se scoparem. Os quatro cobrem tudo. <<< */
#body-wrapper .cu-uns,
#header .cu-uns,
#overlay .cu-uns,
#footer .cu-uns{
  display:inline;
  flex:0 1 auto;
  font-family:var(--cu-display);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
}

.cu-corrida{
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  /* >>> OS UNS PASSAM A PT SERIF — 12 Set. O `1` serifado tem outro
     avanço e isso mexe em dois números que dependiam do mono, os dois
     medidos em Firefox a 18px:
       Roboto Mono    1ch = 10,80   ·  avanço do `1` = 10,80
       PT Serif 400   1ch =  9,60   ·  avanço do `1` =  9,60
     Os dois seguem sozinhos, porque o `ch` resolve no sítio onde é
     usado e este elemento declara a família: a junta passa de 10,80 a
     **9,60**, e o limiar dos seis de 64,8 a **57,60**. <<< */
  font-family:var(--cu-display);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  user-select:none;
  margin-inline:var(--cu-junta);
  container-type:inline-size;
}

/* >>> O `::before` DOS UNS SAIU — 13 Set. Os uns passam a ser conteúdo
   do span, escritos pelo `armarCorridas()`, e a razão é a base: um span
   sem texto não tem linha de base e o browser usa o fundo da caixa. Com
   `align-items:last baseline` a corrida alinhava o fundo dela pela base
   dos outros — e flutuava por cima. Com texto lá dentro há base a
   sério. <<< */

/* >>> MENOS DE SEIS UNS NÃO SE MOSTRAM. A consulta é ao PRÓPRIO span,
   que é o que a classe torna possível. O `6ch` resolve contra a fonte
   do contentor consultado — que é este span, e este span declara
   `--cu-dados`: 6 × 10,8018 = **64,8px**. Não é o `ch` da raiz nem o
   do cartão; é o do mono, como o `--cu-junta`.
   Isto não contradiz o `minmax(3ch, 1fr)` das barras: a coluna pode
   continuar a encolher até 3ch — o que desaparece é a corrida, não a
   coluna. <<< */
/* >>> O MÍNIMO DESCE DE SEIS UNS PARA QUATRO — 12 Set, decisão do
   Pedro. Com o `1` de PT Serif a 18 o `ch` é 9,60, portanto o limiar
   passa de 57,60 para **38,40px**. Abaixo disso a corrida esconde os
   uns e fica só o espaço; a partir de quatro, mostra-os. <<< */
@container (max-width: 4ch){
  /* >>> E ESCONDE O SPAN DE DENTRO, não o próprio — 13 Set, adenda, e é
     a correcção de uma regressão minha. Escrevi `.cu-corrida{...}` ao
     mudar os uns de pseudo para texto, e **um elemento não pode ser
     contentor da sua própria consulta**: a regra nunca disparou e duas
     corridas do blog ficaram a mostrar «11» — dois uns, com o mínimo em
     quatro. Medido: span de 16,2px contra um limiar de 38,4, e
     `visibility:visible`.
     Com o `.cu-uns` lá dentro a consulta tem um descendente para
     apanhar, que é como funcionava com o `::before`. <<< */
  .cu-corrida .cu-uns{ visibility:hidden }
}/* ---- o que difere, sítio a sítio ---- */

/* as barras: quatro listas, uma linha */
#body-wrapper .todas-seccoes .caixa-seccao .seccao-texto > .cu-corrida,
#body-wrapper .todos-posts .caixa-post .blog-list-texto > .cu-corrida,
#embrulho .todos-convidados .nome-convidado > .cu-corrida,
#embrulho .todas-sessoes .caixa-sessao .sessao-info > .cu-corrida{
  line-height:var(--l-med);
  letter-spacing:0;
  text-transform:none;
  color:var(--cu-tinta);
}

@media (width >= 760px){
  /* ---- o que difere, sítio a sítio ---- */
  
  /* as barras: quatro listas, uma linha */
  #body-wrapper .todas-seccoes .caixa-seccao .seccao-texto > .cu-corrida,
  #body-wrapper .todos-posts .caixa-post .blog-list-texto > .cu-corrida,
  #embrulho .todos-convidados .nome-convidado > .cu-corrida,
  #embrulho .todas-sessoes .caixa-sessao .sessao-info > .cu-corrida{
    grid-column-start:3;
    grid-row-start:1;
  }
}/* o iCal é a última barra de três colunas; o Sobre passou às cinco da
   receita a 13 Set e a corrida dele foi para a coluna 3 com as outras */
#body-wrapper .caixa-sobre > .bilheteira > .cu-corrida,
#body-wrapper .caixa-sobre > .ficha > .cu-corrida{
  letter-spacing:0;
  text-transform:none;
  color:var(--cu-tinta);
}

@media (width >= 760px){
  /* o iCal é a última barra de três colunas; o Sobre passou às cinco da
     receita a 13 Set e a corrida dele foi para a coluna 3 com as outras */
  #body-wrapper .caixa-sobre > .bilheteira > .cu-corrida,
  #body-wrapper .caixa-sobre > .ficha > .cu-corrida{
    grid-column-start:3;
    grid-row-start:1;
  }
}#body-wrapper .caixa-icals > .cu-corrida{
  letter-spacing:0;
  text-transform:none;
  color:var(--cu-tinta);
}

@media (width >= 760px){
  #body-wrapper .caixa-icals > .cu-corrida{
    grid-column-start:2;
    grid-row-start:1;
  }
}

#body-wrapper .caixa-sobre > div > .cu-corrida{ line-height:var(--l-med) }

/* o dia: entre o nome e o sinal */

/* o título de módulo: a única corrida a sangue sobre papel */
#body-wrapper .titulo-mod > .cu-corrida{
  line-height:var(--l-med);
  letter-spacing:0;
  text-transform:none;
  color:var(--cu-sangue);
}

/* o rodapé: campo de sangue, corrida a osso */
#footer #rodape .caixa-info > div:not(.topo) > .cu-corrida,
#footer #rodape .topo a > .cu-corrida{
  text-transform:none;
  color:var(--cu-osso);
}

/* >>> A CORRIDA QUE ABRE A LINHA NÃO LEVA JUNTA À ESQUERDA: a junta é
   o ar entre a corrida e o que está ao lado dela, e aqui não está
   nada — o rótulo é que falta, não é invisível. Medido antes: os uns
   da linha da seta começavam a x=67 e o «ARQUIVO» de baixo a x=57,
   dez píxeis de desalinho, que é exactamente a junta.
   São duas: a seta de subir e os títulos de módulo da home. As do
   menu NÃO entram — ali a corrida abre o `li` mas não abre a linha,
   que vem do rótulo anterior. <<< */
#footer #rodape .topo a > .cu-corrida:first-child,
#body-wrapper .titulo-mod > .cu-corrida:first-child{
  margin-inline-start:0;
}

/* A JUNTA É MARGEM E NÃO PADDING — 13 Set, e a razão está medida em
   píxeis. O `overflow:hidden` corta na caixa de PADDING, não na de
   conteúdo: o `padding-inline` empurrava o primeiro `1` para dentro e
   do lado direito os uns passavam-lhe por cima até ao bordo. A junta
   era de um lado só.

   Medido no cabeçalho a 1265, tinta a tinta, os doze lados:

       rótulo        antes esq/dir      depois esq/dir
       Sobre              9 / 18            19 / 18
       Blog              10 / 19            19 / 17
       Secções            9 / 18            20 / 18
       Convidados         9 / 17            19 / 18
       Programa           9 / 17            19 / 18

   Em margem a caixa encolhe de verdade e os uns param onde devem. O
   desvio de 1px que sobra é a lateral do glifo `1`, que não é
   simétrica. */

/* no menu a junta cresce com a largura: aos 760 não há folga e a
   junta fixa cortava o último rótulo. 0 aos 760, 1ch aos 933. */
.dropmenu ul .cu-corrida{
  color:var(--cu-osso);
  margin-inline:clamp(0px, (100vw - 760px) * 0.0625, 1ch);
}

#overlay .cu-corrida{ color:var(--cu-papel) }

/* >>> E A JUNTA PASSA PARA O LADO DO RÓTULO. Com a corrida à esquerda,
   a junta do bordo esquerdo empurrava os uns para dentro e a linha
   deixava de começar no bordo. A do outro lado fica: é ela que separa
   os uns do rótulo, como em toda a folha. <<< */
#overlay li > .cu-corrida{ margin-inline-start:0 }

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o cabeçalho do site ---------- */

#header{
  position:relative;
  z-index:100;
  height:var(--cu-cabeca);
  color:var(--cu-osso);
  max-width:none;
  margin:0;
  padding:0;
  background:var(--cu-sangue);
}

#header .navbar{
  height:100%;
  max-width:var(--cu-medida);
  margin-inline:auto;
  padding-inline:var(--cu-margem);
  /* >>> O AR DA BARRA REPARTE-SE — 12 Set. Era `padding-bottom:13` e
     mais nada, portanto a caixa de conteúdo ficava encostada ao TOPO
     dos 68: medido, o `ul` dos rótulos de y0 a y55, e a mancha de
     «SECÇÕES» a 7,5 do topo contra 21,5 do fundo — catorze píxeis de
     desequilíbrio.

     Metade de cada lado e a caixa centra-se. >>> E é `* .5` e não uma
     barra: uma barra em posição de valor é uma DIVISÃO para o
     gulp-sass, e já custou uma vez nesta folha. <<<

     O `align-self:center` no `.navbar-menu` não serve, e medi-o: a
     barra interna tem exactamente a altura do menu, portanto não há
     onde centrar. O ar não estava dentro dela — estava no padding. <<< */
  padding-block:calc(var(--cu-curto) * .5);
  display:flex;
  align-items:last baseline;
  justify-content:space-between;
  gap:var(--cu-goteira-cab);
}

#header .navbar-logo{ width:auto; flex:0 0 auto; align-self:last baseline }

/* a marca: o lettering, e o «11» dentro do triângulo */
.navbar-brand{
  display:flex;
  align-items:baseline;
  column-gap:var(--cu-goteira-cab);
  color:inherit;
}

.navbar-brand svg{ display:block; width:auto; height:var(--cu-marca) }

.marca-11{
  display:inline-flex;
  align-items:baseline;
  font-family:var(--cu-display);
  font-weight:700;
  line-height:1;
  letter-spacing:normal;
  user-select:none;
  position:relative;
  isolation:isolate;
  color:var(--cu-osso);
}

.marca-11::before{
  content:"";
  position:absolute;
  left:-6.378%;
  top:-3.656%;
  width:118.287%;
  height:95.235%;
  clip-path:polygon(50% 0, 100% 100%, 0 100%);
  background:var(--cu-tinta);
  z-index:-1;
}

.marca-11 > span:first-child{
  display:inline-block;
  /* o 1,404494 é `--cu-caixa-heroi`: o corpo do `11` que faz a caixa
     dele ser 1,4045 vezes a marca. Declarado em `tokens`. */
  font-size:calc(var(--cu-marca) * var(--cu-caixa-heroi));
  transform:scaleX(-1);
}

.marca-11 > span:last-child{
  font-size:calc(var(--cu-marca) * 1.043139);
  margin-left:calc(var(--cu-marca) * -0.055701);
}

/* o menu de escritório: os rótulos e as corridas na mesma linha */
.navbar-menu{ width:auto; margin:0; flex:1 1 0; min-width:0 }

/* >>> A CAIXA DO MENU SOBE DE 34 A 55 — 12 Set, à noite. Era ela que
   cortava o til: `height:34` com `overflow:hidden`, e a tinta de
   «SECÇÕES» em Condensed caps a 34 sobe acima disso. O `overflow` fica,
   que é ele que impede a corrida de sair da linha; o que muda é a
   altura, que passa a ser a da linha dos rótulos. <<< */
.dropmenu ul{
  display:flex;
  align-items:last baseline;
  column-gap:var(--cu-goteira-filete);
  height:var(--l-med);
  margin:0;
  padding:0;
  list-style:none;
  white-space:nowrap;
  overflow:hidden;
}

/* `display:contents` para o rótulo e a corrida serem itens irmãos */
.dropmenu ul li{ display:contents }

/* >>> O `:not(.cu-corrida)` é o preço de a corrida ser agora um span
   como os outros: estas regras foram escritas para os RÓTULOS, e um
   span novo cai nelas. Sem ele a corrida ficava `flex:0 0 auto` e a
   Condensed dos rótulos — medido: largura 0 nas cinco do menu. <<< */
.dropmenu ul li > a,
.dropmenu ul li > span:not(.cu-corrida){ flex:0 0 auto }

/* >>> O `>` É O QUE FECHA ISTO, e não mais um nome no `:not()` — 13 Set.
   Esta regra é do RÓTULO, e um rótulo é sempre filho directo do `li`.
   Escrita com descendente, apanhava tudo o que estivesse lá dentro a
   qualquer profundidade — e apanhou duas vezes:

     12 Set   o `span.cu-corrida`, que é filho: largura zero em cinco
     13 Set   o `span.cu-uns`, que é NETO: «111» a Condensed 34

   Um `:not()` protege o que nomeia e nada mais, portanto cada peça nova
   da corrida tinha de lhe ser acrescentada — uma exclusão que precisa de
   manutenção não é protecção. Com `>` a regra diz o que quer dizer, e
   tudo o que a corrida vier a ter por dentro fica imune por
   construção. <<< */
.dropmenu ul li > a,
.dropmenu ul li > span:not(.cu-corrida){
  display:block;
  font-family:var(--cu-caps);
  /* >>> UM DEGRAU ACIMA — 18/34 para 34/55, 12 Set. Medido a 1265: os
     cinco rótulos passam de 339 a 640px e continuam a caber, mas a
     corrida mais estreita cai de 85 para **35px** — abaixo dos 57,6 do
     limiar dos seis, portanto essa esconde-se. É a regra a fazer o que
     foi escrita para fazer. A 55 nenhuma corrida sobrevive e os
     rótulos sozinhos medem 1036 num contentor de ~1030. <<< */
  font-size:var(--t-med);
  /* 34/55 e não 34/34: o `Õ` de «SECÇÕES» precisa de linha acima da
     caixa alta, e numa linha igual ao corpo não a tem. */
  line-height:var(--l-med);
  text-transform:uppercase;
  letter-spacing:normal;
  color:var(--cu-osso);
  transform-origin:left center;
}

/* >>> A CORRIDA QUE FECHAVA O MENU SAI — 12 Set, à noite. O último
   `li` levava a sua corrida a seguir ao rótulo, como todos, e isso
   punha «PROGRAMA» a acabar 59px antes do bordo do conteúdo. A corrida
   serve para EMPURRAR o rótulo seguinte; depois do último não há
   seguinte, e o que ela empurra é o vazio.
   >>> E é filha directa do `ul`, não do último `li` — medido no DOM: as
   seis corridas dos rótulos vivem DENTRO dos `li` e vêm ANTES do
   rótulo, que é o que empurra cada um; a sétima é irmã dos `li` e vem
   depois do último. Escrevi primeiro `li:last-child > .cu-corrida` e
   não apanhou nada: «PROGRAMA» continuou a acabar em 1134. <<< */
.dropmenu ul > .cu-corrida:last-child{ display:none }

.dropmenu ul li a:before{ content:none }

/* ---------- o hambúrguer e o painel de telemóvel ---------- */

.mobile-menu{ position:static; width:auto; padding:0; flex:0 0 auto }

.mobile-container{
  position:static;
  top:auto;
  left:auto;
  margin:0;
  max-width:none;
  z-index:auto;
}

.mobile-menu .button_container{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  width:28px;
  height:20px;
  cursor:pointer;
  z-index:101;
}

.mobile-menu .button_container span{
  display:block;
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border:0;
  border-radius:0;
  background:var(--cu-osso);
}

.mobile-menu .button_container span.top{ top:0 }
.mobile-menu .button_container span.middle{ top:9px }
.mobile-menu .button_container span.bottom{ top:18px }

#overlay{
  position:fixed;
  inset:var(--cu-cabeca) 0 0;
  width:100vw;
  height:auto;
  padding:var(--cu-base) var(--cu-margem);
  background:var(--cu-sangue);
  opacity:0;
  visibility:hidden;
  overflow-y:auto;
  z-index:90;
}

#overlay .mobile-logo{ display:none }
#overlay .toggler{ display:none }

#overlay nav,
.overlay-menu{
  position:static;
  height:auto;
  margin:0;
  text-align:left;
  overflow:visible;
}

.overlay-menu > .tree{ text-align:left }

#overlay ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:var(--cu-goteira-cab);
}

/* >>> A LINHA DO PAINEL INVERTE-SE — 12 Set. Os uns à esquerda e o
   rótulo à direita, ao contrário do que o markup dá: medido, o DOM do
   painel é `A + SPAN.cu-corrida` — rótulo primeiro — que é o inverso do
   cabeçalho, onde a corrida vem antes.

   `row-reverse` e não dois `order`: com dois filhos é uma declaração em
   vez de duas, e o `column-gap` não muda de sentido com ela. <<< */
#overlay li{
  display:flex;
  flex-direction:row-reverse;
  align-items:baseline;
  column-gap:var(--cu-goteira-cab);
  overflow:hidden;
  margin:0;
  padding:0;
  text-align:left;
  background:none;
}

#overlay li > a,
#overlay li > span:not(.cu-corrida){ flex:0 0 auto }

/* o mesmo `>` do menu, pela mesma razão */
#overlay li > a,
#overlay li > span:not(.cu-corrida){
  display:block;
  font-family:var(--cu-display);
  font-size:var(--t-med);
  line-height:var(--l-med);
  color:var(--cu-osso);
}

/* >>> O CABEÇALHO TEM CORTE PRÓPRIO — 1000, e não 760. Decisão do
   Pedro, e a razão é medida: com os rótulos a 34 o menu de escritório
   não cabe até aos ~990. Entre 760 e 999 a página já tem seis colunas
   mas a navegação ainda é hambúrguer e painel.

   **São dois cortes independentes e é isso que é novo nesta folha:**

     a GRELHA muda a 760
     a NAVEGAÇÃO muda a 1000

   O `#body-wrapper` fica no corte da grelha, onde sempre esteve; o que
   sobe para 1000 são as três declarações da navegação. <<< */
@media (width < 760px){
  #body-wrapper{ grid-template-columns:1fr }
}

@media (width < 1000px){
  .navbar-menu{ display:none }
  .mobile-menu{ display:block }
}

@media (width >= 1000px){
  .mobile-menu{ display:none }
  .navbar-menu{ display:block }
  .dropmenu{ display:block }
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* o menu e a marca: osso em repouso, papel ao toque */
#header .navbar-brand:focus,
#header .navbar-brand:active{
  color:var(--cu-papel);
  text-decoration:none;
  transform:scale(1.02);
}

@media (hover:hover){
#header .navbar-brand:hover{
  color:var(--cu-papel);
  text-decoration:none;
  transform:scale(1.02);
}
}

@media (hover:hover){
#header .navbar-logo:hover svg,
#header .navbar-logo:hover svg path{ fill:currentColor }
}

.dropmenu ul li a:focus-visible span{
  color:var(--cu-papel);
  transform:scale(1.02);
  border-bottom:0;
  padding-bottom:0;
}

@media (hover:hover){
/* >>> A CORRIDA REAGE COM O RÓTULO — 13 Set. O hover era do `a` e a
   corrida é IRMÃ dele, não filha: ficava osso e quieta com o rato em
   cima do rótulo ao lado. O gatilho passa ao `li`, que é o pai dos
   dois, e a corrida acende com ele. É o mesmo movimento que a faixa fez
   a 12 Set, quando passou do `h3` para a `.caixa-dia`. <<< */
#header .dropmenu ul li:hover > .cu-corrida{
  color:var(--cu-papel);
}

.dropmenu ul li a:hover span{
  color:var(--cu-papel);
  transform:scale(1.02);
  border-bottom:0;
  padding-bottom:0;
}
}

/* o item corrente do menu não é link: osso a 700 */
.dropmenu ul li > span.active{ color:var(--cu-osso); font-weight:700 }

/* >>> O ACTIVO DA PÁGINA CORRENTE NÃO REAGE — 13 Set. O Twig põe
   `.active` em dois casos diferentes: no item que É a página, e no que
   é o nível ACIMA dela — «SECÇÕES» numa página de secção. O primeiro
   não é link nenhum e não deve acender; o segundo é, e deve.

   O JS distingue-os por `href === location.pathname` e marca o primeiro
   com `.cu-aqui`. A folha desliga-lhe as três reacções: o filete, o
   sangue e a escala. É o `:where()` que mantém a especificidade a zero
   e deixa a regra ser desfeita por qualquer outra. <<< */
@media (hover:hover){
.cu-aqui:hover::after{ content:none }

.cu-aqui:hover{
  color:var(--cu-osso);
  transform:none;
}
}

#overlay a:focus-visible{ color:var(--cu-papel) }

@media (hover:hover){
#overlay a:hover{ color:var(--cu-papel) }
}

/* >>> O ITEM CORRENTE DO PAINEL: PAPEL A 700 — 12 Set, decisão do
   Pedro. E não é preferência: **tinta sobre sangue é 2,10**, o par
   proibido da paleta, e era isso que esta regra escrevia. Medido antes
   de mexer, em `/programa` e `/blog` a 375 com o painel aberto:
   `rgb(34,28,23)` a 400 — tinta, como a regra dizia. Papel sobre sangue
   é **7,32**.

   >>> E fica dito que havia dois registos contrários da mesma decisão:
   o comentário que estava aqui dizia «tinta sobre sangue, decisão do
   Pedro». Um dos dois é velho; o que manda é o de hoje, e a razão de
   contraste decide sozinha. <<<

   A família fica a do corpo — é o que separa o item corrente dos
   outros sem lhe tirar a cor. */
#overlay .active{ font-family:var(--cu-texto); font-weight:700; color:var(--cu-papel) }

/* o painel aberto */
body.cu-menu{ overflow:hidden }
body.cu-menu #overlay{ opacity:1; visibility:visible }
body.cu-menu .button_container span.top{ transform:translateY(9px) rotate(45deg) }
body.cu-menu .button_container span.middle{ opacity:0 }
body.cu-menu .button_container span.bottom{ transform:translateY(-9px) rotate(-45deg) }

}

/* ---------------------------------------------------------------- */
@layer movimento{

#header .navbar-brand{ transform-origin:left center; transition:color var(--cu-tempo-menu) ease, transform var(--cu-tempo) ease }

.dropmenu ul li a,
/* `li > .cu-corrida` e nao `li span`: medido, o rotulo NAO e' um span --
   a forma descendente so' alcancava a corrida e o `.cu-uns` de dentro
   dela, que nao tem transform proprio. E' a familia que mordeu tres
   vezes; o guarda passa a acusa'-la (regra 15). */
.dropmenu ul li > .cu-corrida{ transition:color var(--cu-tempo-menu) ease, transform var(--cu-tempo) ease }

.mobile-menu .button_container span{
  /* o hambúrguer a virar cruz leva o mesmo token dos acordeões: são
     três barras a rodar, e é a mesma classe de movimento. */
  transition:transform var(--cu-tempo-acordeao) ease-in-out,
             opacity var(--cu-tempo-acordeao) ease-in-out,
             background var(--cu-tempo-acordeao) ease-in-out;
}

#overlay{ transition:opacity var(--cu-tempo-painel) ease, visibility var(--cu-tempo-painel) ease }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }

  #header .navbar-brand,
  .dropmenu ul li a,
  .dropmenu ul li > .cu-corrida{ transition:color var(--cu-tempo-menu) ease }

  .dropmenu ul li a:focus-visible span{ transform:none }

@media (hover:hover){
#header .navbar-brand:hover,
.dropmenu ul li a:hover span{ transform:none }
}

  #overlay,
  .mobile-menu .button_container span{ transition:none }
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* a corrida do rodapé: o mesmo filete, em campo de sangue */

/* >>> A CORRIDA DO BLOCO DO RODAPÉ VAI NA SEGUNDA POSIÇÃO, e esta
   linha é uma reparação: a v1 tinha `order:2` nesta regra e a v2
   perdeu-o ao fundi-la com a corrida do `.topo`, que não tem ordem
   nenhuma por ser filha única. Sem ele, a corrida caía na ordem do
   DOM — primeiro que tudo — e empurrava o rótulo para a direita:
   medido, «Arquivo» a x=1104 em vez de x=57. É o único sítio da folha
   onde a fusão apagou uma declaração. <<< */

/* o sinal do acordeão, lido do `aria-expanded` do gatilho */
#footer #rodape .caixa-info > div:not(.topo)::after{
  order:4;
  content:"+";
  flex:0 0 auto;
  transform:translateY(var(--cu-sinal-base));
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  line-height:var(--l-peq);
  color:var(--cu-osso);
  user-select:none;
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o rodapé ---------- */

#footer{
  background:var(--cu-sangue);
  color:var(--cu-osso);
  font-family:var(--cu-texto);
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  border-top:0;
}

#footer #mod_rodape{ width:100%; margin:0; padding:0 }

#footer #rodape{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  row-gap:var(--cu-base);
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  text-align:left;
}

/* o legado punha larguras e ordens em tudo o que está aqui dentro */
#footer #rodape > *,
#footer #rodape .caixa-info > *{
  width:auto;
  max-width:none;
  min-width:0;
  order:0;
  float:none;
  margin:0;
  padding:0;
}

#footer #rodape .caixa-logo{ order:1 }
/* >>> O 34 SAI — 12 Set, correcção de leitura do Pedro: a nota de 11
   Set era sobre ORDEM e não sobre espaço, e eu li-a como regressão e
   fui medi-la três vezes. As três listas encostam à linha da seta com
   a mesma folga que têm entre si, que é ZERO de caixa a caixa — o que
   as separa é a entrelinha, e é igual em todas. <<< */
#footer #rodape .caixa-info > .topo{ order:-1; margin-bottom:0 }

#footer #rodape .caixa-info{
  display:flex;
  flex-direction:column;
  flex-wrap:nowrap;
  row-gap:0;
  text-align:left;
}

/* cada bloco é UMA linha: rótulo, corrida, itens, sinal */
#footer #rodape .caixa-info > div:not(.topo){
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:var(--cu-goteira-filete);
  row-gap:0;
  overflow:hidden;
}

#footer #rodape .caixa-info > div:not(.topo) ul{ display:contents }
#footer #rodape .caixa-info > div:not(.topo) ul::after{ content:none }

/* >>> OS ITENS ABERTOS RESPIRAM — 12 Set, à noite. Estavam colados uns
   aos outros e à corrida, separados só pelos 5px de filete da linha.
   Passam a ter 21 entre si, e o primeiro leva a JUNTA contra a corrida
   — o mesmo 1ch que separa uma corrida do que vem a seguir em todo o
   resto da folha.
   Os valores são em `calc` porque a linha já tem `column-gap:5`: o que
   se declara é o que FALTA para chegar aos 21 e à junta. Sem isso, o
   que se mede é 26. <<< */
#footer #rodape .caixa-info > div:not(.topo) li{
  order:3;
  display:flex;
  align-items:baseline;
  flex:0 0 auto;
  margin-left:calc(var(--cu-goteira-cab) - var(--cu-goteira-filete));
  column-gap:var(--cu-goteira-filete);
  width:auto;
  max-width:none;
  min-width:0;
}

/* >>> O PRIMEIRO ITEM encosta-se à corrida com a JUNTA, e não com os
   21. E o que ele declara é **menos cinco**, não mais dez: a corrida já
   traz a sua própria junta à direita — é a regra dela, em toda a folha
   — e o que sobrava a mais era o filete de 5 da linha. Medido com
   `+junta`: 20px, que são duas juntas. Assim são 10,12, que é uma. <<< */
#footer #rodape .caixa-info > div:not(.topo) li:first-of-type{
  margin-left:calc(0px - var(--cu-goteira-filete));
}

/* >>> E O ULTIMO ITEM ENCOSTA AO SINAL COM A MESMA JUNTA — 13 Set.
   Fechado, quem encosta ao sinal e' a corrida, que traz a junta de
   9,59: medido, 15px de distancia (a junta mais o filete de 5 da
   linha). Aberto, quem encosta e' o ultimo item, que nao traz margem
   nenhuma: 5px. Dez a menos, e o sinal parecia mais colado com o
   acordeao aberto do que fechado. A junta no ultimo item iguala os
   dois. <<< */
#footer #rodape .caixa-info > div:not(.topo) li:last-of-type{
  margin-right:var(--cu-junta);
}

/* >>> O `h5` CRESCE, e é a consequência de ter deixado de ser rótulo.
   Enquanto era só o texto, `flex:0 0 auto` era o certo — media o que
   media. Agora é a LINHA: se não crescer, a corrida lá dentro não tem
   onde correr. Medido antes: `corrida flex:1/1/auto w0`, com o `+`
   colado ao rótulo e a corrida invisível a 1265. <<< */
/* >>> A BASE VOLTA A `auto` — 15 Set, decisão do Pedro. Pus-lhe `100%`
   há uma hora para os itens quebrarem para a fila de baixo; a decisão é
   o contrário: acima de 1000 eles ENTRAM na fila, entre o rótulo e a
   corrida. A ordem faz-se por `order` no bloco de `>= 1000px`, e para
   isso o `h5` tem de deixar de ser caixa. <<< */
#footer #rodape .caixa-info > div:not(.topo) h5{ flex:1 1 auto; min-width:0 }
#footer #rodape .caixa-info > div:not(.topo) i,
#footer #rodape .caixa-info > div:not(.topo) a{ flex:0 0 auto }

/* >>> E O `order` SAI DAQUI TAMBÉM — 15 Set. O `h5` é agora a linha e
   leva a corrida e o sinal lá dentro, portanto o `div` tem dois filhos
   e mais nada: o rótulo e o miolo. Ordená-los era ordenar uma lista de
   dois pela ordem em que já estão. Com estas três saem as últimas
   declarações de alinhamento que eram só do rodapé — a partir daqui
   ele usa a receita das barras e nada mais. <<< */
#footer #rodape .caixa-info > div:not(.topo) h5{ margin:0; cursor:pointer }

/* tipo — os rótulos em Condensed caps, o resto no degrau pequeno */
/* >>> DOIS DEGRAUS ACIMA — 12 Set, segunda passagem. Os rótulos das
   três listas do rodapé passam a **34/55**, que é o tamanho dos
   rótulos do menu: as duas navegações do site ficam a dizer-se com o
   mesmo corpo. Estiveram a 18/34 e a 21/34 pelo caminho.
   A entrelinha sobe com o corpo desta vez — a 55, que é o par dele na
   escala — e a barra passa ao que der. <<< */
#footer #rodape h5,
#footer #rodape h4{
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cu-osso);
  margin:0;
  padding:0;
}

#footer #rodape div,
#footer #rodape ul,
#footer #rodape li,
#footer #rodape a,
#footer #rodape i{
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  color:var(--cu-osso);
}

#footer #rodape ul,
#footer #rodape li{ list-style:none; margin:0; padding:0; text-align:left }

#footer #rodape a{ text-decoration:none }

/* os nove apoios, em SVG inline para seguirem o currentColor */
#footer #rodape .caixa-logo ul{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  column-gap:var(--cu-goteira);
  row-gap:var(--cu-base);
}

#footer #rodape .caixa-logo li{ flex:0 0 auto; width:auto; max-width:none }

#footer #rodape .caixa-logo img,
#footer #rodape .caixa-logo svg{
  display:block;
  width:auto;
  height:26px;
  min-height:0;
  max-width:100%;
  margin:0;
}

#footer #rodape .caixa-logo a{ display:block; line-height:0 }

/* a linha da seta de subir */
/* >>> A LINHA DA SETA SOBE A 55 — 12 Set. Era o único item do rodapé
   fora do ritmo: 44px de altura de linha num bloco onde todo o resto
   corre a 55 ou a 34. A mancha da `↑` mede 24 e numa linha de 44
   sobrava-lhe ar a mais de um lado. <<< */
#footer #rodape .topo{
  display:flex;
  align-items:baseline;
  column-gap:var(--cu-goteira-filete);
  line-height:var(--l-med);
  overflow:hidden;
}

#footer #rodape .topo a{
  display:flex;
  align-items:baseline;
  flex:1 1 0;
  min-width:0;
  column-gap:var(--cu-goteira-filete);
  font-size:var(--t-peq);
  line-height:var(--l-peq);
}

#footer #rodape .topo i{ flex:0 0 auto }

/* telemóvel: os itens caem para baixo do rótulo e cada linha remata
   com a sua corrida; o arquivo fica a três por linha */
/* >>> O CORTE DO RODAPÉ É O DO CABEÇALHO — 18 Set. Era 760, o corte
   das barras, e entre 760 e 999 o rodapé aberto voltava à forma de
   escritório: o `ul` a `display:contents` e os itens a serem itens de
   flex do `div`, portanto na MESMA linha do título e à direita dele.
   Medido a 800, os três primeiros itens do Arquivo em `x 279,344,408`
   com o `h5` em `x0`. Neste degrau ainda é toque, e a forma é a do
   telemóvel: itens à esquerda, por baixo do título, o `ul` a atravessar
   a linha inteira. <<< */
@media (width < 1000px){
  #footer #rodape .caixa-info > div:not(.topo){ overflow:visible }

  #footer #rodape .caixa-info > div:not(.topo) ul{
    order:5;
    display:block;
    flex:0 0 100%;
    min-width:0;
    max-width:100%;
    margin-top:var(--cu-goteira-cab);
  }

  #footer #rodape .caixa-info > div:not(.topo) li{
    column-gap:var(--cu-goteira);
    overflow:hidden;
    width:auto;
    max-width:none;
  }

  #footer #rodape .caixa-info > div:not(.topo) li::before{ content:none }

  #footer #rodape .caixa-info > div:not(.topo) li::after{
    content:var(--cu-uns);
    flex:1 1 0;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
    font-family:var(--cu-dados);
    font-weight:400;
    font-size:var(--t-peq);
    line-height:var(--l-peq);
    letter-spacing:normal;
    color:var(--cu-osso);
    user-select:none;
    margin-inline:var(--cu-junta);
  }

  #footer #rodape .caixa-info > div.arquivo ul{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    column-gap:0;
  }

  #footer #rodape .caixa-info > div.arquivo li{ min-width:0 }
  #footer #rodape .caixa-info > div.arquivo li::after{ flex:0 0 var(--cu-separa) }
  #footer #rodape .caixa-info > div.arquivo li:nth-child(3n)::after{ flex:1 1 0 }
}

}

/* ---------------------------------------------------------------- */
@layer estados{

#footer #rodape a:focus-visible{ color:var(--cu-papel) }

@media (hover:hover){
#footer #rodape a:hover{ color:var(--cu-papel) }
}

#footer #rodape .caixa-info > div:not(.topo):has(h5[aria-expanded="true"])::after{ content:"\2212" }

#footer #rodape .caixa-info > div:not(.topo):not(.aberto) ul{ display:none }

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* ---------- tipografia partilhada ---------- */

/* >>> O DEGRAU DAS BARRAS MORA AQUI — 12 Set. 34/55 em TODAS: índice
   de secções, convidados, blog, programa, filmes, Sobre, rodapé e
   menu. As páginas deixaram de o dizer: saíram cinco repetições da
   mesma dupla `font-size`/`line-height` — do `.seccao-titulo` (que
   esteve a 55/55 uma leva), do `.nome-convidado h3`, do `h2.filme`, do
   `.dia-n` e do `.dia-s`. O que fica nas páginas é só colocação e
   excepção de largura estreita. <<< */

/* serifa 34/55 — os títulos de listagem e o 404 */
#body-wrapper .seccao-titulo,
#embrulho .todos-convidados h3,
#body-wrapper .caixa-post h3,
#body-wrapper .link-post,
#body-wrapper .subfilme,
#body-wrapper #error h1,
#body-wrapper .caixa-sobre h3{
  font-family:var(--cu-display);
  font-weight:700;
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  word-break:normal;
  color:var(--cu-tinta);
  margin:0;
}

/* o 404 é a única linha da página: sobe um degrau */
#body-wrapper #error h1{ font-size:var(--l-med) }

/* o segundo nome dentro de um cartão desce um degrau */
#body-wrapper .subfilme{ font-size:var(--t-corpo); line-height:var(--l-corpo) }

/* condensadas em caixa alta — rótulos e subtítulos */
#body-wrapper .seccao-subtitulo,
#body-wrapper .subtitulo,
#body-wrapper .subtitulo-link,
#body-wrapper .caixa-sobre h6,
#body-wrapper .paginacao-post,
#body-wrapper .botao-blog,
#body-wrapper .separa,
#body-wrapper .nome-dia h3{
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cu-tinta);
  margin:0;
}

/* o nome do dia é título de barra: 34/55 */
#body-wrapper .nome-dia h3{ font-size:var(--t-med); line-height:var(--l-med) }

/* a paginação é navegação, não título: degrau pequeno */
#body-wrapper .paginacao-post,
#body-wrapper .botao-blog,
#body-wrapper .separa{
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.16em;
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* ---------- as listagens e a barra ---------- */

/* o contentor: grelha de seis, meia linha entre barras, e um contexto
   de container query para os componentes lá dentro responderem à
   largura do PAI e não à da janela */
/* >>> O CONTENTOR é `#body-wrapper`; os CARTÕES são `#embrulho`, e a
   diferença não é de especificidade: **a home não tem `#embrulho`**.
   É esse o discriminante que a v1 usa para o módulo de convidados da
   home — 29 cartões dentro de um `.todos-convidados` — não apanhar a
   receita da barra. A grelha de seis apanha-o; a barra não. <<< */
#body-wrapper .todas-seccoes,
#body-wrapper .todos-convidados,
#body-wrapper .todos-dias,
#body-wrapper .todos-posts{
  display:grid;
  grid-template-columns:repeat(var(--cu-colunas), 1fr);
  column-gap:var(--cu-goteira);
  row-gap:var(--cu-meia);
  margin:0;
  padding:0;
  container-type:inline-size;
}

/* cada cartão ocupa a linha toda: uma barra por linha */
#body-wrapper .todas-seccoes > .caixa-seccao,
#embrulho .todos-convidados > .caixa-convidado,
#body-wrapper .todos-dias > .caixa-dia,
#body-wrapper .todos-dias > .quando,
#body-wrapper .todos-dias > .caixa-icals,
#body-wrapper .todos-posts > .caixa-post,
#embrulho .todas-sessoes > .caixa-sessao{
  width:auto;
  max-width:none;
  margin:0;
  padding:0;
  grid-column:span 6;
  align-self:start;
}

/* A RECEITA DA BARRA — cinco colunas, alinhadas pela última base:
     miniatura · título · corrida · dado · sinal
   As listas só dizem o que difere. */
/* >>> E PASSA A SER UMA CLASSE — 13 Set. Era uma lista de quatro
   selectores e servia quatro das seis listas; o programa ficava em flex
   e o Sobre numa grelha de três. Com `.cu-barra` são as SEIS, e a
   contagem de pistas é a mesma em todas — que é o que faz o sinal cair
   sempre à mesma distância do bordo.

   A classe é posta pelo JS, como as corridas: o Twig não se toca. E os
   quatro selectores ficam ao lado dela, porque sem JS a folha ainda tem
   de saber desenhar as quatro que já desenhava. <<< */
.cu-barra,
#body-wrapper .todas-seccoes .caixa-seccao .seccao,
#body-wrapper .todos-posts .caixa-post .post,
#embrulho .todos-convidados .caixa-convidado,
#embrulho .todas-sessoes .caixa-sessao{
  position:relative;
  display:grid;
  grid-template-columns:
    var(--cu-miniatura, 0px)
    auto
    minmax(var(--cu-corrida-min), 1fr)
    auto
    var(--cu-sinal-col);
  align-items:last baseline;
  column-gap:var(--cu-goteira-cab);
  row-gap:0;
  min-height:var(--l-med);
}

/* >>> O RISCO VAI ATÉ AOS 1000 — 18 Set. Era o corte das barras;
   passa a ser o do cabeçalho, como o `.quando` e o rodapé. Só nas
   caixas complexas — filme e blog — que é onde ele separa a barra do
   que vem por baixo. A receita mudou de `@media`, não de regra. <<< */
@media (width >= 1000px){ .cu-risco{ display:none } }

/* as que não abrem têm altura mínima; as que abrem têm linhas */
#body-wrapper .todas-seccoes .caixa-seccao .seccao,
#body-wrapper .todos-posts .caixa-post .post{ min-height:var(--l-med) }/* A MINIATURA — um `::before` vazio com o retrato por fundo, a cinzento.
   A base sintética de uma caixa sem linha é o bordo de baixo, portanto
   assenta na linha do texto em vez de flutuar. */
#body-wrapper .todas-seccoes .caixa-seccao .seccao::before,
#body-wrapper .todos-posts .caixa-post .post::before,
#embrulho .todos-convidados .caixa-convidado::before,
#embrulho .todas-sessoes .caixa-sessao::before{
  content:"";
  width:var(--cu-miniatura);
  height:var(--cu-miniatura);
  background-image:var(--cu-retrato);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(1);
}

@media (width >= 760px){
  /* A MINIATURA — um `::before` vazio com o retrato por fundo, a cinzento.
     A base sintética de uma caixa sem linha é o bordo de baixo, portanto
     assenta na linha do texto em vez de flutuar. */
  #body-wrapper .todas-seccoes .caixa-seccao .seccao::before,
  #body-wrapper .todos-posts .caixa-post .post::before,
  #embrulho .todos-convidados .caixa-convidado::before,
  #embrulho .todas-sessoes .caixa-sessao::before{
    grid-column-start:1;
    grid-row-start:1;
  }
}/* A CORRIDA da barra — tinta sobre papel, ao contrário da do filete */

/* O SINAL — seta nas barras-link, mais/menos nas que abrem */
#body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
#body-wrapper .todos-posts .caixa-post .post::after,
#embrulho .todos-convidados .caixa-convidado::after,
#embrulho .todas-sessoes .caixa-sessao::after{
  transform:translateY(var(--cu-sinal-base));
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  line-height:var(--l-med);
  color:var(--cu-sangue);
  user-select:none;
  /* o glifo transborda a caixa de 34 e tem de se ver inteiro */
  overflow:visible;
}

@media (width >= 760px){
  /* A CORRIDA da barra — tinta sobre papel, ao contrário da do filete */
  
  /* O SINAL — seta nas barras-link, mais/menos nas que abrem */
  #body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
  #body-wrapper .todos-posts .caixa-post .post::after,
  #embrulho .todos-convidados .caixa-convidado::after,
  #embrulho .todas-sessoes .caixa-sessao::after{
    grid-column-start:5;
    grid-row-start:1;
  }
}

#body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
#body-wrapper .todos-posts .caixa-post .post::after{
  
  font-size:var(--cu-sinal-seta);
  clip-path:inset(0 0 0 var(--cu-sinal-cauda));
  margin-inline-start:calc(-1 * var(--cu-sinal-cauda));
  /* a tinta da `→` fica 8px acima da base alfabética contra 4 do `+`:
     o descaído dela é outro, e é este. Medido a 68,85. */
  --cu-sinal-base:7px;
}

#embrulho .todos-convidados .caixa-convidado::after,
#embrulho .todas-sessoes .caixa-sessao::after{ }

/* O CORTE — a segunda metade do título em Condensed caps.
   `line-height:1` para a segunda família não inchar a linha. */
/* >>> UM DEGRAU ABAIXO DO CORTE, PARA AS SEIS BARRAS — 12 Set.
   Decisão do Pedro. Estava declarado por PÁGINA e por isso fazia três
   listas descer e três não: o índice, o blog e os convidados iam a
   21/34; o programa, a secção e o Sobre ficavam a 34/55.

   Sobe para o componente, numa regra só, dentro do corte da grelha. As
   páginas deixam de o dizer — os três `font-size`/`line-height` que lá
   estavam saíram. É a mesma arrumação dos títulos de barra de 12 Set:
   o degrau é do componente, não do sítio. <<< */
@media (width < 760px){
  /* [saiu na reescrita de 16 Set: titulos 21/34 duplicados] */
}

#body-wrapper .mono{
  font-family:var(--cu-caps);
  font-weight:700;
  font-style:normal;
  font-size:inherit;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:inherit;
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* ---------- o acordeão ---------- */

/* Quatro listas abrem — dias, convidados, sessões, Sobre — e todas pela
   mesma mecânica: `grid-template-rows` de `0fr` a `1fr`, que é a única
   altura que o browser interpola sem `interpolate-size` (medido: falso
   no Firefox 153).

   Três cuidados, e nenhum é dispensável:
     `min-height:0` — sem ele o `0fr` não fecha nada, que o mínimo
        automático de uma linha de grelha é a altura do conteúdo;
     `min-width:0`  — o mesmo na outra direcção: sem ele o texto
        empurra a coluna em vez de encolher;
     `overflow:hidden` — é ele que corta, e só o que ele corta anima.
   A quarta, no Sobre e nas sessões: `align-self:stretch`, que um item
   de grelha esticado não impõe altura própria à linha.

   Onde o corte mora muda de lista para lista, e é isso que separa as
   duas formas:
     o CARTÃO anima e o miolo corta   — dias, Sobre
     o MIOLO anima e o dentro corta   — convidados, sessões
   A diferença não é de gosto: nos dias e no Sobre a primeira linha é
   fixa (a barra), e a grelha do cartão já existia para a segurar. */

/* o que corta, nas duas formas */
#body-wrapper .todos-dias .caixa-dia .cu-miolo,
#body-wrapper .caixa-sobre > div > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado .cu-dentro,
#embrulho .todas-sessoes .caixa-sessao .cu-dentro{
  overflow:hidden;
  min-height:0;
  min-width:0;
}

/* o que anima, na segunda forma */
/* o miolo atravessa o cartão de lado a lado */
#body-wrapper .caixa-sobre > div > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao .cu-miolo{}

@media (width >= 760px){
  /* o miolo atravessa o cartão de lado a lado */
  #body-wrapper .caixa-sobre > div > .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao .cu-miolo{
    grid-column-start:1;
    grid-column-end:-1;
  }
}

/* a quarta razão */
#body-wrapper .caixa-sobre > div > .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao .cu-miolo{ align-self:stretch }

/* onde cai, em cada cartão */
@media (width >= 760px){
  /* a linha 2 é da receita de cinco: uma colocação explícita de LINHA
     manda mais que a `order`, e abaixo do corte prendia o miolo à linha
     2 com a corrida a cair para uma linha a seguir — medido, corrida a
     y1403 com o miolo a y123. */
  #body-wrapper .caixa-sobre > div > .cu-miolo{ grid-row-start:2 }
}#embrulho .todas-sessoes .caixa-sessao .cu-miolo{}

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-sessao .cu-miolo{
    grid-row-start:3;
  }
}
@media (width >= 760px){
  /* o `order:7` é geometria de cima do corte, como as colocações: abaixo
     o miolo vai a 95, depois da linha de fecho. Ficou aqui e não na
     receita porque, com a mesma especificidade, ganhava por vir depois
     na folha — e a correcção certa é fechá-lo, não duplicá-lo. */
  #embrulho .todos-convidados .caixa-convidado .cu-miolo{ order:7 }
}

/* >>> E O CARTAO DE CONVIDADO TAMBEM RECUA 68 NO SALTO — 12 Set, à
   noite. O `scroll-margin-top` existia só no cartão de filme, porque
   só ele recebia `#slug`. Com o `abrirPeloHash()` a servir as duas
   listas, o salto para um convidado parava com o nome debaixo da barra
   do cabeçalho. <<< */
#embrulho .todos-convidados .caixa-convidado{ scroll-margin-top:var(--cu-cabeca) }

/* >>> E OS DIAS E OS BLOCOS DO SOBRE TAMBÉM — 13 Set. Passam a abrir por
   `#slug`, portanto passam a receber o salto, portanto precisam do
   mesmo recuo de 68: sem ele o salto pára com a barra do dia debaixo do
   cabeçalho. É a terceira vez que esta linha anda atrás do
   `abrirPeloHash()`, e agora está nas quatro listas que ele serve. <<< */
#body-wrapper .todos-dias .caixa-dia,
#body-wrapper .caixa-sobre > div{ scroll-margin-top:var(--cu-cabeca) }
#embrulho .todas-sessoes .caixa-sessao .cu-miolo{ min-width:0 }

/* OS 34 DO MIOLO VÃO EM PSEUDO-ELEMENTOS, não em padding — terceira
   razão, e a que custou a descobrir: o padding do próprio elemento
   soma-se SEMPRE ao `0fr` e a barra fechada fica com 68px de ar por
   baixo. Em `::before`/`::after` o padding está DENTRO do que o
   `overflow` corta, e fecha a zero com o resto. */
#body-wrapper .todos-dias .caixa-dia .cu-miolo::before,
#body-wrapper .todos-dias .caixa-dia .cu-miolo::after,
#body-wrapper .caixa-sobre > div > .cu-miolo::before,
#body-wrapper .caixa-sobre > div > .cu-miolo::after{
  content:"";
  display:block;
  height:var(--cu-base);
}

/* ---------- a barra de três colunas ---------- */

/* O Sobre não tem miniatura: título · corrida · sinal. A primeira
   linha é a barra, a segunda é o acordeão. A margem entre os três
   blocos é margem e não `row-gap` porque o contentor tem também o
   logótipo e o texto corrido, e um `row-gap` mexia-lhes no ar. */
/* >>> O SOBRE ENTRA NA RECEITA — 13 Set. Tinha grelha de TRÊS, sem
   miniatura e sem dado, e por isso o sinal dele caía na coluna 3 em vez
   da 5. Sai a grelha própria; ficam as linhas, que são dele — a segunda
   é o acordeão — e o tipo.

   >>> A GOTEIRA DA PISTA VAZIA, e é a saída limpa das três que o prompt
   dá: com `--cu-miniatura:0` a pista fecha mas o `column-gap` seguinte
   fica, e o título começava a 21 do bordo em vez de 0. O título
   ATRAVESSA as pistas 1 e 2 — a contagem não muda, que é o que a regra
   única precisa, e a célula dele começa no bordo. Nenhuma margem
   negativa. Medido: `x` do título = 0. <<< */
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros{
  --cu-miniatura:0px;
  grid-template-rows:var(--l-med) 0fr;
  width:auto;
  max-width:none;
  padding:0;
  margin:0 0 var(--cu-meia);
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
}#body-wrapper .caixa-sobre > div > h3{}

@media (width >= 760px){
}

#body-wrapper .caixa-sobre > .parceiros{ margin-bottom:0 }/* aqui a corrida e o sinal cabem nos dois pseudos do próprio bloco:
   não é preciso o `display:contents` que as outras listas pediram */

#body-wrapper .caixa-sobre > .bilheteira::after,
#body-wrapper .caixa-sobre > .ficha::after,
#body-wrapper .caixa-sobre > .parceiros::after{
  
  transform:translateY(var(--cu-sinal-base));
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  line-height:var(--l-med);
  color:var(--cu-sangue);
  user-select:none;
}

@media (width >= 760px){
  /* aqui a corrida e o sinal cabem nos dois pseudos do próprio bloco:
     não é preciso o `display:contents` que as outras listas pediram */
  
  #body-wrapper .caixa-sobre > .bilheteira::after,
  #body-wrapper .caixa-sobre > .ficha::after,
  #body-wrapper .caixa-sobre > .parceiros::after{
    grid-column-start:5;
    grid-row-start:1;
  }
}#body-wrapper .caixa-sobre > div > h3{
  min-width:0;
  padding:0;
  margin:0;
  cursor:pointer;
}

@media (width >= 760px){
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* o acordeão aberto */
#body-wrapper .todos-dias .caixa-dia.aberto .cu-miolo,
#body-wrapper .caixa-sobre > div.aberto > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado.aberto .cu-miolo,

#body-wrapper .caixa-sobre > .bilheteira.aberto,
#body-wrapper .caixa-sobre > .ficha.aberto,
#body-wrapper .caixa-sobre > .parceiros.aberto{ grid-template-rows:var(--l-med) 1fr }

@media (width < 760px){
  /* o mesmo nos três blocos do Sobre, pela mesma razão */
  #body-wrapper .caixa-sobre > .bilheteira.aberto,
  #body-wrapper .caixa-sobre > .ficha.aberto,
  #body-wrapper .caixa-sobre > .parceiros.aberto{ grid-template-rows:auto 1fr }
}

/* o sinal troca de cara quando abre. O `:has` lê o `aria-expanded` do
   próprio gatilho: o sinal diz a verdade do botão, e não uma classe
   posta ao lado que pudesse dessincronizar. */
#body-wrapper .caixa-sobre > div:has(h3[aria-expanded="true"])::after{ }

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* ---------- os dados ---------- */

/* A QUARTA FAMÍLIA do sistema serve DADOS e não texto: horas, salas,
   datas, durações. Mono, sangue sobre papel (7,32), `.04em` — o mono
   é estreito na caixa alta e o espaçamento devolve-lhe o ar.

   Não há campo de osso em nenhum deles. Houve, no `.data-local` do
   cartão, e saiu a 12 Set: a data subiu para debaixo da fotografia e
   o que a separa passou a ser a imagem. */
#embrulho .caixa-sessao .data-local,
#embrulho .caixa-sessao .data-local .data,
#embrulho .caixa-sessao .data-local .local,
#body-wrapper .todos-dias .hora-local,
#body-wrapper .todos-dias .cal-ficha .dur,
#body-wrapper .caixa-cal-sessao .dur,
#body-wrapper .todos-posts .caixa-post .post-data,
#body-wrapper .todos-posts .caixa-post .post-data time,
#body-wrapper .todos-posts .caixa-post .post-data h6,
#body-wrapper .post-titulo .post-data,
#body-wrapper .post-titulo .post-data h6{
  font-family:var(--cu-dados);
  font-weight:700;
  font-style:normal;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.04em;
  color:var(--cu-sangue);
  margin:0;
}

/* a duração é o dado mais fraco da linha: fica no peso normal */
#body-wrapper .todos-dias .cal-ficha .dur,
#body-wrapper .caixa-cal-sessao .dur{ font-weight:400 }

/* caixa alta só na data do cartão de filme */
#embrulho .caixa-sessao .data-local,
#embrulho .caixa-sessao .data-local .data,
#embrulho .caixa-sessao .data-local .local{ text-transform:uppercase }

/* o campo de osso que aqui houve, desarmado onde o legado o punha */
#embrulho .caixa-sessao .data-local{ background:transparent; padding:0 }/* a data do post é `10-10-2026` e não se reformata: números e traços
   não precisam de espaçamento, e na barra assenta na linha de 55 */
#body-wrapper .todos-posts .caixa-post .post-data,
#body-wrapper .todos-posts .caixa-post .post-data time,
#body-wrapper .todos-posts .caixa-post .post-data h6{
  display:inline;
  line-height:var(--l-med);
  text-transform:none;
  white-space:nowrap;
}

@media (width >= 760px){
  /* a data do post é `10-10-2026` e não se reformata: números e traços
     não precisam de espaçamento, e na barra assenta na linha de 55 */
  #body-wrapper .todos-posts .caixa-post .post-data,
  #body-wrapper .todos-posts .caixa-post .post-data time,
  #body-wrapper .todos-posts .caixa-post .post-data h6{
    grid-column-start:4;
    grid-row-start:1;
  }
}

#body-wrapper .post-titulo .post-data,
#body-wrapper .post-titulo .post-data h6{ letter-spacing:normal; text-transform:none }

/* ---------- o hover ---------- */

/* Sangue e `scale(1.02)`, origem à esquerda. Estava escrito SEIS
   vezes — dias, convidados, secções, blog, sobre, filmes.

   >>> O `scale` num `<a>` de texto corrido NÃO FAZ NADA, e fica
   escrito para não se andar à procura: `transform` não se aplica a
   caixas inline não substituídas. Nos links dentro do texto vê-se só
   a cor; nos títulos de barra, que são blocos ou itens de grelha,
   vê-se a escala. <<<

   As excepções têm campo próprio e par próprio, e estão no cabeçalho,
   no painel e no rodapé: lá é osso → papel, que é o par do sangue. */

/* o corte herda a cor do título: sem isto o `.mono` ficava a tinta
   dentro de um título a sangue */
@media (hover:hover){
#body-wrapper .todos-convidados .caixa-convidado:hover .nome-convidado h3 .mono,
#body-wrapper .todas-seccoes .caixa-seccao:hover h2.seccao-titulo .mono,
#body-wrapper .todos-posts .caixa-post:hover .blog-list-titulo h3 .mono,
#body-wrapper .todas-sessoes .caixa-sessao:hover h2 .mono,
#body-wrapper .caixa-sobre > div:hover > h3 .mono,
#body-wrapper a:hover .mono{ color:inherit }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- a página de secção: o filme é uma barra que abre ------ */

/* A lista dos filmes não é a das outras quatro: não tem
   `container-type`, porque o cartão de sessão nunca vive em dois
   contextos de largura — só existe aqui. */
#embrulho .todas-sessoes{
  display:grid;
  grid-template-columns:repeat(var(--cu-colunas), 1fr);
  column-gap:var(--cu-goteira);
  row-gap:var(--cu-meia);
  justify-content:stretch;
}

/* >>> O `display:block` é SÓ do cabeçalho. Na v1 os dois estão na
   mesma regra e o cartão recupera o `grid` numa regra de baixo; aqui
   a camada `paginas` ganha sempre à `componentes`, e o `block` matava
   a grelha da barra. Medido: `display:block` nos 42 cartões, a barra
   inteira empilhada. É o preço das camadas, e paga-se escrevendo o
   que se quer em vez do que se herda. <<< */
#embrulho .todas-sessoes .caixa-cabeca{ display:block }

#embrulho .todas-sessoes .caixa-cabeca,
#embrulho .todas-sessoes .caixa-sessao{
  width:auto;
  height:auto;
  margin-bottom:0;
  padding-bottom:0;
  grid-column:span 6;
}

/* O CARTÃO — cinco colunas como as outras listas e TRÊS linhas:
     [110]  10-10 21H45 GA  SESSÃO ESPECIAL        ← linha 1
            Negócio à ITALIANA   1111  de De Sica  +  ← linha 2
     ─────────── linha 3: o miolo, de ponta a ponta ───────────

   `align-items:last baseline` a um item que atravessa linhas põe-no
   no grupo de base da ÚLTIMA que ocupa: a miniatura, a corrida, o
   realizador e o sinal assentam todos no título, que é a linha 2.

   >>> `.sessao-info` a `display:contents` é o que torna isto possível
   sem mexer no DOM: os filhos passam a ser itens da grelha do cartão
   e o `h4.director` vai para a quarta coluna SEM SAIR do sítio. E
   sobra o `::after` do `.sessao-info` para a corrida — um elemento a
   `display:contents` não gera caixa própria mas gera as dos
   pseudo-elementos. Os dois pseudos do cartão já estavam tomados pela
   miniatura e pelo sinal. <<< */
#embrulho .todas-sessoes .caixa-sessao{
  /* >>> a miniatura do filme é a grande: 110. Só aqui. Não se
     sobrepõe a regra do `::before` — muda-se o TOKEN no cartão e a
     regra partilhada resolve-o no sítio. <<< */
  --cu-miniatura:var(--cu-miniatura-gr);
  /* >>> SEIS COLUNAS, e a sexta já não é a do realizador — 12 Set, à
     noite. De manhã a barra desceu a cinco porque o realizador saiu; à
     noite a DATA desce à linha do título, e a linha 2 passa a ter cinco
     coisas em fila:

       miniatura · título · corrida · data · sala · sinal

     A linha 1 fica só com as etiquetas. É a leitura que o prompt pede —
     «Os DOMINGOS 1111  11-10 15H00  PA  +» — e é uma linha de dados
     que se lê de uma vez em vez de duas. <<< */
  /* >>> DE VOLTA A CINCO — 13 Set. A sexta coluna era da sala, e com
     ela o sinal caía na 6 e a corrida acabava a 250 do bordo, a maior
     distância das seis listas. A sala junta-se à data na coluna 4, que
     é a coluna do DADO, e a barra passa a ter a contagem das outras.
     >>> A decisão de 12 Set era sobre a LINHA — a sala não devia estar
     na linha da data, que era então a linha 1. A data desceu à linha do
     título nessa mesma noite, portanto as duas partilham linha há um
     dia; o que muda agora é partilharem CÉLULA. <<< */
  /* a receita de cinco é de cima do corte, como as colocações */
  grid-template-rows:auto auto auto;
  /* o recuo do salto de `#slug`, que o `abrirPeloHash()` usa com o
     `scrollIntoView()`. 68 = a altura do cabeçalho. */
  scroll-margin-top:var(--cu-cabeca);
  max-height:none;
  overflow:visible;
}

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-sessao{
    grid-template-columns:var(--cu-miniatura) auto minmax(var(--cu-corrida-min), 1fr) auto var(--cu-sinal-col);
  }
}

/* a âncora vazia do `#slug` sai do fluxo: escondida não recebia o
   salto, e item de grelha comia uma coluna */
#embrulho .todas-sessoes .caixa-sessao > a[name]{
  position:absolute;
  top:0;
  left:0;
}@media (width >= 760px){
  /* o still é a miniatura, e atravessa as duas linhas da barra */
  #embrulho .todas-sessoes .caixa-sessao::before{
    grid-row-end:3;
    background-image:var(--cu-still);
  }
}@media (width >= 760px){
  /* >>> A MINIATURA DESCE A PERNA — 12 Set.
     O `align-items:last baseline` assenta a miniatura na LINHA DE BASE
     do título, e as pernas do `g`, do `p` e do `ç` passavam-lhe o
     fundo. A miniatura desce o que a perna desce e os dois fundos
     ficam na mesma linha.
  
     `transform` e não margem: é pintura, a linha não se mexe e a grelha
     não sabe de nada.
  
     O `font-size` no pseudo é o que faz o `em` ser o do TÍTULO e não o
     do corpo — o pseudo herdava 21px do cartão e 0,26em daria 5,5 em vez
     dos 8,8 que a perna de um título de 34 pede. Não muda mais nada: a
     largura e a altura da miniatura são px.
  
     >>> `text-box-edge: cap text` era a propriedade própria para isto e
     NÃO SERVE: medido em Firefox 153 com uma sonda de `@supports`, diz
     NÃO a `text-box-edge`, a `text-box-trim` e a `text-box`. O Chromium
     diz sim aos três. Fica o `transform`, e fica escrito para o dia em
     que a Firefox a tiver. <<< */
  #body-wrapper .todas-seccoes .caixa-seccao .seccao::before,
  #body-wrapper .todos-posts .caixa-post .post::before,
  #embrulho .todos-convidados .caixa-convidado::before,
  #embrulho .todas-sessoes .caixa-sessao::before{
    font-size:var(--t-med);
    transform:translateY(var(--cu-perna));
  }
}

#embrulho .todas-sessoes .caixa-sessao .sessao-info{ display:contents }/* >>> A DATA DESCE À LINHA DO TÍTULO — 12 Set, à noite. De manhã tinha
   a primeira linha para si; agora entra na fila de dados que fecha a
   linha 2, entre a corrida e a sala. A linha 1 fica só das etiquetas.

   >>> E COM ISSO VOLTA A SER S8, que é a mesma decisão desfeita pela
   razão que a tinha feito. De manhã saiu do mono porque ficava ao lado
   das etiquetas, que são Condensed, e a linha tinha de se ler como uma.
   À noite a vizinhança é outra — a corrida de uns e o sinal, os dois em
   mono — e o mono a sangue é o tipo dos DADOS nesta folha. Não leva
   regra nenhuma: basta tirar a de manhã e a regra partilhada da
   `.data-local` resolve-a no sítio, a 18/34 sangue. <<< */
#embrulho .todas-sessoes .caixa-sessao .data-local{
  align-self:last baseline;
  min-width:0;
}

@media (width >= 760px){
  /* >>> A DATA DESCE À LINHA DO TÍTULO — 12 Set, à noite. De manhã tinha
     a primeira linha para si; agora entra na fila de dados que fecha a
     linha 2, entre a corrida e a sala. A linha 1 fica só das etiquetas.
  
     >>> E COM ISSO VOLTA A SER S8, que é a mesma decisão desfeita pela
     razão que a tinha feito. De manhã saiu do mono porque ficava ao lado
     das etiquetas, que são Condensed, e a linha tinha de se ler como uma.
     À noite a vizinhança é outra — a corrida de uns e o sinal, os dois em
     mono — e o mono a sangue é o tipo dos DADOS nesta folha. Não leva
     regra nenhuma: basta tirar a de manhã e a regra partilhada da
     `.data-local` resolve-a no sítio, a 18/34 sangue. <<< */
  #embrulho .todas-sessoes .caixa-sessao .data-local{
    grid-column-start:4;
    grid-row-start:2;
  }
}

/* >>> O `nowrap` E' DA DATA, NAO DA CELULA — 13 Set. Era da celula, e
   com a sala lá dentro desde hoje isso segurava as duas numa linha só:
   medido, «12-10 10H00 AE CAMILO CASTELO BRANCO» a transbordar **62px**
   a 760. A data não pode partir — é um dado e lê-se de uma vez — mas a
   sala pode, e agora parte. <<< */
#embrulho .todas-sessoes .caixa-sessao .data-local .data{ white-space:nowrap }

/* >>> A SALA DESCE AO TAMANHO DAS ETIQUETAS — 18/34, 12 Set. A 34
   «Teatro Narciso Ferreira» ocupava a linha inteira da data e lia-se
   como se fosse o título. A data e a hora ficam a 34: são o que muda
   de sessão para sessão. <<< */
/* A SALA, agora célula da grelha depois da data. Fora do `.data-local`
   não herda nada dele: leva o tipo por inteiro, e é o das etiquetas ao
   peso normal — é um rótulo, não um dado, e é isso que a separa da data
   ao lado sem precisar de tamanho diferente. */
/* a SALA já não é célula: vive dentro da `.data-local`, na coluna do
   dado, à direita da data e separada por uma junta */
#embrulho .todas-sessoes .caixa-sessao .local{
  display:inline;
  margin-inline-start:var(--cu-junta);
  min-width:0;
  font-family:var(--cu-caps);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cu-tinta);
  margin:0;
}/* as etiquetas — até três por cartão, e em células separadas ocupavam
   uma linha cada. O JS junta-as num `.cu-etiquetas`; são sempre
   contíguas no markup, portanto é embrulho e não mudança de ordem. */
/* >>> E O EMBRULHO É IRMÃO DA `.data-local`, não filho dela — a 11 Set
   era filho, porque a data e as etiquetas partilhavam a primeira linha
   e duas caixas de grelha não partilham célula. Com a data a mudar para
   a coluna 4 isso caducou, e ser filha custava duas coisas medidas: o
   `grid-column` daqui de baixo ficava INERTE (neta e não filha da
   grelha — o `.sessao-info` é `display:contents`, portanto os filhos
   DELE é que são itens), e herdava o `white-space:nowrap` da data, com
   que «Cine-Concerto por Samuel Úria» não partia: +258px de transbordo
   a 760 e +137 a 1002. Está em `envolverSessoes()`. <<< */
/* >>> AS ETIQUETAS ATRAVESSAM DUAS COLUNAS — a do título e a da
   corrida — e a razão é uma linha do algoritmo de grelha: **um item que
   atravessa uma pista flexível não contribui para o dimensionamento
   intrínseco das outras pistas que atravessa.** A coluna 3 é `1fr`;
   logo a coluna 2 fica com a largura do TÍTULO e mais nada.

   Medido a 1265, título a título:

     «Gente ao Domingo»   título 290   coluna 2  290,03   etiquetas 812
     «Zombie»             título 113   coluna 2  112,61   etiquetas 695
     «Ku Handza»          título 182   coluna 2  181,80   sem etiquetas

   Sem o atravessamento, «Cine-Concerto por Samuel Úria» mandaria
   sozinho na coluna do título. A coluna 4 fica livre para a data, que
   é a linha 1 da direita. <<< */
#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
}

@media (width >= 760px){
  /* as etiquetas — até três por cartão, e em células separadas ocupavam
     uma linha cada. O JS junta-as num `.cu-etiquetas`; são sempre
     contíguas no markup, portanto é embrulho e não mudança de ordem. */
  /* >>> E O EMBRULHO É IRMÃO DA `.data-local`, não filho dela — a 11 Set
     era filho, porque a data e as etiquetas partilhavam a primeira linha
     e duas caixas de grelha não partilham célula. Com a data a mudar para
     a coluna 4 isso caducou, e ser filha custava duas coisas medidas: o
     `grid-column` daqui de baixo ficava INERTE (neta e não filha da
     grelha — o `.sessao-info` é `display:contents`, portanto os filhos
     DELE é que são itens), e herdava o `white-space:nowrap` da data, com
     que «Cine-Concerto por Samuel Úria» não partia: +258px de transbordo
     a 760 e +137 a 1002. Está em `envolverSessoes()`. <<< */
  /* >>> AS ETIQUETAS ATRAVESSAM DUAS COLUNAS — a do título e a da
     corrida — e a razão é uma linha do algoritmo de grelha: **um item que
     atravessa uma pista flexível não contribui para o dimensionamento
     intrínseco das outras pistas que atravessa.** A coluna 3 é `1fr`;
     logo a coluna 2 fica com a largura do TÍTULO e mais nada.
  
     Medido a 1265, título a título:
  
       «Gente ao Domingo»   título 290   coluna 2  290,03   etiquetas 812
       «Zombie»             título 113   coluna 2  112,61   etiquetas 695
       «Ku Handza»          título 182   coluna 2  181,80   sem etiquetas
  
     Sem o atravessamento, «Cine-Concerto por Samuel Úria» mandaria
     sozinho na coluna do título. A coluna 4 fica livre para a data, que
     é a linha 1 da direita. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-etiquetas{
    grid-column-start:2;
    grid-column-end:4;
    grid-row-start:1;
  }
}

/* a primeira etiqueta não leva a margem que separa as outras */
#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas > :first-child{ margin-left:0 }

#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas > *{
  display:inline;
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cu-tinta);
  margin:0 0 0 var(--cu-goteira-cab);
}/* a corrida desce à segunda linha, que é a do título */
#embrulho .todas-sessoes .caixa-sessao .sessao-info > .cu-corrida{
  line-height:var(--l-corpo);
}

@media (width >= 760px){
  /* a corrida desce à segunda linha, que é a do título */
  #embrulho .todas-sessoes .caixa-sessao .sessao-info > .cu-corrida{
    grid-column-start:3;
    grid-row-start:2;
  }
}#embrulho .todas-sessoes .caixa-sessao h2.filme,
#embrulho .todas-sessoes .caixa-sessao h2.filmesemrealizador{
  min-width:0;
  margin:0;
  cursor:pointer;
}

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-sessao h2.filme,
  #embrulho .todas-sessoes .caixa-sessao h2.filmesemrealizador{
    grid-column-start:2;
    grid-row-start:2;
  }
}

/* >>> A REGRA DO REALIZADOR DA BARRA SAIU — 12 Set, decisão do Pedro,
   e era a questão 30. Descrevia um sítio onde ele já não está: o
   `realizadorParaMiolo()` leva-o para a coluna da imagem, e sem JS esta
   página não tem miolo, nem acordeão, nem corridas, nem etiquetas. Um
   recurso para um estado que a página não suporta era só uma colisão a
   mais — mandava-o para a coluna 5, que desde esta noite é a do sinal.
   O que fica é o realizador do miolo, a 55/55. <<< */

/* o sinal fecha a linha, na mesma coluna das outras cinco listas */
#embrulho .todas-sessoes .caixa-sessao::after{
  line-height:var(--l-corpo);
}

@media (width >= 760px){
  /* >>> ESTA FICOU DE FORA DA PRIMEIRA PASSAGEM, e era o que punha o
     filme a cinco pistas abaixo do corte: um item colocado na coluna 5
     CRIA as colunas implícitas 3, 4 e 5 numa grelha que só declara
     duas. Medido: `159,35 27,6 0 0 27,55` — as duas do meio a zero e a
     quinta com o sinal lá dentro. A grelha estava certa; o que a
     esticava era o item. <<< */
  #embrulho .todas-sessoes .caixa-sessao::after{
    grid-column-start:5;
    grid-row-start:2;
  }
}

/* O MIOLO — os 34 de cima e de baixo em pseudos, como nos dias e no
   Sobre, e as linhas EXPLÍCITAS: a colocação automática é esparsa e o
   cursor não recua. Com o `span.convidado` ausente em 18 dos 42
   cartões, a ficha e a sinopse caíam por baixo do still. */
#embrulho .todas-sessoes .caixa-sessao .cu-dentro{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  column-gap:var(--cu-goteira);
  row-gap:0;
}

#embrulho .todas-sessoes .caixa-sessao .cu-dentro::before,
#embrulho .todas-sessoes .caixa-sessao .cu-dentro::after{
  content:"";
  grid-column-start:1;
  grid-column-end:-1;
  height:var(--cu-base);
}

#embrulho .todas-sessoes .caixa-sessao .cu-dentro::before{ grid-row-start:1 }
#embrulho .todas-sessoes .caixa-sessao .cu-dentro::after{ grid-row-start:3 }

#embrulho .todas-sessoes .caixa-sessao .cu-dentro .sessao-img img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

#embrulho .caixa-sessao .sessao-img{ flex:0 0 auto; overflow:visible }

/* o realizador do MIOLO — não é o da barra: aqui volta o itálico de
   PT Serif a 21/34, que é o que o separa da sinopse sem mudar de cor */
/* >>> O REALIZADOR A 55/55 — dois degraus acima, 12 Set. É a última
   linha da coluna da imagem e fecha-a; o «de» fica, que é ele que faz
   a frase. Itálico de serifa, como sempre foi. <<< */
#embrulho .caixa-sessao .director{
  display:block;
  font-family:var(--cu-display);
  font-weight:400;
  font-style:italic;
  font-size:var(--l-med);
  line-height:var(--l-med);
  letter-spacing:normal;
  text-transform:none;
  color:var(--cu-tinta);
}

#embrulho .caixa-sessao .director::before{ content:none }

/* a ficha técnica tem um tipo só, tinta de ponta a ponta — o que
   separa as rubricas é a família condensada e não a cor */
#embrulho .caixa-sessao .ficha-tecnica,
#embrulho .caixa-sessao .ficha-tecnica .tor,
#embrulho .caixa-sessao .ficha-tecnica .por,
#embrulho .caixa-sessao .ficha-tecnica .gen,
#embrulho .caixa-sessao .ficha-tecnica .ano,
#embrulho .caixa-sessao .ficha-tecnica .dur,
#embrulho .caixa-sessao .ficha-tecnica .class{
  font-family:var(--cu-caps);
  font-weight:400;
  font-style:normal;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  color:var(--cu-tinta);
}

#embrulho .caixa-sessao .convidado{
  display:block;
  font-family:var(--cu-caps);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--cu-tinta);
}

/* quatro margens do legado a zero, todas de `custom_mobi.css:385-392` */
#embrulho .caixa-sessao h2 ~ .director,
#embrulho .caixa-sessao h2 ~ .subfilmesemrealizador,
#embrulho .caixa-sessao h2:has(+ .escolas),
#embrulho .caixa-sessao h2 + .data-local,
#embrulho .caixa-sessao h2 + .escolas{
  margin-top:0;
  margin-bottom:0;
}

/* >>> AQUI ESTAVA `#embrulho .caixa-sessao:nth-of-type(2){ padding-top:
   var(--cu-goteira) }`, que a v1 tem e que na v1 NÃO CORRE: a regra
   grande do cartão vem depois, tem a mesma especificidade e traz
   `padding:0`. Medido no computado: `padding-top:0px` nos 42 cartões
   da v1 e 55px no segundo da v2, que foi como se viu.
   É o terceiro pedaço de código morto que a reescrita encontra — os
   outros dois são os dois `@container` dos cartões de secção e de
   post. Nenhum entra na v2: copiá-los seria ACTIVÁ-LOS. <<< */

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-sessao .cu-dentro{
    grid-template-columns:repeat(6, minmax(0, 1fr));
  }
  /* o still atravessa as três linhas da direita: é ele o mais alto */
  /* >>> A FICHA SAI DA COLUNA — 12 Set. Era a terceira coisa na
     coluna da direita e ficava esmagada entre a presença e a sinopse.
     Passa a uma LINHA por baixo da imagem, de ponta a ponta: tem
     muitas rubricas curtas e é onde a largura lhe serve.
     À direita da imagem ficam duas coisas só: presença → 34 →
     sinopse. <<< */
  /* >>> DOIS BLOCOS E NÃO DUAS COLUNAS DE UMA GRELHA: numa grelha as
     duas partilham as linhas, e bastava a sinopse ser mais alta do que
     a fotografia para a ficha técnica descolar dela — medido, 253 e
     344px de fenda. Com um bloco de cada lado, cada um corre sozinho:
     a ficha fica colada à imagem onde quer que a sinopse acabe.
     Os dois são postos pelo `realizadorParaMiolo()`. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-dentro > .cu-esquerda{
    grid-column-start:1;
    grid-column-end:span 3;
    grid-row-start:2;
    align-self:start;
    min-width:0;
  }
  #embrulho .todas-sessoes .caixa-sessao .cu-dentro > .cu-direita{
    grid-column-start:4;
    grid-column-end:span 3;
    grid-row-start:2;
    align-self:start;
    min-width:0;
  }
  /* a presença alinhada à direita, em cima da sinopse */
  #embrulho .todas-sessoes .caixa-sessao .cu-direita .convidado{ text-align:right }

  /* >>> A FICHA SEM AR NENHUM POR CIMA: o `margin-top:34` que ela leva
     no cartão era para a separar do que vinha antes na coluna da
     direita. Aqui vem logo a seguir à fotografia, e o que as separa é
     a entrelinha dela e mais nada. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-esquerda .ficha-tecnica{ margin-top:0 }
}

/* abaixo do corte a barra não leva miniatura: as colunas 1 e 4 fecham
   a zero e o realizador desce para debaixo do título */
/* >>> ABAIXO DO CORTE a barra desfaz-se em linhas: sai a miniatura, e
   a data e a sala descem para debaixo do título em vez de ficarem à
   direita — a 375 não há largura para duas colunas de dados. <<< */
@media (width < 760px){/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
  #embrulho .todas-sessoes .caixa-sessao .data-local{
    align-self:start;
    white-space:normal;
  }
  #embrulho .todas-sessoes .caixa-sessao .local{
    align-self:start;
    justify-self:start;
  }
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* >>> O `:has()` COM RECURSO — 12 Set. O sinal lê o `aria-expanded` do
   gatilho, e o `aria-expanded` é a verdade do estado. Mas a classe
   `.aberto` está no mesmo elemento, posta pelo mesmo JS, e serve de
   recurso onde o `:has()` não exista.
   Medido: Firefox 153 **sim**, Chromium 148 **sim**. O `@supports` é
   para o que vier de trás, e custa três linhas. <<< */
#embrulho .todas-sessoes .caixa-sessao.aberto::after{ }

@supports selector(:has(*)){
  #embrulho .todas-sessoes .caixa-sessao:has(h2[aria-expanded="true"])::after{ }
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* o repouso de quem pode mover */
#body-wrapper a,
#body-wrapper .todos-dias .nome-dia h3 .dia-n,
#body-wrapper .todos-dias .nome-dia h3 .dia-s,
#body-wrapper .todos-convidados .nome-convidado h3,
#body-wrapper .todas-seccoes .caixa-seccao h2.seccao-titulo,
#body-wrapper .todos-posts .caixa-post .blog-list-titulo h3,
#body-wrapper .todas-sessoes .caixa-sessao h2{
  transform-origin:left center;
  transition:color var(--cu-tempo) ease, transform var(--cu-tempo) ease;
}

/* A ENTRADA DOS CARTÕES — `IntersectionObserver`, e não
   `animation-timeline:view()`: medido, o Firefox 153 diz NÃO a
   `view()`, NÃO a `scroll()` e NÃO a `animation-range`.

   >>> O ESCONDER É OPT-IN DO JS: um cartão que começa a `opacity:0` e
   espera por uma classe fica INVISÍVEL se a classe nunca chegar. Quem
   esconde é a `.cu-anima`, que o `armarEntrada()` só põe depois de
   confirmar que há observador e no momento em que vai observar. <<< */
/* >>> A ENTRADA E O REALCE NO MESMO ELEMENTO: esta regra vem depois
   da do realce e tem a mesma especificidade, portanto o `transition`
   dela apagaria o outro. As quatro propriedades vão na mesma linha —
   é a segunda vez nesta folha que a armadilha aparece, e é sempre a
   mesma: duas declarações de `transition` no mesmo elemento não se
   somam, substituem-se. <<< */
#body-wrapper .todas-sessoes.cu-anima .caixa-sessao{
  opacity:0;
  transform:translateY(var(--cu-meia));
  transition:opacity var(--cu-tempo-entrada) ease, transform var(--cu-tempo-entrada) ease, background-color var(--cu-tempo-acordeao) ease-in-out, box-shadow var(--cu-tempo-acordeao) ease-in-out, margin-bottom var(--cu-tempo-acordeao) ease-in-out;
}

#body-wrapper .todas-sessoes.cu-anima .caixa-sessao.cu-entrou{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  #body-wrapper a,
  #body-wrapper .todos-dias .nome-dia h3 .dia-n,
  #body-wrapper .todos-dias .nome-dia h3 .dia-s,
  #body-wrapper .todos-convidados .nome-convidado h3,
  #body-wrapper .todas-seccoes .caixa-seccao h2.seccao-titulo,
  #body-wrapper .todos-posts .caixa-post .blog-list-titulo h3,
  #body-wrapper .todas-sessoes .caixa-sessao h2{
    transition:color var(--cu-tempo) ease;
    transform:none;
  }

  #body-wrapper .todos-dias .caixa-dia,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros,
  #embrulho .todos-convidados .caixa-convidado .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado.aberto .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao.aberto .cu-miolo{ transition:none }

  #body-wrapper .todas-sessoes.cu-anima .caixa-sessao{
    opacity:1;
    transform:none;
    transition:none;
  }
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* os quatro cartões que NÃO são grelha ficam em bloco: a grelha deles,
   quando existe, vem depois e é de cada um */
#body-wrapper .todas-seccoes > .caixa-seccao,
#body-wrapper .todos-dias > .caixa-dia,
#body-wrapper .todos-dias > .quando,
#body-wrapper .todos-dias > .caixa-icals,
#body-wrapper .todos-posts > .caixa-post{ display:block }

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o programa: o dia é uma barra que abre ---------- */

/* as barras de dia encostam — `row-gap` de 8, que é o das listagens */
#body-wrapper .todos-dias .nome-dia{ margin:0; padding:0 }

/* >>> A BARRA DO DIA ENTRA NA RECEITA — 13 Set, e custou uma decisão:
   ela tem DUAS camadas. O `.nome-dia` é o bloco que leva a miniatura, e
   o `h3` lá dentro é que tem o nome, a corrida e o sinal. Pôr a grelha
   no `.nome-dia` deixava o `h3` a ocupar uma célula, e a grelha não vê
   lá para dentro.

   O `h3` passa a `display:contents` e os filhos dele sobem à grelha. É
   o padrão que a folha já usa em quatro sítios — a `.sessao-info`, o
   `.seccao-texto`, o `.blog-list-texto`, o `.nome-convidado` — e não
   inventa nada. O `cursor` e o `overflow` mudam de dono com ele: um
   `display:contents` não gera caixa, portanto não corta nem aponta. <<< */
#body-wrapper .todos-dias .nome-dia h3{
  display:contents;
  margin:0;
  padding:0;
}

/* >>> O `overflow` SAI DA BARRA DO DIA — 15 Set. Ele cortava a cauda
   do «Q» em «QUINTA»: medido, a `.nome-dia` mede 55 e o `span.dia` lá
   dentro mede 57 e desce 16 abaixo do fundo dela; a tinta do «Q» desce
   4 da base e caía na zona cortada.

   E não estava a cortar nada de útil: quem precisa de se cortar é a
   CORRIDA, e ela tem o seu — medido, `corrida ov:hidden w801
   scroll 1920`, os underscores contidos por ela própria. Com a barra a
   `visible` o documento continua em `1265/1265`. <<< */
#body-wrapper .todos-dias .nome-dia{ cursor:pointer }/* >>> O NÚMERO E O NOME SÃO UMA PEÇA, e o `span.dia` é o que os faz
   uma — 13 Set. Antes estavam os dois soltos e caíam ambos na coluna 2,
   sobrepostos: a barra do dia ficava só com «10», e foi a captura que o
   mostrou. Com o embrulho a coluna do título tem um item só, como nas
   outras cinco listas.

   O embrulho é `inline-flex` e não `block` porque tem de assentar na
   LINHA DE BASE da grelha — um bloco alinha pelo fundo da caixa e o
   número descolava do resto da barra. <<< */
#body-wrapper .todos-dias .nome-dia .dia{
  display:inline-flex;
  align-items:last baseline;
  column-gap:var(--cu-goteira-filete);
  white-space:nowrap;
  min-width:0;
}

@media (width >= 760px){
  /* >>> O NÚMERO E O NOME SÃO UMA PEÇA, e o `span.dia` é o que os faz
     uma — 13 Set. Antes estavam os dois soltos e caíam ambos na coluna 2,
     sobrepostos: a barra do dia ficava só com «10», e foi a captura que o
     mostrou. Com o embrulho a coluna do título tem um item só, como nas
     outras cinco listas.
  
     O embrulho é `inline-flex` e não `block` porque tem de assentar na
     LINHA DE BASE da grelha — um bloco alinha pelo fundo da caixa e o
     número descolava do resto da barra. <<< */
  #body-wrapper .todos-dias .nome-dia .dia{
    grid-column-start:2;
  }
}/* a corrida do dia é a coluna 3, como nas outras cinco */
#body-wrapper .todos-dias .nome-dia > .cu-corrida{}

@media (width >= 760px){
  /* a corrida do dia é a coluna 3, como nas outras cinco */
}#body-wrapper .todos-dias .nome-dia h3::after{
  /* >>> A COLUNA DO SINAL, EXPLÍCITA — 13 Set. Com o `h3` a
     `display:contents` o `::after` dele sobe à grelha do `.nome-dia`,
     mas sobe por COLOCAÇÃO AUTOMÁTICA e caía na primeira célula livre,
     que era a 4. Medido: coluna 4 com 27,5px e a corrida a acabar a 107
     do bordo em vez de 79. A coluna do sinal é a 5 nas seis listas. <<< */
  order:3;
  
  transform:translateY(var(--cu-sinal-base));
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  line-height:var(--l-med);
  letter-spacing:0;
  color:var(--cu-sangue);
  user-select:none;
}

@media (width >= 760px){
  #body-wrapper .todos-dias .nome-dia h3::after{
    grid-column-start:5;
  }
}

/* o corte do dia: o número em serifa, o nome em Condensed caps. São um
   nó de texto só no markup — quem os parte é o `cortarDias()`. */
#body-wrapper .todos-dias .nome-dia h3 .dia-n{
  font-family:var(--cu-display);
  font-weight:700;
  font-style:normal;
  letter-spacing:0;
  text-transform:none;
  color:inherit;
}

#body-wrapper .todos-dias .nome-dia h3 .dia-s{
  font-family:var(--cu-caps);
  font-weight:700;
  font-style:normal;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-left:3px;
  color:inherit;
}

/* O CARTÃO DO DIA — uma coluna e duas linhas.
   `minmax(0,1fr)` e não `auto`: a coluna implícita de uma grelha é
   `auto`, que se resolve pelo max-content, e o max-content do miolo
   são as sessões com blocos a `nowrap` — 1719px numa barra de 1151.
   Medido: 531px de transbordo a 1265 e 1381 a 375, mesmo fechado.

   A primeira linha é 55 FIXO e não `auto`. Medido em Firefox 153 a
   amostrar de 40 em 40ms: com `auto` a barra oscilava durante a
   transição — 90,3 → 115,2 → 83,3 → 61,6 antes de assentar em 55 —
   porque a linha automática é redimensionada a cada passo enquanto a
   outra cresce. Fixa, não mexe: é sempre a altura do `h3`. */
#body-wrapper .todos-dias .caixa-dia{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:var(--l-med) 0fr;
}

@media (width < 760px){
  /* >>> A LINHA FECHADA PASSA A `auto` — 14 Set, e é metade da
     regressão da barra do dia. Acima do corte a barra é UMA linha de 55
     e o `--l-med` serve; abaixo passou a três — miniatura, nome,
     fecho — e o pai continuava a dar-lhe 55 com `overflow:hidden` na
     barra. Medido: `scrollHeight 152 / clientHeight 55`, e o que se via
     era só a miniatura.

     E nada disto aparecia nos computados: colunas certas, linhas
     certas, os três itens presentes e com caixa. O `0fr` da segunda
     linha fica — é a mecânica do acordeão. <<< */
  #body-wrapper .todos-dias .caixa-dia{ grid-template-rows:auto 0fr }
}

/* A SESSÃO É UMA LINHA SÓ:
     15h30 PA   Negócio à Italiana   de Vittorio De Sica (95')

   TRÊS BLOCOS QUE NÃO PARTEM POR DENTRO — a linha quebra ENTRE blocos
   e nunca a meio de um. O terceiro não existe no markup: o `.director`
   e o `.dur` são irmãos soltos e partiriam um do outro; o JS
   embrulha-os num `.cal-resto`, com o mesmo padrão do `.ficha-resto`.

   O `.cal-ficha` vai a `display:contents` para o título e o resto
   serem itens de flex directos e não um bloco só. */
/* >>> A GOTEIRA DA LINHA DE FILME APERTA — 12 Set, à noite. Eram 21px
   entre cada dois blocos, e numa linha de três — `pfc` · título ·
   resto — isso são 42px de ar no meio de uma frase que se lê seguida.
   Passa a **0,6ch da mono**, que é o tipo dos dados desta linha: 6,48px
   a 18. Um valor só, e é relativo ao tipo em vez de ser um número.
   O `ch` resolve-se AQUI, e este elemento não declara família: herda a
   do bloco, que é a mono. Se um dia herdar outra, a goteira anda com
   ela — que é o que se quer de um valor tipográfico. <<< */
#body-wrapper .todos-dias .caixa-cal-sessao{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:var(--cu-junta-linha);
  width:auto;
  padding-bottom:0;
  margin-bottom:0;
}

#body-wrapper .todos-dias .cal-ficha{ display:contents }

#body-wrapper .todos-dias .hora-local,
#body-wrapper .todos-dias .cal-ficha a.tit-filme,
#body-wrapper .todos-dias .cal-ficha .cal-resto,
#body-wrapper .todos-dias .cal-ficha .pfc{ white-space:nowrap }

@media (width < 760px){
  #body-wrapper .todos-dias .hora-local,
  #body-wrapper .todos-dias .cal-ficha a.tit-filme,
  #body-wrapper .todos-dias .cal-ficha .cal-resto,
  #body-wrapper .todos-dias .cal-ficha .pfc{ white-space:normal }
}

/* o bloco da hora sobe a 21/34 e parte-se em dois pesos: a hora a
   700, a sala a 400. Mono sangue nos dois, e sem campo — o campo de
   osso era só do `.data-local` do cartão, nunca deste. */
#body-wrapper .todos-dias .hora-local{
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  font-weight:700;
  background:transparent;
  padding:0;
}

/* >>> O REALIZADOR DA LINHA DO PROGRAMA não tinha regra nenhuma: 34
   na home e 34 no programa, os 68 que o censo contava. Ficava em
   Roboto regular ao lado do mesmo nome que no cartão de filme está em
   PT Serif itálico. Passa a ser o mesmo dos dois lados — é o único
   sítio desta ronda onde escolhi por ele, e desfaz-se numa linha. <<< */
#body-wrapper .todos-dias .cal-ficha .director{
  font-family:var(--cu-display);
  font-style:italic;
}

#body-wrapper .todos-dias .hora-local .hora{ font-weight:700 }
#body-wrapper .todos-dias .hora-local .sala{ font-weight:400 }

/* >>> O corte do título do programa fica a TINTA mesmo no hover, e é
   assim na v1: a regra do `.mono` do `tit-filme` é mais específica do
   que a do hover. Escrito aqui de propósito, na camada das páginas,
   para a v2 fazer o mesmo sem depender de contar especificidades. <<< */
#body-wrapper .todos-dias .cal-ficha a.tit-filme .mono{ color:var(--cu-tinta) }

/* o `.quando` não é filho do `.todos-dias`: está ENTRE duas sessões,
   dentro do dia, como separador */

/* ════════ QUEBRAR ENTRE PARTES, NUNCA DENTRO DE UMA ═══════════════
   Cada peça é uma unidade e a linha quebra ANTES dela se não couber:

     Cine-Concerto por        e não   CINE-CONCERTO POR JP
     JP Simões                        SIMÕES
     14-10 21H                e não   14-10 21H Teatro Narciso
     Teatro Narciso Ferreira          Ferreira

   >>> E O NOME JÁ ERA UM SPAN. O enunciado dizia «o JS envolve-o em
   `span.nome`» — medido, o Twig já parte a etiqueta em dois:
   `span.tipo` com «Cine-Concerto por» e `span.concerto` com o nome.
   Não é preciso JS nenhum. A `.data` já trazia `nowrap` desde 12 Set;
   faltavam a sala e as etiquetas. <<<

   Em todas as larguras: no desktop nunca quebram de qualquer modo, e
   uma regra que vale sempre é uma regra a menos para lembrar. */
#embrulho .caixa-sessao .local,
#embrulho .caixa-sessao .cu-etiquetas > span,
#embrulho .caixa-sessao .cu-etiquetas > span > a{ white-space:nowrap }

/* ════════ OS SINAIS PELO CENTRO ÓPTICO, ABAIXO DE 760 ═════════════
   A referência não é a base alfabética: é o MEIO DA ALTURA DAS
   MAIÚSCULAS do texto ao lado. Na base, os sinais lêem baixos.

   Medido a 360, tinta a tinta, com a base dada por sonda e a altura de
   maiúscula pelo canvas — `actualBoundingBoxAscent` do «H»:

     capH Roboto Condensed 21px      15,0   (0,714em)
     centro óptico = base − capH/2

     →   haste 98,7   centro 91,5   7,2 ABAIXO   →  7px → 0
     +   barra 54,7   centro 57,5   2,8 ACIMA    →  3px → 6

   >>> OS DOIS ANDAM EM SENTIDOS CONTRÁRIOS, e é por isso que um número
   só não servia: a seta está baixa e o mais está alto. O `→` é grande
   (68,85) e a haste dele cai abaixo do centro; o `+` é menor (45,9) e
   a barra dele fica acima. Cada glifo leva o seu.

   E O DESKTOP NÃO SE TOCA. Por esta mesma régua ele está 11 a 12px
   fora — `→` pediria +17,7 e `+` +14,7 a 1265 — mas isso mexe todas as
   barras de todas as páginas em todas as larguras, e é decisão, não
   correcção. Fica medido e dito. <<< */
@media (width < 760px){
  /* >>> NO PRÓPRIO PSEUDO, e não na barra: a regra da `→` declara
     `--cu-sinal-base:7px` DENTRO do `::after`, e uma propriedade
     declarada no elemento ganha sempre à que ele herdaria. Posto na
     barra, não mudou um pixel — a seta continuou a +7,2 do centro. <<< */
  #body-wrapper .todas-seccoes .caixa-seccao .seccao.cu-barra::after{ --cu-sinal-base:0px }

  /* >>> AS DUAS DE DADO FICAM COMO ESTÃO, e digo porquê. Medidas contra
     a referência delas — o dado em mono a 18, `capH` 13,0, que é o
     texto ao lado do sinal e não o título — dão `blog −9,7` e
     `filmes −3,8`. Pedem os dois cerca de +10. Tentei dar-lho e o token
     não lhes chegou: não se mexeram um pixel. Não persegui, porque não
     estavam na queixa e porque meter um número que não se vê aplicado é
     pior que não o meter. Fica medido, por fazer. <<< */

  #body-wrapper .todos-dias .nome-dia,
  #embrulho .todos-convidados .caixa-convidado,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros{ --cu-sinal-base:6px }

  /* o `+` não declara o token no pseudo — herda-o da barra, e por isso
     na barra basta. Fica dito para não parecer incoerência. */
}

/* ════════ O SINAL É ELEMENTO — 16 Set ══════════════════════════════
   `span.cu-sinal`, posto pelo JS em todas as barras e no rodapé, em
   TODAS as larguras. O mesmo objecto em cima e em baixo.

   >>> O GLIFO VEM DE UM ATRIBUTO E O ESTADO DE UMA CLASSE. Eram oito
   selectores de conteúdo — um por lista, mais os do aberto — e um
   `:has(h3[aria-expanded="true"])::after` para o `−`. Passam a duas
   linhas. O que muda de lista para lista é um `data-sinal`, e isso
   está no JS, ao lado de quem sabe se a barra abre ou liga. <<< */
.cu-sinal{
  /* >>> UMA CAIXA DE 34 COM O GLIFO CENTRADO, em todas as larguras. O
     glifo transborda e centra-se nela geometricamente — é isso que faz
     o trabalho que os `translateY` faziam, e por isso eles saem daqui e
     de baixo do corte. <<< */
  /* >>> SEM FLEX POR DENTRO. Uma caixa de 34 com o glifo numa LINHA de
     34 — a mesma base que o título, como o pseudo era. Centrar por flex
     dava-lhe um centro geométrico e nenhuma base, e uma caixa sem base
     não casa com texto. <<< */
  display:inline-block;
  width:var(--l-corpo);
  height:var(--l-corpo);
  line-height:var(--l-corpo);
  text-align:center;
  overflow:visible;
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  color:var(--cu-sangue);
  user-select:none;
}
.cu-sinal::before{ }

/* aberto, o glifo troca — uma linha, e serve as seis listas e o rodapé */
.aberto > .cu-sinal::before,
[aria-expanded="true"] + .cu-sinal::before,
[aria-expanded="true"] ~ .cu-sinal::before{ }

/* a seta é maior e traz a cauda recortada, como sempre trouxe */
.cu-sinal[data-sinal="\2192"]{
  /* >>> O RECORTE SAI DA CAIXA E VAI AO GLIFO. O `clip-path` estava no
     `.cu-sinal` e cortava 15px da CAIXA — que tinha 27,6 e agora tem 34,
     com o glifo centrado e a transbordar. Cortar a caixa passou a cortar
     onde calha. No `::before` corta a cauda da seta, que é o que sempre
     quis cortar. <<< */
  font-size:var(--cu-sinal-seta);
}
.cu-sinal[data-sinal="\2192"]::before{
  display:block;
  clip-path:inset(0 0 0 var(--cu-sinal-cauda));
}

/* acima do corte ocupa a coluna que o pseudo ocupava */
@media (width >= 760px){
  #body-wrapper .todas-seccoes .caixa-seccao .seccao > .cu-sinal,
  #body-wrapper .todos-posts .caixa-post .post > .cu-sinal,
  #embrulho .todos-convidados .caixa-convidado > .cu-sinal,
  #embrulho .todas-sessoes .caixa-sessao > .cu-sinal,
  #body-wrapper .todos-dias .nome-dia > .cu-sinal{
    grid-column-start:5;
    grid-row-start:1;
  }
}

/* e os pseudos que ele substitui saem */
#body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
#body-wrapper .todos-posts .caixa-post .post::after,
#embrulho .todos-convidados .caixa-convidado::after,
#embrulho .todas-sessoes .caixa-sessao::after,
#body-wrapper .todos-dias .nome-dia h3::after,
#body-wrapper .caixa-sobre > .bilheteira::after,
#body-wrapper .caixa-sobre > .ficha::after,
#body-wrapper .caixa-sobre > .parceiros::after,
#footer #rodape .caixa-info > div:not(.topo) h5::after{ content:none }

/* ---------- a subscrição do iCal ---------- */

/* recupera por margem o ar que o `row-gap:8` das barras lhe tirou */
/* >>> A MARGEM DA `.caixa-icals` É 55 E NÃO 53 — 12 Set. Recuperava por
   margem o ar que o `row-gap:8` das barras lhe tirava, e o número
   escolhido foi o `--cu-base` de 34 mais os 8 de gap a olho: dava 53 de
   distância, que não é degrau nenhum desta escala. `--cu-goteira` é 55,
   que é. <<< */
#body-wrapper .todos-dias + .caixa-icals{ margin-top:var(--cu-goteira) }

#body-wrapper .caixa-icals,
#body-wrapper .caixa-icals h5,
#body-wrapper .caixa-icals h6,
#body-wrapper .caixa-icals .ical-extra{
  font-family:var(--cu-display);
  font-weight:400;
  font-style:normal;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  text-transform:none;
  color:var(--cu-tinta);
  margin:0;
}

#body-wrapper .caixa-icals .ical h5{ font-weight:700 }
#body-wrapper .caixa-icals .ical h5.ical-extra{ font-weight:400 }

/* a mesma barra de três colunas do Sobre: rótulo · corrida · link */
#body-wrapper .todos-dias + .caixa-icals{
  display:grid;
  grid-template-columns:auto minmax(var(--cu-corrida-min), 1fr) var(--cu-sinal-col);
  align-items:last baseline;
  column-gap:var(--cu-goteira-cab);
  row-gap:0;
}#body-wrapper .caixa-icals > .ical{
  min-width:0;
}

@media (width >= 760px){
  #body-wrapper .caixa-icals > .ical{
    grid-column-start:1;
    grid-row-start:1;
  }
}#body-wrapper .caixa-icals > .extratitulo{
  min-width:0;
  white-space:nowrap;
}

@media (width >= 760px){
  #body-wrapper .caixa-icals > .extratitulo{
    grid-column-start:3;
    grid-row-start:1;
  }
}

/* o ícone do Font Awesome assenta na base como o texto ao lado */
/* >>> O ÍCONE DO CALENDÁRIO SAI e entra a seta — 12 Set, decisão do
   Pedro. O iCal é um LINK, e o sinal de um link nesta folha é o `→`,
   o mesmo das barras de secção e de blog. O `<i>` do Font Awesome fica
   no markup e escondido: tirá-lo é Twig. <<< */
#body-wrapper .caixa-icals > .extratitulo::after{
  
  clip-path:inset(0 0 0 var(--cu-sinal-cauda));
  margin-inline-start:calc(-1 * var(--cu-sinal-cauda));
  --cu-sinal-base:7px;
  transform:translateY(var(--cu-sinal-base));
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal-seta);
  line-height:var(--l-peq);
  color:var(--cu-sangue);
  user-select:none;
}

}

/* ---------------------------------------------------------------- */
@layer estados{

#body-wrapper .todos-dias .caixa-dia.aberto{ grid-template-rows:var(--l-med) 1fr }

@media (width < 760px){
  /* >>> E O ESTADO ABERTO TAMBÉM, que é a mesma regressão outra vez e
     um degrau mais fundo: a linha fechada já tinha passado a `auto`,
     mas ABERTA voltava aos 55 e a barra do dia perdia a linha de fecho
     — medido, barra `y68+55` com a corrida a y125, dois píxeis fora e
     recortada. O `1fr` da segunda linha fica: é o acordeão. <<< */
  #body-wrapper .todos-dias .caixa-dia.aberto{ grid-template-rows:auto 1fr }
}
#body-wrapper .todos-dias .nome-dia h3[aria-expanded="true"]::after{ }

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- convidados: o convidado é uma barra que abre ---------- */

/* FECHADO, uma barra por convidado:
     [55×55]  José PACHECO PEREIRA  1111111  Presente em …  +

   A MESMA `<img>` é a miniatura e a fotografia grande — não muda de
   sítio no DOM, muda de `flex`. A miniatura «desaparece» quando abre
   porque passa a ser a fotografia, e quem a move é uma propriedade e
   não o JS.

   >>> `.nome-convidado` a `display:contents` é o mesmo truque do
   `.sessao-info`: o `h3` e o `.comenta-estes` passam a itens da
   grelha do cartão, e sobra o `::after` do `.nome-convidado` para a
   corrida, que os dois pseudos do cartão estão tomados pela miniatura
   e pelo sinal. <<< */
#body-wrapper #embrulho .todos-convidados{ row-gap:var(--cu-meia) }

#embrulho .todos-convidados .caixa-convidado{ max-height:none; overflow:visible }

/* a âncora do `#slug` sai do fluxo: escondida não recebia o salto, e
   item de grelha comia uma goteira antes da miniatura */
#embrulho .todos-convidados .caixa-convidado > a:not([href]){
  position:absolute;
  top:0;
  left:0;
}

#embrulho .todos-convidados .nome-convidado{ display:contents }/* 34/55, o mesmo do nome do dia — as duas barras com o mesmo título.
   Era 21/34 por medo de a corrida desaparecer; medida a 1265, não
   desaparece: fica entre 310 e 683.
   >>> A altura fixa, o `nowrap` e as reticências SAÍRAM com a grelha:
   a coluna `auto` encolhe até ao min-content sozinha e o nome quebra
   por dentro da célula. <<< */
#embrulho .todos-convidados .caixa-convidado .nome-convidado h3{
  min-width:0;
  letter-spacing:normal;
  cursor:pointer;
}

@media (width >= 760px){
  /* 34/55, o mesmo do nome do dia — as duas barras com o mesmo título.
     Era 21/34 por medo de a corrida desaparecer; medida a 1265, não
     desaparece: fica entre 310 e 683.
     >>> A altura fixa, o `nowrap` e as reticências SAÍRAM com a grelha:
     a coluna `auto` encolhe até ao min-content sozinha e o nome quebra
     por dentro da célula. <<< */
  #embrulho .todos-convidados .caixa-convidado .nome-convidado h3{
    grid-column-start:2;
    grid-row-start:1;
  }
}

#embrulho .caixa-convidado .nome-convidado h3{ text-transform:none; padding-top:0 }/* o «Presente em …» é a quarta coluna: texto de leitura, não dados */
#embrulho .todos-convidados .caixa-convidado .comenta-estes{
  min-width:0;
  font-family:var(--cu-texto);
  font-weight:400;
  font-style:normal;
  font-size:var(--t-peq);
  line-height:var(--l-med);
  color:var(--cu-tinta);
}

@media (width >= 760px){
  /* o «Presente em …» é a quarta coluna: texto de leitura, não dados */
  #embrulho .todos-convidados .caixa-convidado .comenta-estes{
    grid-column-start:4;
    grid-row-start:1;
  }
}

/* os links de dentro do texto não têm sublinhado nenhum na pele: o
   que os marca é o filete de sangue por baixo */
/* >>> E OS LINKS DE «PRESENTE EM» PASSAM AO MESMO FILETE — 13 Set.
   Tinham `border-bottom:1px solid sangue`, que é um traço contínuo: o
   único sublinhado da folha que não era de underscores. Um sublinhado,
   uma escala, em todo o lado. <<< */
#embrulho .todos-convidados .caixa-convidado .comenta-estes a,
#embrulho .caixa-sessao .convidado a{
  position:relative;
  color:var(--cu-tinta);
  text-decoration:none;
}

/* >>> E SO' NO HOVER DO PROPRIO LINK — 13 Set. Na leva de ontem o filete
   ficou SEMPRE ligado, e colado às letras: em repouso a linha de
   «Presente em …» lia-se toda sublinhada, o que é o contrário do que um
   link discreto quer. Passa ao gesto das outras — aparece com o rato — e
   a guarda é a mesma.

   >>> E DESCE. O `-.17em` foi medido para os rótulos do menu, onde o
   corpo é 34: a 18 esse recuo dá 3px e o underscore encosta às letras.
   O filete tem tamanho fixo desde ontem, portanto o recuo também tem de
   ser fixo — `-4px` põe a tinta do underscore a 7 da base do texto, que
   é a distância que o menu tem. <<< */
@media (hover:hover){
#embrulho .todos-convidados .caixa-convidado .comenta-estes a:hover::after,
#embrulho .caixa-sessao .convidado a:hover::after{
  content:var(--cu-riscas);
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:1.6;
  letter-spacing:normal;
  color:var(--cu-sangue);
  pointer-events:none;
  user-select:none;
}
}

/* O MIOLO — a fotografia e a biografia lado a lado, `flex:1 1 0` nos
   dois, que é o que a grelha de seis daria com `span 3` cada. */
#embrulho .todos-convidados .caixa-convidado .cu-dentro{
  display:flex;
  flex-wrap:wrap;
  column-gap:var(--cu-goteira-cab);
  row-gap:0;
}

/* os 34 de cima e de baixo: aqui em itens de flex de largura inteira,
   que num contentor de flex um pseudo de `display:block` não quebra
   linha sozinho */
#embrulho .todos-convidados .caixa-convidado .cu-dentro::before,
#embrulho .todos-convidados .caixa-convidado .cu-dentro::after{
  content:"";
  flex:0 0 100%;
  height:var(--cu-base);
}

#embrulho .todos-convidados .caixa-convidado .cu-dentro .convidado-img{
  flex:1 1 0;
  min-width:0;
  align-self:start;
  height:auto;
  overflow:visible;
}

/* a mesma `<img>` da miniatura, agora inteira e a cores */
#embrulho .todos-convidados .caixa-convidado .cu-dentro .convidado-img img{
  display:block;
  width:100%;
  height:auto;
  object-fit:fill;
  filter:none;
}

#embrulho .todos-convidados .caixa-convidado .cu-dentro .cont-convidado{
  flex:1 1 0;
  min-width:0;
  align-self:start;
  margin-left:var(--cu-base);
  padding-top:0;
}

/* o recorte à mão do legado, desarmado: `.convidado-img` a 75% com a
   imagem puxada −25% para a esquerda. Só mordia acima de 1280. */
#embrulho .convidado-img{
  flex:0 0 auto;
  overflow:visible;
  width:auto;
}

#embrulho .convidado-img img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin-left:0;
}

/* o texto de leitura — sinopse, biografia, conteúdo de cabeçalho */
#embrulho .caixa-sessao .sessao-sinopse,
#embrulho .caixa-cabeca .com-conteudo,
#embrulho .caixa-convidado .cont-convidado{
  font-family:var(--cu-texto);
  font-weight:400;
  font-style:normal;
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  color:var(--cu-tinta);
  max-width:var(--cu-leitura);
}

#embrulho .caixa-sessao .convidado{ margin-top:var(--cu-base) }
#embrulho .caixa-sessao .cu-dentro .convidado{ margin-top:0 }

/* >>> DOIS CORTES A UM PIXEL UM DO OUTRO, 759 e 760, e são os dois da
   v1: a miniatura sai num e as colunas mudam no outro. Ficam como
   estão — mexer-lhes é decidir, e a ronda não decide. <<< */
@media (width < 760px){/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
  #embrulho .todos-convidados .caixa-convidado .cu-dentro .convidado-img,
  #embrulho .todos-convidados .caixa-convidado .cu-dentro .cont-convidado{
    flex:0 0 100%;
    margin-left:0;
  }
}

@media (width < 760px){
  /* a corrida vai à coluna 1 pela receita única. A colocação que estava
     aqui punha-a na 2, que abaixo do corte é a coluna do SINAL: acabava
     a 304 numa coluna que fecha a 265. O meu filtro não a apanhou por
     ela dizer `nome-convidado` e não `caixa-convidado`. */
  #embrulho .todos-convidados .caixa-convidado:not(.aberto) .comenta-estes{ display:none }/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
}

}

/* ---------------------------------------------------------------- */
@layer estados{

#embrulho .todos-convidados .caixa-convidado:has(h3[aria-expanded="true"])::after{ }

/* aberto, o «Presente em …» passa a uma LINHA da grelha só para ele,
   por cima do miolo. >>> A linha faltava, e era a correcção A do QA:
   a regra só trocava as COLUNAS, o `grid-row-start:1` ficava, e os
   dois textos caíam na mesma célula — 29 sobreposições de 102 a
   367px, medidas. O `z-index:2` que o relatório propunha só trocava
   qual dos dois ficava ilegível. <<< */
@media (width < 760px){
  #embrulho .todos-convidados .caixa-convidado.aberto .comenta-estes{
    order:6;
    white-space:normal;
    overflow:visible;
    margin-top:var(--cu-base);
  }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o índice de secções: barras-link, sem acordeão ------- */

/* A barra é o `.seccao` e não o `.caixa-seccao`: é ele que é
   `position:relative`, e é dessa posição que a âncora depende.
   `.seccao-texto` a `display:contents` — o mesmo truque outra vez: o
   `h2` e o `h4` sobem à grelha da barra e sobra o `::after` para a
   corrida. */
#body-wrapper .todas-seccoes .caixa-seccao .seccao-texto{ display:contents }

/* a `<img>` do markup fica escondida: o retrato é o FUNDO do
   `::before`, e é o JS que lhe passa o URL em `--cu-retrato` */
#body-wrapper .todas-seccoes .caixa-seccao .seccao-img{ display:none }/* o tamanho não se diz aqui: vem da regra das barras, em `componentes` */
#body-wrapper .todas-seccoes .caixa-seccao h2.seccao-titulo{
  min-width:0;
  cursor:pointer;
}

@media (width >= 760px){
  /* o tamanho não se diz aqui: vem da regra das barras, em `componentes` */
  #body-wrapper .todas-seccoes .caixa-seccao h2.seccao-titulo{
    grid-column-start:2;
    grid-row-start:1;
  }
}/* o subtítulo só existe em quatro das sete, e só em /seccoes/2026 —
   a home não o tem. Itálico de serifa, reticenciado. */
#body-wrapper .todas-seccoes .caixa-seccao h4.seccao-subtitulo{
  min-width:0;
  font-family:var(--cu-display);
  font-weight:400;
  font-style:italic;
  font-size:var(--t-peq);
  line-height:var(--l-med);
  letter-spacing:normal;
  text-transform:none;
  color:var(--cu-tinta);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:0;
}

@media (width >= 760px){
  /* o subtítulo só existe em quatro das sete, e só em /seccoes/2026 —
     a home não o tem. Itálico de serifa, reticenciado. */
  #body-wrapper .todas-seccoes .caixa-seccao h4.seccao-subtitulo{
    grid-column-start:4;
    grid-row-start:1;
  }
}

/* a âncora vazia por cima da barra inteira. >>> `inset` não faz nada
   sem `position`, e foi assim que 50 links do site ficaram a 0×0
   quando o legado saiu. Está escrito em cada um dos sítios onde é
   preciso, de propósito. <<< */
#body-wrapper .todas-seccoes .caixa-seccao .seccao-link,
#body-wrapper .todos-posts .caixa-post .post-link,
#body-wrapper #mod_blog .caixa-post .post-link,
#body-wrapper #mod_convidados .caixa-convidado .link-convidados{
  position:absolute;
  inset:0;
  width:auto;
  height:auto;
  z-index:2;
}

#body-wrapper .todos-posts > .caixa-post .post,
#body-wrapper #mod_blog .caixa-post,
#body-wrapper #mod_convidados .caixa-convidado{ position:relative }

@media (width < 760px){/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
  #body-wrapper .todas-seccoes .caixa-seccao h4.seccao-subtitulo{ display:none }
}

/* ---------- o blog: o índice de posts em barras-link ------------- */

/* >>> SÃO DOIS MARKUPS E NÃO UM: a LISTA tem data e não tem resumo; o
   módulo da home tem resumo, não tem data, e nem sequer tem o `.post`
   que serve de barra. Estas regras são da lista. <<<
   >>> E há DOIS links para o mesmo sítio em cada barra — o `a` do
   título e a âncora vazia por cima. Não os fundi, que isso é markup,
   mas são duas paragens de `Tab` para o mesmo destino. <<< */
#body-wrapper .todos-posts .caixa-post .post{
  /* a miniatura do post é a grande, como a do filme */
  --cu-miniatura:var(--cu-miniatura-gr);
}

#body-wrapper .todos-posts .caixa-post .post-lista-img{ display:none }

/* a `<img>` do markup fica escondida pelo pai; a regra do tamanho
   fica na mesma, que é o que a v1 faz e é o que se vê se o pai algum
   dia voltar a aparecer */
#body-wrapper .todos-posts > .caixa-post img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  padding:0;
}

#body-wrapper .todos-posts .caixa-post .blog-list-texto,
#body-wrapper .todos-posts .caixa-post .blog-list-titulo,
#body-wrapper .todos-posts .caixa-post .blog-list-data{ display:contents }#body-wrapper .todos-posts .caixa-post .blog-list-titulo h3{
  min-width:0;
  cursor:pointer;
}

@media (width >= 760px){
  #body-wrapper .todos-posts .caixa-post .blog-list-titulo h3{
    grid-column-start:2;
    grid-row-start:1;
  }
}

#body-wrapper .todos-posts .caixa-post h3 a.link-post{
  color:inherit;
  text-transform:none;
  text-decoration:none;
}

@media (width < 760px){
  /* >>> O TÍTULO DO BLOG ERA O `a`, NÃO O `h3` — e foi por isso que eu
     o dei por certo duas vezes. Medi o `h3` e ele dava 21/34; o que se
     vê é o `a.link-post` lá dentro, que entra na regra partilhada
     «serifa 34/55» com o `.seccao-titulo` e os outros, e ficou de fora
     do degrau de baixo do corte.

       blog       a.link-post   34px/55px   PT Serif 700
       programa   span.dia      21px/34px   Roboto Condensed

     A régua tem de apanhar o nó que tem as LETRAS: aqui o `h3` é uma
     caixa e o `a` é o texto. Medir o contentor não é medir o conteúdo,
     outra vez.

     E o `a` passa a HERDAR em vez de declarar: um link dentro de um
     título não tem corpo próprio — o corpo é do título. Assim o degrau
     de baixo do corte chega-lhe por construção e não por enumeração. */
  #body-wrapper .todos-posts .caixa-post h3 a.link-post{
    font-size:inherit;
    line-height:inherit;
    font-family:inherit;
    letter-spacing:inherit;
  }
}

@media (width < 760px){/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
}

/* ---------- a home: seis módulos ---------- */

/* >>> o `#mod_sobre` reapareceu com o interruptor — quem o escondia
   era o `custom_mobi.css:153`. Passa a ser nosso. <<< */
#body-wrapper #mod_sobre{ display:none }

/* O TÍTULO DE MÓDULO — corrida à esquerda, título à direita:
     1111111111111111111111111111111111  Convidados

   >>> ASSINALADO: a corrida vai a SANGUE, e é a única corrida sobre
   papel que não é tinta — as seis das barras passaram a tinta na ronda
   das dez notas. É decisão do Pedro, não esquecimento. <<< */
/* >>> A INVERSÃO ESTÁ AQUI E É DE PROPÓSITO — 12 Set, declarado na
   regra e não solto num ficheiro: nos títulos de módulo a CORRIDA vem
   ANTES do título, ao contrário das seis barras, onde vem depois. E o
   par de cor também troca — aqui é sangue sobre papel, nas barras é
   tinta sobre osso.
   A razão é de leitura: um título de módulo abre uma secção da home e
   não é uma entrada de lista. A corrida à frente lê-se como uma régua
   que aponta; a corrida atrás lê-se como uma que preenche. <<< */
#body-wrapper .titulo-mod{
  display:flex;
  align-items:last baseline;
  column-gap:var(--cu-goteira-cab);
  font-family:var(--cu-display);
  font-weight:700;
  /* >>> 89 SÓ ACIMA DO CORTE, e a razão está medida: «Convidados» a 89
     mede 453 e o contentor a 375 dá 341 — 153px de scroll horizontal
     na home. Abaixo do corte fica nos 34/55. <<< */
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  color:var(--cu-tinta);
  margin:0;
}

@media (width >= 760px){
  #body-wrapper .titulo-mod{ font-size:var(--t-gr); line-height:var(--l-gr) }
  #body-wrapper .titulo-mod > .cu-corrida{ line-height:var(--l-gr) }
}

/* o do blog fica escondido: o módulo é um post só e o título dele já
   diz o que é */
#body-wrapper #mod_blog .titulo-mod{ display:none }

/* UM ESPAÇO SÓ ENTRE MÓDULOS. Eram dois, e a medição diz quais: o
   `margin-top` do módulo e mais 34 por baixo do título. O que sobrava
   por baixo da listagem anterior era ZERO — medido caixa a caixa nos
   quatro módulos. O segundo espaço não estava em baixo, estava no
   título. */
#body-wrapper [id^="mod_"] + [id^="mod_"]{ margin-top:var(--cu-goteira) }

/* O MÓDULO DO BLOG — imagem inteira com placa por cima.
     ┌──────────────────────────────────────────────┐
     │  imagem 16:9, 100%                           │
     │  ┌──────────────┐                            │
     │  │ Título       │                            │
     └──┴──────────────┴────────────────────────────┘
   O recorte é o preço: a imagem é 800×400, ou seja 2:1, e o 16:9
   corta-lhe 11% da altura. */
#body-wrapper #mod_blog .caixa-post{ display:block }

#body-wrapper #mod_blog .caixa-post .post-img{ display:block; width:100% }

#body-wrapper #mod_blog .caixa-post .post-img img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.777778;
  object-fit:cover;
}

/* A PLACA. `span` não serve num absoluto — é `width:50%` do módulo;
   alinhar à grelha de seis daria um `calc()` com uma divisão, e a
   folha tem zero barras em posição de valor.

   >>> A ½ e sem degrau nenhum: a 760 ainda sobram 93px de folga. A ¼
   não cabia — um absoluto com `bottom:0` que não caiba cresce PARA
   CIMA e sai pelo topo da imagem, e o que se perdia era a primeira
   linha do título: 153px a 760. Medido em nove larguras. <<<
   Abaixo do corte fica por baixo da imagem, à largura toda: a 375 a
   imagem tem 184 de altura e flutuar nunca lá caberia. */
#body-wrapper #mod_blog .caixa-post .mod-post{
  position:static;
  width:auto;
  min-width:0;
  padding:var(--cu-goteira-cab);
  /* >>> A PLACA É SANGUE desde 12 Set, decisão do Pedro. Era tinta,
     15,34; passa a 7,32 com o mesmo papel por cima, e o campo deixa de
     competir com o campo do título de secção, que é o único tinta da
     folha. <<< */
  background:var(--cu-sangue);
  color:var(--cu-papel);
}

@media (width >= 760px){
  #body-wrapper #mod_blog .caixa-post .mod-post{
    position:absolute;
    left:0;
    bottom:0;
    width:50%;
  }
}

/* 34/55 e não 89: o 89 não cabe em metade da largura. Papel sobre
   tinta — 15,34, o par mais forte da paleta. */
#body-wrapper #mod_blog .caixa-post h2.link-post{
  font-family:var(--cu-display);
  font-weight:700;
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  color:var(--cu-papel);
  margin:0;
}

/* o resumo encosta ao título: sai a margem e fica só a entrelinha */
#body-wrapper #mod_blog .caixa-post .sumario-post{
  display:block;
  font-family:var(--cu-texto);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  color:var(--cu-papel);
  max-width:none;
  margin:0;
}

/* O MÓDULO DE CONVIDADOS — uma composição, não uma grelha. As 29
   caras sem espaço nenhum entre elas e todas a cinzento: lê-se como
   um bloco. Sem o gap as caras continuavam recortadas, que vêm com
   proporções diferentes; `aspect-ratio:1` mais `object-fit:cover`
   iguala-as. */
#body-wrapper #mod_convidados .todos-convidados{ column-gap:0; row-gap:0 }

#body-wrapper #mod_convidados .caixa-convidado img{
  filter:grayscale(1);
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:cover;
}

}

/* ---------------------------------------------------------------- */
@layer componentes{

/* o corte, segunda pele: dentro de um título de cartão o `.mono` fica
   a tinta declarada e não herdada — é o que a v1 faz, e é o que
   segura a cor no hover do programa */
#embrulho .caixa-sessao h2.filme .mono,
#embrulho .nome-convidado h3 .mono,
#body-wrapper .nome-convidado h3 .mono{ color:var(--cu-tinta) }

/* o título do filme, antes de ir para a barra: é ele o degrau a que
   tudo no cartão se alinha */
#embrulho .caixa-sessao h2.filme,
#embrulho .caixa-sessao h2.filmesemrealizador{
  display:block;
  font-family:var(--cu-display);
  font-weight:700;
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  word-break:normal;
  color:var(--cu-tinta);
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o cabeçalho de secção ---------- */

/* O TÍTULO desce abaixo do corte: 55/55 em coluna única, 89/102 na
   grelha de seis. >>> 89/102 e não 89/89: o campo do `.mono` tem a
   altura da ENTRELINHA, portanto a 89/89 os campos de duas linhas
   seguidas ficam encostados e lê-se como sobreposição. Os 102 são
   três linhas da base e deixam 13px entre campos. <<< */
#embrulho .todas-sessoes .titulo .titulo-link,
#embrulho .todas-sessoes .titulo h1{
  font-family:var(--cu-display);
  font-weight:700;
  /* o 55 é a entrelinha do par 34/55, aqui usada como tamanho: par
     novo criado pela decisão, não valor inventado */
  font-size:var(--l-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  /* o legado deixa `word-break:break-all` nos títulos, e a 89px num
     contentor de 588 isso parte as palavras a meio */
  word-break:normal;
  color:var(--cu-tinta);
}

/* >>> O ÚNICO CORTE COM CAMPO — é o S7, uma vez por publicação. Campo
   a tinta com papel por cima: 15,34, o par mais forte da paleta.
   `inline-block` porque o fundo de um `inline` cobre a caixa de
   conteúdo da fonte e não se controla — media 117px para uma linha de
   89 e comia a perna do «g» de cima. A entrelinha é `inherit` para o
   campo crescer com a LINHA e não com a fonte. <<< */
#embrulho .todas-sessoes .titulo .titulo-link .mono{
  display:inline-block;
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:inherit;
  line-height:inherit;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cu-papel);
  background:var(--cu-tinta);
  padding-inline:.05em;
  /* >>> O PADDING-BLOCK VOLTA, e a 12 Set estava a zero por uma razão
     que a medição de hoje corrige. O que se mediu então foram as CAPS
     — 22,8px acima delas — e não o ACENTO, que é o que sobe mais: o
     `Á` de «TEMÁTICAS» ficava a 2px do bordo. Com `.08em` a 89px são
     7,1px a mais de cada lado e o acento passa a ter 9.
     O preço é o campo subir 7,1 na direcção da perna do `g` da linha
     de cima — e é por isso que isto vem junto com a entrelinha de
     110: os 8 que ela desce pagam os 7,1 que este sobe. <<< */
  padding-block:.08em;
}

#embrulho .caixa-cabeca .caixa-titulo{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:var(--cu-goteira);
}

#embrulho .caixa-cabeca .caixa-titulo > *{ margin:0 }

#embrulho .caixa-cabeca .subtitulo,
#embrulho .caixa-cabeca .subtitulo .subtitulo-link{
  font-family:var(--cu-display);
  font-weight:700;
  font-style:italic;
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  letter-spacing:normal;
  text-transform:none;
  color:var(--cu-tinta);
}

#embrulho .caixa-cabeca .subtitulo{ margin-top:var(--cu-base) }

/* >>> DUAS LINHAS E A CAIXA MEDIA 102: são dois `h3` em bloco com um
   nó de texto `>` solto pelo meio. A `.caixa-links` passa a flex e os
   três alinham-se — num contentor de flex um nó de texto solto vira
   item anónimo, por isso o `gap` chega e não é preciso mexer no
   markup. O `>` fica a sangue em mono, como os outros sinais. <<< */
#embrulho .caixa-cabeca .caixa-links{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  column-gap:var(--cu-junta);
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  color:var(--cu-sangue);
}

#embrulho .caixa-cabeca .pretitulo,
#embrulho .caixa-cabeca .antetitulo,
#embrulho .caixa-cabeca .pretitulo a,
#embrulho .caixa-cabeca .antetitulo a{
  font-family:var(--cu-caps);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cu-tinta);
}

/* o cabeçalho fica sozinho na primeira linha, e recupera por margem
   os 89 que o `row-gap:8` das barras lhe tirou */
#embrulho .todas-sessoes .caixa-cabeca{
  grid-column:span 6;
  /* >>> O VAZIO ATÉ À PRIMEIRA BARRA DESCE A UM 34 — 14 Set, e em todas
     as larguras. A conta já estava certa e fica: o `row-gap` da lista
     soma-se à margem, e por isso a margem é o degrau MENOS a meia base.
     Medido antes: `--cu-linha` de 89 dava 81 + 8 = 89 visíveis.
     Agora 26 + 8 = 34. Pedro tinha razão em chamar-lhe dois espaços
     somados — é literalmente isso, e é por isso que a conta existe. <<< */
  margin-bottom:calc(var(--cu-base) - var(--cu-meia));
}

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-cabeca{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    column-gap:var(--cu-goteira);
    row-gap:0;
    align-items:start;
  }
  #embrulho .todas-sessoes .caixa-cabeca > .caixa-links{
    grid-column-start:1;
    grid-column-end:span 6;
    grid-row-start:1;
  }
  #embrulho .todas-sessoes .caixa-cabeca > .sem-conteudo{ display:contents }
  #embrulho .todas-sessoes .caixa-cabeca .caixa-titulo{
    grid-column-start:1;
    grid-column-end:span 3;
    grid-row-start:2;
    min-width:0;
  }
  #embrulho .todas-sessoes .caixa-cabeca > .caixa-conteudo{
    grid-column-start:4;
    grid-column-end:span 3;
    grid-row-start:2;
    min-width:0;
  }
}

/* >>> O 89 SÓ A PARTIR DE 1000 — 12 Set, decisão do Pedro, e usa o
   o corte do cabeçalho. Estava no corte da GRELHA, a 760, e entre 760 e 999
   o título a 89/110 numa meia coluna tapava o parágrafo ao lado: o
   sintoma dos 116px de cada linha que o Hermes reportou.

   De 760 a 999 o título fica no 55/55 que tem por omissão, que é o
   mesmo de abaixo do corte. É o terceiro sítio onde os dois cortes
   desta folha querem dizer coisas diferentes, e é por isso que têm
   nome. <<< */
@media (width >= 1040px){
  #embrulho .todas-sessoes .titulo .titulo-link,
  #embrulho .todas-sessoes .titulo h1{
    font-size:var(--t-gr);
    /* >>> 89/110 desde 12 Set. Eram 102 — três linhas da base — e a
       medição diz porque não chegavam: com o campo a 102 o acento do
       `Á` de «TEMÁTICAS» ficava a **2px** do bordo de cima do campo e
       lia-se como se lhe tocasse. Os 8 a mais são o `--cu-meia`, que
       é o mesmo passo que separa as barras. <<< */
    line-height:calc(3 * var(--cu-base) + var(--cu-meia));
  }
  #embrulho .caixa-cabeca .subtitulo,
  #embrulho .caixa-cabeca .subtitulo .subtitulo-link{
    font-size:var(--t-med);
    line-height:var(--l-med);
  }
}

/* o que separa a sinopse do que vem acima: meia base menos um */
/* >>> O 34 MUDA DE DONO — 12 Set. Estava na sinopse como
   `padding-top` e ficava lá mesmo quando não havia presença nenhuma
   por cima: a sinopse começava 34 abaixo do topo da fotografia em 18
   dos 42 cartões. Passa a `margin-bottom` da PRESENÇA, que é quem o
   precisa. Sem presença, não há margem, e a sinopse alinha pelo topo
   da imagem. É a mesma lição do `.convidado` do cartão — em flex e em
   grelha não há colapso de margens, portanto o espaço tem de viver no
   elemento que pode não existir. <<< */
#embrulho .caixa-sessao .sessao-sinopse{ padding-top:0 }

#embrulho .todas-sessoes .caixa-sessao .cu-dentro .convidado{
  margin-bottom:var(--cu-base);
}

/* os links de serviço do cartão — IMDb, trailer, PDF — a sangue */
/* >>> O `.ficha-links` ESTÁ VAZIO nos 42 cartões — `<div
   class="ficha-links"></div>`, sem um filho — e o `a.imdb` é IRMÃO
   dele, não filho. O seletor `.ficha-links a` da v1 nunca casou com
   nada, e por isso os cinco links do IMDb nunca ficaram a sangue. Fica
   o `.ficha-links a` — custa nada e o dia em que o Twig lá puser
   alguma coisa já está escrito — e entra o `.imdb` ao lado. <<< */
#embrulho .caixa-sessao .ficha-links a,
#embrulho .caixa-sessao a.imdb,
#embrulho .caixa-sessao .fa-imdb{ color:var(--cu-sangue) }

/* ---------- o miolo do Sobre ---------- */

#body-wrapper .caixa-sobre > div > .cu-miolo p{
  font-size:inherit;
  line-height:inherit;
  color:var(--cu-tinta);
  margin:0;
}

#body-wrapper .caixa-sobre > div > .cu-miolo ul{
  list-style:none;
  margin:0;
  padding:0;
}

#body-wrapper .caixa-sobre > div > .cu-miolo h6{ margin:var(--cu-base) 0 0 }
#body-wrapper .caixa-sobre > div > .cu-miolo h6:first-child{ margin-top:0 }

/* ---------- o post ---------- */

/* o título e a data em coluna, a data por baixo */
#body-wrapper .post-titulo{
  display:flex;
  flex-direction:column;
  margin:0 0 var(--cu-base);
}

#body-wrapper .post-titulo h3{
  order:1;
  font-family:var(--cu-display);
  font-weight:700;
  font-size:var(--t-med);
  line-height:var(--l-med);
  letter-spacing:-.045em;
  text-transform:none;
  word-break:normal;
  color:var(--cu-tinta);
  margin:0;
}

#body-wrapper .post-titulo .post-data{ order:2 }

@media (width >= 760px){
  #body-wrapper .post-titulo h3{ font-size:var(--t-gr); line-height:var(--l-gr) }
}

#body-wrapper .caixa-post > .post-img{ margin:0 0 var(--cu-base) }

#body-wrapper .caixa-post .imagem-blog img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}

#body-wrapper #mod_blog .post-img img{ max-width:100%; height:auto }

#body-wrapper .post-conteudo{
  font-family:var(--cu-texto);
  font-weight:400;
  font-size:var(--t-corpo);
  line-height:var(--l-corpo);
  color:var(--cu-tinta);
  max-width:var(--cu-leitura);
  text-align:left;
}

#body-wrapper .post-conteudo p{ margin:0 0 var(--cu-base) }

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o que falta ao cartão de filme ---------- */

/* ordem dentro do cartão: imagem · data · etiquetas · título ·
   realizador · convidado · ficha. O `.sessao-info` é flex em coluna e
   cada filho leva um `order`; quando a barra o põe a
   `display:contents`, os mesmos `order` valem na grelha do cartão. */
#embrulho .caixa-sessao .sessao-info{ display:flex; flex-direction:column }
@media (width >= 760px){
  /* >>> ESTAS ORDENS SÃO DA RECEITA DE CINCO — decisão do Pedro, 14 Set:
     «são de lá». Em flex mandam tanto como na grelha, e abaixo do corte
     punham a data ANTES do título — medido, data a y102 e título a
     y137. Fechadas aqui, a pilha de baixo diz a sua. <<< */
  #embrulho .caixa-sessao .sessao-info > .data-local{ order:1 }
  #embrulho .caixa-sessao .sessao-info > .quando,
  #embrulho .caixa-sessao .sessao-info > .concerto,
  #embrulho .caixa-sessao .sessao-info > .tipo,
  #embrulho .caixa-sessao .sessao-info > .escolas,
  #embrulho .caixa-sessao .sessao-info > .publico,
  #embrulho .caixa-sessao .sessao-info > .extra,
  #embrulho .caixa-sessao .sessao-info > .oficina{ order:2 }
  #embrulho .caixa-sessao .sessao-info > h2{ order:3 }
  #embrulho .caixa-sessao .sessao-info > .director{ order:4 }
  #embrulho .caixa-sessao .sessao-info > .convidado{ order:5 }
}

/* AS ETIQUETAS — as catorze possíveis, todas iguais. Condensed 700 com
   o tracking largo dos antetítulos. */
#embrulho .caixa-sessao .quando,
#embrulho .caixa-sessao .masterclasse,
#embrulho .caixa-sessao .expo,
#embrulho .caixa-sessao .carta,
#embrulho .caixa-sessao .estreia,
#embrulho .caixa-sessao .antestreia,
#embrulho .caixa-sessao .encomenda,
#embrulho .caixa-sessao .especial,
#embrulho .caixa-sessao .tipo,
#embrulho .caixa-sessao .concerto,
#embrulho .caixa-sessao .escolas,
#embrulho .caixa-sessao .publico,
#embrulho .caixa-sessao .oficina,
#embrulho .caixa-sessao .extra{
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--cu-tinta);
  background:transparent;
}

/* >>> O 34 entre o realizador e o convidado vive no `margin-top` DO
   CONVIDADO e não no `margin-bottom` do realizador: em flex não há
   colapso de margens, e com o 34 no realizador os cartões SEM
   convidado somavam o dele ao da ficha e davam 68. <<< */
#embrulho .caixa-sessao .ficha-tecnica{ margin-top:var(--cu-base) }

/* o JS embrulha o que vem depois do género num `.ficha-resto` para a
   linha não partir a meio de uma rubrica — o mesmo padrão do
   `.cal-resto` do programa, e pela mesma razão exacta */
/* >>> E SAI, 18 Set, decisão do Pedro. O `nowrap` na linha inteira
   vinha de quando o título original e a ficha partilhavam uma linha:
   mantinha-os juntos, mas obrigava a ficha a caber toda ou a
   transbordar. Com o `.tor` em bloco a linha deixa de ser partilhada,
   e o resto — país, tipo, ano, duração, classificação — é texto e
   quebra como texto, onde couber.

   O `overflow-wrap` também volta a `normal`: o `anywhere` do `.por`
   existia para o «(Portugal/Grã-Bretanha,» caber à força, e partir uma
   palavra a meio é o que esta leva de regras anda a tirar da folha. Se
   não couber, quebra antes da palavra. <<< */
#embrulho .caixa-sessao .ficha-tecnica .ficha-resto{
  white-space:normal;
  overflow-wrap:normal;
}
#embrulho .caixa-sessao .ficha-tecnica .ficha-resto .por{ overflow-wrap:normal }

/* o título original em linha própria; o `nowrap` fica e é o que
   garante que ele não quebra por dentro mesmo sendo bloco */
#embrulho .caixa-sessao .ficha-tecnica .tor{ display:block }

#embrulho .caixa-sessao .sessao-img{ margin-bottom:var(--cu-curto); overflow:visible }

@media (width >= 760px){
  #embrulho .caixa-sessao .cu-dentro .sessao-img{ margin-bottom:0 }
}

/* O STILL DO MIOLO SEM FILTRO — 13 Set, decisão do Pedro. A regra é a
   mesma dos convidados e agora as duas listas dizem-no da mesma
   maneira: **a miniatura da barra é a preto e branco, a imagem grande
   ganha cor quando abre**. O cinzento vive só no `::before` da barra.

   Estava aqui `grayscale(1) contrast(1.12)`, que punha o still aberto
   a cinzento como a miniatura e tirava ao gesto de abrir a única coisa
   que ele dava a ver. O `:not(.cu-ascii)` fica: é dele que a troca
   precisa quando voltar. */
#embrulho .caixa-sessao .sessao-img img:not(.cu-ascii){
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  margin-left:0;
  filter:none;
}

/* ---------- o Sobre: o texto corrido ---------- */

/* O HERÓI NO LUGAR DO SENHOR LENTE — 13 Set. O `11` dentro do
   triângulo, a três linhas de altura. Sai o `svg#senhorlente`, que o
   `custom-2026.js` remove, e entra um clone do `.marca-11` da barra.

   >>> O SELETOR É DESCENDENTE E NÃO FILHO, de propósito: o JS mete a
   `.caixa-logo` DENTRO do `.sobre` para o texto a contornar. Um
   `column-count` estabelece contexto de formatação próprio e um
   flutuante de fora nunca o atravessa — era por isso que o senhor
   lente nunca embrulhou, e está escrito para não se voltar a tentar
   pelo lado de fora. <<< */
#body-wrapper .caixa-sobre .caixa-logo{ margin:0 0 var(--cu-base) }

/* >>> O PAR DE COR — medido, e nenhuma das duas propostas serve:
     herói sangue + triângulo papel   o triângulo é papel sobre osso,
                                      1,20: não se vê
     herói tinta  + triângulo sangue  tinta sobre sangue é 2,10, o par
                                      proibido da paleta
   O que serve é o que o herói JÁ TEM, e por isso não leva regra
   nenhuma: dígitos a OSSO dentro de triângulo a TINTA. Sobre um corpo
   de osso dá 12,82 nos dois sentidos — o triângulo recorta-se do
   fundo e os dígitos lêem-se como buracos nele, que é o desenho.
   A alternativa legal, se o Pedro a quiser, é um token: triângulo
   sangue com dígitos papel — 6,12 e 7,32. <<< */
/* TRÊS LINHAS DE ALTURA — e o número é do TRIÂNGULO, que é o desenho,
   não da caixa. O `--cu-marca` mede o lettering `CLOSEUP`; o triângulo
   sai dele por duas multiplicações que já estavam escritas:
     caixa do herói   marca × 1,404494
     triângulo        caixa × 0,95235   →  marca × 1,337653
   Para o triângulo dar 102 — três linhas de 34 — a marca é
   102 × 0,747577 = 76,25, e 0,747577 é o inverso de 1,337653.
   Multiplicação e não divisão: uma barra em posição de valor é uma
   divisão para o gulp-sass do servidor. */
#body-wrapper .caixa-sobre .caixa-logo .marca-11{
  --cu-marca:calc(3 * var(--cu-base) * var(--cu-triangulo-heroi));
  /* >>> EXCEPÇÃO NOMEADA — decisão do Pedro, 13 Set. É a segunda da
     folha, depois de o activo do painel ter saído, e fica escrita
     aqui para não ser lida como esquecimento.

       dentro do triângulo    papel / tinta   15,34
       fora dele, 17,6% do ink   papel / osso    1,20   ← deliberado

     Os dígitos passam a papel. A parte deles que cai FORA do triângulo
     assenta no corpo de osso e desaparece: 1,20 não é contraste de
     texto nenhum. É o efeito pedido — **logótipo, não texto; o canto
     a fundir-se com o fundo é o desenho**, e um logótipo não se lê,
     reconhece-se. A regra de contraste vale para texto e este `11` é
     decorativo: leva `aria-hidden` desde o cabeçalho, e o nome da
     marca é lido no `aria-label` do `CLOSEUP` ao lado. <<< */
  color:var(--cu-papel);
}

/* o 34 que separa o texto do primeiro acordeão. É espaço só, e é o
   MESMO que o programa usa entre a última barra de dia e o iCal. */
#body-wrapper .caixa-sobre > .sobre{
  padding-bottom:var(--cu-base);
  margin-bottom:0;
}

/* >>> AS ESCOLAS ESTAVAM DUAS VEZES, e agora só se vê uma. O
   `.parceiros` já traz no markup um `ul.lista-escolas` com ONZE
   escolas; o `div.escolas` que o `envolverSobre()` move para lá é uma
   segunda cópia com DEZ — falta-lhe uma. Antes quem escondia a
   segunda era o legado.
   Esconde-se a que o JS move, que é a incompleta.
   >>> A DUPLICAÇÃO É CONTEÚDO, e é a questão 26: quando o Pedro
   apagar a lista dos dez no `.md`, este `display:none` fica sem alvo e
   pode sair. <<< */
#body-wrapper .caixa-sobre > div > .cu-miolo .escolas{
  display:none;
}

@media (width >= 760px){
  #body-wrapper .caixa-sobre > .sobre{
    column-count:2;
    column-gap:var(--cu-goteira);
  }
  #body-wrapper .caixa-sobre .caixa-logo{
    float:left;
    margin:0 var(--cu-goteira-cab) var(--cu-goteira-cab) 0;
  }
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* ---------- a troca ASCII — ADORMECIDA ---------- */

/* >>> 13 SET: ESTE BLOCO NÃO CORRE. O `custom-2026.js` deixou de armar
   a troca — não há `.cu-troca` nem `.cu-ascii` em página nenhuma — e
   as regras ficam aqui, intactas, à espera da decisão sobre o
   tratamento das imagens. Religar é repor uma linha no `arrancar()`.

   O que se segue é o que a prova encontrou, e fica escrito porque é
   por causa disto que a troca vai voltar diferente. <<< */

/* >>> A ÚNICA diferença de comportamento entre a
   v1 e a v2, e não a escrevi de propósito: apareceu na prova.

   NA V1 A TROCA NÃO SE VÊ. Medido, com o `.cu-on` posto à mão e as
   transições desligadas:

     v1    ascii 0 · fotografia 0    — as duas invisíveis
     v2    ascii 1 · fotografia 0    — a troca faz-se

   A causa é uma regra que a v1 tem e que ninguém relacionou com isto:

     #embrulho .caixa-sessao .sessao-img img.cu-ascii{ opacity:0 }   (1,3,1)
     .sessao-img.cu-troca.cu-on .cu-ascii{ opacity:1 }               (0,4,0)

   (1,3,1) ganha a (0,4,0) — um id vale mais do que quatro classes — e
   a imagem de letras fica a zero SEMPRE. É a mesma regra cujo
   comentário ficou no meio da lista de seletores, assinalada em
   `consolidacao-bloqueada.md` e nunca ligada a este efeito.

   Na v2 estas regras vivem em `@layer movimento`, a última camada, e
   ganham sem depender de contar especificidades. Foi assim que o
   defeito se revelou.

   Para a v2 repetir a v1 ao pixel basta acrescentar aqui
   `#embrulho .caixa-sessao .sessao-img img.cu-ascii{ opacity:0 }` —
   uma linha. Não a escrevi: escrever uma regra cujo único efeito é
   apagar uma funcionalidade é decisão do Pedro, não minha. <<< */

/* O still tem uma segunda imagem por cima, feita de caracteres, e a
   troca é um cruzamento de opacidade. Não é hover puro: o `.cu-on` é
   posto pelo JS para o toque funcionar em ecrãs sem rato, e o bloco
   de `hover` fica dentro de `@media (hover:hover)` para os
   telemóveis não ficarem presos no estado trocado. */
.sessao-img.cu-troca{ position:relative; cursor:pointer }

.sessao-img.cu-troca .cu-ascii{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:100%;
  margin-left:0;
  object-fit:cover;
  opacity:0;
  transition:opacity var(--cu-tempo-entrada) ease;
  filter:none;
  pointer-events:none;
}

.sessao-img.cu-troca img:not(.cu-ascii){ transition:opacity var(--cu-tempo-entrada) ease, filter var(--cu-tempo-entrada) ease }

.sessao-img.cu-troca.cu-on img:not(.cu-ascii){ opacity:0; filter:grayscale(1) }
.sessao-img.cu-troca.cu-on .cu-ascii{ opacity:1 }

@media (hover:hover){
  .sessao-img.cu-troca:hover img:not(.cu-ascii){ opacity:0; filter:grayscale(1) }
  .sessao-img.cu-troca:hover .cu-ascii{ opacity:1 }
}

@media (prefers-reduced-motion:reduce){
  .sessao-img.cu-troca .cu-ascii,
  .sessao-img.cu-troca img{ transition:none }
}

}

/* ====================================================================
   REPOSIÇÃO — fora de camada, e é preciso
   ====================================================================
   >>> ISTO NÃO EXISTE NA V1, e é a única coisa que a v2 tem a mais.
   A razão é a regra que define as camadas: **uma declaração em camada
   perde sempre para uma declaração sem camada**, por mais específica
   que seja. Não é ordem nem especificidade — é origem.

   O Font Awesome Pro entra por `<link>`, não passa por nós, e não
   tem camada. O `.fa,.fas,.far,.fab` dele traz `line-height:1`. Na v1
   o nosso `#footer #rodape i` — (2,0,1) — ganhava-lhe à vontade. Na
   v2 perde, e os doze ícones do rodapé passam de 34 para 18px de
   entrelinha. Medido nas dez rotas.

   Pôr o FA numa camada obrigava a trocá-lo por um `@import
   layer(vendor)` — mais uma ida à rede a bloquear o render, e uma
   linha de Twig que o prompt não pediu. Fica isto: as declarações que
   têm de ganhar a folhas sem camada vivem fora de camada também, e
   são estas. Se um dia o FA sair, esta secção sai com ele. <<< */
#footer #rodape i{ line-height:var(--l-peq) }

/* >>> E OS DOIS ÍCONES QUE SAÍRAM DOS SINAIS — o calendário do iCal e
   a seta de subir — têm de ser escondidos daqui, pela mesma razão: o
   `.far`/`.fas` do Font Awesome traz `display:inline-block` e vem sem
   camada. Um `display:none` em `paginas`, que é (1,2,1) e muito mais
   específico, perdia-lhe. Medido antes de mudar: `inline-block` e
   `block` em vez de `none`. <<< */
#body-wrapper .caixa-icals .extratitulo i,
#footer #rodape .topo a i{ display:none }

/* ---------------------------------------------------------------- */
@layer estados{

/* ---------- o realce ---------- */

/* A FAIXA VAI DE BORDO A BORDO, como o cabeçalho e o rodapé.

   `box-shadow` SEM DESFOQUE e com 100vw de espalhamento estende a cor
   para fora do ecrã; o `clip-path` corta em cima e em baixo e deixa
   passar aos lados. O bloco não se mexe e a grelha não sabe de nada —
   uma sombra não entra no fluxo nem cria transbordo, e foi por isso
   que se escolheu esta e não uma caixa a mais.

   >>> A CONDIÇÃO, MEDIDA ANTES DE ESCREVER: nenhum ascendente entre o
   bloco e a janela pode cortar no x, senão a sombra morre no bordo do
   contentor. Varridas as sete famílias, cadeia a cadeia até ao `html`
   — `#body-wrapper`, `#embrulho`, `.todos-*`, `.container`,
   `#page-wrapper`, `#start`, `body`: **`overflow-x:visible` em todos
   os 52 ascendentes.** O `container-type:inline-size` de três das
   listas implica contenção de layout, de estilo e de tamanho em
   linha — não de PINTURA — e por isso não corta. Não foi preciso
   `overflow-x:clip` em lado nenhum. <<<

   O repouso leva a sombra a ZERO e o corte já posto. As duas coisas
   são precisas: sem a sombra de partida a transição não tem de onde
   interpolar, e sem o corte em repouso o fecho pisca — ao sair o rato
   o `clip-path` cairia de uma vez enquanto a sombra ainda encolhe, e
   durante .15s via-se um rectângulo de papel do tamanho do ecrã. */
#body-wrapper .todas-seccoes .caixa-seccao .seccao,
#body-wrapper .todos-posts .caixa-post .post,
#body-wrapper .todos-dias .caixa-dia,
#embrulho .todos-convidados .caixa-convidado,
#embrulho .todas-sessoes .caixa-sessao,
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros,
#body-wrapper #mod_blog .caixa-post{
  background-color:transparent;
  /* >>> A SOMBRA NÃO CRESCE: existe sempre, à medida final, e o que
     transita é só a COR — transparente a papel. Antes ia de
     `spread:0` a `spread:100vw` e via-se a faixa a abrir a partir da
     barra, que é o «deslize» que a nota descreve. Com a geometria
     fixa não há nada a mover: a interpolação é de cor e mais nada.
     Medido a 40ms, como nos acordeões: a caixa da faixa não muda de
     tamanho em nenhuma amostra. <<< */
  box-shadow:0 0 0 100vw transparent;
  /* >>> DOIS VALORES E NÃO UM — 13 Set. Era `--cu-faixa` dos dois lados
     e a faixa subia até quase tocar a barra de cima. O de cima passa a
     ser o que sobra do intervalo, e o de baixo fica onde estava.
     Medido: o `row-gap` das listas é 8, portanto uma faixa que suba 16
     come o intervalo inteiro e mais 8 da barra anterior. <<< */
  clip-path:inset(calc(-1 * var(--cu-faixa-cima)) -100vw calc(-1 * var(--cu-faixa-baixo)));
}

/* >>> DUAS CAIXAS TRAZEM AR POR CIMA DA TINTA e por isso levam menos
   faixa: são linhas de 55 com texto de 34, e o que sobra acima das
   caps já conta. Medido: o dia tem 9px, o bloco do Sobre 11.
   16−9 = 7 e 16−5 = 11 — um valor por caixa, e é o preço de querer o
   mesmo ar dos dois lados em caixas que não são iguais. <<< */
#body-wrapper .todos-dias .caixa-dia{ --cu-faixa-baixo:7px }

#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros{ --cu-faixa-baixo:5px }

/* O PAPEL DEIXOU DE SER O FUNDO E PASSOU A SER O REALCE — 13 Set.
   Debaixo do rato, a barra acende: osso → papel, 1,20. É pouca
   diferença de luz e é o que se quer: o que tem de saltar é a linha,
   não a cor dela. O texto GANHA com a troca —

     em repouso    tinta/osso  12,82   ·  sangue/osso   6,12
     em realce     tinta/papel 15,34   ·  sangue/papel  7,32

   Os seletores são OS MESMOS que acendem o título a sangue, a dois
   blocos daqui: quem acende a cor acende o campo, e não há um gesto
   que faça uma coisa e não a outra. As paragens de teclado vêm juntas
   pela mesma razão. */
#body-wrapper .todas-seccoes .caixa-seccao:has(.seccao-link:focus-visible) .seccao,
#body-wrapper .todos-posts .caixa-post:has(a:focus-visible) .post,
#body-wrapper .todos-dias .caixa-dia:has(h3:focus-visible),
#embrulho .todos-convidados .caixa-convidado:has(h3:focus-visible),
#embrulho .todas-sessoes .caixa-sessao:has(h2:focus-visible),
#body-wrapper .caixa-sobre > div:has(h3:focus-visible),
#body-wrapper #mod_blog .caixa-post:has(a:focus-visible){
  background-color:var(--cu-papel);
  box-shadow:0 0 0 100vw var(--cu-papel);
}

/* ════════ ABERTO, O BLOCO VAI A PAPEL — 14 Set ══════════════════════
   Abaixo do corte não há rato, e o realce que o desktop dá em hover
   passa a ser dado pelo ESTADO. Fechado, osso; aberto, papel — barra e
   miolo, que são o mesmo cartão.

   >>> DE BORDO A BORDO, e é a mesma mecânica do hover: `background-color`
   mais `box-shadow:0 0 0 100vw`, uma sombra de 100vw de espessura que
   pinta até ao bordo do ecrã sem tocar no layout. Proposto assim por
   duas razões medidas: é o MESMO realce que o desktop dá — mesma cor,
   mesma geometria, só muda o gatilho — e à largura da barra o miolo
   ficava em osso enquanto a barra estava em papel, partindo em dois um
   cartão que é um só. A variante estreita está capturada ao lado, para
   comparar. <<< */
/* >>> CAPACIDADE, NÃO LARGURA — 17 Set. Esta regra existe porque não
   há rato, e «não há rato» não é uma largura: um tablet de 1024 com
   toque não tem hover e precisa dela tanto como um telemóvel de 360.
   `@media (hover:none)` diz o que a regra quer dizer; `width < 760` era
   uma aproximação que deixava o tablet de fora. <<< */
/* >>> E EM TODAS AS LARGURAS, COM O DIA LÁ DENTRO — 18 Set, decisão
   do Pedro. Era `@media (hover:none)` e o dia não estava na lista: os
   outros quatro iam a papel ao abrir e o dia ficava em osso, medido.
   Aberto é aberto, haja rato ou não; o hover continua a dar o mesmo
   realce a quem o tem, e as duas regras dizem o mesmo. <<< */
#body-wrapper .todas-seccoes .caixa-seccao.aberto .seccao,
#body-wrapper .todos-posts .caixa-post.aberto .post,
#body-wrapper .todos-dias .caixa-dia.aberto,
#embrulho .todos-convidados .caixa-convidado.aberto,
#embrulho .todas-sessoes .caixa-sessao.aberto,
#body-wrapper .caixa-sobre > .bilheteira.aberto,
#body-wrapper .caixa-sobre > .ficha.aberto,
#body-wrapper .caixa-sobre > .parceiros.aberto{
  background-color:var(--cu-papel);
  box-shadow:0 0 0 100vw var(--cu-papel);
}

@media (hover:hover){
#body-wrapper .todas-seccoes .caixa-seccao:hover .seccao,
#body-wrapper .todos-posts .caixa-post:hover .post,
#body-wrapper .todos-dias .caixa-dia:hover,
#embrulho .todos-convidados .caixa-convidado:hover,
#embrulho .todas-sessoes .caixa-sessao:hover,
#body-wrapper .caixa-sobre > .bilheteira:hover,
#body-wrapper .caixa-sobre > .ficha:hover,
#body-wrapper .caixa-sobre > .parceiros:hover,
#body-wrapper #mod_blog .caixa-post:hover{
  background-color:var(--cu-papel);
  box-shadow:0 0 0 100vw var(--cu-papel);
}

/* >>> O HOVER DAS SEIS NUMA REGRA — 13 Set, e é o que a classe
   desbloqueia: com `.cu-barra` posta nas seis, as três coisas que o
   realce faz na barra escrevem-se uma vez. As listas onde faltava uma
   delas passam a tê-la.

   >>> E A FAIXA NÃO ENTRA, e é decisão e não esquecimento: a faixa é do
   CARTÃO e não da barra. No programa, nos convidados e nos filmes ela
   cobre o cartão inteiro — inclusive o miolo aberto — e isso foi
   decidido a 12 Set, com o gatilho a passar do `h3` para a
   `.caixa-dia` precisamente para o rato no miolo a manter acesa. Pô-la
   em `.cu-barra:hover` encolhia-a à barra e desfazia essa decisão. Fica
   onde está, nos nove selectores acima. <<<

   Estas três somam-se aos gatilhos que já existem, não os substituem:
   uma lista que já acendia continua a acender pelo seu, e ganha o que
   lhe faltava por este. <<< */
.cu-barra:hover::before{ filter:grayscale(0) }

/* >>> E O DROSTE TAMBÉM — 13 Set. A cela do buraco é a única miniatura
   da folha que não acendia: é `::before` da GRELHA e não de um cartão,
   portanto nenhum dos gatilhos das listas lhe chegava. O gesto é o
   mesmo das 29 caras ao lado. <<< */
/* o hover é DELE, e não da grelha: passar o rato noutra cara já não o
   acende */
@media (hover:hover){
.cu-droste:hover{ filter:grayscale(0) }
}

.cu-barra:hover::after,
.cu-barra:hover > h3::after{
  transform:translateY(var(--cu-sinal-base)) scale(1.02);
  color:var(--cu-tinta);
}

/* >>> O TÍTULO, NÃO O CONTENTOR DELE — 15 Set. No dia a `.cu-linha`
   vive DENTRO do `h3`, porque o `h3` é o botão; nas outras cinco a
   corrida é irmã do título. Pintar o `h3` pintava a corrida com ele, e
   o `.cu-uns` é `color:inherit` — medido, só no programa a corrida ia
   a sangue em hover, nas outras cinco ficava tinta. E o
   `transform:scale` escalava a corrida também.

   O `:not(:has(.cu-corrida))` diz a intenção: o realce é do TÍTULO, e
   um cabeçalho que carrega a linha inteira não é um título, é um
   contentor. O texto do dia continua a acender pelos `.dia-n` e
   `.dia-s`, que já estavam nesta lista. <<< */
.cu-barra:hover h1:not(:has(.cu-corrida)),
.cu-barra:hover h2:not(:has(.cu-corrida)),
.cu-barra:hover h3:not(:has(.cu-corrida)),
.cu-barra:hover .dia-n,
.cu-barra:hover .dia-s{
  color:var(--cu-sangue);
  transform:scale(1.02);
}
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* o realce acende à mesma velocidade a que o título muda de cor */
#body-wrapper .todas-seccoes .caixa-seccao .seccao,
#body-wrapper .todos-posts .caixa-post .post,
#body-wrapper .todos-dias .caixa-dia,
#embrulho .todos-convidados .caixa-convidado,
#embrulho .todas-sessoes .caixa-sessao,
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros,
#body-wrapper #mod_blog .caixa-post{
  transition:background-color var(--cu-tempo-acordeao) ease-in-out, box-shadow var(--cu-tempo-acordeao) ease-in-out, margin-bottom var(--cu-tempo-acordeao) ease-in-out;
}

/* >>> os três blocos do Sobre e o cartão de sessão já transicionam o
   `grid-template-rows`; aqui a declaração seria a segunda e apagava a
   primeira. Levam as duas na mesma linha.

   >>> E O CARTÃO DO DIA LEVOU A MESMA MORDIDA, por baixo do radar —
   18 Set. Ele é `.caixa-dia` e apanha a regra de cima pelo selector
   `#body-wrapper .todos-dias .caixa-dia`; medido, o computado dele
   dizia `background-color, box-shadow` e mais nada. Resultado: o dia
   NUNCA animou, nem a 360 nem a 1265 — abria de 0 a 548 num fotograma.
   Não era regressão do mobile: é esta declaração, desde que existe.
   Amostragem de 14 fotogramas: `abre 548→548 passos 1`. <<< */
#body-wrapper .todos-dias .caixa-dia{
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             background-color var(--cu-tempo-acordeao) ease-in-out, box-shadow var(--cu-tempo-acordeao) ease-in-out, margin-bottom var(--cu-tempo-acordeao) ease-in-out;
}
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros{
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out, background-color var(--cu-tempo-acordeao) ease-in-out, box-shadow var(--cu-tempo-acordeao) ease-in-out, margin-bottom var(--cu-tempo-acordeao) ease-in-out;
}

@media (prefers-reduced-motion:reduce){
  #body-wrapper .todas-seccoes .caixa-seccao .seccao,
  #body-wrapper .todos-posts .caixa-post .post,
  #body-wrapper .todos-dias .caixa-dia,
  #embrulho .todos-convidados .caixa-convidado,
  #embrulho .todas-sessoes .caixa-sessao,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros,
  #body-wrapper #mod_blog .caixa-post{ transition:none }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o cabeçalho, segunda leitura ---------- */

/* >>> SAI O «INÍCIO» — 13 Set. A marca já leva à home, e o primeiro
   item do menu dizia a mesma coisa duas vezes. Escondido por CSS e não
   por JS: é uma declaração contra uma função, e o `li` é
   `display:contents`, portanto leva consigo a corrida que lhe pertence
   — a que sobra redistribui-se pelos cinco, que é o que se quer.

   O preço, e fica dito: isto é posição, não é nome. Se o menu mudar de
   ordem no Twig, esconde o item errado. A alternativa era o JS
   procurar pelo texto «Início», que é frágil de outra maneira — muda
   com a língua. Fica o CSS, e fica o aviso. <<< */
.dropmenu ul li:first-child,
#overlay .overlay-menu li:first-child{ display:none }

/* >>> SAI O HERÓI DA BARRA. O `CLOSEUP` fica sozinho à esquerda; o
   `11` e o triângulo vão para o Sobre, onde têm tamanho para se ver.
   As regras do `.marca-11` NÃO saem da folha — é o mesmo desenho, no
   sítio novo, e é o `custom-2026.js` que lá o põe. <<< */
#header .navbar-brand .marca-11,
#overlay .mobile-logo .marca-11{ display:none }

}

/* ---------------------------------------------------------------- */
@layer estados{

/* ---------- o realce, segunda leitura ---------- */

/* A MINIATURA GANHA COR. Em repouso é cinzenta e faz parte do campo;
   debaixo do rato acende, e é o mesmo gesto da imagem grande quando o
   cartão abre — o cinzento é o estado fechado de tudo nesta folha. */
#body-wrapper .todas-seccoes .caixa-seccao:has(.seccao-link:focus-visible) .seccao::before,
#body-wrapper .todos-posts .caixa-post:has(a:focus-visible) .post::before,
#embrulho .todos-convidados .caixa-convidado:has(h3:focus-visible)::before,
#embrulho .todas-sessoes .caixa-sessao:has(h2:focus-visible)::before{
  filter:grayscale(0);
}

@media (hover:hover){
#body-wrapper .todas-seccoes .caixa-seccao:hover .seccao::before,
#body-wrapper .todos-posts .caixa-post:hover .post::before,
#embrulho .todos-convidados .caixa-convidado:hover::before,
#embrulho .todas-sessoes .caixa-sessao:hover::before{
  filter:grayscale(0);
}
}

/* O SINAL CRESCE E ESCURECE. `+`, `−`, `→` e o ícone do iCal: a mesma
   escala de 1,02 dos títulos, e sangue → tinta.
   >>> `transform` não se aplica a caixas inline não substituídas, e
   estes sinais só escalam porque são itens de grelha ou de flex — o do
   iCal e o do rodapé são `<i>` do Font Awesome, que vêm
   `display:inline-block`. Se algum dia deixarem de vir, a escala
   morre em silêncio. <<< */
@media (hover:hover){
#body-wrapper .todas-seccoes .caixa-seccao:hover .seccao::after,
#body-wrapper .todos-posts .caixa-post:hover .post::after,
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3::after,
#embrulho .todos-convidados .caixa-convidado:hover::after,
#embrulho .todas-sessoes .caixa-sessao:hover::after,
#body-wrapper .caixa-sobre > .bilheteira:hover::after,
#body-wrapper .caixa-sobre > .ficha:hover::after,
#body-wrapper .caixa-sobre > .parceiros:hover::after,
#body-wrapper .caixa-icals:hover > .extratitulo::after{
  /* >>> O DESCAÍDO VAI JUNTO COM A ESCALA, na mesma declaração: duas
     de `transform` no mesmo elemento não se somam, substituem-se. É a
     terceira vez que esta armadilha aparece nesta folha. <<< */
  transform:translateY(var(--cu-sinal-base)) scale(1.02);
  color:var(--cu-tinta);
}
}

/* >>> NOS CAMPOS DE SANGUE O SINAL ACENDE A PAPEL e não a tinta:
   tinta sobre sangue é 2,10, o par proibido da paleta. É a mesma
   troca que o menu e o painel já fazem com os rótulos. <<< */
@media (hover:hover){
#footer #rodape .caixa-info > div:not(.topo):hover::after,
#footer #rodape .topo a:hover::after{
  transform:translateY(var(--cu-sinal-base)) scale(1.02);
  color:var(--cu-papel);
}
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* a miniatura e o sinal acendem ao mesmo tempo que o campo */
#body-wrapper .todas-seccoes .caixa-seccao .seccao::before,
#body-wrapper .todos-posts .caixa-post .post::before,
#embrulho .todos-convidados .caixa-convidado::before,
#embrulho .todas-sessoes .caixa-sessao::before{
  transition:filter var(--cu-tempo) ease;
}

#body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
#body-wrapper .todos-posts .caixa-post .post::after,
#body-wrapper .todos-dias .nome-dia h3::after,
#embrulho .todos-convidados .caixa-convidado::after,
#embrulho .todas-sessoes .caixa-sessao::after,
#body-wrapper .caixa-sobre > div::after,
#body-wrapper .caixa-icals > .extratitulo::after,
#footer #rodape .caixa-info > div:not(.topo)::after,
#footer #rodape .topo a::after{
  transition:color var(--cu-tempo) ease, transform var(--cu-tempo) ease;
}

@media (prefers-reduced-motion:reduce){
  #body-wrapper .todas-seccoes .caixa-seccao .seccao::before,
  #body-wrapper .todos-posts .caixa-post .post::before,
  #embrulho .todos-convidados .caixa-convidado::before,
  #embrulho .todas-sessoes .caixa-sessao::before,
  #body-wrapper .todas-seccoes .caixa-seccao .seccao::after,
  #body-wrapper .todos-posts .caixa-post .post::after,
  #body-wrapper .todos-dias .nome-dia h3::after,
  #embrulho .todos-convidados .caixa-convidado::after,
  #embrulho .todas-sessoes .caixa-sessao::after,
  #body-wrapper .caixa-sobre > div::after,
  #body-wrapper .caixa-icals > .extratitulo::after,
  #footer #rodape .caixa-info > div:not(.topo)::after,
  #footer #rodape .topo a::after{ transition:none }

  @media (hover:hover){
#body-wrapper .todas-seccoes .caixa-seccao:hover .seccao::after,
#body-wrapper .todos-posts .caixa-post:hover .post::after,
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3::after,
#embrulho .todos-convidados .caixa-convidado:hover::after,
#embrulho .todas-sessoes .caixa-sessao:hover::after,
#body-wrapper .caixa-sobre > div:hover::after,
#body-wrapper .caixa-icals:hover > .extratitulo::after,
#footer #rodape .caixa-info > div:not(.topo):hover::after,
#footer #rodape .topo a:hover::after{ transform:none }
}
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- a home, terceira leitura ---------- */

/* >>> O ESPAÇO DEBAIXO DO BLOG ERAM DOIS, e o segundo vinha de fora:
   a regra `#body-wrapper .caixa-post > .post-img{ margin:0 0 34 }` é
   da PÁGINA de post, onde a imagem tem texto por baixo. No módulo da
   home não tem — tem a placa por cima — e aqueles 34 somavam-se aos 55
   do módulo seguinte: 89 entre a imagem e o título do programa, que é
   o que se lia como duas linhas.
   Fica só o 55 de cima, como em todos os outros módulos. <<< */
#body-wrapper #mod_blog .caixa-post > .post-img{ margin-bottom:0 }

/* ---------- o programa, segunda leitura ---------- */

/* A SALA NÃO É HORA. Passa a tinta 400, como nas secções — o S8 fica
   só na hora e na data, que são os dados que mudam de sessão para
   sessão. */
#body-wrapper .todos-dias .hora-local .sala{ color:var(--cu-tinta) }

/* O ICAL COMO AS OUTRAS BARRAS: rótulo, corrida, sinal.
   >>> A descrição longa sai da vista — é o `h5.ical-extra`, o «segundo
   h5» da nota. NÃO é o texto «iCal»: esse é um nó de texto solto no
   `h6.extratitulo` e sai pelo JS. São duas coisas e estão as duas
   escondidas. A descrição é CONTEÚDO e esta linha põe-na de volta. <<< */
#body-wrapper .caixa-icals .ical-extra{ display:none }

/* >>> OS QUATRO AVISOS, VESTIDOS — 12 Set. O plugin
   `markdown-notices` trazia uma folha de Bootstrap com cinco cores de
   fora da paleta, e vinha SEM CAMADA: ganhava a todas as regras em
   camada desta folha, como o Font Awesome. Sai por config —
   `built_in_css: false` — e as caixas vestem-se aqui.

   >>> AS CLASSES SÃO AS QUE O PLUGIN GERA e não as que o prompt nomeia.
   Lido no `markdown-notices.yaml`: `level_classes: [yellow, red, blue,
   green]`. O mapa, para quem escrever os `.md`:

     >     `yellow`   aviso
     >>    `red`      erro
     >>>   `blue`     informação
     >>>>  `green`    nota

   Quatro caixas, uma escala: o filete de 10px do plugin passa a 5, que
   é o `--cu-goteira-filete` e é a espessura de filete desta folha. O
   texto é tinta sobre papel — 15,34 medido — e o que muda de aviso para
   aviso é a cor do filete. O erro é o único com campo próprio. <<< */
#body-wrapper .notices{
  margin-block:var(--cu-base);
  padding:var(--cu-curto) var(--cu-base);
  border-left:var(--cu-goteira-filete) solid var(--cu-tinta);
  background:var(--cu-papel);
  font-family:var(--cu-display);
  font-weight:400;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  color:var(--cu-tinta);
}

#body-wrapper .notices > :first-child{ margin-top:0 }
#body-wrapper .notices > :last-child{ margin-bottom:0 }

/* o erro: campo sangue, texto papel — 7,32 */
#body-wrapper .notices.red{
  border-left-color:var(--cu-tinta);
  background:var(--cu-sangue);
  color:var(--cu-papel);
}

#body-wrapper .notices.red a{ color:var(--cu-papel) }

/* a informação: filete tinta, campo papel */
#body-wrapper .notices.blue{ border-left-color:var(--cu-tinta) }

/* o aviso: filete sangue, campo papel */
#body-wrapper .notices.yellow{ border-left-color:var(--cu-sangue) }

/* a nota é a mais fraca: campo osso, sem recorte contra o corpo */
#body-wrapper .notices.green{
  border-left-color:var(--cu-tinta);
  background:var(--cu-osso);
}

/* o ícone é o sinal desta barra, e os sinais são a sangue */

/* >>> E A `↑` PASSA A SVG, como os outros quatro sinais — 18 Set.
   Ficou glifo por não estar na tabela do `armarSinais()`, e não por
   decisão: é o mesmo desenho da `→` rodado 90°, no mesmo `viewBox`
   de 34 centrado em (17,17) e na mesma caixa de 34 × altura da linha.
   O `content` do pseudo sai com ele. No rodapé o sinal é osso e não
   sangue, que é o fundo em que vive. <<< */
/* >>> E OS QUATRO SINAIS DO RODAPÉ SÃO OSSO, não só o de cima. Medido:
   `topo rgb(231,224,209)` e os três das listas `rgb(156,30,23)` — o
   sangue do `.cu-sinal` genérico, que é a cor certa em campo de papel e
   a errada em campo de sangue. A regra da `↑` estende-se aos quatro. */
#footer #rodape .cu-sinal{
  color:var(--cu-osso);
}

/* >>> E O GLIFO DOS TRÊS SAI. Medido: `div::after` dava `"+"` nas três
   listas, POR CIMA do `.cu-sinal` que o `armarSinais()` lá pôs a 17
   Set — dois sinais por linha, um desenhado e outro em texto. O
   `content` do pseudo é o que sobrou da forma antiga; o sinal é
   elemento desde então. <<< */
#footer #rodape .caixa-info > div:not(.topo)::after{ content:none }

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o cabeçalho de secção: o texto colapsa ---------- */

/* >>> A ALTURA FECHADA NÃO É UM NÚMERO, e é o que salva isto de ter
   um token por secção: o miolo sai do fluxo com `position:absolute` e
   a linha da grelha passa a ser medida SÓ pelo título ao lado. Cada
   secção fecha na sua própria altura. Medidas as sete: os títulos vão
   de 234 a 454px e os textos de 238 a 1428 — um número fixo servia a
   uma e cortava mal as outras seis. <<<

   Só acima do corte: abaixo de 760 o cabeçalho não é de duas colunas,
   o texto vem por baixo e não há altura de título para igualar. */
/* >>> O CORTE PASSA A SER DE LINHAS INTEIRAS — 12 Set. Era uma altura
   fixa herdada do título ao lado, e cortava a meio de uma linha. O
   `-webkit-line-clamp` corta no fim da última linha que cabe e põe
   reticências.

   Medido em Firefox 153 com uma sonda: `@supports (-webkit-line-clamp)`
   e `@supports (display:-webkit-box)` dizem **sim** — e o render
   confirma-o, três linhas de 34 exactas e o `…` no fim. O Chromium
   idem. É a única propriedade `-webkit-` da folha, e entra por ser a
   única que faz isto.

   >>> O **N = 9** é proposta e assinala-se: os sete títulos medem de
   234 a 454px, que a 34 de entrelinha dão de 6,9 a 13,4 linhas. Nove
   é o da maioria — três das sete secções têm o título a 323, que dá
   9,5. Com N=9 o texto mede 306 e fica 17px abaixo desses títulos. <<< */
/* >>> O CORTE VALE EM TODAS AS LARGURAS — 12 Set. Estava dentro de
   `width >= 760px`, e abaixo do corte o texto saía inteiro: medido, o
   cabeçalho da secção com **1 649px** a 600 antes do primeiro filme, e
   o `+` escondido por uma regra a seguir. A página abria com uma
   parede de texto e nenhum modo de a fechar.

   >>> O **N abaixo do corte é 5**, e é proposta: a 375 a coluna do
   texto tem 326px e uma linha de 34 leva ~40 caracteres, portanto cinco
   linhas são 170px de altura — o mesmo peso relativo que as nove têm a
   1265, onde a coluna mede 541. Acima do corte fica nas 9. <<< */
#embrulho .todas-sessoes .caixa-cabeca > .caixa-conteudo{
  position:relative;
  min-height:0;
}

/* ════════ E O TEXTO DA SECÇÃO ENTRA NA RECEITA ÚNICA — 18 Set ══════
   Era o último colapso da folha com mecânica própria: o `line-clamp`
   entrava e saía num fotograma e não animava nada. Medido antes:
   `abre →1972 em 0ms, 1 passo, salto 1768` a 360.

   >>> A CAIXA NÃO COLAPSA A ZERO, COLAPSA A CINCO LINHAS, e a receita
   serve na mesma: o `0fr → 1fr` fica como está e o piso das N linhas
   vem do `min-height` do `.cu-dentro`. Um item de grelha nunca mede
   menos do que o seu `min-height`, portanto a pista a `0fr` para nos
   170 (5 × 34) e a `1fr` vai ao conteúdo todo. É o mesmo par de
   valores dos outros cinco acordeões.

   >>> E O CLAMP TEM DE CHEGAR ATRASADO, senão o fecho não existe: ele
   volta com a classe, encurta o conteúdo no instante zero, e o `1fr`
   passa a resolver contra 170 — não sobra nada para animar. Medido com
   o clamp instantâneo: `fecha em 149ms` a 360 e `115ms` a 1265, contra
   500 a abrir.

   O `-webkit-line-clamp` não é animável, mas uma propriedade
   personalizada REGISTADA é: `--cu-clamp` declarada com `@property` e
   sintaxe `<integer>` transita discretamente, e um `0s` com atraso faz
   o salto no FIM — o mesmo padrão do `visibility`. O clamp fica só
   para as reticências; quem manda na altura é a caixa.

   O que NÃO entra desta receita: o `opacity` e o `visibility`. Nos
   outros cinco o fechado é invisível; aqui o fechado são cinco linhas
   que se leem. <<< */
@property --cu-clamp{ syntax:"<integer>"; inherits:true; initial-value:5 }

#embrulho .todas-sessoes .caixa-conteudo{
  --cu-clamp:5;
  transition:--cu-clamp 0s var(--cu-tempo-acordeao);
}
#embrulho .todas-sessoes .caixa-conteudo.aberto{
  --cu-clamp:9999;
  transition:--cu-clamp 0s;
}

#embrulho .todas-sessoes .caixa-conteudo .com-conteudo{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--cu-clamp);
  overflow:hidden;
}

#embrulho .todas-sessoes .caixa-conteudo > .cu-miolo{
  display:grid;
  grid-template-rows:0fr;
  height:auto;
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out;
}
#embrulho .todas-sessoes .caixa-conteudo.aberto > .cu-miolo{ grid-template-rows:1fr }
#embrulho .todas-sessoes .caixa-conteudo > .cu-miolo > .cu-dentro{
  min-height:calc(5 * var(--cu-base));
  min-width:0;
  overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  #embrulho .todas-sessoes .caixa-conteudo,
  #embrulho .todas-sessoes .caixa-conteudo.aberto,
  #embrulho .todas-sessoes .caixa-conteudo > .cu-miolo{ transition:none }
}

@media (width >= 760px){
  #embrulho .todas-sessoes .caixa-conteudo{ --cu-clamp:9 }
  #embrulho .todas-sessoes .caixa-conteudo > .cu-miolo > .cu-dentro{
    min-height:calc(9 * var(--cu-base));
  }
}

/* O SINAL — o mesmo `+` das outras barras, em botão a sério.
   >>> EM LINHA PRÓPRIA, e não por cima do texto — 12 Set, à noite. Era
   `position:absolute` no canto de baixo à direita, e isso punha-o em
   cima da última letra do texto cortado: a mancha do `+` a 45,9 sobre
   uma linha de 34 não tem para onde ir. Sai do posicionamento absoluto
   e passa a bloco em fluxo, com o `margin-left:auto` a atirá-lo para o
   bordo direito. Ganha uma linha só para ele, e o texto acaba onde
   acaba.

   O `line-height` sobe de 34 a 55 pela mesma razão: a mancha do sinal
   mede 45,9 e numa linha de 34 transbordava para cima e para baixo. <<< */
#embrulho .todas-sessoes .caixa-conteudo .cu-mais{
  display:block;
  margin-left:auto;
  appearance:none;
  border:0;
  padding:0;
  background:transparent;
  font-family:var(--cu-dados);
  font-weight:400;
  font-size:var(--cu-sinal);
  line-height:var(--l-med);
  color:var(--cu-sangue);
  cursor:pointer;
}

#embrulho .todas-sessoes .caixa-conteudo .cu-mais::after{ content:"+" }

/* abaixo do corte não há nada a abrir: o texto já está todo */
/* >>> E O `+` DEIXA DE SE ESCONDER ABAIXO DO CORTE. Escondia-se porque
   «abaixo do corte não há nada a abrir: o texto já está todo» — e era
   verdade enquanto o corte de linhas só valia acima. Agora vale nas
   duas, portanto o botão também. <<< */

}

/* ---------------------------------------------------------------- */
@layer estados{

#embrulho .todas-sessoes .caixa-conteudo.aberto .cu-mais::after{ content:"\2212" }

#embrulho .todas-sessoes .caixa-conteudo .cu-mais:focus-visible{
  color:var(--cu-tinta);
  transform:scale(1.02);
}

@media (hover:hover){
#embrulho .todas-sessoes .caixa-conteudo .cu-mais:hover{
  color:var(--cu-tinta);
  transform:scale(1.02);
}
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

#embrulho .todas-sessoes .caixa-conteudo .cu-mais{
  transition:color var(--cu-tempo) ease, transform var(--cu-tempo) ease;
}

@media (prefers-reduced-motion:reduce){
  #embrulho .todas-sessoes .caixa-conteudo .cu-mais{ transition:none }
  @media (hover:hover){
#embrulho .todas-sessoes .caixa-conteudo .cu-mais:hover{ transform:none }
}
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- a placa do post: um componente, dois sítios ---------- */

/* O módulo da home e a página de post passam a ser a MESMA coisa:
   imagem 16:9 à largura da coluna, placa a sangue no canto de baixo à
   esquerda com metade da largura, título e data a papel.
   O que muda entre os dois é só o markup — na home a placa já nasce
   dentro do bloco da imagem, no post é o JS que a lá mete. */
#body-wrapper .caixa-post > .post-img{ position:relative }

#body-wrapper .caixa-post .imagem-blog img{
  aspect-ratio:1.777778;
  object-fit:cover;
}

#body-wrapper #mod_blog .caixa-post .mod-post,
#body-wrapper .caixa-post > .post-img > .post-titulo{
  position:static;
  width:auto;
  min-width:0;
  padding:var(--cu-goteira-cab);
  background:var(--cu-sangue);
  color:var(--cu-papel);
  margin:0;
}

@media (width >= 760px){
  #body-wrapper #mod_blog .caixa-post .mod-post,
  #body-wrapper .caixa-post > .post-img > .post-titulo{
    position:absolute;
    left:0;
    bottom:0;
    width:50%;
  }
}

/* o título desce de 89 para 34/55: o 89 não cabe em metade da largura */
#body-wrapper .caixa-post > .post-img > .post-titulo h3{
  font-size:var(--t-med);
  line-height:var(--l-med);
  color:var(--cu-papel);
}

@media (width >= 760px){
  #body-wrapper .caixa-post > .post-img > .post-titulo h3{
    font-size:var(--t-med);
    line-height:var(--l-med);
  }
}

/* a data em S8 a papel, por baixo do título */
#body-wrapper .caixa-post > .post-img > .post-titulo .post-data,
#body-wrapper .caixa-post > .post-img > .post-titulo .post-data h6{
  color:var(--cu-papel);
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- o programa, terceira leitura ---------- */

/* A BARRA DO DIA GANHA MINIATURA. É um filme do próprio dia, tirado ao
   calhas a cada carregamento — o `armarDiasImagem()` lê o
   `/livreto-seccoes.json`, casa os `#slug` dos títulos com o campo
   `imagem`, e escreve o URL no `--cu-retrato` desta barra. É o mesmo
   custom property das outras três listas.

   >>> 13 Set: O `.nome-dia` era flex de dois itens — a miniatura e o
   `h3`, que era outro flex por dentro. Passa à receita das seis, e o
   `h3` a `display:contents` sobe os filhos dele à grelha. O
   `align-items` continua a ser `stretch` e não `last baseline` como nas
   outras: aqui a primeira linha da grelha do cartão é FIXA a 55 —
   medida contra a oscilação da transição — e um alinhamento de base
   faria a barra pedir mais altura do que ela tem.

   >>> Por isso também NÃO leva a `--cu-perna`: não há folga nenhuma
   por baixo para a miniatura descer. É a única das seis sem ela, e é
   por a barra ser de altura fixa. <<< */
/* >>> E PASSA A ALINHAR PELA BASE — 13 Set. O `stretch` vinha de quando
   o `.nome-dia` era flex de dois itens, a miniatura e o `h3`, e um
   alinhamento de base fazia a barra pedir mais altura do que os 55
   fixos que a grelha do cartão espera. Com a barra na receita das seis
   a miniatura é item de grelha com altura declarada, e o `stretch`
   deixou de ser preciso — o que ele fazia agora era desalinhar a
   corrida em **17px** contra o título. Medido: 55 de altura antes e
   depois. <<< */
#body-wrapper .todos-dias .nome-dia{ align-items:last baseline }#body-wrapper .todos-dias .nome-dia::before{
  content:"";
  width:var(--cu-miniatura);
  height:var(--cu-miniatura);
  background-image:var(--cu-retrato);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  filter:grayscale(1);
}
@media (width < 760px){/* a miniatura sai: abaixo do corte o `::before` é o RISCO */
}

@media (width >= 760px){
  #body-wrapper .todos-dias .nome-dia::before{
    grid-column-start:1;
    grid-row-start:1;
  }
}

/* A SALA VAI PARA O FIM DA LINHA:
     15h30  Negócio à ITALIANA  de Vittorio De Sica (95')  PA
   O `.hora-local` vai a `display:contents` para a hora e a sala serem
   itens de flex directos da linha; a ordem faz o resto, e o markup
   fica como está. */
#body-wrapper .todos-dias .hora-local{ display:contents }
#body-wrapper .todos-dias .hora-local .sala{ order:9 }

/* O TÍTULO DO PROGRAMA GANHA A SERIFA. >>> Não é regressão da
   reescrita: a folha de Novembro também o deixava em Roboto — medido
   no `?pele=v1`. O `cortar()` sempre lhe pôs o `.mono`, mas a metade
   de cima nunca foi serifa. Agora é, como em todas as outras listas. <<< */
#body-wrapper .todos-dias .cal-ficha a.tit-filme{
  font-family:var(--cu-display);
  font-weight:700;
  letter-spacing:-.045em;
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* ---------- o realce, terceira leitura ---------- */

/* 8 · O CORTE INTEIRO A SANGUE. O `.mono` levava `color:var(--cu-tinta)`
   declarado — para o hover do programa o manter a tinta — e isso
   ganhava ao sangue que o pai herdava. Os dois vão juntos.
   Aqui em `estados`, que é a camada dos estados e ganha às duas de
   `componentes` e de `paginas` sem contar especificidades. */
@media (hover:hover){
#body-wrapper .todas-seccoes .caixa-seccao:hover h2.seccao-titulo .mono,
#body-wrapper .todos-posts .caixa-post:hover .blog-list-titulo h3 .mono,
#embrulho .todos-convidados .caixa-convidado:hover .nome-convidado h3 .mono,
#embrulho .todas-sessoes .caixa-sessao:hover h2 .mono,
#body-wrapper .caixa-sobre > div:hover > h3 .mono{
  color:var(--cu-sangue);
}
}

/* 9 · A MINIATURA VOLTA A PRETO E BRANCO QUANDO O CARTÃO ABRE. Com o
   miolo aberto, a fotografia grande é a única a cor — a miniatura
   volta a ser o que era fechada.
   >>> E AGORA SEM EXCEPÇÃO DE RATO — 12 Set, à noite. A regra de manhã
   deixava o hover devolver-lhe a cor com o cartão aberto, e isso punha
   duas fotografias a cor ao mesmo tempo: a miniatura e a grande. Com o
   cartão aberto o realce já foi dado; o que a miniatura tem a dizer
   está lá em baixo em tamanho grande. A regra que sai é a do
   `.aberto:hover`, e o que fica é uma só, mais simples. <<< */
#embrulho .todos-convidados .caixa-convidado.aberto::before,
#embrulho .todos-convidados .caixa-convidado.aberto:has(h3:focus-visible)::before,
#embrulho .todas-sessoes .caixa-sessao.aberto::before,
#embrulho .todas-sessoes .caixa-sessao.aberto:has(h2:focus-visible)::before{
  filter:grayscale(1);
}

@media (hover:hover){
#embrulho .todos-convidados .caixa-convidado.aberto:hover::before,
#embrulho .todas-sessoes .caixa-sessao.aberto:hover::before{
  filter:grayscale(1);
}
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ---------- a home: a composição de convidados ---------- */

/* 11 · A VAGA EM PRIMEIRO. São 29 caras numa grelha de seis: 30
   células, uma vaga. A vaga estava no fim; passa para o canto de cima
   à esquerda, e é uma declaração — o primeiro cartão começa na
   segunda coluna e todos os outros escorregam atrás dele.
   Sem markup e sem pseudo a ocupar célula: a colocação automática faz
   o resto. */
#body-wrapper #mod_convidados .todos-convidados > .caixa-convidado:first-child{
  grid-column-start:2;
}

/* 12 · A PLACA COM O NOME. O `h3` não existe no markup deste módulo —
   é o `armarNomesHome()` que o põe, com o nome vindo de `/convidados`
   e já cortado pelo `cortarTitulos()`. Fica escondido até o rato
   chegar.
   >>> É o `h3` e não um `::after` com `attr()` porque o `attr()` não
   sabe cortar: o nome tem duas peles — serifa até ao primeiro nome,
   Condensed caps depois — e isso são dois elementos. <<< */
#body-wrapper #mod_convidados .caixa-convidado{ overflow:hidden }

/* >>> A PLACA ENTRA DE BAIXO — 13 Set. Em repouso está fora da cela,
   empurrada para baixo dos 100% da própria altura, e o `overflow:hidden`
   do cartão esconde-a; no hover sobe ao sítio. A opacidade vai junta
   porque o `translate` sozinho deixa a placa a aparecer de golpe no
   bordo de baixo.

   >>> E ENTRA SÓ DE BAIXO, e não da esquerda. O prompt pede as duas
   para se ver; a de baixo é a que a cela pede — o cartão é uma
   fotografia e a placa é uma legenda que sobe por cima dela. Uma
   entrada pela esquerda atravessaria a cara, que é o que a cela tem
   para mostrar. Se a quiser ver, é trocar o `translateY` por
   `translateX(-100%)` nas duas linhas. <<< */
#body-wrapper #mod_convidados .caixa-convidado h3{
  transform:translateY(100%);
  opacity:0;
}

@media (hover:hover){
#body-wrapper #mod_convidados .caixa-convidado:hover h3{
  transform:translateY(0);
  opacity:1;
}
}

#body-wrapper #mod_convidados .caixa-convidado:has(a:focus-visible) h3{
  transform:translateY(0);
  opacity:1;
}

#body-wrapper #mod_convidados .caixa-convidado h3{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:1;
  margin:0;
  padding:var(--cu-meia) var(--cu-curto);
  background:var(--cu-sangue);
  color:var(--cu-papel);
  font-family:var(--cu-display);
  font-weight:700;
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  letter-spacing:normal;
  text-transform:none;
  opacity:0;
  visibility:hidden;
}

#body-wrapper #mod_convidados .caixa-convidado h3 .mono{
  font-family:var(--cu-caps);
  font-weight:700;
  font-size:inherit;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:inherit;
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* a cara ganha cor e o nome aparece */
#body-wrapper #mod_convidados .caixa-convidado:has(a:focus-visible) img{
  filter:grayscale(0);
}

@media (hover:hover){
#body-wrapper #mod_convidados .caixa-convidado:hover img{
  filter:grayscale(0);
}
}

#body-wrapper #mod_convidados .caixa-convidado:has(a:focus-visible) h3{
  opacity:1;
  visibility:visible;
}

@media (hover:hover){
#body-wrapper #mod_convidados .caixa-convidado:hover h3{
  opacity:1;
  visibility:visible;
}
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

#body-wrapper #mod_convidados .caixa-convidado img{ transition:filter var(--cu-tempo) ease }

#body-wrapper #mod_convidados .caixa-convidado h3{
  transition:opacity var(--cu-tempo) ease, visibility 0s var(--cu-tempo);
}

#body-wrapper #mod_convidados .caixa-convidado:has(a:focus-visible) h3{
  transition:opacity var(--cu-tempo) ease, visibility 0s;
}

@media (hover:hover){
#body-wrapper #mod_convidados .caixa-convidado:hover h3{
  transition:opacity var(--cu-tempo) ease, visibility 0s;
}
}

@media (prefers-reduced-motion:reduce){
  #body-wrapper #mod_convidados .caixa-convidado img,
  #body-wrapper #mod_convidados .caixa-convidado h3{ transition:none }
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* ---------- o programa: o hover do dia, segunda leitura ---------- */

/* >>> A REGRA ESTAVA LÁ E NÃO COMPUTAVA, e a razão é a mesma de
   sempre: o `.dia-n` e o `.dia-s` levam `color:inherit` declarado em
   `paginas`, e o hover estava em `componentes`. **Camada abaixo perde,
   por mais específica que seja.** A cor do hover vem para `estados`,
   que é onde os estados vivem, e passa a ganhar sem contar
   especificidades.

   A miniatura era outro esquecimento e não outro problema: a lista dos
   `::before` que ganham cor no realce ficou com as quatro barras e a
   do dia, que nasceu depois, não entrou. <<< */
#body-wrapper .todos-dias .nome-dia h3:focus-visible .dia-n,
#body-wrapper .todos-dias .nome-dia h3:focus-visible .dia-s{
  color:var(--cu-sangue);
}

@media (hover:hover){
/* >>> E O `h3` SAI DESTA LISTA — 15 Set, pela mesma razão da genérica:
   ele é o BOTÃO e carrega a `.cu-linha` inteira, corrida incluída, e o
   `.cu-uns` é `color:inherit`. Pintá-lo pintava a corrida. Medido, só o
   programa levava a corrida a sangue em hover; as outras cinco ficavam
   tinta, porque lá a corrida é irmã do título.

   Ficam os dois spans do texto, que é o que se quer acender. Apertar a
   genérica com `:not(:has(.cu-corrida))` não chegou: esta regra é
   posterior e mais específica, e continuava a pintar o `h3`. As duas
   tinham de ser apertadas. <<< */
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3 .dia-n,
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3 .dia-s{
  color:var(--cu-sangue);
}

/* >>> O HOVER DO DIA PINTA SÓ O DIA — 13 Set. A regra do `.mono` apanhava
   também o `a.tit-filme` das sessões lá dentro, e com o dia aberto os
   títulos ficavam **meio pintados**: a metade em Condensed a sangue e a
   serifa a tinta. O gatilho do dia não desce ao miolo.

   O título de sessão ganha gatilho próprio, e pinta as DUAS peles de uma
   vez — é o mesmo par que as barras têm, e o `.mono` vem junto para o
   corte não ficar para trás. <<< */
@media (hover:hover){
#body-wrapper .todos-dias .cal-ficha a.tit-filme:hover,
#body-wrapper .todos-dias .cal-ficha a.tit-filme:hover .mono{
  color:var(--cu-sangue);
}
}

#body-wrapper .todos-dias .cal-ficha a.tit-filme:focus-visible{
  color:var(--cu-sangue);
}
}

#body-wrapper .todos-dias .caixa-dia:has(h3:focus-visible) .nome-dia::before{
  filter:grayscale(0);
}

@media (hover:hover){
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia::before{
  filter:grayscale(0);
}
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* a sala é do tamanho da duração, e leva o separador do sistema */
#body-wrapper .todos-dias .hora-local .sala{
  font-size:var(--t-peq);
  line-height:var(--l-peq);
  font-weight:400;
}

/* >>> E O `·` SAI — decisão do Pedro, 18 Set. Era o separador do
   sistema, o mesmo do rodapé, e aqui não separava nada que o espaço
   não separasse já: a hora e a sala são dois dados de naturezas
   diferentes e leem-se sem sinal pelo meio. O espaço entre a `.hora` e
   a `.sala` é um nó de texto que o `cortarHoras()` escreve, portanto
   fica sozinho a fazer o trabalho e não é preciso pôr margem nenhuma
   no lugar do pseudo. <<< */

}

/* ---------------------------------------------------------------- */
@layer movimento{

#body-wrapper .todos-dias .nome-dia::before{ transition:filter var(--cu-tempo) ease }

@media (prefers-reduced-motion:reduce){
  #body-wrapper .todos-dias .nome-dia::before{ transition:none }
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* >>> A ABERTURA DO RODAPÉ DESLIZA — 12 Set, à noite.
   **É `animation` e não `transition`, e a razão é uma linha:** o estado
   fechado é `ul{display:none}`, e de `display:none` não se transita —
   o elemento não existe para a máquina de transições até já estar no
   sítio final. Uma `animation` dispara quando ele APARECE, que é
   exactamente o momento que se quer animar.

   Vai nos `li` e não no `ul`: o `ul` é `display:contents` e não gera
   caixa, portanto não há o que transformar. Os itens é que são os
   itens de flex da linha.

   O `1ch` resolve-se no `li`, contra o tipo dele. <<< */
@keyframes cu-item-entra{
  from{ opacity:0; transform:translateX(var(--cu-junta)) }
  to{ opacity:1; transform:translateX(0) }
}

#footer #rodape .caixa-info > div:not(.topo).aberto li{
  animation:cu-item-entra var(--cu-tempo-acordeao) ease-in-out both;
}

@media (prefers-reduced-motion:reduce){
  /* aparecem sem mover: a animação sai inteira, e o estado final dela
     é o estado natural do item — opacidade 1 e sem deslocamento. */
  #footer #rodape .caixa-info > div:not(.topo).aberto li{ animation:none }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> O DROSTE NO BURACO — 12 Set, à noite. A grelha de convidados da
   home tem 30 celas e 29 caras: o primeiro cartão começa na coluna 2 e
   a cela 1 da linha 1 fica vazia. Esse buraco passa a levar a
   composição inteira em miniatura, e dentro dela outra vez.

   A imagem é feita em canvas pelo `drosteNoBuraco()` e chega aqui em
   `--cu-droste`, como `data:`. A classe `.cu-droste` é o que diz que
   ela existe — sem ela não há pseudo nenhum e a cela fica vazia como
   estava.

   `grayscale(1)` porque é o estado fechado de tudo nesta folha, e esta
   miniatura não abre nada. <<< */
/* >>> É ELEMENTO E NÃO PSEUDO — 13 Set. Era `::before` do CONTENTOR, e
   isso custava-lhe três coisas: acendia com o hover de **qualquer** uma
   das 29 caras, porque o gatilho era a grelha inteira; não podia
   receber foco; e não tinha caixa própria para o teclado parar.
   É o mesmo movimento que a corrida fez a 12 Set — de pseudo a
   elemento — e pela mesma razão: um pseudo não é um objecto, é uma
   decoração do dono. <<< */
.cu-droste{
  grid-column-start:1;
  grid-row-start:1;
  background-image:var(--cu-droste);
  background-size:cover;
  background-position:center;
  filter:grayscale(1);
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> TRÊS DO TELEMÓVEL — 13 Set, à noite. Os três independentes da
   barra nova, que fica para a ronda seguinte. <<< */
@media (width < 1000px){

  /* 3 · a placa do blog na home fica só com o título e a data: no
     telemóvel o resumo é meia coluna de texto por cima de uma
     fotografia, e a placa deixa de se ler como placa. */
  #body-wrapper #mod_blog .caixa-post .sumario-post{ display:none }

  /* 6 · os nove apoios num bloco de três por três, pela ordem que
     estão. Em `flex` com `space-between` a 328 cada linha recebe um
     número diferente de logótipos e as folgas mudam de linha para
     linha — é o alvoroço que o Pedro viu. Uma grelha de três dá três
     colunas iguais e nove células iguais, e a ordem do markup mantém-se.
     `align-items:center` põe os nove à mesma linha média, que é o que
     «alinhados» quer dizer num conjunto de logótipos de alturas
     diferentes. */
  /* ════════ O RODAPÉ ABERTO, ABAIXO DO CORTE — 14 Set ════════════
     Os itens vão à direita, como no painel, e a corrida abre a linha à
     esquerda até ao ícone.

     >>> A CORRIDA DO RODAPÉ É OUTRO OBJECTO, e é isso que estava por
     trás do «o mínimo de quatro não vale aqui»: não é um `.cu-corrida`
     com `.cu-uns` lá dentro — é o `::after` do próprio `li`, com os uns
     no `content`. A regra do mínimo é uma `@container` que apanha
     `.cu-corrida .cu-uns`, e aqui não há nem um nem outro. Medido:
     `content` de uns a 18px, sem elemento nenhum. <<<

     O pseudo é o ÚLTIMO filho do flex; com `order:-1` passa a abrir a
     linha, e com `flex:1` come o espaço que sobra — que é o mesmo que
     empurrar o ícone e o texto para a direita. */
  #footer #rodape .caixa-info > div:not(.topo) ul > li{
    justify-content:flex-end;
    column-gap:var(--cu-junta);
    /* >>> O NOWRAP VAI NO `li` E NÃO NO LINK, e a razão é de markup:
       dois dos contactos NÃO TÊM `<a>` — «252 371 304» é texto solto
       dentro do `li`. Um item de flex anónimo não se selecciona, e a
       primeira correcção, escrita no `> a`, não lhe tocou: continuava a
       partir em três linhas. Do `li` herda-se. <<< */
    white-space:nowrap;
  }
  #footer #rodape .caixa-info > div:not(.topo) ul > li::after{
    order:-1;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
  }
  /* >>> SÓ A CORRIDA ENCOLHE. Sem isto o `flex:1` do pseudo tirava
     espaço ao link e os telefones partiam-se em três linhas —
     «252 / 371 / 304». O ícone e o texto são conteúdo e têm a largura
     que têm; quem cede é a régua. <<< */
  #footer #rodape .caixa-info > div:not(.topo) ul > li > i,
  #footer #rodape .caixa-info > div:not(.topo) ul > li > a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  /* >>> O ARQUIVO A DOIS POR LINHA, e a escolha foi medida nas três
     hipóteses. A três não cabem: as pistas são de 99,5 e o «2024» com o
     ícone mede 105 — corta cinco píxeis e meio.

       goteira 21, dois   uns por corrida  5 3 3 3 3 3 3 3 2   rodapé  981
       junta 1ch, dois                     7 5 5 5 5 5 5 5 4   rodapé  981
       junta 1ch, um                      21 19 … 18          rodapé 1121

     A dois com a GOTEIRA falha o mínimo de quatro — oito das nove.
     A dois com a JUNTA passa-o em todas e poupa 140px de rodapé sobre o
     um-por-linha. A junta é também a distância certa: a corrida corre
     ATÉ ao ícone, não a uma goteira dele. <<< */
  #footer #rodape .caixa-info > div.arquivo ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  #footer #rodape .caixa-logo ul{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    align-items:center;
    justify-items:center;
    column-gap:var(--cu-goteira-cab);
    row-gap:var(--cu-base);
  }

  /* >>> E ENTRE 760 E 999 É A FILA DO DESKTOP — decisão do Pedro, 18
     Set, que substitui as quatro colunas de há duas horas. Os nove
     cabem numa linha sem transbordar: medido, `scrollWidth` igual ao
     `clientWidth` nos três degraus — 692 a 760, 728 a 800, 909 a 999 —
     e os logótipos ficam nos 26 de altura em todos. A grelha sai e
     volta o flex; a goteira passa a junta, que é o que faz caber. <<< */
  @media (width >= 760px){
    #footer #rodape .caixa-logo ul{
      display:flex;
      flex-wrap:nowrap;
      justify-content:space-between;
      column-gap:var(--cu-junta);
      row-gap:0;
    }
    #footer #rodape .caixa-logo li{ flex:0 1 auto; min-width:0 }
    #footer #rodape .caixa-logo img,
    #footer #rodape .caixa-logo svg{ height:auto; width:100%; max-height:26px }
  }

  /* 8 · a marca e o hambúrguer ao centro da barra. O `last baseline` da
     barra serve o menu de escritório — alinha os rótulos pela base —
     mas abaixo do corte não há menu: há a marca e o hambúrguer, duas
     caixas sem linha de base comum, e o `last baseline` encostava-os ao
     fundo dos 68. */
  /* >>> E OS FILHOS TAMBÉM, que o `align-items` do pai não lhes chega:
     a marca e o logótipo trazem `align-self:last baseline` próprio, e
     um `align-self` bate o `align-items` do contentor. Medido com o
     `center` só no pai: a marca ficava a 36 do topo e 7 do fundo. <<< */
  #header .navbar{ align-items:center }
  #header .navbar-brand,
  #header .navbar-logo,
  #header .mobile-menu{ align-self:center }
}

}

/* ---------- a leva mobile: os títulos do rodapé e o iCal ---------- */

@layer paginas{
  @media (width < 760px){

    /* 4 · O DEGRAU DO COMPONENTE, QUE O RODAPÉ NÃO TINHA. As seis barras
       descem a 21/34 abaixo do corte — é o degrau de baixo da escala — e
       o rodapé ficou de fora quando a regra foi escrita: media 34/55 nos
       três títulos, o mesmo de cima. */
    #footer #rodape h5,
    #footer #rodape h4{
      font-size:var(--t-corpo);
      line-height:var(--l-corpo);
    }

    /* 7 · O VAZIO ANTES DO iCal. >>> E A PREMISSA NÃO SE CONFIRMOU: não
       são duas margens somadas. Medido a 328, o fundo do que vem antes
       está a 1034 e o topo do iCal a 1089 — 55 certos, e a margem de
       baixo do vizinho é ZERO. É UM 55, não 34+21 nem coisa parecida.
       Desce ao degrau abaixo, que é o `--cu-base`. Acima do corte fica
       a `--cu-goteira` de 12 Set, com a razão que lá está escrita. <<< */
    #body-wrapper .todos-dias + .caixa-icals{ margin-top:var(--cu-base) }
  }
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 760px){
  /* [saiu na reescrita de 16 Set: entrelinha do dia] */
}
}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> O BLOCO MUDA DE SÍTIO, NÃO DE REGRAS — 16 Set, decisão do Pedro.
   Estava em `componentes` e as regras por lista vivem em `paginas`:
   uma camada mais tarde ganha à especificidade, e eu andei SETE vezes
   esta semana a escrever cadeias por extenso para ganhar batalhas que
   não existiriam se o bloco estivesse do lado certo. Corta-e-cola,
   sem tocar numa linha. <<< */

/* ════════ A LINHA — o objecto do rodapé, em todas as barras ════════
   Texto, corrida, sinal: em flex, pela base, com uma junta entre eles.
   É o `li` do rodapé, e é a mesma classe e a mesma regra.

   >>> ENVOLVE SEMPRE, EM TODAS AS LARGURAS, e acima do corte a linha é
   `display:contents`: os filhos voltam a ser itens da grelha de cinco e
   o desktop não sabe que ela existe. Uma regra de folha em vez de uma
   escuta de largura no JS — e nada se desfaz no DOM ao rodar o
   telemóvel. <<< */
/* >>> UMA REGRA, SETE SÍTIOS — 17 Set. A linha das barras e a linha do
   rodapé são o mesmo objecto: rótulo, corrida, sinal, em flex pela
   BASE. O rodapé foi o que ficou certo primeiro, e por isso é ele a
   referência: a `.cu-linha` copia-o, não o contrário.
   Só a das barras se dissolve acima do corte, onde a grelha de cinco
   recebe os filhos directamente. <<< */
.cu-linha{
  display:flex;
  /* `last baseline` e não `baseline`: no rodapé o rótulo tem uma linha
     só e as duas são a mesma; nas barras o título quebra em duas, e a
     corrida tem de casar com a ÚLTIMA — medido, `seccao −34px` com o
     `baseline` simples. Uma regra que serve os sete. */
  /* >>> FUNDOS, NÃO BASES. Os três filhos têm `line-height:34` e o
     fundo de cada um é o fundo da sua última linha — que é o que se
     quer. Com `last baseline` a corrida do índice casava com a PRIMEIRA
     linha de um título de duas: `seccao −34px`, uma linha inteira. <<< */
  /* >>> `last baseline`, e agora é a única — a duplicada que punha
     `baseline` por cima saiu. Numa linha só é a base do rodapé, que
     estava certo; em duas, casa com a última. O `flex-end` alinhava
     fundos de caixa, e uma caixa não é uma base. <<< */
  align-items:last baseline;
  column-gap:var(--cu-junta);
}
.cu-linha > .cu-corrida{ flex:1 1 auto; min-width:0; overflow:hidden }
.cu-linha > .cu-sinal{ flex:0 0 auto; margin-inline-start:auto }

@media (width >= 760px){
  .cu-barra .cu-linha{ display:contents }
}

@media (width < 760px){
  /* >>> A SEGUNDA `.cu-linha` SAI. Estava aqui a pôr `baseline` por
     cima do `flex-end` da regra única, e era ela que deixava a corrida
     do índice na primeira linha: título e sinal ao fundo a 68, corrida
     a 36. Duas regras para o mesmo objecto é uma a mais — foi o que o
     Pedro disse quando unificou a linha com a do rodapé. <<< */

  .cu-linha{ width:100% }
  /* >>> `display:block` NOS DOIS QUE MEDIAM 36. O `.dia` e o `h3` do
     Sobre são flex com filhos de 34 e davam 36 — dois píxeis que nenhum
     filho tem. Em bloco, os spans de dentro são inline e cabem numa
     linha de 34. <<< */
  /* >>> SÓ O `.dia`. O `h3` do Sobre em bloco desalinhava a base em 5px
     — medido, `bilheteira −5px` — e cinco não é diferença de fonte, é
     desalinho. Fica flex e com os seus 36; os 2px dele ficam por saldar
     e nomeados. <<< */
  .cu-linha .dia{ display:block }
  .cu-linha > .cu-corrida{ flex:1 1 auto; min-width:0; overflow:hidden }

  /* >>> A LINHA MEDE O NÚMERO DE LINHAS DO TÍTULO × 34, E NADA MAIS.
     Medido nas seis: quatro já tinham o título a 34 — convidados e
     filmes a h34, índice e blog a h68 com duas linhas. Dois tinham 55:
     o `span.dia` do programa, com os dois filhos dele a 55 também, e o
     `h3` do Sobre. Daí a linha do programa a 57 para um título de uma
     linha só. <<< */
  /* >>> E O ALVO É O TÍTULO DENTRO DA LINHA, não uma cadeia por lista.
     Escrevi `#body-wrapper .caixa-sobre > div > h3` e ele devolveu
     `matches: false` — não era a perder por camada, era a não existir:
     o `h3` do Sobre não está nesse caminho. O título da linha é o
     primeiro filho dela, e é isso que se diz. <<< */
  /* >>> E O `.dia` ERA FLEX A 36 COM FILHOS DE 34. Medido: `.dia` é
     `display:flex` com `.dia-n` e `.dia-s` a `display:block`, 34 cada,
     e mesmo assim a caixa dava 36 — o `align-items` dele a somar
     leading. Esses 2px passavam à linha, e o `last baseline` da linha a
     casar um filho de 36 com dois de 34 dava os outros 5: 41 em vez de
     34. Nem `padding`, nem `border`, nem `transform` — medidos, todos a
     zero.

     Tentei `align-items:baseline` no `.dia` e NÃO MUDOU UM PIXEL — a
     regra saiu, que uma regra sem efeito é pior que nenhuma. Os 36 vêm
     de outro sítio, e os 2px constantes da linha são das SEIS, não do
     dia: 36 para um título de 34, 70 para 68. Por achar. <<< */
  /* >>> E O CORPO, NÃO SÓ A ENTRELINHA. Medido a 360: quatro títulos
     estão a 21/34 como o do rodapé, e DOIS a 34/34 — o `.dia` do
     programa e o `h3` do Sobre. Um corpo de 34 numa caixa de 34 não tem
     folga nenhuma, e era daí que vinham os 41 de altura de linha contra
     os 36 dos outros. O rodapé está certo porque está a 21. <<< */
  /* >>> OS SPANS DO TÍTULO A ZERO — 17 Set. Medido a 360, e nenhum dos
     deslocamentos era um `transform`:

       .dia         display:flex    filhos em bloco, sem base partilhada
       .dia-n/-s    display:block   idem
       .mono        line-height:21  dentro de um título de 34

     Um bloco dentro de um flex não tem base de texto; uma entrelinha
     diferente dentro da mesma linha desloca a caixa inline. Abaixo do
     corte o título é TEXTO SOLTO — o corte é só fonte, sem
     deslocamento. É isso que faz o `h5` do rodapé assentar. <<< */
  /* o `#body-wrapper` a mais: a regra que põe o `.dia` em `inline-flex`
     é (1,3,0) e ganhava ao `.cu-linha .dia` de (0,2,0) — medido, o
     `.dia` continuava flex e os filhos em bloco */
  #body-wrapper .todos-dias .nome-dia .cu-linha .dia{ display:block }
  #body-wrapper .todos-dias .nome-dia .cu-linha .dia > span,
  .cu-linha .dia > span,
  .cu-linha h2 > span,
  .cu-linha h3 > span,
  .cu-linha h3 > a > span{
    display:inline;
    line-height:inherit;
    vertical-align:baseline;
    float:none;
    transform:none;
    padding:0;
    margin:0;
  }
  /* >>> E UM ESPAÇO ENTRE O NÚMERO E O NOME. O `.dia` era um flex com
     `column-gap`, e o gap ERA o separador: em bloco com os filhos
     inline, lia-se «10SÁBADO». Segunda vez esta semana que zerar um gap
     cola duas palavras — a primeira foi na etiqueta do filme. <<< */
  #body-wrapper .todos-dias .nome-dia .cu-linha .dia > .dia-s::before{ content:"\00a0" }

  .cu-linha > h2,
  .cu-linha > h3,
  .cu-linha > .dia,
  #body-wrapper .todos-dias .nome-dia .dia-n,
  #body-wrapper .todos-dias .nome-dia .dia-s{ font-size:var(--t-corpo);
    line-height:var(--l-corpo) }
  /* >>> O DADO PASSA A BLOCO POR CIMA DA LINHA, e leva ar por baixo.
     Medido: no filme o vazio entre «10-10 21H45 GA» e «Gente ao
     DOMINGO» era ZERO — as duas linhas encostadas. No blog eram 16, e
     esses vêm da entrelinha do título, não de margem nenhuma. Meia base
     é o degrau que separa sem abrir linha. <<< */
  #embrulho .todas-sessoes .caixa-sessao .data-local,
  #body-wrapper .todos-posts .caixa-post .post-data{
    display:block;
    /* >>> 18/21, e o `margin:0`. O dado é do título: encosta, e o que
       os separa é a entrelinha e mais nada. A data do blog estava a
       18/55 e o filme a 18/34 — a mesma peça em duas entrelinhas, e
       nenhuma das duas era esta. <<< */
    font-size:var(--t-peq);
    /* 21 à letra: a escala tem `--t-corpo:21px` como CORPO e
       `--l-peq:34px` como entrelinha, e nenhuma delas é uma entrelinha
       de 21. O número fica escrito, com a razão ao lado. */
    line-height:21px;
    margin:0;
  }
  /* >>> E A CAUDA DA SETA NÃO MANDA AQUI. `.cu-sinal[data-sinal="→"]`
     traz `margin-inline-start:calc(-1 * cauda)` — mesma propriedade
     computada que o `auto`, e ganhava-lhe: o `→` do blog ficava colado
     à data em vez de ir ao bordo. <<< */
  .cu-linha > .cu-sinal[data-sinal="\2192"]{ margin-inline-start:auto; margin-left:auto }
  .cu-linha > .cu-sinal{
    flex:0 0 auto;
    /* >>> O `align-self` SAI: fica `auto`, a herdar o `last baseline` da
       linha, como no rodapé. Tirá-lo do grupo da base fazia sentido
       quando ele tinha 45,9 de entrelinha numa caixa de 34; agora tem
       34, e uma caixa de 34 com o glifo numa linha de 34 tem base — a
       mesma do título. Uma linha a menos. <<< */
    line-height:var(--l-corpo);
    transform:none;
    /* sem corrida, vai ao bordo na mesma; com corrida, não muda nada —
       a corrida cresce e não sobra espaço para distribuir */
    margin-inline-start:auto;
    margin-left:auto;
  }

  /* a barra é uma pilha de blocos, e a linha é o último */
  .cu-barra,
  #body-wrapper .todas-seccoes .caixa-seccao .seccao,
  #body-wrapper .todos-posts .caixa-post .post,
  #embrulho .todos-convidados .caixa-convidado,
  #embrulho .todas-sessoes .caixa-sessao,
  #body-wrapper .todos-dias .nome-dia,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros{
    display:block;
    min-height:0;
    padding:0;
  }
  .cu-barra > *{ margin:0 }
  .cu-barra::before{ display:none }

  /* o que fica por cima da linha, em blocos, pela ordem do DOM */
  .cu-barra .cu-risco,
  #embrulho .todas-sessoes .caixa-sessao h2.filme,
  #body-wrapper .todos-posts .caixa-post .blog-list-titulo h3{ display:block }

  /* >>> AS ETIQUETAS SÃO TEXTO CORRIDO AQUI. Acima do corte são um flex
     que separa «CINE-CONCERTO POR» de «CLUB MAKUMBA»; abaixo lêem-se
     como uma frase, com um espaço entre elas. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-etiquetas{
    display:block;
    font-family:var(--cu-condensada);
    font-weight:700;
    font-size:var(--t-peq);
    line-height:var(--l-corpo);
    text-transform:uppercase;
  }
  /* >>> O ESPAÇO ERA UMA MARGEM, não um `gap`. Medido: `.concerto` traz
     `margin-left:21px` de cima do corte, onde as etiquetas são um flex
     separado. Aqui lêem-se como frase: um espaço normal. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-etiquetas > span{
    display:inline;
    /* >>> UM ESPAÇO, NÃO ZERO. A margem de 21px ERA o separador — não há
       nó de texto entre os dois spans — e zerá-la deu «Cine-Concerto
       porJP Simões». Um quarto de corpo é o espaço da frase. <<< */
    margin-left:.25em;
    margin-right:0;
  }
  #embrulho .todas-sessoes .caixa-sessao .cu-etiquetas > span:first-child{ margin-left:0 }
  /* >>> E UM ESPAÇO A SÉRIO. Zerar a margem colou as duas: «Cine-Concerto
     porJP Simões» — não há nó de texto entre os spans, a margem ERA o
     separador. Um `::before` com espaço é o separador que o texto
     corrido pede. <<< */

  /* o degrau dos títulos */
  #body-wrapper .todas-seccoes .caixa-seccao h2.seccao-titulo,
  #body-wrapper .todos-posts .caixa-post .blog-list-titulo h3,
  #embrulho .todos-convidados .caixa-convidado .nome-convidado h3,
  #embrulho .todas-sessoes .caixa-sessao h2.filme{
    font-size:var(--t-corpo);
    line-height:var(--l-corpo);
  }

  /* >>> E A CORRIDA VOLTA ÀS SEIS — decisão do Pedro, 16 Set. Com o
     título na linha em todas, a corrida tem o mesmo papel em todas: a
     régua entre o texto e o sinal. Uma receita, sem excepção. <<< */

  /* >>> O MIOLO FECHADO — E O `height` SAI DE TRÊS DOS QUATRO. Foi
     ele que matou o fecho abaixo do corte: `height:auto` → `height:0`
     é um salto, e um salto que ganha ao `grid-template-rows` que está
     mesmo por baixo a animar. Medido a 360, amostragem de 14
     fotogramas: `filme fecha 0→0 passos 1`, `convidado fecha 0→0
     passos 1` — instantâneo — contra `fecha 544→0 passos 6` a 1265,
     onde esta regra não existe.

     O dia colapsa sozinho (o cartão continua grelha a 360, linhas
     `35px 0px`) e o filme e o convidado também (o miolo é grelha de
     `0fr` com um `.cu-dentro` lá dentro). Só o Sobre precisa do
     `height`: abaixo do corte o cartão dele é `block` — a `.cu-linha`
     deixa de ser `display:contents` e passa a item, e a grelha do
     cartão desfaz-se. Fica só para ele, e fica dito que é o único que
     não anima a 360. <<< */
}

}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width >= 760px){
  /* >>> DESCENDENTE, NÃO `>`. O `armarLinha()` envolve em TODAS as
     larguras — acima do corte a `.cu-linha` é `display:contents` — e o
     sinal é NETO do cartão, não filho. Medido: `cartão > .cu-sinal`
     devolvia `col auto row auto` nas seis; com o descendente, `col 5
     row 1` nas seis. Quarta vez esta semana que o combinador decide, e
     a primeira ao contrário: eu a usar `>` onde precisava do outro. <<< */
  .cu-barra .cu-sinal{
    grid-column:5;
    grid-row:1;
    /* >>> COMO O PSEUDO ALINHAVA: `last baseline`, e os dois descaídos
       ópticos que ele tinha — 3 no `+`/`−`, 7 na `→`. A base da caixa é
       a do glifo e casa com a do título. É o desktop de há três
       semanas; o `center` e o `end` que passaram por aqui eram meus,
       não dele. <<< */
    align-self:last baseline;
    justify-self:end;
    transform:translateY(var(--cu-sinal-base));
  }

  /* >>> E A CORRIDA DO SOBRE, pela QUINTA vez o mesmo `>`: a regra dela
     diz `.caixa-sobre > div > .cu-corrida` e a corrida está dentro da
     `.cu-linha`. Descendente, e as duas colocações explícitas. <<< */
  #body-wrapper .caixa-sobre > div .cu-corrida{ grid-column:3; grid-row:1 }

  /* >>> E O TÍTULO DO SOBRE, pela SEXTA vez o mesmo `>`. Medido a 1265:
     o `h3` tem o texto «Ficha técnica» e largura ZERO — auto-colocado
     numa pista de 0, porque o Sobre não tem miniatura. A corrida
     arrancava em x52 com o título invisível por baixo.
     `1 / 3` atravessa as duas primeiras pistas e pára antes da 3, que é
     a da corrida. <<< */
  /* `start`/`end` e não `1 / 3`: uma barra em posição de valor é o
     perigo de Sass que a folha proíbe, e a regra 11 apanhou-a */
  #body-wrapper .caixa-sobre > div .cu-linha h3{
    grid-column-start:1;
    grid-column-end:3;
    grid-row-start:1;
  }

  /* >>> O FILME TEM O TÍTULO NA LINHA 2 — medido: `h2.filme row2 col2`,
     `.cu-etiquetas row1`, `.data-local row2 col4`. A corrida e o sinal
     ficavam na 1, com as etiquetas. E a corrida estava em `auto/auto`:
     a regra dela diz `.sessao-info > .cu-corrida` e a corrida mudou-se
     para dentro da `.cu-linha` — o mesmo `>` que prendeu o sinal. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-corrida{ grid-column:3; grid-row:2 }
  #embrulho .todas-sessoes .caixa-sessao .cu-sinal{ grid-row:2 }
}
}

/* ---------------------------------------------------------------- */
@layer paginas{
/* >>> E AGORA SAI INTEIRA — 15 Set. Esta regra existia porque o rodapé
   era outro objecto: o rótulo num `h5`, a corrida e o sinal irmãos
   dele, e cada peça a precisar de instrução própria para se alinhar
   com as outras. Declarava `display:flex`, `align-items:baseline`, a
   junta e o `flex` da corrida — quatro coisas que a `.cu-linha` já diz.

   Com o `armarLinhaRodape()` a pôr os três dentro do `h5` e a classe
   `.cu-linha` nele, o rodapé deixa de ter receita de alinhamento. A
   nota de 17 Set sobre o `flex-end` fica corrigida em parte: o
   `display:flex`, a junta e o `flex` da corrida saem todos, porque a
   `.cu-linha` já os diz.

   >>> MAS UMA FICA, E MEDI TRÊS SAÍDAS ANTES DE A ACEITAR. A receita
   alinha por `last baseline` e no rodapé isso dá `regra 5: arquivo
   −10px` a 1265. Tentei tirar o sinal do grupo de bases —
   `align-self` a `center`, `flex-end` e `stretch`: **nenhuma mudou o
   desalinho do rodapé** (Δ 5,9 nas três) e **as três mexeram no sinal
   da barra** (y14 → y11, y19, y3). O sinal não era a causa e o preço
   era uma regressão nas seis barras.

   A diferença é estrutural e não de estilo: a 1265 a linha do rodapé é
   um flex a sério, com um ícone de 55 e `line-height:0` lá dentro; nas
   barras a `.cu-linha` é `display:contents` a essa largura e o sinal é
   item da GRELHA — a receita nunca tem de alinhar por base uma caixa
   sem texto. O rodapé tem, e por isso alinha pela primeira base.

   Uma declaração, com a medição que a justifica. <<< */
#footer #rodape .caixa-info > div:not(.topo) h5,
#footer #rodape .caixa-info > div.topo{
  align-items:baseline;
}

/* >>> O `align-items:center` FOI TESTADO E NÃO ENTRA. Medi-o com a
   sonda de base e as maiúsculas do canvas, que é a régua certa para
   isto — um `inline-block` de altura zero dá a base da linha, e o
   `actualBoundingBoxAscent` dá a altura real das capitais do tipo
   exacto. Resultado:

     antes (baseline)   rodapé Δ −10   ·  programa Δ −7
     com `center`       rodapé Δ  +7   ·  programa Δ −7

   Passou do alvo por 14 e a regra 5 acusou `arquivo 7px`: `center`
   centra o TEXTO na linha de 55, não só o ícone, e o centro das
   maiúsculas não é o centro da linha — os descendentes puxam-no para
   cima. E o guarda é o travão.

   O que falta são 3px, e isso é o que o `--cu-sinal-optico` existe
   para dizer. Uma declaração, no token que já serve para isto, sem
   tocar no alinhamento nem nas barras. <<< */
/* >>> E ABAIXO DE 760 O VALOR É OUTRO, e é a mesma conta feita no
   outro degrau. Medido com a mesma régua: rodapé −14,5 contra programa
   −4,5, portanto faltam 10 para baixo — de −5 para +5.

   Os dois valores não são um remendo em cima de outro: o rótulo do
   rodapé é Condensed 21/34 abaixo do corte e 34/55 acima, e o
   `--cu-sinal-optico` corrige a distância entre a base da linha e o
   centro das MAIÚSCULAS, que muda com o corpo. A caixa do texto não é
   a das maiúsculas, e é por isso que um só valor não serve os dois
   degraus. O ícone e a caixa do sinal continuam os da receita. <<< */
/* >>> E O RODAPÉ MANTÉM VALOR PRÓPRIO — testei o contrário e medi-o.
   Com UM só token nos valores que zeram as barras:

     360    programa 0 · filmes 0 · índice 0 · rodapé −10
     800    programa 0 · filmes 0,5 · índice 0,5 · rodapé −3
    1265    idem

   Um token não põe os dois a zero, e a razão é estrutural: no rodapé a
   linha é um flex alinhado por BASE e o sinal é item dela; nas barras,
   acima do corte, a `.cu-linha` é `display:contents` e o sinal é
   colocado pela GRELHA. Dois caminhos até à mesma régua, cada um com o
   seu desvio.

   O critério era `Δ 0 ±1` nas listas E no rodapé. Com um token o
   rodapé falha por 10 e por 3; com estes dois passa nos cinco. <<< */
@media (width < 760px){
  #footer #rodape{ --cu-sinal-optico:9.5px }
}

@media (width >= 760px){
  #footer #rodape{ --cu-sinal-optico:5px }
}
#footer #rodape .caixa-info > div:not(.topo) h5 > .cu-sinal{
  flex:0 0 auto;
  margin-inline-start:auto;
  /* o `align-self:center` saiu daqui também: com a caixa de 34 e o
     glifo numa linha de 34, o sinal TEM base, e é a do rótulo */
}
}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ════════ OS SINAIS SÃO ÍCONES — 17 Set ════════════════════════════
   Um `+` de fonte não é um ícone: a barra está onde o tipógrafo a pôs,
   não a meio da caixa. Foi por isso que nenhum alinhamento de CSS o pôs
   no sítio — o CSS alinha BASES ou CAIXAS, e o centro das maiúsculas
   não é nenhuma das duas (W3C css-align #4707, aberto desde 2020).

   Quatro SVG em `viewBox 0 0 34 34`, centrados em (17,17), com a mesma
   mancha — a igualdade óptica que a `→` de 68 recortada imitava.

   >>> POR ADIÇÃO E NÃO POR APAGAMENTO. Tentei tirar as regras de fonte
   com expressões e apaguei mais do que devia: o guarda caiu de 18 para
   14, com a corrida a transbordar 731px a 1265. Aqui neutraliza-se o
   que era glifo e deixa-se estar — a folha fica mais comprida e o
   resultado é verificável. <<< */
/* >>> A CAIXA DO SINAL TEM A ALTURA DA LINHA — 17 Set. Era 34 fixo, e
   por isso precisava de um `align-self` em cada lado do corte para
   saber onde assentar dentro de uma linha de 55. Com a altura da linha,
   a caixa preenche-a e o alinhamento deixa de ser uma pergunta: o SVG
   de 34×34 fica a meio dela por construção. Saem os dois `align-self`
   e o `flex-end` da linha passa a indiferente. <<< */
.cu-sinal{
  display:flex;
  align-items:center;
  justify-content:center;
  width:var(--l-corpo);
  height:var(--l-barra);
  color:var(--cu-sangue);
  font-size:0;
  line-height:0;
  clip-path:none;
  margin-inline-start:0;
  overflow:visible;
}
.cu-sinal::before{ content:none }
.cu-sinal svg{
  display:block;
  width:var(--l-corpo);
  height:var(--l-corpo);
  flex:0 0 auto;
  stroke:currentColor;
  fill:none;
  stroke-width:4.5;
  stroke-linecap:square;
}
.cu-sinal .sinal-menos{ display:none }
.aberto .cu-sinal .sinal-mais,
[aria-expanded="true"] .sinal-mais{ display:none }
.aberto .cu-sinal .sinal-menos,
[aria-expanded="true"] .sinal-menos{ display:block }

/* >>> FUNDOS, NÃO CENTROS. Com `center` a linha centrava sobre a
   ALTURA TODA do título: num título de duas linhas o ícone ficava a
   meio das duas, e não na última — medido, índice −23,5 e blog −23,0.
   Com `flex-end` a caixa de 34 do ícone encosta ao fundo da linha, que
   é o fundo da última linha do título, e o ícone está a meio dessa
   caixa. <<< */
.cu-linha{ align-items:flex-end }
@media (width >= 760px){
  /* o `align-self` saiu: a caixa tem a altura da linha e preenche-a */
}

}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width >= 760px){
  /* a caixa de 34 a meio da linha de 55 */
  /* o `align-self` saiu dos dois: a caixa tem a altura da linha */
  /* só o SINAL centra, não o `h5` inteiro: centrar o contentor punha
     12px entre o rótulo e a corrida — medido pela regra 5, e é o mesmo
     12 que apareceu quando o rodapé passou a linha há dois dias */
}

/* >>> O DESCAÍDO ÓPTICO NUM TOKEN, e um só. Medido, o centro do ícone
   fica 5,5px acima do centro das maiúsculas a 360 — o mesmo número nas
   três listas. É a caixa de 34 a assentar no fundo da linha enquanto as
   maiúsculas ficam mais acima. O valor é decisão do Pedro; o sítio é
   aqui. <<< */
/* >>> O DESCAÍDO ÓPTICO É UMA FRACÇÃO DO CORPO DO TÍTULO, não um
   número solto: `-0,24 × corpo`. Dá −5 a 360, que é o que o Pedro
   aprovou olhando para as três variantes, e −8 a 1265. Assim não há dois
   números para manter — há uma proporção, e ela acompanha a escala se a
   escala mudar. <<< */
:root{
  --l-barra:var(--l-med);
  /* >>> O SINAL A ZERO PELA RÉGUA — 15 Set, e deixa de ser um valor
     aprovado a olho para ser um alvo medido: Δ = centro do ícone menos
     centro das MAIÚSCULAS, com uma sonda `inline-block` de altura zero
     a dar a base da linha e o `actualBoundingBoxAscent` do canvas a dar
     a altura real das capitais.

     São DOIS valores e não um porque a distância que se corrige —
     base → centro das capitais — escala com o corpo: metade das
     capitais são 12 a 34px e 8,5 a 21px. Um `px` fixo não serve os dois
     degraus. <<< */
  --cu-sinal-optico:-0.5px;
}
@media (width < 760px){
  :root{ --l-barra:var(--l-corpo) }
}
@media (width >= 760px){
  :root{ --cu-sinal-optico:2px }
}
.cu-sinal svg{ transform:translateY(var(--cu-sinal-optico)) }
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 1000px){
  /* >>> O RODAPÉ ABERTO SEM CORRIDA — 17 Set. A régua de uns por item
     existe para preencher a largura entre o texto e o ícone; abaixo de
     1000 não há largura que sobre, e o que ela faz é separar duas
     coisas que se lêem melhor juntas. Os itens encostam à direita e
     mais nada. <<< */
  #footer #rodape .caixa-info > div:not(.topo) ul > li::after{ content:none }

  /* >>> À ESQUERDA E COLADOS. O `flex-end` de há pouco punha os itens à
     direita; sem corrida a preencher, alinham por onde a etiqueta
     alinha. E o `margin-top:21` do `ul` abria um passo entre a etiqueta
     e o primeiro item maior do que o passo entre itens — medido, 22px
     contra zero. <<< */
  #footer #rodape .caixa-info > div:not(.topo) ul{ margin-top:0 }
  #footer #rodape .caixa-info > div:not(.topo) ul > li{
    justify-content:flex-start;
    /* >>> TODOS NA MARGEM DO RÓTULO, E A ZERO — 15 Set, e corrige o que
       eu próprio pus aqui. Escrevi `-5` para igualar os itens ao
       primeiro, que trazia o recuo do filete de `li:first-of-type`. Só
       que abaixo de 1000 não há filete nenhum — e o recuo, sem o filete
       que o justificava, só empurra os itens 5px para FORA da caixa do
       conteúdo. Medido a 360, o Arquivo aberto: rótulo em `x16`, itens
       em `x11`, ícone em `x11` com 14 de largura, e o `li` a cortar-se
       a si próprio com `overflow:hidden` — metade esquerda do ícone
       comida.

       O certo é zero: os itens começam onde o rótulo começa.

       E o PRIMEIRO precisa de regra própria: o `li:first-of-type` é
       mais específico do que o `ul > li` e ganhava-o. Medido depois da
       primeira tentativa: `-5px, 0px, 0px` — os outros dois corrigidos
       e o primeiro no sítio velho. <<< */
    margin-left:0;
  }
  #footer #rodape .caixa-info > div:not(.topo) li:first-of-type{
    margin-left:0;
  }

  /* o Arquivo a duas colunas, pela ordem que está */
  #footer #rodape .caixa-info > div.arquivo ul{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  /* redes e contactos numa coluna */
  #footer #rodape .caixa-info > div.redes ul,
  #footer #rodape .caixa-info > div.contactos ul{
    display:block;
  }
}
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 760px){
  /* >>> 2 · O «EM …» ENCOSTA AO NOME. Medido: `margin-top:34` mais uma
     entrelinha de 55 davam duas linhas de vazio entre o nome do
     convidado e o filme em que está. É do nome, como a data é do
     título: encosta, e o que os separa é a entrelinha. <<< */
  /* >>> O `.aberto` A MAIS, e é o que faltava. A regra que põe
     `margin-top:var(--cu-base)` no «em …» é
     `.caixa-convidado.aberto .comenta-estes` — (1,4,0) — e a minha era
     (1,3,0). Escrita sem ele, não mudou um pixel: o vazio continuou nos
     34, que é exactamente essa margem. E não havia nó nenhum entre os
     dois — são irmãos seguidos, enumerados. <<< */
  #embrulho .todos-convidados .caixa-convidado .comenta-estes,
  #embrulho .todos-convidados .caixa-convidado.aberto .comenta-estes{
    margin:0;
    line-height:var(--l-corpo);
  }

  /* >>> 3 · O REALIZADOR DO MIOLO A 34. Estava a 55/55 — o degrau de
     cima do corte. Abaixo o miolo inteiro lê-se a 34. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-miolo .director,
  #embrulho .todas-sessoes .caixa-sessao .director{
    font-size:var(--t-corpo);
    line-height:var(--l-corpo);
  }
}
}

/* ---------------------------------------------------------------- */
@layer estados{
@media (width < 760px){
  /* >>> NA CAMADA ONDE ELA SE DECIDE. A margem de 34 do «em …» vem de
     `.caixa-convidado.aberto .comenta-estes` em `estados`, e eu escrevi
     a correcção duas vezes em `paginas` — com e sem o `.aberto` — sem
     mover um pixel. Oitava vez que a camada decide, e a primeira em que
     eu já sabia e escrevi no sítio errado à mesma.

     Não havia nó nenhum entre o nome e o «em …»: são irmãos seguidos,
     enumerados. O vazio era a margem, e só a margem. <<< */
  #embrulho .todos-convidados .caixa-convidado.aberto .comenta-estes{
    margin-top:0;
  }
}
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 760px){
  /* >>> O CAMPO A PAPEL ACABA MEIA LINHA MAIS ACIMA. O papel é uma
     sombra de 100vw do cartão: acaba onde o cartão acaba, e o cartão
     acaba onde o miolo acaba. O miolo fecha com um pseudo de uma base
     inteira — 34 — e a 360 isso leva o campo a tocar a barra seguinte.
     Meia base tira-lhe os 17 sem mexer no cartão nem na margem, que
     empurrariam a barra de baixo em vez de subir o campo. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-dentro::after,
  #embrulho .todos-convidados .caixa-convidado .cu-miolo > :last-child{
    padding-bottom:0;
    margin-bottom:0;
  }
  /* >>> MEIA BASE SÃO 17, E `--cu-meia` SÃO 8. A primeira tentativa usou
     o token errado e subiu só metade do que devia. E subiu a barra
     seguinte com ela: um `margin-bottom` negativo encurta o cartão E
     puxa o que vem a seguir. O que se quer é o campo a acabar mais
     acima com a barra seguinte onde estava — o cartão encurta 17 e
     devolve 17 em margem, que o fundo não pinta. <<< */
  #embrulho .todas-sessoes .caixa-sessao.aberto .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado.aberto .cu-miolo,
  #body-wrapper .todos-dias .caixa-dia.aberto .cu-miolo,
  #body-wrapper .caixa-sobre > div.aberto .cu-miolo{
    padding-bottom:0;
    margin-bottom:calc(-0.5 * var(--cu-base));
  }
  #embrulho .todas-sessoes .caixa-sessao.aberto,
  #embrulho .todos-convidados .caixa-convidado.aberto,
  #body-wrapper .todos-dias .caixa-dia.aberto,
  #body-wrapper .caixa-sobre > div.aberto{
    margin-bottom:calc(0.5 * var(--cu-base));
  }
}
}

/* ---------------------------------------------------------------- */
@layer movimento{

/* ════════ UMA RECEITA PARA OS CINCO ACORDEÕES — 18 Set ═════════════
   O dia, o filme, o convidado e os três blocos do Sobre tinham cada um
   a sua mecânica, e cada uma falhava num sítio diferente: o dia sem
   `transition` nenhuma (uma segunda declaração apagava-lhe a lista), o
   Sobre com um `height:0 → auto` que não anima, o filme e o convidado
   com a lista redeclarada em `.aberto` a deixar cair a margem.

   Agora o markup é igual nos cinco — `.cu-barra` > `.cu-miolo` >
   `.cu-dentro`, que o `embrulharDentro()` garante — e a folha diz uma
   coisa só: o MIOLO é a grelha de `0fr` e o `.cu-dentro` é o que ela
   corta. Não depende do cartão, que é onde as cinco divergiam: acima
   do corte é grelha, abaixo é bloco, e a receita é a mesma.

   >>> `0fr` NO MIOLO E NÃO NO CARTÃO, e é o que o enunciado pedia por
   outras palavras. No cartão a receita teria de saber quantas linhas
   ele tem antes do miolo — duas no dia, quatro no filme, três no
   Sobre — e voltavam as cinco variantes. Medido quando tentei: o
   Sobre a 360 dava `rows[2618px 0px 0px]`, o miolo na primeira linha
   e o cartão aberto em permanência. Com o `.cu-dentro` a receita não
   precisa de contar nada. <<<

   As três propriedades na MESMA lista, que é a única forma de não se
   apagarem umas às outras — o trap que decidiu esta folha três vezes.
   ══════════════════════════════════════════════════════════════════ */
#body-wrapper .todos-dias .caixa-dia > .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado > .cu-miolo,
#body-wrapper .caixa-sobre > div > .cu-miolo{
  display:grid;
  grid-template-rows:0fr;
  opacity:0;
  height:auto;
  overflow:visible;
  /* >>> O `visibility` É PRECISO, E MEDI-O ANTES DE O REPOR. Sem ele,
     com `0fr` e `overflow:hidden`, o teclado ENTRA no miolo fechado:
     medido a 360 e 1265, o primeiro focável de cada lista recebe foco
     — 5 no dia, 1 no filme, 1 no convidado, 29 no Sobre. O `0fr` corta
     à vista e não tira da ordem de foco.

     Vai na MESMA lista, e a diferença é o ATRASO: `0s` sem atraso no
     estado aberto, `0s` com atraso de um token no fechado. A transição
     que corre é a do estado de DESTINO — ao abrir lê-se a lista do
     `.aberto` e o miolo aparece no fotograma zero; ao fechar lê-se
     esta, e o `visibility:hidden` só entra quando a altura já chegou a
     zero. Era isto que existia com `.25s` e que se perdeu quando as
     listas por lista deram lugar à receita única: o `visibility`
     passou a entrar no instante zero e o miolo sumia com a caixa ainda
     aberta, meio segundo em branco. <<< */
  visibility:hidden;
  /* >>> E O FADE É SÓ A ABRIR — decisão do Pedro, 18 Set. Esta é a
     lista do estado FECHADO, isto é, a que corre no fecho, e o
     `opacity` sai dela: o miolo fica a 1 até ao fim e só a altura
     anima. A lista do `.aberto` mantém-no, portanto a abertura
     continua a trazer o texto de 0 a 1 com a altura.

     O `opacity:0` declarado aqui continua a valer — sem transição é
     instantâneo, e acontece no mesmo fotograma em que o
     `visibility:hidden` entra, que é o último. Nada pisca. <<< */
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             margin-bottom var(--cu-tempo-acordeao) ease-in-out,
             opacity 0s var(--cu-tempo-acordeao),
             visibility 0s var(--cu-tempo-acordeao);
}

#body-wrapper .todos-dias .caixa-dia.aberto > .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao.aberto > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado.aberto > .cu-miolo,
#body-wrapper .caixa-sobre > div.aberto > .cu-miolo{
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  /* a lista por extenso outra vez: uma segunda declaração de
     `transition` no mesmo elemento substitui a primeira inteira, e o
     que muda aqui é só o atraso do `visibility`. */
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             opacity var(--cu-tempo-acordeao) ease-in-out,
             margin-bottom var(--cu-tempo-acordeao) ease-in-out,
             visibility 0s;
}

/* >>> OS DOIS ESPAÇADORES DO SOBRE PASSAM PARA DENTRO. O miolo dele
   tinha `::before` e `::after` de `content:""` e 34px cada, e um pseudo
   com caixa é item de grelha: `rows[34px 952px 34px]`, três linhas onde
   a receita declara uma, e o `0fr` só apanhava a do meio. Testei
   `grid-auto-rows:0fr` e não serve — aberto dá `rows[952 952 952]`,
   h2856, porque três linhas a `1fr` repartem o espaço por igual.
   Os 34+34 passam a `padding-block` do `.cu-dentro`: mesma medida,
   mesmo sítio à vista, e agora dentro da caixa que anima. <<< */
#body-wrapper .caixa-sobre > div > .cu-miolo::before,
#body-wrapper .caixa-sobre > div > .cu-miolo::after{ content:none }
/* >>> E OS 34 SÃO CONTEÚDO E NÃO `padding` — medido. Como `padding`
   do `.cu-dentro` o miolo fechava a 68 e não a 0: o `min-height:0`
   baixa a caixa de conteúdo a zero, mas a caixa de bordo nunca mede
   menos do que o seu próprio `padding`. Como pseudos DO `.cu-dentro`
   são conteúdo — o `overflow:hidden` corta-os com o resto. <<< */
#body-wrapper .caixa-sobre > div > .cu-miolo > .cu-dentro::before,
#body-wrapper .caixa-sobre > div > .cu-miolo > .cu-dentro::after{
  content:"";
  display:block;
  height:var(--cu-base);
}

/* >>> O `.comenta-estes` DEIXA DE ALTERNAR `display`. Já vive dentro
   do `.cu-dentro`, e o que o fazia saltar era o `none → block`: de
   `display` não se transita, e media-se −34 no primeiro fotograma do
   fecho. Aberto sempre; quem o esconde é o `overflow:hidden` do
   `.cu-dentro`, que é o mesmo que esconde tudo o resto. <<< */
#embrulho .todos-convidados .caixa-convidado .cu-dentro .comenta-estes{
  display:block;
}

/* o que a grelha corta, e é sempre o mesmo elemento */
#body-wrapper .todos-dias .caixa-dia > .cu-miolo > .cu-dentro,
#embrulho .todas-sessoes .caixa-sessao > .cu-miolo > .cu-dentro,
#embrulho .todos-convidados .caixa-convidado > .cu-miolo > .cu-dentro,
#body-wrapper .caixa-sobre > div > .cu-miolo > .cu-dentro{
  min-height:0;
  min-width:0;
  overflow:hidden;
}

/* o cartão: a meia linha e o realce, na mesma lista */
#body-wrapper .todos-dias .caixa-dia,
#embrulho .todas-sessoes .caixa-sessao,
#embrulho .todos-convidados .caixa-convidado,
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros{
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             margin-bottom var(--cu-tempo-acordeao) ease-in-out,
             background-color var(--cu-tempo-acordeao) ease-in-out, box-shadow var(--cu-tempo-acordeao) ease-in-out;
}

/* ════════ E AS TRÊS ANIMAÇÕES SAEM JUNTAS EM `reduced-motion` ══════
   Os cinco acordeões, a entrada dos itens do rodapé e o hambúrguer a
   virar cruz. Uma regra, e o estado final de cada uma é o estado
   natural do elemento — nada fica a meio. */
@media (prefers-reduced-motion:reduce){
  #body-wrapper .todos-dias .caixa-dia,
  #embrulho .todas-sessoes .caixa-sessao,
  #embrulho .todos-convidados .caixa-convidado,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros,
  #body-wrapper .todos-dias .caixa-dia > .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao > .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado > .cu-miolo,
  #body-wrapper .caixa-sobre > div > .cu-miolo,
  .mobile-menu .button_container span{ transition:none }
  #footer #rodape .caixa-info > div:not(.topo).aberto li{ animation:none }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> HOME, AS CARAS: UM LINK SÓ ABAIXO DE 760 — 18 Set, decisão do
   Pedro. Trinta destinos numa grelha de caras pequenas é uma escolha
   que o dedo não consegue fazer; abaixo do corte a grelha é uma
   imagem e leva a um sítio só. A âncora está sempre no DOM e é esta
   folha que a liga — não há escuta de largura nem DOM a mudar quando
   se roda o telemóvel. <<< */
#convidados.modulos .todos-convidados .cu-caras-todas{ display:none }

@media (width < 760px){
  #convidados.modulos .todos-convidados{ position:relative }
  #convidados.modulos .todos-convidados .cu-caras-todas{
    display:block;
    position:absolute;
    inset:0;
    z-index:2;
  }
  /* os links individuais, a placa de nome e o realce de cara saem */
  #convidados.modulos .todos-convidados .caixa-convidado .link-convidados,
  #convidados.modulos .todos-convidados .caixa-convidado h3,
  #convidados.modulos .todos-convidados .caixa-convidado .img-overlay{
    display:none;
  }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 1000px){
  /* o risco só nos complexos — saiu do bloco de `< 760` para aqui, e é
     a mesma receita palavra por palavra. Medido a 800 antes: `risco
     display:none w0 h0`; a 360: `display:block w328 h34 fs18`. */
  .cu-barra .cu-risco{ display:none }

  /* >>> O RISCO SAI DO FLUXO — decisão do Pedro, 18 Set, e substitui a
     colocação em grelha que tinha escrito há uma hora. Enquanto ele
     era item da grelha, tinha de atravessar as colunas todas e empurrar
     o resto do cartão para a linha 2 — e isso é a grelha do cartão a
     mudar de forma por causa de um traço decorativo. Fora do fluxo, a
     grelha entre 760 e 999 volta a ser a de 1265 e o risco encosta ao
     topo do cartão por conta própria.

     O par é `position:relative` + `padding-top` no cartão: o padding
     abre os 34 que o risco ocupa, e o risco pinta-os de fora do fluxo.
     Uma regra, todas as larguras abaixo de 1000 — a 360 também, onde
     antes ele era a primeira linha de um bloco. <<< */
  #embrulho .todas-sessoes .caixa-sessao,
  #body-wrapper .todos-posts .caixa-post .post{
    position:relative;
    padding-top:var(--cu-base);
  }

  #embrulho .todas-sessoes .caixa-sessao > .cu-risco,
  #body-wrapper .todos-posts .caixa-post .post > .cu-risco{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    font-family:var(--cu-display);
    font-weight:400;
    font-size:var(--t-peq);
    line-height:var(--l-corpo);
    letter-spacing:.34em;
    color:var(--cu-tinta);
    overflow:hidden;
    white-space:nowrap;
    user-select:none;
  }
}

/* >>> E A CORRIDA DO CARTÃO SAI, nas duas listas de B, até aos 1000.
   O toco de underscores por baixo da miniatura do blog a 800 não era o
   risco — o risco estava certo, `x0 y0 w728` — era a `.cu-corrida` do
   cartão, medida em `x10 y131 w91`. Abaixo de 760 ela sobrevivia sem
   se ver porque a grelha a esmagava a `w0`; entre 760 e 999 a pista
   dá-lhe 91px e ela desenha. Quem faz o trabalho dela nestas duas
   listas é o risco. <<< */
@media (width < 1000px){
  /* >>> DENTRO DA `.cu-linha`, NÃO FILHA DO CARTÃO. Escrevi-a primeiro
     com `>` a partir do cartão e não bateu em nenhuma das duas: o
     `armarLinha()` envolve título, corrida e sinal num `span.cu-linha`,
     e a cadeia real é `.cu-corrida < .cu-linha < .blog-list-titulo <
     .blog-list-texto < .post` no blog e `.cu-corrida < .cu-linha <
     .sessao-info` no filme. Sétima vez esta semana que um `>` deixa de
     bater depois de o JS embrulhar. <<< */
  #embrulho .todas-sessoes .caixa-sessao .cu-linha > .cu-corrida,
  #body-wrapper .todos-posts .caixa-post .post .cu-linha > .cu-corrida{
    display:none;
  }
}
}

/* ---------------------------------------------------------------- */
@layer movimento{

/* ════════ O RODAPÉ ABRE COMO OS ACORDEÕES — 18 Set ═════════════════
   Era o caso à parte da folha: `ul{display:none}` fechado, e de
   `display:none` não se transita — a abertura era uma `animation` nos
   `li`, que só anima num sentido. Com o `envolverRodape()` a pôr o
   `ul` dentro de `.cu-miolo` > `.cu-dentro`, a receita única dos cinco
   acordeões serve-o tal como está, e passa a fechar devagar também.

   Sem campo a papel: o `margin-bottom` da meia linha é dos cartões,
   que têm fundo a pintar; aqui não há fundo que mude. Por isso a lista
   de transição do rodapé é a dos cinco menos essa propriedade.

   Acima de 1000 o embrulho é transparente — `display:contents` nos
   dois — e o rodapé de escritório não dá por ele.
   ══════════════════════════════════════════════════════════════════ */
#footer #rodape .caixa-info > div:not(.topo) > .cu-miolo,
#footer #rodape .caixa-info > div:not(.topo) > .cu-miolo > .cu-dentro{
  display:contents;
}

@media (width < 1000px){
  #footer #rodape .caixa-info > div:not(.topo) > .cu-miolo{
    order:5;
    flex:0 0 100%;
    min-width:0;
    max-width:100%;
    display:grid;
    grid-template-rows:0fr;
    opacity:0;
    visibility:hidden;
    transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
               opacity 0s var(--cu-tempo-acordeao),
               visibility 0s var(--cu-tempo-acordeao);
  }

  #footer #rodape .caixa-info > div:not(.topo).aberto > .cu-miolo{
    grid-template-rows:1fr;
    opacity:1;
    visibility:visible;
    transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
               opacity var(--cu-tempo-acordeao) ease-in-out,
               visibility 0s;
  }

  #footer #rodape .caixa-info > div:not(.topo) > .cu-miolo > .cu-dentro{
    display:block;
    min-height:0;
    min-width:0;
    overflow:hidden;
  }

  /* >>> O `display` DO `ul` DEIXA DE DEPENDER DO ESTADO, e é preciso
     dizê-lo com a especificidade do `:not(.aberto)` que lá estava —
     senão ele ganha. O `display:none` do fechado tinha de sair (um
     `ul` a `display:none` não tem altura para animar), mas trocá-lo
     por `block` só no fechado deixava o Arquivo a UMA coluna fechado e
     a duas aberto: medido, a caixa saltava de 175 para 315 no primeiro
     fotograma do fecho — os mesmos nove itens a 35px, cinco linhas
     contra nove. O estado muda a altura da caixa; não muda a forma da
     lista. <<< */
  #footer #rodape .caixa-info > div:not(.topo):not(.aberto) ul,
  #footer #rodape .caixa-info > div:not(.topo).aberto ul{ display:block }
  #footer #rodape .caixa-info > div.arquivo:not(.topo):not(.aberto) ul,
  #footer #rodape .caixa-info > div.arquivo:not(.topo).aberto ul{ display:grid }

  /* e a `animation` de entrada sai com ele: ela existia porque não
     havia transição possível, e agora há */
  #footer #rodape .caixa-info > div:not(.topo).aberto li{ animation:none }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* ════════ NADA QUEBRA DENTRO DE UMA UNIDADE — 18 Set ═══════════════
   A regra já existia noutras peças; chega aos três sítios onde
   faltava, e em todas as larguras e não só no degrau do tablet. */

/* >>> 1 · A ETIQUETA QUEBRA ANTES DE «POR», e a correcção é ao
   contrário do que parece: é o `.tipo` a ganhar `normal`, não o
   `.concerto` a ganhar `nowrap` — esse já o tinha. Medido, os dois
   estavam `nowrap` e a etiqueta saía em `1 rect` a 800 e a 360 nas
   três sessões, «JP Simões», «Club Makumba» e «Samuel Úria»: não
   quebrava em sítio nenhum, transbordava.

   E entre os dois spans NÃO HÁ ESPAÇO no markup — `</span><span>` —
   portanto «por» e o nome já são uma unidade por construção. Ao abrir
   o `.tipo` a única oportunidade de quebra que aparece é a de dentro
   dele, entre «Cine-Concerto» e «por». O nome continua inteiro pelo
   seu próprio `nowrap`. <<< */
/* E com ele um `overflow-wrap:normal` nos dois: o `anywhere` que a
   folha herda partia «por» em «po» e «r» — medido, três rects de 137,
   23 e 11 numa caixa de 186. Com ele normal, uma unidade que não caiba
   transborda em vez de se partir, que é a regra. */
#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas .tipo,
#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas .concerto{
  overflow-wrap:normal;
}
#embrulho .todas-sessoes .caixa-sessao .cu-etiquetas .tipo{ white-space:normal }

/* 2 · o título original é uma unidade; a ficha quebra DEPOIS dele */
#body-wrapper .ficha-tecnica .tor{ white-space:nowrap }

/* >>> 3 · «NOITE DE ABERTURA» NUMA LINHA — e o `nowrap` sozinho não
   chega: medido a 800, com ele posto, o `.quando` ficava numa linha
   mas a TRANSBORDAR, `scrollWidth 201` numa caixa de 76. A caixa é que
   era o problema — o `.cu-dentro` a 800 é uma grelha de seis pistas de
   75,5px e o `.quando` caía numa delas. Atravessa as seis, como o
   risco atravessa as cinco do cartão. A 360 o `.cu-dentro` é bloco e
   ele já tinha a largura toda: `328/328` antes e depois. <<< */
#body-wrapper .cu-dentro .quando{
  white-space:nowrap;
  grid-column-start:1;
  grid-column-end:-1;
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* ════════ UM MECANISMO SÓ, E É O DO MIOLO — 18 Set ═════════════════
   >>> O MIOLO DO DIA ANDAVA EM `y` DURANTE A ANIMAÇÃO. Amostrado a
   360, fotograma a fotograma: o topo do miolo descia até +15px por
   fotograma na primeira metade da abertura e voltava a subir na
   segunda, e no fecho o mesmo ao contrário. Não é degrau num
   fotograma — é deriva ao longo dos 500ms, e por isso não aparecia no
   teste do primeiro fotograma.

   A causa são DOIS colapsos encaixados a correr ao mesmo tempo: o
   cartão ainda tinha `grid-template-rows:var(--l-med) 0fr → 1fr` seu,
   e o miolo tem o `0fr → 1fr` da receita. Duas fracções a resolver uma
   contra a outra, e o miolo a sobrar ou a faltar dentro da sua própria
   linha em cada fotograma.

   O cartão passa a `auto` na linha do miolo: quem colapsa é o miolo, e
   o `auto` segue-o. A colocação do cartão fica; o colapso sai. <<< */
#body-wrapper .todos-dias .caixa-dia,
#body-wrapper .todos-dias .caixa-dia.aberto{
  grid-template-rows:var(--l-med) auto;
}
@media (width < 760px){
  #body-wrapper .todos-dias .caixa-dia,
  #body-wrapper .todos-dias .caixa-dia.aberto{ grid-template-rows:auto auto }
}
#body-wrapper .caixa-sobre > .bilheteira,
#body-wrapper .caixa-sobre > .ficha,
#body-wrapper .caixa-sobre > .parceiros,
#body-wrapper .caixa-sobre > .bilheteira.aberto,
#body-wrapper .caixa-sobre > .ficha.aberto,
#body-wrapper .caixa-sobre > .parceiros.aberto{
  grid-template-rows:var(--l-med) auto;
}

/* >>> E OS DOIS ESPAÇADORES DO DIA, como os do Sobre há duas horas: o
   miolo dele computava `rows[34px 0px 34px]` com UM filho, que são os
   pseudos a serem itens de grelha. Com o cartão a `auto` eles passavam
   a medir 68 de altura fechados. Passam para o `.cu-dentro`, onde são
   conteúdo e o `overflow` os corta. <<< */
#body-wrapper .todos-dias .caixa-dia > .cu-miolo::before,
#body-wrapper .todos-dias .caixa-dia > .cu-miolo::after{ content:none }
#body-wrapper .todos-dias .caixa-dia > .cu-miolo > .cu-dentro::before,
#body-wrapper .todos-dias .caixa-dia > .cu-miolo > .cu-dentro::after{
  content:"";
  display:block;
  height:var(--cu-base);
}

/* o fundo do miolo acompanha o do cartão, na mesma lista */
#body-wrapper .todos-dias .caixa-dia > .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado > .cu-miolo,
#body-wrapper .caixa-sobre > div > .cu-miolo{
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             opacity 0s var(--cu-tempo-acordeao),
             visibility 0s var(--cu-tempo-acordeao),
             margin-bottom var(--cu-tempo-acordeao) ease-in-out,
             background-color var(--cu-tempo-acordeao) ease-in-out;
}
#body-wrapper .todos-dias .caixa-dia.aberto > .cu-miolo,
#embrulho .todas-sessoes .caixa-sessao.aberto > .cu-miolo,
#embrulho .todos-convidados .caixa-convidado.aberto > .cu-miolo,
#body-wrapper .caixa-sobre > div.aberto > .cu-miolo{
  transition:grid-template-rows var(--cu-tempo-acordeao) ease-in-out,
             opacity var(--cu-tempo-acordeao) ease-in-out,
             visibility 0s,
             margin-bottom var(--cu-tempo-acordeao) ease-in-out,
             background-color var(--cu-tempo-acordeao) ease-in-out;
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> A SALA NA LINHA DA DURAÇÃO — 18 Set, decisão do Pedro. Abaixo
   de 1000 ela quebrava sozinha para a linha seguinte: a
   `.caixa-cal-sessao` é um flex, a quebra dá-se ENTRE itens, e a sala
   era o último item (`order:9`) com a `.hora-local` a `display:contents`
   a deixá-la solta. O `juntarSala()` põe-na dentro do `.cal-resto` — o
   item que já leva o realizador e a duração — e as três passam a ser
   uma peça. O `nowrap` dela já existia e agora cobre a sala também: a
   linha quebra antes da peça, nunca dentro dela. <<< */
#body-wrapper .todos-dias .caixa-cal-sessao .cal-resto{ overflow-wrap:normal }

/* acima de 1000 cabe tudo numa linha e o `nowrap` mantém o realizador
   colado à duração, que é a regra de 12 Set; abaixo, o que tem de se
   manter junto é `[duração] [sala]`, e disso trata o espaço duro */
@media (width >= 1000px){
  #body-wrapper .todos-dias .caixa-cal-sessao .cal-resto{ white-space:nowrap }
}
@media (width < 1000px){
  #body-wrapper .todos-dias .caixa-cal-sessao .cal-resto{ white-space:normal }
}
/* a peça é `[duração]\u00A0[sala]` e não quebra por dentro: sem este
   `nowrap` o espaço duro colava o «70'» ao «Teatro» e a sala partia-se
   a seguir — «Teatro / Narciso Ferreira», medido a 360. Com ele, a
   quebra dá-se ANTES da peça inteira. */
#body-wrapper .todos-dias .caixa-cal-sessao .cal-resto .sala{
  display:inline;
  white-space:nowrap;
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> AR DEPOIS DA SINOPSE — 18 Set, decisão do Pedro. Medido com o
   filme aberto: a 1265 o último parágrafo acaba 34 acima do fim do
   `.cu-dentro`, e a 360 acaba a ZERO — encostado — com o cartão a
   fechar ainda 17 acima dele, por causa da meia linha do campo a
   papel. O texto ficava por baixo do fim do papel.

   Uma base de `padding-bottom` nas duas colunas do `.cu-dentro`. Vai
   DENTRO da caixa que anima e em elemento de conteúdo, não no
   `.cu-dentro` — o `padding` dele não colapsaria com a caixa, que foi
   o que se mediu no Sobre e no dia.

   E o corte é 760 e não 1000: a 800 as duas colunas ainda estão lado a
   lado e já havia lá os 34. Escrita até 1000, esta regra somava-lhes
   outros 34 — medido, `último texto a 68px do fim do dentro`. Só falta
   onde as colunas empilham. <<< */
@media (width < 760px){
  #embrulho .todas-sessoes .caixa-sessao > .cu-miolo > .cu-dentro > .cu-esquerda,
  #embrulho .todas-sessoes .caixa-sessao > .cu-miolo > .cu-dentro > .cu-direita{
    padding-bottom:var(--cu-base);
  }
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* ════════ TRANSIÇÕES DE VISTA COM NOMES — 15 Set ═══════════════════
   >>> O `@view-transition` NÃO EXISTIA. O enunciado dava-o por posto;
   medido, `grep view-transition` na folha devolvia zero linhas. Entra
   aqui com os nomes, que era o que se pedia a seguir.

   O cabeçalho e o rodapé ganham nome próprio e por isso ficam PARADOS
   enquanto o miolo funde: um elemento com `view-transition-name` é
   capturado à parte e o motor liga o velho ao novo em vez de os
   desvanecer com a página.

   Os nomes têm de ser ÚNICOS na página — dois elementos com o mesmo
   nome cancelam a transição inteira. Por isso o par partilhado (a cara
   do convidado na lista e a foto grande na página dele) leva o slug no
   nome, e quem o põe é o JS, que é quem sabe o slug.

   Medido: o Firefox 153 SUPORTA — `document.startViewTransition` e
   `CSS.supports('view-transition-name')` dão os dois `true`. Onde não
   houver, não há transição e não parte nada. <<< */
@view-transition{ navigation:auto }

#header{ view-transition-name:cabecalho }
#footer{ view-transition-name:rodape }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> O `.extra` QUEBRA COMO TEXTO — 15 Set. Estava `nowrap` e media
   342px numa janela de 320: «versão do realizador - in memoriam» é uma
   FRASE, não uma unidade de dados, e uma frase quebra onde couber.
   Medido a 320: `w342 →357`, o único elemento da página a sair depois
   das corridas (essas são cortadas pelo `overflow` do pai).

   E com ele o `overflow-wrap` volta a `normal`: o `anywhere` que
   herdava partia palavras a meio, que é o contrário da regra de 18
   Set — se não couber, quebra ANTES da palavra. <<< */
/* >>> E A FAMÍLIA TODA, não só o `.extra` — 15 Set, apanhado pela
   regra 8 do guarda em `cinema-para-escolas@328`: `span.publico w221
   →438` numa janela de 328. É o mesmo defeito do `.extra` noutra
   etiqueta, e o guarda viu-o porque o `completo` corre rotas que o
   `rapido` não corre.

   A regra é a de 18 Set: uma etiqueta que é FRASE quebra como texto;
   uma que é DADO fica inteira. Frases: `.extra`, `.publico`,
   `.escolas`, `.oficina`. Dados, e ficam `nowrap`: `.quando`,
   `.tipo`, `.concerto`, `.local`. <<< */
#embrulho .todas-sessoes .caixa-sessao .extra,
#embrulho .todas-sessoes .caixa-sessao .publico,
#embrulho .todas-sessoes .caixa-sessao .escolas,
#embrulho .todas-sessoes .caixa-sessao .oficina,
#embrulho .caixa-sessao .sessao-info > .extra,
#embrulho .caixa-sessao .sessao-info > .publico,
#embrulho .caixa-sessao .sessao-info > .escolas,
#embrulho .caixa-sessao .cu-dentro .extra,
#embrulho .caixa-sessao .cu-dentro .publico,
#embrulho .caixa-sessao .cu-dentro .escolas,
#embrulho .caixa-sessao .cu-dentro .oficina{
  white-space:normal;
  overflow-wrap:normal;
}

}

/* ---------------------------------------------------------------- */
@layer estados{

/* >>> E O DO ESTADO ABERTO TEM DE VIR DAQUI. Escrevi-o em `paginas` com
   a mesma forma e não pegou: o `−` vive em `estados`, e uma camada mais
   tarde ganha sempre, haja a especificidade que houver. Medido depois
   da primeira tentativa: `div.arquivo::after content "−"`, com o
   `.cu-sinal` já lá ao lado — dois sinais na mesma linha, um desenhado
   e outro em texto. Oitava vez esta semana que a ordem das camadas
   decide, e a primeira em que fui ver a camada ANTES de subir a
   especificidade. <<< */
#footer #rodape .caixa-info > div:not(.topo):has(h5[aria-expanded="true"])::after{
  content:none;
}

}

/* ---------------------------------------------------------------- */
@layer movimento{

/* >>> `reduced-motion` DEPOIS DA RECEITA, e é só isso — 15 Set. A regra
   existia e estava escrita ANTES do bloco que dá a transição aos
   miolos, na mesma camada: dentro de uma camada ganha quem vem por
   último, e a receita vinha. Medido sob `reduce`, antes:

     cartão [none]                              ← a regra pegava
     miolo  [grid-template-rows, opacity, …|0.5s, …, 0.5s]  ← não

   Os cartões paravam e os miolos continuavam a animar meio segundo.
   A regra não muda de forma nem de camada: muda de sítio. É a mesma
   correcção de 13 Set no bloco mobile, e pela mesma razão. <<< */
@media (prefers-reduced-motion:reduce){
  #body-wrapper .todos-dias .caixa-dia,
  #body-wrapper .todos-dias .caixa-dia > .cu-miolo,
  #body-wrapper .todos-dias .caixa-dia.aberto > .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao,
  #embrulho .todas-sessoes .caixa-sessao > .cu-miolo,
  #embrulho .todas-sessoes .caixa-sessao.aberto > .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado,
  #embrulho .todos-convidados .caixa-convidado > .cu-miolo,
  #embrulho .todos-convidados .caixa-convidado.aberto > .cu-miolo,
  #body-wrapper .caixa-sobre > .bilheteira,
  #body-wrapper .caixa-sobre > .ficha,
  #body-wrapper .caixa-sobre > .parceiros,
  #body-wrapper .caixa-sobre > div > .cu-miolo,
  #body-wrapper .caixa-sobre > div.aberto > .cu-miolo,
  #footer #rodape .caixa-info > div:not(.topo) > .cu-miolo,
  #footer #rodape .caixa-info > div:not(.topo).aberto > .cu-miolo,
  #embrulho .todas-sessoes .caixa-conteudo,
  #embrulho .todas-sessoes .caixa-conteudo.aberto,
  #embrulho .todas-sessoes .caixa-conteudo > .cu-miolo{
    transition:none;
  }
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> O CAMPO DO RODAPÉ VAI A BORDO — 15 Set. O `#footer` partilhava o
   `max-width:var(--cu-medida)` com o `#body-wrapper`, e é ele que
   pinta o sangue: acima dos 1280 o campo parava e sobrava osso dos dois
   lados. Medido a 2560, `#footer x640 →1920`, e a 3440 `x1080 →2360`,
   contra `#header x0 →` o ecrã todo nas duas. O cabeçalho estava certo;
   o rodapé é que herdava uma medida que é de CONTEÚDO e não de campo.

   A medida fica — passa para dentro, no `#rodape`, que é o conteúdo. O
   `#footer` é a faixa e não tem largura máxima nenhuma. <<< */
#footer{ max-width:none }

#footer #rodape{
  max-width:var(--cu-medida);
  margin-inline:auto;
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

/* >>> O TÍTULO DA SECÇÃO NÃO CABE A 320, e a causa é a de sempre num
   flex: o `span.titulo` é item de `.caixa-titulo` e tem `min-width:auto`
   — o mínimo automático de um item de flex é o seu MIN-CONTENT, e o
   min-content de «Kiarostami» a 55px são 326px. O pai media 291 e o
   filho 326; medido em `cafe-kiarostami@320`, `+21` de transbordo, e
   `+13` a 328.

   `min-width:0` devolve ao item o direito de encolher. E o
   `overflow-wrap:break-word` é o que fecha o caso: uma palavra só,
   maior do que a linha inteira, não tem «antes» onde quebrar — o
   `break-word` parte SÓ nesse caso, e é por isso que não contradiz a
   regra de 18 Set. Uma frase continua a quebrar entre palavras. <<< */
#embrulho .todas-sessoes .caixa-titulo > .titulo{
  min-width:0;
}
/* >>> `anywhere` E NÃO `break-word`, e a diferença não é de estilo é de
   MEDIDA: os dois partem a palavra só quando ela não cabe, mas apenas o
   `anywhere` conta para o min-content do elemento. Com `break-word` o
   `span.mono` continuava a medir 326 e a caixa com ele — medido, `w326
   →341` numa janela de 320, com o `min-width:0` já posto. <<< */
#embrulho .todas-sessoes .titulo .titulo-link{
  overflow-wrap:anywhere;
}

}

/* ---------------------------------------------------------------- */
@layer paginas{

}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width < 1000px){

/* >>> A ORDEM DA LINHA RESOLVE-SE NO DOM E NÃO EM `order` — 15 Set.
   Escrevi primeiro cinco regras de `order` aqui e não mudaram um pixel:
   abaixo do corte o cartão é `display:block`, e `order` só vale em
   flex ou grid. Regras mortas não ficam — a conclusão fica, e a
   correcção passou para o `ordenarLinha()` no JS. Ver a nota lá. <<< */

}
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width >= 1000px){

/* ════════ OS ITENS ENTRAM NA FILA — 15 Set, decisão do Pedro ═══════
   Acima de 1000 a fila do rodapé é `[rótulo] [itens…] [corrida]
   [sinal]`: os itens entre o rótulo e a corrida, a corrida a encolher
   com eles, o sinal fixo à direita.

   Os `li` são filhos do `div` (o `ul`, o `.cu-miolo` e o `.cu-dentro`
   são `display:contents`) e o rótulo, a corrida e o sinal vivem dentro
   do `h5`. Para todos poderem ordenar-se na MESMA fila, o `h5` também
   passa a `display:contents` — e é por isso que o texto dele teve de
   ganhar um `span.rotulo` no JS: um elemento sem caixa não se ordena
   nem recebe foco.

   Abaixo de 1000 nada disto existe: lá o `h5` é a linha, com caixa, e
   o miolo é a grelha que abre por baixo. ══════════════════════════ */
#footer #rodape .caixa-info > div:not(.topo) h5{ display:contents }

#footer #rodape .caixa-info > div:not(.topo) > .cu-miolo{ display:contents }

/* >>> E A JUNTA VOLTA AO RÓTULO. Ela vivia no `column-gap` do `h5`, e
   com ele a `display:contents` deixou de haver caixa que a aplique — o
   `div` só dá 5. Medido: «ARQUIVO» acabava em 166 e o «2024» começava
   em 167, colados. É a mesma `--cu-junta` da linha, agora em margem
   porque o contentor mudou. <<< */
#footer #rodape .caixa-info > div:not(.topo) .rotulo{
  order:1;
  margin-inline-end:var(--cu-junta);
}
/* >>> A CORRIDA ENCHE ENTRE O RÓTULO E OS ITENS — decisão do Pedro, e
   é a troca de dois números: a corrida passa a 2 e os itens a 3. Assim
   ela cresce com o espaço livre e empurra os itens para a direita, e o
   último acaba onde acaba a corrida da linha de subir — a mesma junta
   até ao sinal nas quatro linhas. <<< */
#footer #rodape .caixa-info > div:not(.topo) .cu-corrida{ order:2 }
#footer #rodape .caixa-info > div:not(.topo) li{ order:3 }
#footer #rodape .caixa-info > div:not(.topo) .cu-sinal{ order:4 }

}
}

/* ---------------------------------------------------------------- */
@layer estados{
@media (hover:hover){

/* >>> O SINAL A TINTA EM HOVER — 15 Set. Perdeu-se quando o sinal
   passou de `::after` a elemento com SVG: a regra que dava
   `color:var(--cu-tinta)` ao pseudo não alcança o `.cu-sinal`, e o SVG
   lê `currentColor`. Medido no dia, a 1265: em hover o título vai
   `rgb(34,28,23) → rgb(156,30,23)` e o sinal fica em `rgb(156,30,23)`
   nos dois estados — o inverso não acontecia.

   É o inverso do título por desenho: o texto vai a sangue, o sinal vem
   a tinta. As seis listas por `.cu-barra`, que é a classe que o
   `armarBarraUnica()` põe nas seis. <<< */
.cu-barra:hover .cu-sinal{ color:var(--cu-tinta) }

/* no rodapé o campo é sangue: lá o hover é papel, como o do texto */
#footer #rodape .caixa-info > div:hover .cu-sinal,
#footer #rodape .topo a:hover .cu-sinal{ color:var(--cu-papel) }

}
}

/* ---------------------------------------------------------------- */
@layer paginas{
@media (width >= 760px){

/* >>> AS SESSÕES ALINHAM COM O NOME DO DIA — 15 Set, decisão do Pedro.
   Começavam debaixo da miniatura: medido, `dia x112 · hora x36` a 800 e
   `dia x133 · hora x57` a 1265 — 76px de desvio, o mesmo nas duas.

   Os 76 não são um número: a `.nome-dia` é uma grelha de cinco pistas
   e a primeira é a miniatura, `55px` — que é `--l-med` — mais a goteira
   do cabeçalho, `21px`, que é `--cu-goteira-cab`. O miolo não é item
   dessa grelha (o cartão tem uma coluna só, `cols[1151.2px]`), portanto
   não há `grid-column-start` que o mova: é margem, e a margem é a soma
   das duas pistas que ele tem de saltar.

   Abaixo de 760 não muda — lá a miniatura não abre coluna e os dois já
   estão em `x16`. <<< */
#body-wrapper .todos-dias .caixa-dia > .cu-miolo{
  margin-inline-start:calc(var(--l-med) + var(--cu-goteira-cab));
}

}
}

/* ---------------------------------------------------------------- */
@layer estados{

/* >>> O REALCE DO TÍTULO MUDA DE CAMADA — 15 Set. Estava em
   `componentes` e declara `color` e `transform` conforme o ESTADO:
   `:hover` e `:focus-visible`. Componentes descrevem a forma em
   repouso; o que muda com o estado é de `estados`, e é o nome da
   camada que o diz.

   Mover para `estados` põe estas duas regras MAIS TARDE na cascata —
   de `componentes` para depois de `paginas` — portanto só podem ganhar
   mais, nunca menos. É por isso que a prova é a captura: se alguma
   passou a ganhar onde perdia, os píxeis dizem-no. <<< */
#body-wrapper a:focus-visible,
#body-wrapper .todos-dias .nome-dia h3:focus-visible .dia-n,
#body-wrapper .todos-dias .nome-dia h3:focus-visible .dia-s,
#body-wrapper .todos-convidados .nome-convidado h3:focus-visible,
#body-wrapper .todas-seccoes .caixa-seccao:has(.seccao-link:focus-visible) h2.seccao-titulo,
#body-wrapper .todos-posts .caixa-post:has(a:focus-visible) .blog-list-titulo h3,
#body-wrapper .todas-sessoes .caixa-sessao h2:focus-visible{
  color:var(--cu-sangue);
  transform:scale(1.02);
}

@media (hover:hover){
#body-wrapper a:hover,
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3 .dia-n,
#body-wrapper .todos-dias .caixa-dia:hover .nome-dia h3 .dia-s,
#body-wrapper .todos-convidados .caixa-convidado:hover .nome-convidado h3,
#body-wrapper .todas-seccoes .caixa-seccao:hover h2.seccao-titulo,
#body-wrapper .todos-posts .caixa-post:hover .blog-list-titulo h3,
#body-wrapper .todas-sessoes .caixa-sessao:hover h2{
  color:var(--cu-sangue);
  transform:scale(1.02);
}
}

}