/* ═══════════════════════════════════════════════════════════════════
   palco.css — o que segura o quadro. Seis regras, e mais nada.

   O quadro do artboard é um `div` de 1440×N. O palco dá-lhe a largura
   da janela e a escala. A `aspect-ratio` faz a altura sair certa sem
   uma linha de JavaScript: um `transform` não ocupa espaço no fluxo, e
   sem ela o palco colapsava a zero.

   `container-type: inline-size` é o que permite ao `100cqw` medir o
   PALCO e não a janela — importante porque o palco tem um tecto.

   ACIMA DE 1440 O QUADRO NÃO CRESCE. O desenho foi feito a 1440; num
   ecrã de 2560 escalá-lo daria um corpo de 28px e uma linha de 90
   caracteres. Fica ao seu tamanho, centrado, com a tela por fora — que
   é a mesma cor do fundo do quadro, por isso não se vê emenda.
   ═══════════════════════════════════════════════════════════════════ */

html {
  color-scheme: light;

  /* ═══ A ROLAGEM ═══
     Isto suaviza os SALTOS — âncoras, teclado, um `scrollTo` — que sem
     ele são cortes secos. A roda do rato continua a ser a do sistema,
     e é de propósito: interceptá-la para lhe pôr inércia é o que fazem
     as bibliotecas de «scroll suave», e o preço é atraso na resposta,
     briga com o trackpad e teclado a saltar. Um scroll elegante é um
     scroll que não perde fotogramas — não um que chega atrasado.

     O `scroll-padding-top` é para os saltos não aterrarem debaixo da
     barra, que flutua por cima. */
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: #E3E3E3;
  overflow-x: hidden;
}

.palco {
  container-type: inline-size;
  width: 100%;
  max-width: calc(var(--qw) * 1px);
  aspect-ratio: var(--qw) / var(--qh);
  overflow: hidden;
}

/* ═══ `.palco.palco` E NÃO `.palco` ═══
   A folha do artboard traz um `body { margin: 0 }`, e o `escopar`
   transforma-o numa regra sobre o PRÓPRIO palco — mesma especificidade
   que a de cima, e escrita depois (o `<style>` do artboard está no
   corpo, esta folha está na cabeça). Ganhava, e matava o
   `margin-inline: auto`.

   Abaixo de 1440 não se via: o palco enche a janela e centrado ou
   encostado dá no mesmo. Acima de 1440 o palco encostava à esquerda
   enquanto a barra — que tem palco próprio, sem essa regra em cima —
   continuava ao centro. Setenta e dois píxeis de desencontro num ecrã
   de 1600: a nav saía para a direita e ia dar contra o painel do
   herói.

   Duplicar a classe põe esta regra acima da do artboard sem gastar um
   `!important`. */
.palco.palco { margin-inline: auto; }

/* O quadro tem de trazer a sua PRÓPRIA medida. Sem ela era um bloco a
   encher o palco (já escalado) e a escala aplicava-se por cima: o
   1440 saía a 363 em vez de 723 — a escala duas vezes. */
.quadro {
  width: calc(var(--qw) * 1px);
  height: calc(var(--qh) * 1px);
  transform-origin: 0 0;
  transform: scale(var(--k, 1));
  will-change: transform;
}

/* A escala. Dividir um comprimento por outro dá um número puro, que é
   o que o `scale` quer. Se algum browser não aceitar a conta, o
   `js/quadro.js` escreve o `--k` à mão — daí o valor de reserva.

   ═══ E A PERGUNTA ERA FEITA À PROPRIEDADE ERRADA (28-set) ═══
   Estava `@supports (width: …)`. A conta dá um NÚMERO, e uma `width`
   não aceita números — a pergunta era sempre «não», em qualquer
   browser, e esta regra nunca entrou uma única vez. A escala do palco
   vinha SEMPRE do `quadro.js`, e por isso a página pintava uma vez a
   1,0 antes de ele correr e depois saltava para a escala certa. Foi o
   que o dono viu no header: «começa mais pequeno e depois fica maior».

   Pergunta-se à `opacity`, que aceita um número puro desde sempre e
   por isso responde à única coisa que interessa saber: se este browser
   sabe dividir um comprimento de contentor por um comprimento. */
@supports (opacity: calc(100cqw / (1440 * 1px))) {
  .palco { --k: calc(100cqw / (var(--qw) * 1px)); }
}

/* ═══════════════════════════════════════════════════════════════════
   AS DUAS BANDAS

   O corpo do texto é 15,8px no quadro de 1440. Escalado dá:

       1440 → 15,8      1100 → 12,1  ← o chão que medimos
       1024 → 11,2       900 →  9,9
        600 →  6,6       390 →  4,3  ← ilegível

   E o quadro de 390 está certo ao seu tamanho, mas fica tosco acima
   dos ~560, que é onde deixa de ser um telemóvel e passa a ser um
   telemóvel ampliado.

   Daí o corte aos 1024 — que é onde os tablets aterram — e o tecto de
   560 no estreito: por baixo dos 1024 o quadro de 390 fica ao seu
   tamanho, centrado, com a tela à volta. É o padrão da coluna de
   telemóvel, e mantém cada texto na medida em que foi desenhado.

   Uma página sem quadro estreito fica só com o largo, e abaixo dos
   1024 encolhe. NÃO se inventa aqui uma maquetação de telemóvel: era
   exactamente o que correu mal à primeira.
   ═══════════════════════════════════════════════════════════════════ */
/* ═══ O TECTO DA BANDA ESTREITA: 560 → 640 ═══
   O corte está nos 1024, e entre os 640 e os 1024 sobrava tela dos dois
   lados de uma coluna de telemóvel. Não é ecrã que não exista: é o
   tablet em retrato e a janela a meio ecrã do portátil.

   Não se sobe mais do que isto, e a conta diz porquê. O quadro estreito
   é 390; a 640 escala ×1,64 e o corpo de 11,4px pinta 18,7 — grande,
   ainda dentro do que se lê. A 768 seria ×1,97 e 22,4px, com o titular
   de 36 a pintar 71: deixa de ser um telemóvel e passa a ser um
   telemóvel AMPLIADO, que é o defeito que o tecto existe para evitar.

   O que resolve o resto dessa faixa não é o tecto — são as tiras, que a
   partir de agora chegam às pontas do ecrã em qualquer largura (ver
   `sangra.css`). A coluna fica na medida em que foi desenhada e as
   faixas escuras encostam às arestas: é a maquetação de tablet a
   sério, e não uma captura de telemóvel a flutuar em cinzento. */
.palco--estreito { max-width: 640px; }

/* ═══ O TECTO DA BANDA LARGA: 1440 → 1680, COM O 1440 COMO ANCORA ═══
   O quadro parava nos 1440 e num ecrã de 1920 sobravam 240px de tela
   morta de cada lado; num de 2560, 560.

   O 1440 continua a ser o PONTO DE QUEBRA do desenho: é aí que o quadro
   pinta ao seu tamanho de origem, um por um, tal como foi desenhado e
   medido. Abaixo encolhe, como sempre encolheu. Acima — e isto é o que
   é novo — continua a crescer até aos 1680.

   O tecto é 1680 e não «o ecrã todo» por causa da conta que já estava
   escrita nesta folha: o corpo é 15,8px a 1440, dá 18,4 a 1680 e 28 a
   2560. Aos 18,4 ainda é uma página; aos 28 é uma lupa. E a linha do
   texto acompanha: a 1680 a coluna de 1346 pinta 1570px, que a 18,4px
   dá as ~90 letras que uma linha aguenta. Passar daí é pedir ao leitor
   que vire a cabeça.

   Acima de 1680 nada muda: fica ao tamanho, centrado, e quem chega às
   pontas são as tiras. */
.palco--largo { max-width: 1680px; }

@media (min-width: 1024px) {
  .palco--estreito { display: none; }
}
@media (max-width: 1023.98px) {
  /* só se esconde o largo quando HÁ um estreito para o substituir */
  body:has(.palco--estreito) .palco--largo { display: none; }
}

/* Um salto de âncora tem de contar com a escala: o browser rola para a
   posição REAL do alvo, que já vem escalada, por isso não há nada a
   corrigir — mas a barra do quadro flutua por cima e taparia o topo. */
:target { scroll-margin-top: 120px; }

/* ═══════════════════════════════════════════════════════════════════
   A TELA DO RODAPÉ

   O quadro pára nos 1440. Num ecrã de 1600 sobram 80px de cada lado, e
   até aqui isso não se via — a tela por fora é a mesma cor do fundo do
   quadro. Mas o rodapé é escuro, e ficavam duas tiras cinzentas de
   cada lado de uma faixa preta. Uma faixa de rodapé que não chega às
   pontas do ecrã lê-se como um erro, não como uma margem.

   Por isso o gerador põe, ao lado de cada palco, uma tela da largura
   da JANELA com a cor da faixa, e o palco pinta-se por cima. Só se vê
   nos ombros.

   ═══ A ALTURA, SEM SABER A ESCALA ═══
   Podia medir-se em JavaScript. Não é preciso: a faixa vale sempre a
   mesma fracção do quadro — 375 de 6401 no índice — e essa razão não
   muda quando o quadro encolhe. Uma percentagem da altura da página
   resolve-a sozinha, em qualquer largura, sem uma linha de conta.

   Encosta ao fundo porque a faixa encosta ao fundo do quadro nos sete
   artboards. Se algum dia deixar de encostar, é aqui que se nota.
   ═══════════════════════════════════════════════════════════════════ */
body { position: relative; }

.palco { z-index: 1; }        /* o quadro pinta-se POR CIMA da tela */

.tela-faixa {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  top: calc(var(--y) / var(--qh) * 100%);
  height: calc(var(--alt) / var(--qh) * 100%);
  pointer-events: none;
}

/* A textura da faixa, com o traje que ela tem lá dentro. */
.tela-faixa > i {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* Abaixo do corte manda a banda estreita, que tem as suas faixas. */
@media (max-width: 1023.98px) {
  body:has(.palco--estreito) .tela-faixa { display: none; }
}

/* A TRAMA, TAMBÉM NOS OMBROS.
   A faixa do artboard traz um `<img src="fundo.jpg">` que o
   `.s6-band img` veste a 60% em `soft-light`. Sem isto, o centro tinha
   tecido e os ombros ficavam lisos: a mesma cor, mas duas superfícies
   diferentes — e via-se a emenda exactamente na aresta dos 1440.

   Aqui é a mesma imagem com o mesmo traje, num filho — e o caminho vai
   no `style=` dele, não numa propriedade personalizada: um `url()`
   dentro de uma custom property resolve-se contra a FOLHA, e dava
   `css/fundo.jpg`, que não existe. O `cover` recorta-a para a largura da janela em vez de
   para os 1440 do quadro, por isso a malha fica um pouco maior nos
   ombros — sobre um roxo quase preto e a 60% de `soft-light` isso não
   se lê, mas a AUSÊNCIA de trama lia-se. */


/* ═══════════════════════════════════════════════════════════════════
   A TELA DO CHÃO

   O mesmo que a do rodapé, mas para a página toda: o quadro assenta
   numa cor e em lajes de tecido, e acima dos 1440 os ombros ficavam
   lisos ao lado de um centro com trama.

   ═══ PORQUE É QUE ENCAIXA SEM SABER A ESCALA ═══
   As lajes do quadro são 1440×810 — exactamente a proporção da
   fotografia (1280×720). O cover não corta nada, só escala. Então:

     · a altura da laje, em percentagem da página, dá 810 × k;
     · a largura vem por AUTO, e como a proporção é a mesma, dá 1440 × k;
     · `center top` centra uma laje na janela — e o palco também está
       centrado e mede exactamente 1440 × k, por isso essa laje cai em
       cima da do quadro, ao pixel;
     · as repetições para os lados continuam-na na mesma medida, e as
       de baixo caem nos mesmos 810 em 810 do quadro.

   Nada disto precisa do `--k`. É a proporção a fazer a conta.

   Só na banda larga: as lajes de 390×844 do telemóvel cortam muito e
   alternam espelhadas, e aí não havia como alinhar os ombros.
   ═══════════════════════════════════════════════════════════════════ */
.tela-fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* UMA fotografia, presa ao ecrã, a cobri-lo inteiro.

   `fixed` não é um efeito: é o que torna a repetição desnecessária. A
   página tem 6401px de altura e a fotografia 1920×1080 — esticada para
   a cobrir de cima a baixo ficava um retalho da malha ampliado dez
   vezes. Presa ao ecrã, cobre 1920×1080 sobre 1920×1080, que é a
   medida para que foi tirada. Sem repetição não há junta: nem ao lado
   do conteúdo, nem entre secções, nem em ecrã nenhum.

   O quadro deixou de pintar fundo (o gerador tirou-lhe a cor e as
   lajes), por isso isto vê-se também no meio, e não só nos ombros. É o
   mesmo chão para toda a largura — que era o que faltava. */
.tela-fundo > i {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* NOTA: aqui NÃO vai `background-attachment: fixed`. O elemento já é
   `position: fixed` — não se mexe — por isso a propriedade não muda um
   pixel do que se pinta (medi as duas: mesma posição, mesmo tamanho,
   mesma caixa). O que ela faz é obrigar o browser a repintar a janela
   inteira a cada fotograma de rolagem, e isso via-se: o p90 do tempo
   de fotograma passava de 100ms para 150. Tirá-la é a mesma imagem por
   metade do trabalho. */

/* ═══ CADA BANDA TEM A SUA TELA ═══
   Eram duas regras porque só a banda larga tinha chão unificado: abaixo
   do corte escondia-se a tela e ficavam as lajes do artboard estreito.
   Agora a estreita também pode ter tela — a `tela-fundo--estreito` — e
   as duas seguem exactamente o mesmo par de regras que os dois palcos.
   Sem isto viam-se as duas ao mesmo tempo: a da banda larga, com o
   `--laje` de 810, por baixo da de 844. */
@media (min-width: 1024px) {
  .tela-fundo--estreito { display: none; }
}
@media (max-width: 1023.98px) {
  body:has(.palco--estreito) .tela-fundo--largo { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   OS TITULARES DA BANDA ESTREITA ENVOLVEM

   O artboard escreve os titulares linha a linha: cada `.rline` é uma
   linha que uma aresta de recorte varre da esquerda para a direita. Por
   isso a folha dele diz `width: max-content; white-space: nowrap` — uma
   linha que envolvesse estragava o barrido.

   A 1440 isso é verdade e os cortes do desenhador cabem. A 390 não
   cabem: o titular do herói do Brindes media 444px numa coluna de 350 e
   saía cortado, e nem descer ao chão de legibilidade o salvava — o
   `nowrap` não é um tamanho, é uma proibição de dobrar.

   Aqui a linha solta-se. O barrido passa a revelar as duas linhas ao
   mesmo tempo em vez de uma após a outra: menos bonito, e infinitamente
   melhor do que meio titular.

   Três classes para ganhar à folha do artboard, que entra como
   `:is(.palco--estreito, .barra--estreito) .rline` — duas. */
.palco--estreito .quadro .rline {
  width: auto;
  max-width: 100%;
  white-space: normal;
}

/* ═══ E O TITULAR DO ÍNDICE VAI AO EIXO COM ELES ═══
   O herói do `Mobile.dc.html` é o único que escreve as linhas em
   `.line` e não em `.rline`: leva o cursor a piscar e a troca de frase,
   e por isso a linha tem de ficar `width: max-content; nowrap` — o
   `.caret` está pousado em `left: calc(100% - …)`, isto é, na PONTA da
   linha, e uma linha que envolvesse punha o cursor no meio do titular.

   Só que um bloco de `max-content` encosta à esquerda, e o `text-align:
   center` da `letra.css` não move blocos: o titular ficava à esquerda
   com a entradilha dele centrada por baixo. Duas margens automáticas
   centram a CAIXA sem lhe mexer na largura nem no cursor. */
.palco--estreito .quadro h1 .line { margin-inline: auto; }

/* ═══════════════════════════════════════════════════════════════════
   AS GAVETAS

   Em 1440 são três gavetas fechadas: passa-se o rato por uma, ela
   cresce, desliza e o `.gbody` aparece. É hover puro — ao toque não
   acontece nada, e o que fica escondido são três parágrafos a explicar
   bordado, DTF e serigrafia.

   A 390 o que faz de ponteiro é a ROLAGEM: a gaveta que cruza a linha
   de foco abre-se, e as outras fecham. Mesmo gesto, outro dedo.

   ═══ QUEM ESCONDE É O JAVASCRIPT, NÃO ESTA FOLHA ═══
   O fechado vive todo dentro de `.gavs--auto`, e essa classe só existe
   se o `gavetas.js` correr. Sem ele — erro, bloqueador, browser velho —
   as três ficam abertas e lê-se tudo. Esconder conteúdo nunca pode ser
   o estado de avaria.

   ═══ PORQUE É QUE A CAIXA NÃO MUDA DE TAMANHO ═══
   O `.gavs` está posicionado por coordenada, e o que vem a seguir
   também: se ele encolhesse ao fechar uma gaveta, não empurrava nada —
   deixava um buraco. Por isso a caixa fica com a altura de sempre e são
   as gavetas que repartem o espaço lá dentro, como no escritório: as
   fechadas ficam com a sua cabeça, a aberta fica com a folga toda.

   Três classes para ganhar à folha do artboard, que entra com duas.
   ═══════════════════════════════════════════════════════════════════ */
.palco--estreito .quadro .gav,
.palco--estreito .quadro .gavs:hover > .gav,
.palco--estreito .quadro .gavs > .gav:hover {
  flex: 0 0 auto;
  overflow: visible;
  transform: none;
}

.palco--estreito .quadro .gbody {
  opacity: 1;
  transform: none;
  margin-top: 12px;
}

/* ═══ E AGORA O FECHADO, SE HOUVER QUEM O ABRA ═══ */
.palco--estreito .quadro .gavs--auto > .gav {
  overflow: hidden;
  transition: flex-grow 420ms cubic-bezier(.2, .7, .3, 1);
}

/* Fechada: só a cabeça. O corpo tem de COLAPSAR, não apenas apagar-se —
   com `opacity: 0` continuava a ocupar o seu lugar e a gaveta fechada
   ficava tão alta como a aberta. Colapsa-se pelo `max-height`, que
   anima, e não pelo `display: none`, que aparecia de repente.

   Continua no documento: quem procura na página encontra-o, e um leitor
   de ecrã lê-o. */
.palco--estreito .quadro .gavs--auto > .gav:not(.gav--aberta) .gbody {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  transform: translateY(8px);
}

.palco--estreito .quadro .gavs--auto .gbody {
  overflow: hidden;
  max-height: 420px;
  transition: max-height 420ms cubic-bezier(.2, .7, .3, 1),
              margin-top 420ms cubic-bezier(.2, .7, .3, 1),
              opacity 300ms ease 60ms,
              transform 300ms ease 60ms;
}

/* A aberta fica com a altura do que tem dentro, e mais nada. Com
   `flex: 1 1 auto` chupava a folga toda da caixa: 268px de texto num
   cartao de 497, com duzentos e tal de vazio por baixo. */
.palco--estreito .quadro .gavs--auto > .gav--aberta {
  flex: 0 0 auto;
}

/* A asa acompanha, como em 1440. */
.palco--estreito .quadro .gavs--auto > .gav--aberta .puxa {
  transform: translateX(8px);
  background: #4A294B;
}

@media (prefers-reduced-motion: reduce) {
  .palco--estreito .quadro .gavs--auto > .gav { transition: none; }
  .palco--estreito .quadro .gbody { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   A ASA DA GAVETA VAI PARA BAIXO

   Em 1440 a asa é uma pega ao meio da aresta direita: há coluna de
   sobra e o texto passa-lhe ao largo. A 350 não há — a asa ocupa de
   242 a 326, e o texto ia até 320. Setenta e oito pixéis de sobreposição,
   e via-se em «Para cores e ilustrações sem limites.»

   Estreitar a coluna até 230 resolvia e estragava: sobrava uma medida
   de 104px, o texto dobrava o dobro das linhas e a gaveta crescia — o
   contrário do que se acabou de poupar.

   Por isso a asa muda de aresta, como as mordidas mudaram quando as
   caixas se empilharam: passa para o FUNDO, numa faixa que se lhe
   reserva. O texto fica com a largura toda e ninguém tapa ninguém.
   ═══════════════════════════════════════════════════════════════════ */
.palco--estreito .quadro .gav .puxa {
  top: auto;
  bottom: 13px;
  margin-top: 0;
}

/* A faixa que a asa ocupa: 13 de baixo, 11 de asa, e ar até ao texto.

   Vai no `.gav` e não no `.gin` de propósito. O `.gin` é neto, e quem
   reserva a altura da coluna mede as gavetas — o enchimento de um neto
   ficava-lhe invisível e a coluna era reservada 111px curta. No `.gav`
   é lido, e o efeito é o mesmo: a asa está posicionada contra a caixa
   de enchimento, por isso continua a assentar na faixa. */
.palco--estreito .quadro .gav {
  padding-bottom: 38px;
}

/* ═══════════════════════════════════════════════════════════════════
   A GAVETA, AFINADA A 390

   Tres acertos que o encolhimento mecanico nao podia adivinhar.

   O ROXO ATE AO FIM. A faixa da asa e `padding-bottom` no `.gav`, e o
   enchimento encolhe a caixa de conteudo: o bloco do numero, que
   estica com o irmao, deixava de chegar ao fundo — parava 38px acima e
   via-se o cinzento por baixo do roxo. A margem negativa devolve-lhe
   esses 38px sem lhe tirar a reserva a coluna.

   O NUMERO E O TEXTO FECHADO MAIORES. A 1440 o numero mede 14,5px numa
   coluna de 1346, com a foto e o resto a dar-lhe escala a volta. A 390
   a gaveta fechada e so isto — numero, titulo e subtitulo — e o x0,76
   deixava-a a sussurrar. Sobem para uma medida que se le de relance,
   que e para o que serve uma gaveta fechada.
   ═══════════════════════════════════════════════════════════════════ */
.palco--estreito .quadro .gav .gnum {
  margin-bottom: -38px;
  font-size: 16px;
}

.palco--estreito .quadro .gav .gtit {
  font-size: 16px;
}

/* O subtitulo da gaveta segue a ESCALA, como o corpo da pagina. Aqui a
   folha e casca — o `escalaDeLetra()` do gerador so passa pelo marcado
   do artboard e nunca ve isto — por isso escreve-se a mao. Traz o passo
   da nota, que e o que uma linha de apoio debaixo de um titulo pede.
   Ver `fonte/letra.css`. */
.palco--estreito .quadro .gav .gtag {
  font-size: calc(var(--c3) / var(--kt, 1));
}