/* ==========================================================================
   XCLUSIVE EVENTS · M1 BLACKOUT · Navegação móvel
   Abaixo dos 900px a .site-nav é display:none e não existia caminho nenhum
   para Manifesto/Experiências/Eventos/Journal/Contactos. Este ficheiro dá-lhe
   um painel a ecrã inteiro que abre como o obturador das transições: o preto
   desce do topo e os nomes sobem para dentro da luz.

   Vocabulário reaproveitado, conferido ficheiro a ficheiro:
     · corte a negro   -> clip-path: inset(0 0 100% 0)  (igual a .shutter, base.css 246)
     · nomes a subir   -> translateY(110%) + stagger    (igual a .split-line, base.css 310)
     · barra de acento -> scaleX(0)->1 da esquerda      (igual a .site-nav a::after, base.css 132)
     · régua entre itens -> 1px de --hair               (igual ao .ato::after, sections.css 197)

   RONDA 4 · os numerais romanos I..VI saíram, e a palavra alinha com a margem
   da página. Ficavam presos nos 22px da rampa da .a-num (clamp(22px, 2.4vw, 42px),
   que só passa dos 22 acima dos 917px, ou seja nunca nesta faixa) enquanto a
   palavra ia de 39.7px a 70.9px: medido, o par palavra/numeral era 1.80 a 320 e
   3.22 a 834, contra os 1.27 constantes da .ato (22/28, sections.css). Aos 768 o
   numeral era uma partícula a um terço da palavra e o avanço de 64px que impunha
   a cada linha não comprava nada. E a sequência não transportava informação: ao
   contrário do «Ato I» do index e dos cinco princípios do manifesto, onde a
   ordem É o conteúdo, numerar seis destinos de navegação é ornamento.
   O que se ganhou: os 40px de avanço voltam para a palavra, e a 320px ela passa
   de 39.7px (teto físico da linha) para os 41px de piso, ou seja o patamar
   passa a ser plano em toda a faixa. O item da página deixa de ter dois sinais
   e fica com o da casa: a barra de acento, igual à .site-nav a.is-active.

   RONDA 4 · a régua que fechava a lista também saiu. Era o mesmo traço de 1px de
   --hair a significar duas coisas a duas distâncias: entre itens ficava a 13-20px
   da palavra que anuncia, e no fim ficava presa ao fundo da caixa, a 75-128px da
   última palavra, porque o align-content reparte o vazio pelas pontas. A
   separação do rodapé faz-se com espaço, que é o que já lá estava.

   Cores só por token. Nada faz bounce.
   ========================================================================== */

/* ---- Botão: uma palavra, como o resto da navegação ---------------------- */

.nav-toggle {
  display: none;                 /* acima dos 900px manda a .site-nav */
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  min-width: 74px;               /* estabiliza a largura entre Menu e Fechar */
  padding: 0 0 0 12px;
  position: relative;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Opacidade cheia, ao contrário dos 0.72 dos links do .site-nav de desktop.
   Ali o alfa está sobre cinco links redundantes; aqui é o único caminho de
   navegação que existe, e assenta sobre o véu do cabeçalho, que na fotografia
   mais clara do site deixa o fundo local em ~76. Medido a 0.72 sobre esse
   fundo: 3.7:1, abaixo do AA para 14px peso 600. A 1 dá 7.4:1 no pior caso
   das 198 amostras. A hierarquia faz-se com a barra de acento, não com alfa. */
.nav-toggle .nt-label {
  display: block;
  position: relative;
  padding-block: 4px;
  opacity: 1;
}
.nav-toggle .nt-label::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}
.nav-toggle:hover .nt-label::after,
.nav-toggle:focus-visible .nt-label::after,
.nav-toggle[aria-expanded='true'] .nt-label::after { transform: scaleX(1); }

/* Área de toque de 44px SEM crescer o cabeçalho. O min-height: 44px que aqui
   esteve puxava o conteúdo do .site-head dos 38px do logótipo (sections.css 691)
   para 44, e o cabeçalho de 74px para 80 em toda a faixa móvel: a proporção do
   cabeçalho passava a ser diferente do desktop por uma razão que não é de
   desenho. O alvo passa a ser este rectângulo, que sangra 7px para cima e para
   baixo (a caixa do rótulo mede 31.8px: 31.8 + 14 = 45.8) para dentro do
   padding vertical do cabeçalho, que no mínimo é 18px. Não transborda. */
.nav-toggle::before {
  content: '';
  position: absolute;
  inset: -7px 0;
}

/* ---- Painel ------------------------------------------------------------- */

.navpanel {
  display: none;                 /* acima dos 900px não existe */
  position: fixed;
  inset: 0;
  z-index: 55;                   /* sob o cabeçalho (60), sob o obturador (100) */
  background: var(--ink);
  overflow: hidden;              /* quem rola é a .np-list, ver abaixo */
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition:
    clip-path var(--dur-cut) var(--ease-in),
    visibility 0s linear var(--dur-cut);

  /* altura do cabeçalho, medida pelo js/nav.js quando abre. O valor de
     reserva é o mesmo cálculo em CSS, para o caminho sem JavaScript: a altura
     do logótipo (38px, sections.css 691) mais o padding vertical do .site-head.
     Confere com a medição: 74px dos 320 aos 600, 77.9 a 768, 84.7 a 899. */
  --np-head: calc(38px + 2 * clamp(18px, 2.6vw, 32px));
}

/* a luz que revela: vem do canto do botão, chega devagar */
.navpanel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(46% 26% at 97% -2%, var(--acc) 0%, transparent 64%),
    radial-gradient(118% 62% at 88% -8%, var(--glow) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--dur-cut) var(--ease-in);
}

/* O painel não rola, e o rodapé também não: o telefone, o email e o PT/EN são o
   caminho de conversão do negócio e ficam sempre no ecrã. Quem rola é só a
   .np-list, entre o bordo do cabeçalho e a régua do rodapé.

   Antes rolava isto, o contentor inteiro, e num aparelho baixo o rodapé caía
   abaixo da dobra sem sinal nenhum: medido a 360x640 (Android), 51px de rolagem
   e o PT/EN fora do ecrã; a 320x568, 89px, com o email e o PT/EN invisíveis.
   Com o rodapé fixo, o que fica por ver é a cauda da lista, e essa tem régua,
   dissolução e um item cortado a dizer que há mais.

   O corte de cima é o bordo do cabeçalho, que abaixo dos 900px deixa de ter
   mix-blend-mode e passa a chapa opaca de --ink enquanto o menu está aberto
   (ver o bloco @media lá abaixo). Sem transparência não há a risca de acento
   solta que uma máscara em rampa deixava: medida a 320x568 em y=71-72,
   x=80-153, rgb(149,154,50), porque a barra é mais clara que a letra e fica
   6px mais abaixo na rampa. */
.np-inner {
  position: absolute;
  inset: var(--np-head) 0 0 0;
  z-index: 1;
  overflow: hidden;              /* quem rola é a .np-list */
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 2.4vh, 40px) var(--margin) clamp(10px, 1.8vh, 24px);
}

/* ---- Lista: uma coluna de palavras, à margem da página ------------------ */

.np-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;                 /* sem isto o flex item não encolhe e não rola */
  overflow-y: auto;
  overscroll-behavior: contain;  /* não encadeia scroll, não faz bounce */
  -webkit-overflow-scrolling: auto;
  /* Sem régua a fechar. Ver o cabeçalho: presa ao fundo da caixa ficava órfã da
     última palavra (86.5px a 390, 128.3px a 820, contra 12.7-20px entre uma
     régua e a palavra que anuncia). O que separa do rodapé é o vazio da
     centragem mais o padding do .np-foot; quando a lista rola e não há vazio, o
     que marca o fim é a dissolução da máscara, que é afordância e não moldura. */
  /* a lista assenta no meio da caixa que sobra. O «safe» é o que importa:
     quando não cabe, a centragem cai para start e o primeiro destino continua
     a chegar-se com o scroll, em vez de ficar cortado acima do bordo. */
  display: grid;
  grid-auto-rows: max-content;
  align-content: safe center;
  /* Dissolução no fim da lista. É o estado por defeito, para o caminho sem
     JavaScript onde ninguém escreve o atributo; o js/nav.js escreve
     data-scroll="none|top|mid|end" e a regra a seguir tira a rampa quando não
     há nada por ver e quando já se chegou ao fim. Uma afordância permanente
     sobre uma lista que cabe inteira é uma mentira, e uma rampa a desfazer o
     último item depois de ele estar todo à vista é outra.
     Numa máscara só o alfa conta, e por isso a paragem opaca é currentColor e
     não um preto escrito à mão: assim não há um único valor de cor cru neste
     ficheiro, e a rampa sobrevive a qualquer mudança de paleta. */
  mask-image: linear-gradient(to bottom, currentColor calc(100% - 30px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, currentColor calc(100% - 30px), transparent 100%);
}
.np-list[data-scroll='none'],
.np-list[data-scroll='end'] {
  mask-image: none;
  -webkit-mask-image: none;
}

/* A régua entre linhas desenha-se da esquerda, como a .rule do site
   (base.css 88-95), e entra com a linha a que pertence. Estática, ficavam seis
   riscas sobre o preto antes de existir uma única palavra, o que se lê como
   uma tabela vazia. É pseudo-elemento e não border-top porque um border não
   se anima em scaleX. */
.np-item { position: relative; }
.np-item + .np-item::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--hair);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms var(--ease-in);
}

/* Grid de uma coluna: a palavra encosta à margem da página, e o .np-line
   encolhe até ao texto por ser um item de grid com justify-self: start. Sem
   isso o anel de foco voltava a ser uma caixa de bordo a bordo. */
.np-item a {
  display: grid;
  padding-block: clamp(6px, 1.5vh, 20px);
  text-decoration: none;
  color: inherit;
}

/* a palavra sobe de dentro da linha, como os títulos do site.
   justify-self: start para a linha se colar à palavra: é ela que leva o anel
   de foco, e um anel à largura da coluna era uma caixa a atravessar o ecrã.

   O overflow: hidden é o que dá o corte por onde a palavra sobe: sem ele o
   translateY(110%) do repouso ficava à vista por cima da linha de baixo. */
.np-line {
  display: block;
  overflow: hidden;
  position: relative;
  justify-self: start;
  max-width: 100%;
}
.np-word {
  display: inline-block;
  position: relative;
  font-family: var(--serif);
  /* Três limites, cada um com uma medição por trás. Nenhum é decorativo.

     1) clamp(41px, 8.5vw, 78px) — 8.5vw é a rampa da casa (base.css 54), não
        uma inventada. O piso de 41px é 85% dos 48px de piso do maior display
        do site (.pillar .p-word, clamp(48px, 10vw, 170px), sections.css 165).
        Dá um patamar plano de 85% em retrato dos 360 aos 834 (medido em 360,
        375, 390, 414, 430, 480, 600, 768, 820 e 834), contra os 63-70% de
        antes na faixa do telemóvel e 86% só a partir dos 600. A 320 são 83%,
        e o que trava é o limite (3): "Experiências" não cabe maior.
     2) 7.9vh — nos ecrãs baixos manda a altura, porque são seis linhas mais o
        rodapé. Não morde em telemóvel em pé (640px de altura -> 50.6px, 844 ->
        66.7, contra os 41 da rampa) nem nos tablets (1024 -> 80.9 contra 65.3
        a 768); morde numa janela de 899x700, onde sem ele as seis linhas
        pediam 653px para os 523 que há.
     3) a largura útil da linha — "Experiências" mede 5.99em em Syne 500
        (medido no browser). O divisor 6.05 é os 5.99 com 1% de folga. Sem o
        avanço do numeral a linha inteira é da palavra: a 320px são 280px de
        linha, ou seja um teto de 46.3px, e quem manda passa a ser o piso de
        41px. Antes descontavam-se aqui os 40px da coluna do numeral e o teto
        caía a 39.7px, o que fazia dos 320 a única largura fora do patamar. */
  font-size: min(
    clamp(41px, 8.5vw, 78px),
    7.9vh,
    calc((100vw - 2 * var(--margin)) / 6.05)
  );
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.01em;
  padding-bottom: 6px;
  transform: translateY(110%);
  opacity: 0;
  /* O FECHO vive aqui, no estado de repouso, e não dentro do .is-open. Quando
     a transição só existia na regra do aberto, tirar a classe punha o computed
     a 0s e as seis palavras desapareciam num frame: medido a +16ms do clique,
     transform já em matrix(1,0,0,1,0,45.7) com opacity 0 enquanto o clip-path
     do painel ainda estava em inset(0 0 0%): o painel ainda ocupava o ecrã
     inteiro e já não tinha texto nenhum. Agora a lista sai antes do preto:
     75ms de atraso máximo + 300ms de curso = 375ms, dentro dos 420 do corte. */
  transition:
    transform 300ms var(--ease-in),
    opacity 200ms linear;
}
.np-word::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--acc);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}

/* Stagger de saída, ao contrário do de entrada: quem entrou primeiro sai por
   último. Vive no repouso porque é o estado para onde a transição corre. */
.np-item:nth-child(1) .np-word, .np-item:nth-child(1)::before { transition-delay: 75ms; }
.np-item:nth-child(2) .np-word, .np-item:nth-child(2)::before { transition-delay: 60ms; }
.np-item:nth-child(3) .np-word, .np-item:nth-child(3)::before { transition-delay: 45ms; }
.np-item:nth-child(4) .np-word, .np-item:nth-child(4)::before { transition-delay: 30ms; }
.np-item:nth-child(5) .np-word, .np-item:nth-child(5)::before { transition-delay: 15ms; }
.np-item:nth-child(6) .np-word, .np-item:nth-child(6)::before { transition-delay: 0ms; }

/* A página onde estamos leva a barra de acento, que é o mesmo sinal da
   .site-nav a.is-active (base.css 143). Era o segundo dos dois sinais; o
   primeiro era o numeral a --acc, e saiu com ele. */
.np-item.is-here .np-word::after { transform: scaleX(1); }
.np-item a:hover .np-word::after,
.np-item a:focus-visible .np-word::after { transform: scaleX(1); }

/* ---- Foco visível ------------------------------------------------------- */
/* O anel do browser desenhava uma caixa branca de bordo a bordo por a linha
   ser um grid item. Aqui é um anel de acento colado à palavra. Não substituir
   por «só a barra de acento»: no item da página atual a barra já está desenhada
   e o foco ficaria invisível. */
.np-item a:focus-visible { outline: none; }
.np-item a:focus-visible .np-line,
.nav-toggle:focus-visible .nt-label,
.np-foot a:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 6px;
}
.np-foot a:focus-visible { outline-offset: 4px; }

/* ---- Rodapé do painel --------------------------------------------------- */

/* Fixo no fundo do painel, fora da zona que rola. Linha que enrola em vez de
   coluna empilhada: são duas âncoras de 44px mais a linha de idioma à mesma
   altura, e empilhadas custavam 136px ao painel num ecrã que já não tinha. A
   enrolar, a 320px dá duas linhas (telefone / email + idioma) e a 390px também
   duas (telefone + email / idioma): 108px medidos em vez de 136, ou seja mais
   uma fatia de lista à vista. */
.np-foot {
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: clamp(16px, 2.6vh, 34px);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px clamp(16px, 5vw, 36px);
}
/* Sem `color: inherit` aqui. Tinha especificidade (0,1,1) e ganhava à .np-contact
   e à .np-close, que são (0,1,0): as duas declaravam --bone-dim e saíam ao ecrã
   em --bone cheio, ou seja o rodapé chegava com o mesmo peso ótico da lista de
   destinos e lia-se como uma segunda lista a competir com a primeira. E como o
   repouso já estava em --bone, o :hover que salta para --bone não mudava nada:
   medido a 390 com o painel aberto, repouso rgb(244,241,234) e hover
   rgb(244,241,234), delta zero. O `a { color: inherit }` do base.css 33 é (0,0,1)
   e perde para as duas, que é o que se quer. */
.np-foot a { text-decoration: none; }
/* 44x44 de alvo. Sem isto o telefone media 123x25.5 e o email 174x25.5 a 390,
   e são o caminho de conversão do negócio dentro do único menu que o telemóvel
   tem. A largura já passava dos 44; o que faltava era altura. */
.np-contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--bone-dim);
  transition: color var(--dur-micro) linear;
}
.np-contact:hover, .np-contact:focus-visible { color: var(--bone); }

.np-lang {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 44px;
  gap: 10px;
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
}
.np-lang .sep { opacity: 0.3; }
.np-lang .is-current { opacity: 1; }
/* O EN do cabeçalho usa opacity .4, que medido sobre --ink dá 3.47:1 e chumba
   o AA para 13px. Aqui a hierarquia faz-se com --bone-dim (5.8:1) e a opacity
   fica a 1, para o alpha não ser multiplicado duas vezes.
   O EN é um <span> e não um <a>: não há versão inglesa do site, e o href="#"
   que aqui estava mandava o browser para o topo do documento. Com JavaScript o
   painel ficava aberto e nada mudava no ecrã, por isso só se descobria ao
   fechar, a 1184px de distância do sítio onde se estava a ler. */
.np-lang a, .np-lang .np-en { color: var(--bone-dim); opacity: 1; }
.np-lang a:hover, .np-lang a:focus-visible { color: var(--bone); }

/* Fecho sem JavaScript. Com JavaScript o botão do cabeçalho passa a Fechar
   e esta linha sai de cena, para não haver dois fechos a dizer o mesmo. */
.np-close {
  margin: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.np-close:hover, .np-close:focus-visible { color: var(--bone); }
.has-js-nav .np-close { display: none; }

/* ---- Estado aberto ------------------------------------------------------ */

/* Com JavaScript é a classe .is-open que manda. Sem JavaScript o botão é um
   <a href="#nav-menu"> a sério e quem abre o painel é o :target. Se alguém
   chegar a um URL com #nav-menu já com JavaScript, o js/nav.js limpa o hash
   e abre pela classe, para os dois estados nunca se cruzarem. */
.navpanel.is-open,
.navpanel:target {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 620ms var(--ease-out), visibility 0s;
}
.navpanel.is-open::before,
.navpanel:target::before {
  opacity: 0.2;
  transition: opacity var(--dur-cine) var(--ease-out) 120ms;
}
.navpanel.is-open .np-word,
.navpanel:target .np-word {
  transform: translateY(0);
  opacity: 1;
  transition:
    transform 900ms var(--ease-out),
    opacity 500ms linear;
}
.navpanel.is-open .np-item::before,
.navpanel:target .np-item::before {
  transform: scaleX(1);
  transition: transform 900ms var(--ease-out);
}
.navpanel.is-open .np-item:nth-child(1) .np-word,
.navpanel:target .np-item:nth-child(1) .np-word { transition-delay: 120ms; }
.navpanel.is-open .np-item:nth-child(2) .np-word,
.navpanel:target .np-item:nth-child(2) .np-word { transition-delay: 210ms; }
.navpanel.is-open .np-item:nth-child(3) .np-word,
.navpanel:target .np-item:nth-child(3) .np-word { transition-delay: 300ms; }
.navpanel.is-open .np-item:nth-child(4) .np-word,
.navpanel:target .np-item:nth-child(4) .np-word { transition-delay: 390ms; }
.navpanel.is-open .np-item:nth-child(5) .np-word,
.navpanel:target .np-item:nth-child(5) .np-word { transition-delay: 480ms; }
.navpanel.is-open .np-item:nth-child(6) .np-word,
.navpanel:target .np-item:nth-child(6) .np-word { transition-delay: 570ms; }

/* ---- Corpo travado ------------------------------------------------------ */

html.nav-locked, html.nav-locked body {
  overflow: hidden;
  overscroll-behavior: none;
}

/* O cabeçalho esconde-se ao rolar (js/main.js). Com o menu aberto fica onde
   está: é lá que vive o botão Fechar. */
body.nav-open .site-head.is-hidden { transform: translateY(0); }
/* Com o menu aberto tudo o que está fora dele fica inerte, o logótipo
   incluído. Baixa-se a opacidade para não prometer um clique que não há:
   o caminho para a página inicial é o primeiro item da lista. */
body.nav-open .site-head .brand {
  opacity: 0.42;
  transition: opacity var(--dur-cut) linear;
}
/* Barra de percurso e aviso de cookies saem da cena enquanto o menu está aberto,
   e só voltam depois de o preto ter fechado: a .nav-closing dura os 420ms do
   corte. Sem ela a barra de cookies reaparecia por cima do painel ainda preto,
   a meio do fecho (medido a +80ms, com o clip-path em 1.17%).
   O segundo par de cada regra é para o caminho sem JavaScript, onde não há
   classe no body: a .progress e a .cookie-bar são irmãs posteriores do painel. */
body.nav-open .progress,
body.nav-closing .progress,
#nav-menu:target ~ .progress { opacity: 0; transition: opacity var(--dur-cut) linear; }
body.nav-open .cookie-bar,
body.nav-closing .cookie-bar,
#nav-menu:target ~ .cookie-bar { display: none; }

/* ---- Só abaixo dos 900px ------------------------------------------------ */

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .navpanel { display: block; }
  /* PT/EN muda-se para dentro do painel: aos 390px o cabeçalho não tem
     largura para o logótipo, o seletor de idioma e o botão ao mesmo tempo. */
  .site-head .lang { display: none; }

  /* O cabeçalho volta a esconder-se ao rolar, como em desktop. A regra
     `.site-head.is-hidden { transform: none }` que aqui esteve deixava-o
     permanentemente por cima do corpo do texto, e como o cabeçalho é
     transparente isso imprimia o logótipo e o rótulo MENU em cima das frases:
     medido em 20 combinações de página x viewport, 77 posições de scroll com
     texto do <main> por baixo da caixa do cabeçalho contra 0 no HEAD.
     O argumento a favor não se sustentava: o js/main.js linha 46 já devolve o
     cabeçalho com 2px de gesto para cima, e medido a 390 no artigo-5-erros o
     cabeçalho estava em top=-81.4 aos 1600px de scroll e voltava a top=0 com
     60px de gesto. Trocava-se um problema resolvido por um pior. */

  /* Sem mix-blend-mode aqui, e a razão é medida. O `difference` do .site-head
     (base.css 107) leva o rótulo a |fundo - 244|, o que sobre fotografia de
     cinzento médio devolve quase a luminância do próprio fundo: 1.09:1 em
     eventos.html a scrollY=1400, 1.12:1 no artigo-o-momento a 3200, 1.23:1 no
     artigo-5-erros a 4800, 14 posições abaixo de 4.5:1 em 5 de 7 páginas. Não
     há composição de duas cores que escape: o preto é o elemento neutro do
     `difference` e o branco inverte os dois lados por igual.
     Abaixo dos 900px o rótulo é o ÚNICO caminho de navegação do site, por isso
     em vez de blend leva chapa: o mesmo preto do site a descer do bordo de
     cima, que é o vocabulário do obturador. Sobre a fotografia mais clara
     possível o véu deixa o fundo local em ~76 e o rótulo em 244: 7.6:1. Sobre
     os heróis escuros do site é --ink sobre --ink, ou seja não se vê. */
  .site-head { mix-blend-mode: normal; }
  .site-head::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 170%;
    z-index: -1;
    pointer-events: none;
    /* a primeira é a rede: se o color-mix não existir, a declaração seguinte
       cai inteira e fica esta rampa, que no rótulo dá ~0.71 de alfa em vez de
       0.73. O que não pode acontecer é ficar sem véu nenhum. */
    background: linear-gradient(180deg, var(--ink) 0%, transparent 100%);
    background: linear-gradient(
      180deg,
      var(--ink) 0%,
      color-mix(in srgb, var(--ink) 55%, transparent) 44%,
      transparent 100%
    );
  }
  /* Com o menu aberto o véu passa a chapa da altura exata do cabeçalho: é
     debaixo dela que a .np-list rola, e a cauda do gradiente escurecia o
     primeiro item em repouso. O segundo seletor é o caminho sem JavaScript,
     onde não há classe no body. */
  body.nav-open .site-head::before,
  body:has(#nav-menu:target) .site-head::before {
    height: 100%;
    background: var(--ink);
  }
}

/* ---- Faixa larga: dos 600px aos 900px ----------------------------------- */
/* Aqui o painel já não é uma coluna de telemóvel: a palavra vai a 51-76px e a
   linha ganha ar. O avanço de 64px que o numeral impunha saiu com ele. */
@media (min-width: 600px) and (max-width: 900px) {
  .np-item a {
    padding-block: clamp(10px, 1.9vh, 20px);
  }
  .np-contact { font-size: 17px; }
  /* empurra o idioma (e, sem JavaScript, o Fechar) para o bordo direito:
     é o que dá ao rodapé a largura toda do painel. */
  .np-lang { margin-left: auto; }
}

/* ---- Telemóvel deitado: duas colunas ------------------------------------ */
/* Aqui não é uma questão de encolher, é de forma. Medido a 844x390 (iPhone 13
   em paisagem) com o painel aberto: em coluna única, entre o cabeçalho de
   81.8px e o rodapé, sobram 228px para seis destinos, ou seja 38px por linha,
   ou seja 22px de palavra. Isso não é um menu, é uma lista de sistema.
   Em duas colunas são três linhas de 68px e a palavra volta aos 47px, com os
   seis destinos e o rodapé todos dentro do ecrã e zero rolagem.
   O teto por altura (13vh) e o de largura (5.6vw) são os desta forma: a coluna
   tem 367px a 844 e "Experiências" a 47.3px mede 286. */
@media (max-width: 900px) and (max-height: 540px) and (orientation: landscape) {
  .np-list {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: clamp(20px, 5vw, 56px);
    align-content: start;
  }
  .np-item a { padding-block: clamp(6px, 1.6vh, 16px); }
  .np-word { font-size: min(clamp(34px, 5.6vw, 60px), 13vh); }
  /* a régua separa linhas, e o topo de cada coluna não é uma linha nova */
  .np-item:nth-child(4)::before { display: none; }
}

/* ---- Movimento reduzido ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .navpanel { transition: none; }
  .np-word { transform: none; opacity: 1; }
  .navpanel::before { opacity: 0.2; }
}