/* ══════════════════════════════════════════════════════════════
   MARTA ROSA — fado a céu aberto
   Bodoni Moda (display) + Archivo variável (largura 62–125)
   ══════════════════════════════════════════════════════════════ */

@font-face{font-family:'Bodoni Moda';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/bodoni.woff2') format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:400 600;font-display:swap;src:url('../fonts/bodoni-italic.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:62% 125%;font-display:swap;src:url('../fonts/archivo.woff2') format('woff2')}

:root{
  --papel:#EEF5FC;
  --superficie:#E4EFFA;
  --ceu:#BCD9F4;
  --tinta:#08203A;
  --tinta-fraca:#4A6786;
  --cobalto:#1B4FA0;
  --linha:rgba(27,79,160,.20);
  --linha-forte:rgba(27,79,160,.42);
  --sol:#D98A2B;
  --ph-fundo:#DCEAF8;
  --mistura:multiply;
  --grao:.055;
  --sombra:0 24px 60px -30px rgba(8,32,58,.45);

  --larg:min(1440px,100% - clamp(2rem,6vw,7rem));
  --sec:clamp(5rem,11vw,11rem);
  --curva:cubic-bezier(.22,.61,.36,1);
  --curva-f:cubic-bezier(.76,0,.24,1);

  --display:'Bodoni Moda',Georgia,'Times New Roman',serif;
  --corpo:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
}

html[data-tema="escuro"]{
  --papel:#050F1C;
  --superficie:#0A1E33;
  --ceu:#17395B;
  --tinta:#DDEBFA;
  --tinta-fraca:#8AAACA;
  --cobalto:#78AEF2;
  --linha:rgba(120,174,242,.22);
  --linha-forte:rgba(120,174,242,.45);
  --sol:#EDA94F;
  --ph-fundo:#0E2740;
  --mistura:screen;
  --grao:.075;
  --sombra:0 24px 60px -30px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
/* O atributo `hidden` esconde, seja qual for a classe. Uma classe com
   `display` ganha ao `hidden` do browser, e era assim que o botão «Agenda no
   calendário» (`.cap`) aparecia sem datas nenhumas, a apontar para `#`; a
   pastilha «A seguir» (`.prox`) tinha o mesmo defeito à espera de uma agenda
   vazia. As regras `.x[hidden]` que há mais abaixo eram remendos disto, um a
   um. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.sem-rolar{overflow:hidden}

body{
  margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--corpo);font-size:clamp(1rem,.93rem + .3vw,1.1rem);
  line-height:1.6;overflow-x:hidden;font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  transition:background-color .6s var(--curva),color .6s var(--curva);
}
img,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cobalto);outline-offset:4px}

.env{width:var(--larg);margin-inline:auto}
.num{font-variant-numeric:tabular-nums}

.saltar{position:fixed;top:-100px;left:1rem;z-index:300;background:var(--cobalto);color:var(--papel);
        padding:.7rem 1.1rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase}
.saltar:focus{top:1rem}
/* o <main> leva tabindex="-1" para o «Saltar para o conteúdo» lhe passar o
   foco (sem ele o Tab seguinte voltava ao cabeçalho); o anel à volta da
   página inteira não diz nada a ninguém */
main[tabindex="-1"]:focus{outline:none}

/* ── tipografia ─────────────────────────────────────────── */
.d{font-family:var(--display);font-weight:400;line-height:.95;letter-spacing:-.02em;
   font-variation-settings:'opsz' 96;text-wrap:balance;margin:0}
.d--l{font-size:clamp(2.3rem,6vw,5.4rem)}
/* O eixo ótico em 96 é o dos corpos grandes: num título de 27 a 46 px os
   traços finos sumiam e as letras soltavam-se — lia-se «escre ve» e
   «Aftermov ie». O 32 é o meio desse intervalo: segura os traços finos a 46 px
   num ecrã de densidade 1, onde o eixo igual ao tamanho ainda os perdia, e no
   telemóvel fica perto dos 27. */
.d--m{font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.03;font-variation-settings:'opsz' 32}
/* um email em letra de título (Quem é, Imprensa): na Bodoni o «@» quase
   desaparecia — vai na letra do texto, um pouco mais pequena */
.d--m > a[href^="mailto:"]{font-family:var(--corpo);font-size:.72em;font-weight:500;letter-spacing:-.01em;
  overflow-wrap:anywhere}

.rot{font-size:.7rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.22em;
     color:var(--tinta-fraca);margin:0;display:flex;align-items:center;gap:.8rem}
.rot::before{content:"";width:2rem;height:1px;background:var(--cobalto);flex:none}
.rot--claro{color:inherit;opacity:.8}

.txt{max-width:56ch;color:var(--tinta-fraca);margin:0 0 1rem}
.txt:last-child{margin-bottom:0}
.txt strong{color:var(--tinta);font-weight:600}
.lig{border-bottom:1px solid var(--linha);transition:border-color .3s var(--curva)}
.lig:hover{border-color:var(--cobalto)}
/* As ligações no meio do texto corrido. O `a{color:inherit;text-decoration:none}`
   de cima fazia delas texto igual ao outro: a «Marque uma videochamada»,
   a única ligação para marcar.martarosa.pt, e a «política de privacidade» da
   nota do formulário não se viam. Cobalto e sublinhadas: 7,2:1 no papel claro,
   6,7:1 na superfície, e acima de 7:1 no escuro. */
.txt a:not(.cap),.form__nota a{color:var(--cobalto);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.22em;text-decoration-color:color-mix(in srgb,var(--cobalto) 55%,transparent);
  transition:text-decoration-color .3s var(--curva)}
.txt a:not(.cap):hover,.form__nota a:hover{text-decoration-color:currentColor}
.txt a.lig{border-bottom:0}

.tijolo{width:15px;height:15px;flex:none;color:var(--cobalto);opacity:.8}

/* ── botões cápsula ─────────────────────────────────────── */
.cap{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
     padding:.62rem 1.15rem;border:1px solid var(--linha-forte);border-radius:999px;
     font-size:.7rem;font-weight:600;font-stretch:80%;text-transform:uppercase;letter-spacing:.14em;
     color:var(--tinta);white-space:nowrap;position:relative;overflow:hidden;
     transition:color .35s var(--curva),border-color .35s var(--curva)}
.cap::before{content:"";position:absolute;inset:0;background:var(--cobalto);border-radius:inherit;
             transform:translateY(101%);transition:transform .45s var(--curva)}
.cap:hover{color:var(--papel);border-color:var(--cobalto)}
.cap:hover::before{transform:translateY(0)}
.cap > *{position:relative;z-index:1}
.cap--cheio{background:var(--cobalto);border-color:var(--cobalto);color:var(--papel)}
.cap--ico{padding:.5rem;width:2.2rem;height:2.2rem}
.cap--fino{padding:.42rem .8rem;font-size:.62rem;border-color:var(--linha)}
.ico{width:15px;height:15px;position:relative;z-index:1}
.cap--cheio::before{background:var(--tinta)}

/* ── grão de película ───────────────────────────────────── */
.grao{position:fixed;inset:-50%;z-index:200;pointer-events:none;opacity:var(--grao);
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      animation:grao 1.2s steps(3) infinite;mix-blend-mode:var(--mistura)}
@keyframes grao{
  0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}
}

/* ── cursor ─────────────────────────────────────────────── */
.cur{position:fixed;top:0;left:0;z-index:250;pointer-events:none;opacity:0;
     transition:opacity .3s var(--curva);mix-blend-mode:var(--mistura)}
body.tem-cur .cur{opacity:1}
.cur__p{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cobalto);
        transform:translate(-50%,-50%)}
.cur__a{position:absolute;width:38px;height:38px;border-radius:50%;border:1px solid var(--linha-forte);
        transform:translate(-50%,-50%) scale(1);transition:transform .35s var(--curva),background-color .35s var(--curva)}
body.cur-mag .cur__a{transform:translate(-50%,-50%) scale(1.85);background:color-mix(in srgb,var(--cobalto) 12%,transparent)}
@media (hover:none),(pointer:coarse){.cur{display:none}}

/* ── pré-carregamento ───────────────────────────────────── */
/* Quem o tira é o main.js. Se ele não chegar a correr — um módulo que falha,
   o armazenamento bloqueado a rebentar o arranque —, a folha de estilo tira-o
   sozinha ao fim de 5,5 s, mais do que a rede de segurança do JS (4,5 s), e o
   nome do hero aparece com ele. Sem JS nenhum, o <noscript> do index.html
   nem o deixa aparecer. */
.carga{position:fixed;inset:0;z-index:400;background:var(--papel);display:grid;place-items:center;
       transition:opacity .7s var(--curva),visibility .7s;animation:carga-sai .7s var(--curva) 5.5s forwards}
.carga.fora{opacity:0;visibility:hidden}
@keyframes carga-sai{to{opacity:0;visibility:hidden}}
body:not(.pronto) .nome__l{animation:nome-entra .9s var(--curva) 5.5s forwards}
@keyframes nome-entra{to{transform:translateY(0);opacity:1}}
.carga__in{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.carga__n{font-family:var(--display);font-size:clamp(2rem,7vw,4.5rem);letter-spacing:.02em;
          line-height:1;overflow:hidden}
.carga__n i{display:inline-block;transform:translateY(105%);animation:sobe .9s var(--curva) forwards}
@keyframes sobe{to{transform:translateY(0)}}
.carga__c{font-size:.72rem;font-weight:700;font-stretch:74%;letter-spacing:.3em;color:var(--tinta-fraca)}
.carga__barra{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--linha)}
.carga__barra i{display:block;height:100%;width:0;background:var(--cobalto);transition:width .25s linear}

/* ── nav ────────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;transition:transform .5s var(--curva)}
.nav.escondida{transform:translateY(-105%)}
.nav__in{width:var(--larg);margin-inline:auto;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);
         padding-block:1.1rem;transition:padding .4s var(--curva)}
.nav.colada .nav__in{padding-block:.65rem}
.nav::after{content:"";position:absolute;inset:0;z-index:-1;
            background:color-mix(in srgb,var(--papel) 72%,transparent);
            backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
            border-bottom:1px solid transparent;opacity:0;transition:opacity .4s var(--curva),border-color .4s var(--curva)}
.nav.colada::after{opacity:1;border-bottom-color:var(--linha)}
/* Na página do disco (main.et) o menu começa por cima do topo bordô, sem a
   faixa de papel por trás: aí leva as cores do tema escuro, com o texto mais
   claro, que é o que se lê no bordô. Ao colar, a faixa volta, e as cores do
   tema com ela. */
body:has(> main.et) .nav:not(.colada,.nav--aberto){
  --papel:#050F1C;--tinta:#FFFFFF;--tinta-fraca:#EADDE0;--cobalto:#78AEF2;
  --linha:rgba(255,255,255,.22);--linha-forte:rgba(255,255,255,.45);color:var(--tinta)}

.marca{font-family:var(--display);font-size:1.1rem;letter-spacing:.16em;text-transform:uppercase;
       font-variation-settings:'opsz' 11;white-space:nowrap}
.nav__links{display:flex;gap:clamp(1rem,2.2vw,2rem);margin-left:auto}
.nav__links a{font-size:.71rem;font-weight:600;font-stretch:78%;text-transform:uppercase;letter-spacing:.16em;
              color:var(--tinta-fraca);position:relative;padding-block:.2rem}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cobalto);
                     transform:scaleX(0);transform-origin:right;transition:transform .4s var(--curva)}
.nav__links a:hover{color:var(--tinta)}
/* antes de colar, o menu está por cima do topo da página — o céu da inicial —,
   onde o cinzento-azulado não chegava aos 4,5:1; aí vai na tinta inteira */
.nav:not(.colada,.nav--aberto) .nav__links a{color:var(--tinta)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__fer{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.nav__links + .nav__fer{margin-left:0}
.nav__fer .cap{padding:.5rem .85rem;font-size:.66rem}
/* o botão do tema é redondo: com o enchimento das cápsulas ao lado, a lua
   ficava espremida em 6 px de largura */
.nav__fer .cap--ico{padding:.5rem}
/* As línguas: um botão com o globo e a língua em que se está, e por baixo a
   lista das seis, cada uma escrita na sua. É um <details>, e por isso o
   marcador do browser sai. */
.linguas{position:relative}
.linguas > summary{list-style:none;cursor:pointer;gap:.4rem;user-select:none}
.linguas > summary::-webkit-details-marker{display:none}
.linguas > summary span:lang(zh),.linguas > summary span:lang(ja){font-size:.74rem;letter-spacing:.04em}
.linguas[open] > summary{border-color:var(--cobalto)}
.linguas__m{position:absolute;right:0;top:calc(100% + .5rem);z-index:5;min-width:10.5rem;
            display:flex;flex-direction:column;padding:.35rem;
            border:1px solid var(--linha-forte);border-radius:14px;background:var(--papel);
            box-shadow:0 18px 40px -22px rgba(0,0,0,.45)}
.linguas__m > *{padding:.55rem .85rem;border-radius:9px;font-size:.88rem;line-height:1.3;
                color:var(--tinta-fraca);white-space:nowrap;transition:color .25s var(--curva),background-color .25s var(--curva)}
.linguas__m a:hover,.linguas__m a:focus-visible{color:var(--tinta);
            background:color-mix(in srgb,var(--cobalto) 10%,transparent)}
.linguas__m a:focus-visible{outline-offset:-2px}
.linguas__m [aria-current]{color:var(--tinta);font-weight:600}
.linguas__m [aria-current]::after{content:"";display:inline-block;width:.38rem;height:.38rem;margin-left:.55rem;
            border-radius:50%;background:var(--cobalto);vertical-align:middle}
/* Com o tema, as línguas e o menu, o cabeçalho mal cabe nos telemóveis
   estreitos: a 320 px o botão do menu chegou a ficar fora do ecrã. Abaixo de
   380 px aperta-se o que tem folga — o espaço entre botões, o interior das
   cápsulas e o espaçamento do nome —, e nada desaparece. */
@media (max-width:380px){
  .nav__fer{gap:.3rem}
  .nav__fer .linguas > summary{padding:.45rem .55rem;gap:.3rem}
  .marca{font-size:.95rem;letter-spacing:.1em}
}
/* botão do menu: só aparece quando os links deixam de caber */
.ham{display:none;width:2.6rem;height:2.6rem;border:1px solid var(--linha-forte);border-radius:999px;
     background:none;cursor:pointer;padding:0;align-items:center;justify-content:center;gap:.32rem;
     flex-direction:column;transition:border-color .3s var(--curva)}
.ham i{display:block;width:1rem;height:1.5px;background:currentColor;border-radius:2px;
       transition:transform .35s var(--curva),opacity .25s var(--curva)}
.ham:hover{border-color:var(--cobalto)}
.ham[aria-expanded="true"] i:first-child{transform:translateY(.205rem) rotate(45deg)}
.ham[aria-expanded="true"] i:last-child{transform:translateY(-.205rem) rotate(-45deg)}

.menu{display:none}
.menu__l{display:flex;flex-direction:column;gap:.2rem}
.menu__l a{font-family:var(--display);font-size:clamp(2rem,9vw,2.8rem);line-height:1.18;
           color:var(--tinta);text-decoration:none;font-variation-settings:'opsz' 32;
           padding:.2rem 0;transition:color .3s var(--curva)}
.menu__l a[aria-current="page"]{color:var(--cobalto)}
.menu__l a:hover{color:var(--cobalto)}
.menu__b{align-self:flex-start;margin-top:2rem}
/* «Comprar o CD», ao lado do Booking, só com a venda do «entretanto» aberta
   (js/cd.js): o ponto laranja é a cor do disco */
.nav__cd i,.menu__cd i{width:7px;height:7px;border-radius:50%;background:#E18805;box-shadow:0 0 0 3px rgba(225,136,5,.25)}
.menu__cd{align-self:flex-start;margin-top:2rem}
.menu__cd + .menu__b{margin-top:.8rem}

@media (max-width:940px){
  .nav__links{display:none}
  .ham{display:flex}
  .nav__book,.nav__cd{display:none}
  .nav--aberto{background:var(--papel)}
  /* com os links escondidos, o `.nav__links + .nav__fer{margin-left:0}` de
     cima deixava os botões a 36 px da margem direita */
  .nav__links + .nav__fer{margin-left:auto}
  /* a barra tem de ficar por cima do painel, senão o botão de fechar
     desaparece por baixo dele e só resta a tecla Escape */
  .nav--aberto .nav__in{position:relative;z-index:2}
  .menu{display:block;position:fixed;inset:0;z-index:1;
        padding:clamp(5.5rem,16vh,8rem) 0 clamp(2rem,6vh,4rem);
        background:var(--papel);overflow-y:auto;overscroll-behavior:contain}
  .menu__in{width:var(--larg);margin-inline:auto;display:flex;flex-direction:column;align-items:flex-start}
  .menu[hidden]{display:none}
}

/* ── HERO ───────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
      padding:clamp(6rem,14vh,10rem) 0 clamp(1.5rem,4vh,3rem);overflow:hidden;isolation:isolate}
.hero__ceu{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
/* O céu parado (js/ceu.js): sem WebGL, ou com WebGL feito pelo processador.
   As cores do céu animado — #5D9CD6 no topo, nuvens brancas, --papel em
   baixo — em gradientes, que não custam nada. */
.hero__ceu--parado{background:
  radial-gradient(60% 34% at 22% 30%,rgba(255,255,255,.55),transparent 70%),
  radial-gradient(50% 28% at 74% 18%,rgba(255,255,255,.45),transparent 70%),
  radial-gradient(70% 30% at 58% 48%,rgba(255,243,220,.35),transparent 70%),
  linear-gradient(180deg,#5D9CD6 0%,#8BBBE6 38%,var(--papel) 78%)}
html[data-tema="escuro"] .hero__ceu--parado{background:
  radial-gradient(60% 34% at 22% 30%,rgba(26,74,121,.7),transparent 70%),
  radial-gradient(50% 28% at 74% 18%,rgba(26,74,121,.6),transparent 70%),
  radial-gradient(70% 30% at 58% 48%,rgba(42,98,150,.45),transparent 70%),
  linear-gradient(180deg,#0B2A48 0%,#123A61 38%,var(--papel) 78%)}
.hero__grade{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.12;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 60%,#000 20%,transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 60%,#000 20%,transparent 75%)}
.hero__in{width:var(--larg);margin-inline:auto;position:relative;
          display:grid;gap:clamp(1.3rem,3vw,2.8rem);align-items:end}
/* Retrato e nome lado a lado a partir dos 900px. Abaixo disso o retrato fica
   por cima do nome, e continua grande — encolhê-lo até virar selo era pô-lo
   como enfeite, que é o contrário do que se quer aqui. */
@media (min-width:900px){
  /* pista fixa para o retrato: com `auto` a largura da coluna passa a depender
     da largura da imagem, que por sua vez era 100% da coluna — circular, e a
     grelha colapsava */
  .hero__in{grid-template-columns:clamp(240px,27vw,360px) minmax(0,1fr)}
  /* o tamanho do .nome a partir daqui está a seguir à regra dele, mais abaixo */
}
.hero__q{min-width:0}
.hero__f{margin:0;width:min(100%,340px);justify-self:start}

/* No telemóvel, o nome e a frase vinham depois do retrato — e como o retrato
   é grande, o primeiro ecrã era foto, crédito em maiúsculas e o nome cortado
   ao meio pelo banner dos cookies. A frase que sustenta o site, que é a dela,
   só aparecia a rolar. Aqui a ordem inverte-se e o retrato ganha um teto.

   O teto é da imagem, e não da <figure>: com o `max-height` e o
   `overflow:hidden` na figura cortava-se a legenda, que é o crédito
   obrigatório da fotógrafa. E é de 40% do ecrã (era 52%), para o «Ouvir»
   caber no primeiro, a 390 × 844; o recorte fica à volta da cara. */
@media (max-width:899px){
  .hero__q{order:-1}
  .hero__f{width:100%}
  .hero__img{max-height:40vh;max-height:40svh;object-fit:cover;object-position:50% 22%}
  /* o crédito deixa de ser um rótulo em maiúsculas do tamanho do texto */
  .hero__leg{font-size:.62rem;text-align:right;opacity:.75}
}
.hero__img{width:100%;height:auto;display:block;border:1px solid var(--linha);
           background:var(--superficie)}
/* o lugar do crédito fica reservado: ele só chega quando o creditos.js corre,
   depois do ecrã de carga, e sem isto a coluna dava um salto */
.hero__leg{min-height:1.4em}

.nome{font-family:var(--display);font-weight:400;margin:.6rem 0 0;line-height:.86;
      font-size:clamp(3.6rem,17.5vw,17rem);letter-spacing:-.045em;
      display:flex;flex-wrap:wrap;user-select:none}
/* Ao lado do retrato o nome tem menos largura. Esta regra estava junto da
   grelha do hero, ANTES da do .nome — e a de baixo, com o tamanho do
   telemóvel, ganhava-lhe: a 1440 px o nome saía a 252 px, em duas linhas, e
   empurrava a citação e o «Ouvir» para fora do primeiro ecrã. */
@media (min-width:900px){.nome{font-size:clamp(3rem,9.2vw,8.2rem)}}
.nome__p{display:inline-flex}   /* cada palavra é um bloco: assim «Rosa» não parte a meio */
.nome__l{display:inline-block;transform:translateY(110%);opacity:0;will-change:transform}
.nome__e{width:.22em}
body.pronto .nome__l{transform:translateY(0);opacity:1;
  transition:transform 1.05s var(--curva),opacity .7s var(--curva);
  transition-delay:calc(var(--i) * 55ms)}

/* A citação de abertura. As aspas são desenhadas com ::before/::after e não
   escritas no HTML: assim o texto que vai para o dicionário do inglês, para o
   leitor de ecrã e para o motor de busca é só a frase. */
.hero__cita{margin:clamp(1rem,2.4vw,2rem) 0 0;display:flex;flex-direction:column;gap:.7rem;
            max-width:36ch}
.hero__frase{font-family:var(--display);font-size:clamp(1.15rem,2.1vw,1.85rem);line-height:1.24;
             margin:0;font-variation-settings:'opsz' 28;font-style:italic;
             text-wrap:balance}
.hero__frase::before{content:'\201C'}
.hero__frase::after{content:'\201D'}
/* As de cada língua, como no resto do texto do site: «» no português e no
   espanhol, «» com espaço inseparável no francês, 「」 no japonês; o inglês,
   o chinês e o tailandês ficam com as de cima. */
.hero__frase:is(:lang(pt),:lang(es))::before{content:'\AB'}
.hero__frase:is(:lang(pt),:lang(es))::after{content:'\BB'}
.hero__frase:lang(fr)::before{content:'\AB\A0'}
.hero__frase:lang(fr)::after{content:'\A0\BB'}
.hero__frase:lang(ja)::before{content:'\300C'}
.hero__frase:lang(ja)::after{content:'\300D'}
.hero__fonte{font-family:var(--corpo);font-style:normal;font-size:.78rem;letter-spacing:.06em;
             text-transform:uppercase;color:var(--tinta-fraca)}
/* No telemóvel a fonte fica por cima do céu, e não do papel: o cinzento-azulado
   dava 3,9:1 (4,1 no escuro) a 12,5 px. Na tinta inteira passa dos 8:1. */
@media (max-width:899px){.hero__fonte{color:var(--tinta)}}

.hero__pe{width:var(--larg);margin:clamp(2rem,5vh,4rem) auto 0;display:flex;align-items:flex-end;
          justify-content:space-between;gap:1.5rem}
.prox{display:inline-flex;align-items:center;gap:.9rem;padding:.75rem 1.2rem;border-radius:999px;
      border:1px solid var(--linha-forte);background:color-mix(in srgb,var(--papel) 55%,transparent);
      backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
      transition:border-color .35s var(--curva),background-color .35s var(--curva)}
.prox:hover{border-color:var(--cobalto);background:color-mix(in srgb,var(--papel) 80%,transparent)}
.prox__p{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;font-weight:700;font-stretch:72%;
         text-transform:uppercase;letter-spacing:.18em;color:var(--sol);white-space:nowrap}
.ponto{width:7px;height:7px;border-radius:50%;background:var(--sol);flex:none;animation:pulsa 2.6s infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--sol) 60%,transparent)}
                 70%{box-shadow:0 0 0 10px transparent}100%{box-shadow:0 0 0 0 transparent}}
.prox__q{font-size:.82rem;font-weight:500}
.prox__s{color:var(--cobalto)}
@media (max-width:640px){.prox{flex-wrap:wrap;gap:.5rem .8rem}.prox__q{font-size:.75rem}}

.rolar{width:1px;height:clamp(40px,7vh,72px);background:var(--linha-forte);position:relative;overflow:hidden;flex:none}
.rolar i{position:absolute;inset:0;background:var(--cobalto);transform:translateY(-100%);
         animation:desce 2.4s var(--curva) infinite}
@keyframes desce{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (max-width:640px){.rolar{display:none}}

/* ── fita de datas ──────────────────────────────────────── */
.fita{border-block:1px solid var(--linha);padding-block:.85rem;overflow:hidden;
      background:var(--superficie);white-space:nowrap}
.fita__t{display:inline-flex;gap:2.5rem;will-change:transform}
.fita__i{display:inline-flex;align-items:center;gap:2.5rem;font-size:.78rem;font-weight:700;
         font-stretch:70%;text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-fraca)}
.fita__i b{color:var(--tinta);font-weight:700}
.fita__i svg{width:11px;height:11px;color:var(--cobalto)}

/* ── retrato a toda a largura ───────────────────────────── */
.cheia{padding:var(--sec) 0 0}
.cheia__cx{width:100%;overflow:hidden}
.cheia__leg{width:var(--larg);margin:1rem auto 0;font-size:.7rem;font-weight:600;font-stretch:76%;
            text-transform:uppercase;letter-spacing:.16em;color:var(--tinta-fraca)}

/* ── placeholders ───────────────────────────────────────── */
.ph{position:relative;background:var(--ph-fundo);border:1px solid var(--linha);
    display:grid;place-items:center;overflow:hidden;isolation:isolate}
.ph::before{content:"";position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(var(--linha) 1px,transparent 1px),linear-gradient(90deg,var(--linha) 1px,transparent 1px);
  background-size:48px 48px;background-position:center}
.ph::after{content:"";position:absolute;inset:12px;border:1px dashed var(--linha);pointer-events:none}
.ph__c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:.7rem;
       text-align:center;padding:1.5rem}
.ph__n{font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.6rem);line-height:1.16;max-width:26ch;
       margin:0;font-variation-settings:'opsz' 22}
.ph__d{margin:0;font-size:.64rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
       letter-spacing:.2em;color:var(--cobalto)}
.ph--16{aspect-ratio:16/9}
.ph--43{aspect-ratio:3/4}
.ph--1{aspect-ratio:1}
.ph--cheia{aspect-ratio:16/9;min-height:min(78svh,760px)}
@media (max-width:640px){.ph--cheia{aspect-ratio:4/5;min-height:0}}

/* ── secções ────────────────────────────────────────────── */
.sec{padding-block:var(--sec);position:relative}
.sec--fundo{background:var(--superficie)}
.cab{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem 3rem;
     margin-bottom:clamp(2.2rem,4.5vw,4rem)}
.cab__t{display:flex;flex-direction:column;gap:1.2rem;max-width:min(100%,660px);flex:1 1 380px}
.cab__x{display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:min(100%,42ch)}
.cab__bts{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

/* Porta de entrada do «Quem é», na página inicial: retrato, três linhas e o
   link. O resto — percurso, formação, prémios — vive na página própria. */
.sec--curta{padding-block:calc(var(--sec) * .62)}
.abre{display:grid;gap:clamp(1.6rem,4vw,3.5rem);align-items:center}
@media (min-width:800px){.abre{grid-template-columns:minmax(0,.5fr) minmax(0,1fr)}}
.abre__f{margin:0;max-width:480px}
.abre__img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border:1px solid var(--linha)}
.abre__q{display:flex;flex-direction:column;align-items:flex-start;gap:1.1rem;max-width:54ch}
.abre__q > p{margin:0}

/* revelação de títulos, linha a linha */
.ani{overflow:hidden}
.ani > .ani__l{display:block;transform:translateY(105%);transition:transform 1s var(--curva);
               transition-delay:calc(var(--i) * 90ms)}
.vis .ani > .ani__l,.ani.vis > .ani__l{transform:translateY(0)}

.sobe-i{opacity:0;transform:translateY(24px);transition:opacity .9s var(--curva),transform .9s var(--curva)}
.vis .sobe-i,.sobe-i.vis{opacity:1;transform:none}

/* ── agenda ─────────────────────────────────────────────── */
.datas{border-top:1px solid var(--linha)}
.datas__vazio{padding:2rem 0;color:var(--tinta-fraca);font-size:.9rem}
.data{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem clamp(1.2rem,3vw,3rem);
      padding:clamp(1.1rem,2vw,1.7rem) 0;border-bottom:1px solid var(--linha);position:relative;
      transition:color .4s var(--curva)}
.data::before{content:"";position:absolute;inset:0 -1.5rem;background:var(--cobalto);z-index:-1;
              transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--curva-f)}
.data.tocada{color:var(--papel)}
.data.tocada::before{transform:scaleY(1);transform-origin:top}
.data.tocada .data__l,.data.tocada .data__mes{color:color-mix(in srgb,var(--papel) 78%,transparent)}
.data.tocada .selo{border-color:color-mix(in srgb,var(--papel) 60%,transparent);color:var(--papel)}
.data__d{display:flex;flex-direction:column;line-height:1;min-width:clamp(4.5rem,8vw,7rem)}
.data__dia{font-family:var(--display);font-size:clamp(2.4rem,5.5vw,4.6rem);font-variation-settings:'opsz' 70;
           font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.data__mes{font-size:.66rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.2em;
           color:var(--tinta-fraca);margin-top:.5rem;transition:color .4s var(--curva)}
.data__q{min-width:0}
.data__t{margin:0 0 .25rem;font-size:clamp(1rem,1.5vw,1.25rem);font-weight:600}
.data__l{margin:0;font-size:.84rem;color:var(--tinta-fraca);transition:color .4s var(--curva)}
.data__a{display:flex;align-items:center;gap:.7rem;justify-content:flex-end;flex-wrap:wrap}
.selo{font-size:.62rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.14em;
      padding:.35rem .6rem;border:1px solid currentColor;border-radius:999px;white-space:nowrap;
      color:var(--tinta-fraca);transition:color .4s var(--curva),border-color .4s var(--curva)}
.selo--breve{color:var(--cobalto)}
.data__bt{background:var(--sol);border-color:var(--sol);color:#170C00}
.data__bt::before{background:var(--tinta)}
.data__bt:hover{color:var(--papel);border-color:var(--tinta)}
@media (max-width:760px){
  .data{grid-template-columns:auto 1fr}
  .data__a{grid-column:1/-1;justify-content:flex-start}
  .data::before{inset:0 -1rem}
}

.data__mais[aria-expanded="true"]{background:var(--cobalto);border-color:var(--cobalto);color:var(--papel)}

/* painel de pormenores: só abre quando há mesmo alguma coisa lá dentro */
.mais{display:grid;gap:clamp(1.2rem,3vw,2.5rem);padding:0 0 clamp(1.5rem,3vw,2.5rem);
      border-bottom:1px solid var(--linha);animation:abre .45s var(--curva)}
.mais[hidden]{display:none}
@media (min-width:760px){.mais{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:start}}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mais__cartaz{width:100%;aspect-ratio:4/5;object-fit:cover;border:1px solid var(--linha)}
.mais__c{margin:.6rem 0 0;font-size:.64rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
          letter-spacing:.14em;color:var(--tinta-fraca)}
.cart__img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--linha);
           transition:transform .6s var(--curva)}
.cart:hover .cart__img{transform:scale(.985)}
.mais__q{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.mais__l{margin:0;font-size:.9rem}
.mais__l span{font-size:.64rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
              letter-spacing:.16em;color:var(--cobalto);margin-right:.6rem}
.mais__i{list-style:none;margin:.2rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.mais__i li{display:flex;gap:.8rem;align-items:baseline;font-size:.92rem;color:var(--tinta-fraca)}
.mais__i li::before{content:"◇";color:var(--cobalto);font-size:.65rem;flex:none}
.mais__f{margin:.4rem 0 0;font-size:.74rem;color:var(--tinta-fraca)}
.mais__f span{font-size:.62rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
              letter-spacing:.16em;color:var(--tinta-fraca);margin-right:.5rem}
.mais__f a{border-bottom:1px solid var(--linha);color:var(--cobalto)}

/* ── datas passadas ─────────────────────────────────────── */
.recentes{margin-top:clamp(2.5rem,5vw,4rem)}
.recentes[hidden]{display:none}
.passadas{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--linha)}
.passada{display:grid;grid-template-columns:minmax(8.5rem,auto) minmax(0,1fr) auto;gap:.3rem 1.5rem;
         align-items:baseline;padding:.8rem 0;border-bottom:1px solid var(--linha)}
.passada__d{font-size:.7rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
            color:var(--cobalto)}
.passada__t{font-size:.95rem;font-weight:500;min-width:0}
.passada__s{display:block;font-size:.78rem;font-weight:400;color:var(--tinta-fraca);margin-top:.15rem}
.passada__l{font-size:.8rem;color:var(--tinta-fraca)}
@media (max-width:640px){
  .passada{grid-template-columns:1fr}
  .passada__l{grid-row:2}
}

/* ── ouvir ──────────────────────────────────────────────── */
.ouvir{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.8rem,4vw,4rem)}
/* A coluna única com `minmax(0,…)`, e a largura certa no quadrado do leitor
   (`.leitor .ph`, abaixo): com a proporção 1:1, a altura mínima de 352 px
   passava a largura mínima, a coluna automática acompanhava, e a página fugia
   para o lado nos telemóveis de 320 e 360. Com largura fixada, a altura
   mínima só alonga o quadrado. */
@media (min-width:900px){.ouvir{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.ouvir__capa{position:relative}
@media (min-width:900px){.ouvir__capa{position:sticky;top:clamp(6rem,12vh,9rem)}}
.onda{width:100%;height:64px;margin-top:.9rem}

.leitor{position:relative;min-height:352px}
.leitor .ph{aspect-ratio:1;min-height:352px;width:100%}
.leitor__f{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px;
           background:var(--papel)}
/* o botão por cima do esqueleto, até alguém querer ouvir (js/conteudo.js) */
.leitor__fachada{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.8rem;padding:1.5rem;text-align:center}
.leitor:has(.leitor__fachada) .tijolo{visibility:hidden}
.leitor__nota{margin:0;max-width:30ch;font-size:.86rem;line-height:1.5;color:var(--tinta-fraca);
  background:color-mix(in srgb,var(--papel) 88%,transparent);padding:.35rem .7rem;border-radius:8px}

.ficha{margin-top:1.4rem;display:flex;flex-direction:column;gap:.7rem}
.ficha__s{margin:0;font-size:.92rem;color:var(--tinta-fraca);max-width:52ch}
.ficha__f{margin:0;font-size:.78rem;line-height:1.6;color:var(--tinta-fraca);max-width:60ch}
.ficha__f b{color:var(--tinta);font-weight:600;font-stretch:80%;text-transform:uppercase;
            letter-spacing:.12em;font-size:.68rem}

.lancamentos{list-style:none;margin:0 0 2rem;padding:0;border-top:1px solid var(--linha)}
.lanc{border-bottom:1px solid var(--linha)}
.lanc__a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;gap:1rem;
         padding:1.05rem .2rem;transition:padding-left .35s var(--curva),color .35s var(--curva)}
.lanc__a:hover{padding-left:.9rem;color:var(--cobalto)}
.lanc__ano{font-size:.7rem;font-weight:700;font-stretch:72%;letter-spacing:.16em;color:var(--tinta-fraca);
           min-width:2.6rem}
.lanc__q{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.lanc__t{font-size:1.05rem;font-weight:600}
.lanc__s{font-size:.76rem;color:var(--tinta-fraca)}
.lanc__i{color:var(--cobalto)}

.plats{display:grid;gap:.5rem}
.plat{display:flex;align-items:center;gap:.95rem;
      padding:1rem 1.15rem;border:1px solid var(--linha);border-radius:14px;background:var(--papel);
      transition:transform .4s var(--curva),border-color .4s var(--curva)}
.sec--fundo .plat{background:var(--papel)}
.plat:hover{transform:translateX(6px);border-color:var(--cobalto)}
.plat__i{display:grid;place-items:center;width:2.35rem;height:2.35rem;flex:none;border-radius:50%;
         border:1px solid var(--linha);color:var(--cobalto);transition:background-color .4s var(--curva),color .4s var(--curva)}
.plat:hover .plat__i{background:var(--cobalto);color:var(--papel)}
.plat__q{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1}
.plat__n{font-size:.95rem;font-weight:600}
.plat__s{font-size:.7rem;font-stretch:80%;text-transform:uppercase;letter-spacing:.12em;
         color:var(--tinta-fraca)}
.plat__a{color:var(--cobalto);font-size:1.1rem;flex:none}

/* ícone de plataforma: herda a cor do texto e escala com a caixa */
.ic{width:1.15rem;height:1.15rem;fill:currentColor;display:block}
.ic--pe{width:.95rem;height:.95rem;flex:none}
#peCanais a{display:inline-flex;align-items:center;gap:.5rem}

/* ── rolo horizontal ────────────────────────────────────── */
.sec--ver{padding-bottom:calc(var(--sec) * .7)}
.rolo{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;
      padding-inline:max(calc((100vw - var(--larg)) / 2),1rem);scroll-snap-type:x proximity}
.rolo::-webkit-scrollbar{display:none}
.rolo.arrasta{cursor:grabbing}
.rolo__t{display:flex;gap:clamp(1rem,2vw,2rem);width:max-content;padding-bottom:.5rem}
.cart{width:clamp(280px,42vw,660px);flex:none;scroll-snap-align:start}
.cart .ph{transition:transform .6s var(--curva)}
.cart:hover .ph{transform:scale(.985)}
.cart__t{margin:.9rem 0 .2rem;font-size:1.05rem;font-weight:600}
.cart__l{margin:0;font-size:.72rem;font-weight:600;font-stretch:76%;text-transform:uppercase;
         letter-spacing:.16em;color:var(--tinta-fraca)}
.rolo__b{height:2px;background:var(--linha);margin-top:clamp(1.5rem,3vw,2.5rem);overflow:hidden}
.rolo__b i{display:block;height:100%;width:22%;background:var(--cobalto);transform-origin:left}

.video{position:relative;aspect-ratio:16/9;background:var(--ph-fundo);overflow:hidden;
       border:1px solid var(--linha)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__bt{position:absolute;inset:0;width:100%;height:100%;padding:0;display:grid;place-items:center}
.video__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
            transition:transform .8s var(--curva),filter .5s var(--curva);filter:saturate(.85)}
.video__bt:hover .video__img{transform:scale(1.03);filter:saturate(1)}
.video__seta{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
             background:color-mix(in srgb,var(--papel) 88%,transparent);color:var(--cobalto);
             font-size:1.1rem;padding-left:4px;backdrop-filter:blur(6px);
             transition:transform .4s var(--curva)}
.video__bt:hover .video__seta{transform:scale(1.1)}

/* ── quem é ─────────────────────────────────────────────── */
.sobre{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.sobre{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.sobre__q{display:flex;flex-direction:column;gap:1.3rem}
/* a biografia oficial, na página «Quem é» */
.bio > p{margin:0}
.bio__linha{font-family:var(--display);font-size:clamp(1.3rem,2.5vw,1.8rem);line-height:1.28;
            color:var(--tinta);max-width:32ch}
.bio__fonte{margin-top:.6rem;font-size:.64rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
            letter-spacing:.14em;color:var(--tinta-fraca)}
.factos{margin:1rem 0 0;display:grid}
.factos > div{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.4rem 1.4rem;
              padding:.85rem 0;border-top:1px solid var(--linha)}
.factos > div:last-child{border-bottom:1px solid var(--linha)}
.factos dt{font-size:.66rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
           color:var(--cobalto)}
.factos dd{margin:0;font-size:.92rem}
@media (max-width:520px){.factos > div{grid-template-columns:1fr}}

/* ── tira do instagram ──────────────────────────────────── */
.tira{overflow:hidden;margin-top:clamp(1rem,2vw,2rem)}
.tira__t{display:flex;gap:.7rem;width:max-content;will-change:transform}
.tira__i{width:clamp(180px,22vw,300px);flex:none}
.tira__i .ph{aspect-ratio:1;transition:transform .5s var(--curva)}
.tira__i:hover .ph{transform:scale(.96)}

/* ── imprensa ───────────────────────────────────────────── */
.kit{display:grid;gap:clamp(1.5rem,4vw,4rem)}
@media (min-width:800px){.kit{grid-template-columns:1fr 1fr}}
.kit__l{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.kit__l li{padding:.85rem 0;border-bottom:1px solid var(--linha);font-size:.95rem;
           display:flex;gap:.8rem;align-items:baseline}
.kit__l li::before{content:"◇";color:var(--cobalto);font-size:.7rem;flex:none}
.citacoes{display:flex;flex-direction:column;gap:clamp(1.5rem,3vw,2.5rem)}
.kit--fim{margin-top:clamp(2rem,4vw,3.5rem)}
.pecas{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--linha)}
.peca{border-bottom:1px solid var(--linha)}
.peca a{display:grid;grid-template-columns:minmax(7.5rem,auto) minmax(0,1fr) auto;gap:.3rem 1.2rem;
        align-items:baseline;padding:.85rem .2rem;transition:padding-left .3s var(--curva),color .3s var(--curva)}
.peca a:hover{padding-left:.8rem;color:var(--cobalto)}
.peca__o{font-size:.66rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
         color:var(--cobalto)}
.peca__t{font-size:.9rem;min-width:0}
.peca__a{font-size:.72rem;color:var(--tinta-fraca)}
@media (max-width:640px){
  .peca a{grid-template-columns:1fr auto}
  .peca__t{grid-column:1/-1}
}

.cit{margin:0;border-left:2px solid var(--cobalto);padding-left:1.5rem;display:flex;flex-direction:column;gap:.9rem}
.cit__t{font-family:var(--display);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.9rem);line-height:1.28;
        margin:0;color:var(--tinta-fraca);font-variation-settings:'opsz' 26}
.cit__f{font-size:.66rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.18em;
        color:var(--cobalto)}
/* Na página de imprensa as citações iam a toda a largura: a 1440 px, uma
   linha de 120 caracteres em itálico. Em duas colunas ficam pelos 40. A da
   inicial (data-quantas) é uma só, e já vive em meia coluna. */
@media (min-width:900px){
  .citacoes:not([data-quantas]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:clamp(2rem,3.5vw,3rem) clamp(2.5rem,5vw,4.5rem);align-items:start}
}

/* ── booking ────────────────────────────────────────────── */
.book{display:grid;gap:clamp(2rem,5vw,5rem)}
@media (min-width:900px){.book{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.form{display:grid;gap:1rem}
.dupla{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.dupla{grid-template-columns:1fr 1fr}}
.campo{display:flex;flex-direction:column;gap:.45rem}
.campo label{font-size:.66rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
             color:var(--tinta-fraca)}
.campo input,.campo select,.campo textarea{
  font:inherit;font-size:.95rem;color:var(--tinta);background:transparent;border:0;
  border-bottom:1px solid var(--linha);padding:.6rem 0;border-radius:0;width:100%;
  transition:border-color .35s var(--curva)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--cobalto)}
/* a linha de baixo a mudar de cor não chegava para ver onde se está a
   escrever: com o teclado (e nos campos de texto, sempre) leva o anel do resto */
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible{
  outline:2px solid var(--cobalto);outline-offset:4px}
.campo textarea{min-height:120px;resize:vertical}
.campo input:user-invalid,.campo textarea:user-invalid{border-bottom-color:var(--sol)}
.mel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__pe{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.6rem}
.form__msg{margin:0;font-size:.82rem;color:var(--tinta-fraca)}
/* a nota do fim do formulário não tinha estilo nenhum: saía a 17 px, na tinta */
.form__nota{margin:0;font-size:.875rem;line-height:1.55;color:var(--tinta-fraca);max-width:60ch}
.form__msg.erro{color:var(--sol)}
.book__d{display:flex;flex-direction:column;gap:1.4rem;align-items:stretch}

/* Cartão de visita da Onofriana, ao lado do formulário. Leva as cores da casa
   dela — papel, tinta e o vermelho —, e não as deste sítio, também no tema
   escuro: é o cartão de outra marca, não uma secção desta. */
.cartao{--o-tinta:#0A0A0A;--o-papel:#F5F1EA;--o-papel-fundo:#EFE9DE;--o-linha:#D9D1C3;
        --o-pedra:#5C5650;--o-rosa:#A8201A;
        background:var(--o-papel);color:var(--o-tinta);border:1px solid var(--o-linha);
        padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;
        gap:clamp(1rem,2vw,1.3rem);align-self:start;position:relative;overflow:hidden}
/* uma sombra de papel, para o cartão pousar em cima da página e não pintar nela */
.cartao::after{content:"";position:absolute;inset:0;pointer-events:none;
               box-shadow:inset 0 0 0 1px rgba(10,10,10,.04)}

.cartao__marca{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.3rem);text-decoration:none}
.cartao__gui{width:auto;height:clamp(74px,9vw,104px);flex:none;display:block}
.cartao__nome{width:min(100%,215px);height:auto;display:block}
.cartao__marca:hover .cartao__gui{transform:translateY(-2px)}
.cartao__gui{transition:transform .45s var(--curva)}

.cartao__t{margin:0;font-size:.88rem;line-height:1.68;color:var(--o-pedra);
           padding-top:clamp(.9rem,2vw,1.2rem);border-top:1px solid var(--o-linha)}

.cartao__m{display:inline-flex;align-items:center;gap:.6rem;margin:0;font-size:1rem;
           color:var(--o-tinta);text-decoration:none;align-self:flex-start;
           transition:color .3s var(--curva)}
.cartao__m span{border-bottom:1px solid var(--o-rosa);padding-bottom:1px}
.cartao__m:hover{color:var(--o-rosa)}
.ic--ono{width:1.1rem;height:1.1rem;flex:none}

.cartao__r{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.cartao__r a{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:99px;
             color:var(--o-tinta);background:var(--o-papel-fundo);border:1px solid var(--o-linha);
             transition:background .3s var(--curva),color .3s var(--curva),
                        border-color .3s var(--curva),transform .3s var(--curva)}
.cartao__r a:hover{background:var(--o-rosa);border-color:var(--o-rosa);color:var(--o-papel);
                   transform:translateY(-2px)}

.cartao__bt{align-self:flex-start;display:inline-block;font-size:.66rem;font-weight:700;
            font-stretch:72%;text-transform:uppercase;letter-spacing:.14em;text-decoration:none;
            color:var(--o-papel);background:var(--o-tinta);border:1px solid var(--o-tinta);
            border-radius:99px;padding:.72rem 1.3rem;
            transition:background .3s var(--curva),border-color .3s var(--curva)}
.cartao__bt:hover{background:var(--o-rosa);border-color:var(--o-rosa)}

@media (max-width:420px){
  .cartao__marca{flex-direction:column;align-items:flex-start;gap:.9rem}
  .cartao__gui{height:88px}
}

/* ── rodapé ─────────────────────────────────────────────── */
.pe{padding:clamp(3rem,7vw,6rem) 0 2rem;border-top:1px solid var(--linha);overflow:hidden}
.pe__nome{font-size:clamp(3rem,15vw,14rem);line-height:.82;letter-spacing:-.045em;
          color:var(--tinta);opacity:.13;margin:0 0 clamp(2rem,5vw,4rem);white-space:nowrap}
.pe__g{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.pe__l{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.pe__l a{font-size:.88rem;color:var(--tinta-fraca);transition:color .3s var(--curva)}
.pe__l a:hover{color:var(--cobalto)}
.pe__verso{margin:1rem 0 0;font-family:var(--display);font-style:italic;font-size:1.2rem;line-height:1.35;
           font-variation-settings:'opsz' 24;color:var(--tinta)}
.pe__verso p{margin:0}
.pe__assina{margin:.6rem 0 0;font-size:.78rem;color:var(--tinta-fraca)}
.pe__f{margin-top:clamp(2.5rem,5vw,4rem);padding-top:1.5rem;border-top:1px solid var(--linha);
       display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
       font-size:.72rem;color:var(--tinta-fraca)}

/* ── menos movimento ────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
                       transition-duration:.001ms !important}
  .nome__l,.ani > .ani__l{transform:none !important;opacity:1 !important}
  .sobe-i{opacity:1 !important;transform:none !important}
  .grao{animation:none}
}

/* ══ PÁGINAS INTERIORES ═══════════════════════════════════════ */

/* cabeçalho de página */
.topo-p{padding:calc(clamp(6rem,12vh,9rem)) 0 clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--linha)}
.topo-p .d--l{margin:1.2rem 0 0}
.topo-p__t{margin-top:1.4rem;max-width:52ch}
.topo-p .cap,.topo-p__bt{margin-top:1.6rem}
.topo-p__bt{display:flex;flex-wrap:wrap;gap:.7rem}
.topo-p__bt .cap{margin-top:0}

/* ── discografia ────────────────────────────────────────── */
/* Redesenhada em novembro de 2026, primeiro para o telemóvel (tinha 12,7
   ecrãs a 390 px). Cada disco é uma ficha compacta: no telemóvel a capa
   pequena ao lado do tipo, do ano, do título e do «▶ Ouvir», e por baixo a
   descrição em duas linhas (três do tablet para cima), os temas numa linha cada e a «Ficha», que se
   abre; do tablet para cima a capa passa para uma coluna dela, e a partir de
   1100 px os temas vão para uma terceira coluna, ao lado da descrição. Os
   grupos (temas soltos, na voz de outras) seguem a mesma grelha. O que recolhe
   só recolhe dentro do .discos--vivo, que o js/paginas.js põe no contentor:
   sem JavaScript está tudo à vista. */
.sec--discos{padding-block:clamp(1.4rem,3.5vw,2.8rem) clamp(2.5rem,7vw,6rem)}
.discos{display:flex;flex-direction:column}

/* uma fila que desliza para o lado: os atalhos e, no telemóvel, os temas na
   voz de outras. Encosta às margens do ecrã, e um esbatido na ponta diz que
   há mais (as classes vêm do ligarFila(), no js/paginas.js) */
.fila{display:flex;gap:.5rem;list-style:none;margin:-.35rem 0;padding:.35rem 0;
      overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.fila::-webkit-scrollbar{display:none}
.fila > li{flex:none}
.fila--depois{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent);
              mask-image:linear-gradient(to right,#000 calc(100% - 3.5rem),transparent)}
.fila--antes{-webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem);
             mask-image:linear-gradient(to right,transparent,#000 2.5rem)}
.fila--antes.fila--depois{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 3.5rem),transparent);
  mask-image:linear-gradient(to right,transparent,#000 2.5rem,#000 calc(100% - 3.5rem),transparent)}
/* a margem do .env, que a fila atravessa até à borda do ecrã: metade do
   clamp() do --larg (abaixo de 1440 px é sempre ele que manda) */
@media (max-width:759px){
  .fila{--margem:clamp(1rem,3vw,3.5rem);margin-inline:calc(-1 * var(--margem));
        padding-inline:var(--margem);scroll-padding-inline:var(--margem)}
}

/* atalhos: cada disco e cada grupo, e a cronologia, que está no fim */
.atalhos{margin:0 0 clamp(.6rem,2vw,1.4rem)}
.atalhos a{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.05rem;
           border:1px solid var(--linha);border-radius:999px;font-size:.84rem;color:var(--tinta);white-space:nowrap;
           transition:border-color .3s var(--curva),color .3s var(--curva)}
.atalhos a:hover{border-color:var(--cobalto);color:var(--cobalto)}
.atalhos a:focus-visible{outline-offset:-2px}
.atalhos .num{font-size:.7rem;color:var(--tinta-fraca);letter-spacing:.04em}
@media (min-width:760px){.atalhos .fila{flex-wrap:wrap;overflow:visible}}

/* um disco. No telemóvel: a capa e o cabeçalho lado a lado, e o resto por
   baixo, a toda a largura. O invólucro da capa não conta para a grelha
   (display:contents): a capa e o crédito que o js/creditos.js lhe põe a seguir
   são filhos dela, e o crédito vai para baixo do cabeçalho. */
.disco{scroll-margin-top:6rem;position:relative;display:grid;column-gap:1rem;
       grid-template-columns:6.25rem minmax(0,1fr);
       grid-template-areas:"capa cab" "cred cred" "sobre sobre" "porta porta" "lista lista";
       padding-block:clamp(1.5rem,3.2vw,2.6rem);border-top:1px solid var(--linha-forte)}
.disco__capa-w{display:contents}
/* height:auto é indispensável: sem ele o height="800" do HTML ganha ao aspect-ratio,
   a caixa fica alta e estreita e o object-fit corta a capa pelos lados */
.disco__capa{grid-area:capa;align-self:start;width:100%;height:auto;aspect-ratio:1;object-fit:contain;
             border:1px solid var(--linha);box-shadow:var(--sombra);background:var(--superficie)}
.disco .credito{grid-area:cred;margin:.6rem 0 0}
.disco__cab{grid-area:cab;align-self:center;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.disco__cab .rot{line-height:1.5}
.disco:not(.disco--grupo) .disco__cab .rot::before{display:none}
.disco__aviso{color:var(--tinta);white-space:nowrap}
.disco__aviso::before{content:"";display:inline-block;width:.42rem;height:.42rem;border-radius:50%;
                      background:var(--sol);margin-right:.45rem;vertical-align:.08em}
.disco__t{font-size:clamp(1.6rem,2.9vw,2.45rem);line-height:1.04;font-variation-settings:'opsz' 32;
          overflow-wrap:break-word}
.disco__acoes{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.45rem}
.disco__acoes .cap{min-height:2.75rem}
@media (max-width:759px){
  .disco__acoes{gap:.35rem}
  .disco__acoes .cap{padding-inline:.72rem;gap:.4rem;letter-spacing:.1em}
}
.ic-play{width:.78rem;height:.78rem;flex:none}
/* o «Ouvir» do que está no leitor fica aceso, como no passar do rato */
:is(.disco__ouvir,.vozc__ouvir)[aria-expanded="true"]::before{transform:translateY(0)}

/* a descrição, em duas linhas (três do tablet para cima); «Ler mais» na ponta da última, por cima de um
   esbatido, quando não cabe (o JS mede) */
.disco__sobre{grid-area:sobre;align-self:start;position:relative;max-width:58ch;margin-top:1rem}
.disco__sobre .txt{margin:0;font-size:.95rem;line-height:1.55;max-width:none}
.discos--vivo .disco__sobre:not(.disco__sobre--aberto) .txt{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (min-width:760px){
  .discos--vivo .disco__sobre:not(.disco__sobre--aberto) .txt{-webkit-line-clamp:3;line-clamp:3}
}
.disco__ler{display:none;position:relative;font-size:.95rem;line-height:1.55;font-weight:600;color:var(--cobalto);
            padding:0;margin-top:.15rem}
.disco__ler:hover{text-decoration:underline;text-underline-offset:.2em}
/* o alvo de toque é maior do que a palavra */
.disco__ler::after{content:"";position:absolute;inset:-.7rem -.4rem}
.discos--vivo .disco__sobre--corta .disco__ler,.discos--vivo .disco__sobre--aberto .disco__ler{display:inline-block}
.discos--vivo .disco__sobre--corta:not(.disco__sobre--aberto) .disco__ler{
  position:absolute;right:0;bottom:0;margin:0;padding-left:2.8rem;
  background:linear-gradient(to right,transparent,var(--papel) 2.4rem)}

.disco__lista{grid-area:lista;margin-top:1.1rem;min-width:0}

/* os temas: número, título, duração e os botões, numa linha */
.temas{list-style:none;margin:0;padding:0;border-top:1px solid var(--linha)}
.tema{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--linha)}
.tema__b{flex:1 1 0;min-width:0;display:flex;align-items:baseline;gap:.6rem;min-height:2.75rem;
         padding:.5rem .1rem;text-align:left;color:var(--tinta)}
.tema__b:focus-visible{outline-offset:-2px}
.tema__n{flex:none;width:1.45rem;font-size:.68rem;font-weight:700;font-stretch:72%;letter-spacing:.1em;
         color:var(--tinta-fraca)}
.tema__t{min-width:0;font-size:.98rem;line-height:1.3;transition:color .3s var(--curva)}
.tema__b:hover .tema__t{color:var(--cobalto)}
/* a seta pequena diz que o tema abre (a autoria, por baixo) */
/* (dentro do título, presa à última palavra: vai atrás dela quando o título parte a linha) */
.tema__u{white-space:nowrap}
.tema__v{display:inline-block;width:.36rem;height:.36rem;margin-left:.5rem;vertical-align:.28em;opacity:.75;
         border-right:1.3px solid var(--tinta-fraca);border-bottom:1.3px solid var(--tinta-fraca);
         rotate:45deg;transition:rotate .3s var(--curva),translate .3s var(--curva)}
.tema--aberto .tema__v{rotate:-135deg;translate:0 .2rem}
.tema__d{flex:none;min-width:2.5rem;text-align:right;font-size:.78rem;color:var(--tinta-fraca);margin-right:.2rem}
.tema__i{flex:none;width:2.75rem;height:2.75rem;display:grid;place-items:center;border-radius:50%;
         color:var(--tinta-fraca)}
.tema__i > span{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--linha);
                border-radius:50%;transition:color .3s var(--curva),border-color .3s var(--curva)}
button.tema__i:hover > span{color:var(--cobalto);border-color:var(--cobalto)}
.tema__i:focus-visible{outline-offset:-3px}
.tema__i .ic-play{width:.74rem;height:.74rem;translate:.06rem 0}
.tema__i--l > span{font-family:var(--display);font-size:1.08rem;line-height:1}
.temas--sem-v .tema__i--v,.temas--sem-l .tema__i--l{display:none}
.tema__a{flex-basis:100%;margin:-.35rem 0 0;padding:0 .2rem .75rem 2.15rem;font-size:.8rem;line-height:1.5;
         color:var(--tinta-fraca)}
.tema__a--falta{opacity:.75}
.discos--vivo .tema:not(.tema--aberto) .tema__a{display:none}
.discos--vivo .temas:not(.temas--todos) .tema--mais{display:none}

/* «Ver os 12 temas» e a «Ficha»: duas linhas como as dos temas */
.temas__mais,.fichaD > summary{display:flex;align-items:center;gap:.6rem;width:100%;min-height:2.75rem;
  padding:.45rem .1rem;font-size:.68rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
  letter-spacing:.16em;border-bottom:1px solid var(--linha);cursor:pointer;text-align:left}
.temas__mais{color:var(--cobalto)}
.temas__mais::after,.fichaD__v{content:"";flex:none;width:.5rem;height:.5rem;margin-left:auto;margin-right:.55rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;
  transition:rotate .3s var(--curva)}
.temas__mais:hover{text-decoration:underline;text-underline-offset:.25em}
.temas--todos + .temas__mais{display:none}
.temas__mais:focus-visible,.fichaD > summary:focus-visible{outline-offset:-2px}
.fichaD > summary{list-style:none;color:var(--tinta)}
.fichaD > summary::-webkit-details-marker{display:none}
.fichaD > summary:hover{color:var(--cobalto)}
.fichaD__v{color:var(--tinta-fraca)}
.fichaD[open] .fichaD__v{rotate:-135deg;translate:0 2px}
.fichaD__q{display:flex;flex-direction:column;gap:1rem;padding:.9rem .1rem 1.2rem;border-bottom:1px solid var(--linha)}
.fichaD__l{margin:0;display:flex;flex-direction:column;gap:.7rem}
.fichaD__l > div{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:.9rem}
.fichaD__l dt{font-size:.62rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
             color:var(--cobalto);padding-top:.22rem}
.fichaD__l dd{margin:0;font-size:.85rem;line-height:1.55;color:var(--tinta-fraca)}
.fichaD__mus{list-style:none;margin:0;padding:0}
/* onde é que este disco se ouve, e onde é que não se ouve */
.disco__nota{margin:0;font-size:.85rem;line-height:1.6;color:var(--tinta-fraca);
             border-left:2px solid var(--linha-forte);padding-left:.9rem}
.disco__nota .lig{color:var(--cobalto)}
.fichaD__ligs{margin:0;font-size:.82rem;color:var(--tinta-fraca);
             display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
.fichaD__ligs > span{font-size:.62rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
                    letter-spacing:.16em;flex-basis:100%}
.fichaD__ligs a{display:inline-flex;align-items:center;gap:.4rem;min-height:2rem;color:var(--tinta);
               border-bottom:1px solid var(--linha-forte)}
.fichaD__ligs a:hover{color:var(--cobalto);border-color:var(--cobalto)}

/* os grupos — temas soltos, na voz de outras — sem capa */
.disco--grupo{grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "lista"}
.disco--grupo .disco__cab{align-self:start;gap:.45rem}
.disco--grupo .txt{margin:.2rem 0 0;font-size:.95rem;line-height:1.55;max-width:56ch}

/* na voz de outras: no telemóvel uma fila de cartões que desliza */
.vozes2{grid-area:lista;margin-top:1.2rem;gap:1rem;scroll-snap-type:x mandatory}
.vozc{width:10rem;scroll-snap-align:start;display:flex;flex-direction:column;gap:.3rem;min-width:0}
.vozc__cap{margin:0 0 .35rem}
.vozc__capa{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:1px solid var(--linha);
            border-radius:8px;background:var(--superficie);display:block}
.vozc__cap figcaption{margin-top:.4rem;font-size:.56rem;letter-spacing:.1em}
.vozc__t{margin:0;font-family:var(--display);font-weight:400;font-size:1.18rem;line-height:1.12;
         font-variation-settings:'opsz' 24;overflow-wrap:break-word}
.vozc__p{margin:0;font-size:.76rem;color:var(--tinta-fraca)}
.vozc__b{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:auto;padding-top:.5rem}   /* os botões alinham-se em baixo, mesmo com títulos de duas linhas */
.vozc__b .cap{min-height:2.75rem;padding:.5rem .65rem;gap:.35rem;letter-spacing:.1em}

/* sem JavaScript não há leitor nem folha: os botões que precisam dele saem */
.discos:not(.discos--vivo) :is(.disco__ouvir,.disco__som,.disco__ler,.temas__mais,.tema__i,.tema__v,.vozc__b){display:none}

/* tablet: a capa ganha uma coluna, e os grupos ainda vão empilhados */
@media (min-width:760px){
  .disco{column-gap:clamp(1.6rem,3vw,2.6rem);grid-template-columns:11rem minmax(0,1fr);
         grid-template-rows:auto auto auto 1fr;grid-template-areas:"capa cab" "capa sobre" "capa porta" "capa lista"}
  .disco__capa-w{display:block;grid-area:capa}
  .disco__capa-w .disco__capa{width:100%}
  .disco:not(.disco--grupo) .disco__cab .rot::before{display:block}
  .disco__cab{align-self:start}
  .disco__sobre{margin-top:.9rem}
  .disco--grupo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"cab" "lista"}
  .vozes2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem 2rem;overflow:visible}
  .vozc{width:auto;display:grid;grid-template-columns:7rem minmax(0,1fr);grid-template-rows:auto auto 1fr;
        column-gap:1rem;align-items:start}
  .vozc__cap{grid-row:1 / -1;margin:0}
  .vozc__b{margin-top:0;padding-top:.6rem;align-self:end}
}
/* computador: a capa, o cabeçalho com a descrição, e os temas ao lado. Nos
   grupos, o cabeçalho ocupa as duas primeiras colunas e os temas a terceira;
   os cartões das outras vozes vão por baixo, dois a dois, e a partir de
   1300 px quatro numa fila. */
@media (min-width:1100px){
  .disco{grid-template-columns:13.5rem minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto 1fr;
         grid-template-areas:"capa cab lista" "capa sobre lista" "capa porta lista"}
  .disco__lista{margin-top:0}
  .disco--grupo{grid-template-columns:13.5rem minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto;
                grid-template-areas:"cab cab lista"}
  .disco--vozes{grid-template-areas:"cab cab ." "lista lista lista"}
}
/* os quatro cartões numa fila só quando cabem os dois botões ao lado da capa */
@media (min-width:1300px){.disco--vozes .vozes2{grid-template-columns:repeat(4,minmax(0,1fr))}}

.disco__ligs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.3rem}

/* ── um disco com página própria ─────────────────────────────
   A capa e o título levam à página do disco, e um botão grande, «Entrar no
   disco», diz o que lá está. A capa é uma ligação só para o rato e o dedo,
   por cima da imagem (no telemóvel ocupa a mesma área da grelha; do tablet
   para cima vai por cima da capa, sem tapar o crédito). */
.disco__t a{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
            text-underline-offset:.14em;transition:text-decoration-color .3s var(--curva),color .3s var(--curva)}
.disco__t a:hover{text-decoration-color:currentColor}
.disco__t a:focus-visible{outline-offset:3px}
.disco__capa-a{grid-area:capa;align-self:start;aspect-ratio:1;z-index:1}
.disco__capa{transition:translate .5s var(--curva),box-shadow .5s var(--curva)}
.disco__capa-w:has(.disco__capa-a:hover) .disco__capa{translate:0 -3px;box-shadow:0 30px 50px -26px rgba(8,32,58,.6)}
@media (min-width:760px){
  .disco__capa-w{position:relative}
  .disco__capa-a{position:absolute;top:0;left:0;width:100%}
}
.disco__porta{grid-area:porta;align-self:start;width:100%;max-width:31rem;margin-top:1.25rem;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.95rem;
  padding:1rem 1.1rem 1rem 1.05rem;border-radius:4px;text-decoration:none;
  background:var(--cor-bt,var(--cobalto));color:var(--cor-bt-tinta,var(--papel));
  box-shadow:0 18px 34px -24px rgba(35,31,32,.75);transition:background-color .3s var(--curva)}
.disco__porta:hover{background:var(--cor-bt-sobre,var(--tinta))}
.disco__porta:focus-visible{outline:2px solid var(--cobalto);outline-offset:3px}
.disco__porta .ic-disco{width:30px;height:30px;color:var(--cor-acento,currentColor)}
.disco__porta-q{min-width:0}
.disco__porta b{display:block;font-family:var(--texto,var(--display));font-weight:600;font-size:1.3rem;line-height:1.2}
.disco__porta small{display:block;margin-top:.25rem;font-size:.84rem;line-height:1.45;color:var(--cor-bt-fraca,currentColor);text-wrap:balance}
.disco__porta-s{font-size:1.3rem;line-height:1;transition:translate .3s var(--curva)}
.disco__porta:hover .disco__porta-s{translate:.25rem 0}
@media (min-width:1100px){.disco__porta{margin-top:1.6rem}}

/* ── o som do próprio site ─────────────────────────────────
   O «▶ Ouvir» de um disco que toca no site (js/paginas.js, «o som do próprio
   site»), no desenho do «Ouvir» de cada canção na página do disco: uma
   cápsula com o ▶ num círculo cheio. O ▶ de cada tema é esse mesmo círculo;
   o tema que toca fica aceso, com barras no lugar do número. O círculo tem as
   suas cores (--cor-som, --cor-som-sobre, --cor-som-tinta), que são as do
   botão principal a não ser que o disco diga outras: um botão só com o ícone
   precisa de se ver no fundo (3:1), e não só de ter o ▶ legível. */
.disco__som{display:inline-flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.3rem 1.15rem .3rem .3rem;
  border:1px solid var(--linha-forte);border-radius:999px;font-family:var(--corpo);font-weight:500;font-size:.92rem;
  letter-spacing:.01em;line-height:1.2;color:var(--cobalto);
  transition:border-color .3s var(--curva),background-color .3s var(--curva)}
.disco__som:hover{border-color:var(--cobalto);background:color-mix(in srgb,var(--cobalto) 8%,transparent)}
.disco__som-i{flex:none;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  background:var(--cor-som,var(--cor-bt,var(--cobalto)));color:var(--cor-som-tinta,var(--cor-bt-tinta,var(--papel)))}
.disco__som-i svg{width:.88rem;height:.88rem}
.disco__som .ic-play{translate:.06rem 0}
:is(.disco__som,.tema__i--s) .ic-pausa,:is(.disco__som,.tema__i--s).a-tocar .ic-play{display:none}
:is(.disco__som,.tema__i--s).a-tocar .ic-pausa{display:block}
.tema__i--s > span{--s:var(--cor-som,var(--cor-bt,var(--cobalto)));background:var(--s);border-color:var(--s);
  color:var(--cor-som-tinta,var(--cor-bt-tinta,var(--papel)))}
button.tema__i--s:hover > span{--s:var(--cor-som-sobre,var(--cor-bt-sobre,var(--tinta)));color:var(--cor-som-tinta,var(--cor-bt-tinta,var(--papel)))}
.tema__i .ic-pausa{width:.74rem;height:.74rem}
.tema__i .ic-video{width:1.02rem;height:1.02rem}
.tema__n{position:relative}
.tema__eq{display:none;position:absolute;left:.05rem;bottom:.12em;height:.72rem;align-items:flex-end;gap:2px}
.tema__eq i{display:block;width:3px;height:100%;border-radius:1px;background:var(--cobalto);transform-origin:bottom;
  animation:tema-eq .9s ease-in-out infinite}
.tema__eq i:nth-child(2){animation-delay:-.3s}
.tema__eq i:nth-child(3){animation-delay:-.6s}
@keyframes tema-eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.tema--agora .tema__t{color:var(--cobalto)}
.tema--toca .tema__n{color:transparent}
.tema--toca .tema__eq{display:inline-flex}
@media (prefers-reduced-motion:reduce){
  .tema__eq i{animation:none}
  .tema__eq i:nth-child(1){transform:scaleY(.55)}
  .tema__eq i:nth-child(3){transform:scaleY(.75)}
}
/* três botões por tema (o som, o vídeo e a letra): o título fica com o resto */
.temas--som .tema__d{min-width:2.3rem;margin-right:.1rem}
/* enquanto o leitor das plataformas estiver aberto, o mini-leitor do site
   (que está calado: abrir um cala o outro) não lhe fica por baixo */
html.com-ouvir .lt-mini{display:none!important}

/* ── a cor de um disco (novembro de 2026) ───────────────────
   Um disco com página própria traz para a discografia a cor dessa página.
   Nos dados, `"cor": "<nome>"` põe data-cor="<nome>" no <article>; aqui, a
   regra com esse nome redefine, só dentro do bloco, as cores da casa —
   --papel (o fundo), --superficie, --tinta, --tinta-fraca, --cobalto (títulos,
   acentos e ligações), --linha e --linha-forte —, as letras (--display, a do
   título; --corpo, a dos rótulos e botões; --texto, a do texto corrido), as
   do botão principal (--cor-bt, --cor-bt-sobre, --cor-bt-tinta,
   --cor-bt-fraca), as dos círculos do som, se forem outras (--cor-som…), e o
   acento (--cor-acento). Tudo o que o bloco desenha já
   lê essas variáveis: um disco novo precisa só de uma regra com as dele,
   para o tema claro e para o escuro, e da conta do contraste. O fundo vai à
   largura do ecrã, como a faixa do disco na página inicial, sem tirar o que
   está lá dentro das colunas dos outros discos. */
.disco[data-cor]{isolation:isolate;border-top:0;color:var(--tinta);font-family:var(--corpo);
                 padding-block:clamp(1.9rem,4.5vw,3.4rem)}
/* o fundo sai para os lados com uma sombra, e não com uma caixa mais larga:
   a sombra não conta para a largura da página, e nenhum telemóvel ganha
   rolagem para o lado */
.disco[data-cor]::before{content:"";position:absolute;z-index:-1;inset:0;background:var(--papel);
                         box-shadow:0 0 0 100vmax var(--papel);clip-path:inset(0 -100vmax)}
.disco[data-cor] + .disco{border-top-color:transparent}
.disco[data-cor] :is(.disco__sobre .txt,.disco__ler,.tema__t,.fichaD__l dd,.disco__nota){font-family:var(--texto,var(--corpo))}
.disco[data-cor] .disco__t{color:var(--cobalto)}

/* O entretanto, com as cores e as letras da página dele (css/entretanto.css):
   a névoa, o bordô e o laranja; a Entretanto Display e a Source Serif 4, que
   vêm do css/cd.css. No claro, na névoa: o bordô a 6,6:1 (e o círculo do som
   também), o texto a 10,9:1, o cinzento a 5,2:1; o botão bordô com o branco a
   9,8:1 e o rosa a 7,3:1. No escuro, os cinzentos-verdes da página do disco e
   o rosa dos títulos dela (7,9:1), o cinzento a 7:1, o bordô mais claro no
   botão grande (7,4:1 com o branco) e o rosa nos círculos do som, com o ▶
   escuro — o bordô ficava a 2,2:1 do fundo. */
.disco[data-cor="entretanto"]{
  --papel:#C9D6D4;--superficie:#DCE5E3;--tinta:#231F20;--tinta-fraca:#4A5553;--cobalto:#752A31;
  --linha:rgba(117,42,49,.2);--linha-forte:rgba(117,42,49,.42);--sombra:0 24px 50px -28px rgba(35,31,32,.55);
  --cor-bt:#752A31;--cor-bt-sobre:#561E24;--cor-bt-tinta:#fff;--cor-bt-fraca:#F1D8DA;--cor-acento:#F3A23A;
  --display:'Entretanto Display','Bodoni Moda',Georgia,serif;
  --corpo:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Source Serif 4',Georgia,serif}
html[data-tema="escuro"] .disco[data-cor="entretanto"]{
  --papel:#1C2324;--superficie:#243031;--tinta:#E6ECEA;--tinta-fraca:#A3AEAB;--cobalto:#E4A6AC;
  --linha:rgba(214,170,174,.18);--linha-forte:rgba(214,170,174,.4);--sombra:0 24px 50px -28px rgba(0,0,0,.8);
  --cor-bt:#8E3A42;--cor-bt-sobre:#A3454E;--cor-bt-fraca:#F6DDE0;
  --cor-som:#E4A6AC;--cor-som-sobre:#F2C9CD;--cor-som-tinta:#1C2324}
html[data-tema="escuro"] .disco[data-cor="entretanto"] .disco__porta{box-shadow:none}
/* o tailandês cai para as fontes do sistema depois das do disco, como na
   página dele; o japonês parte a linha da porta por frases, e não a meio de
   uma palavra */
.disco[data-cor="entretanto"]:lang(th){
  --corpo:'Inter','Thonburi','Noto Sans Thai','Leelawadee UI','Tahoma',system-ui,-apple-system,'Segoe UI',sans-serif;
  --texto:'Source Serif 4','Noto Serif Thai','Thonburi','Leelawadee UI','Tahoma',Georgia,serif}
:lang(ja) .disco__porta small{word-break:auto-phrase}
/* a letra do disco é estreita: o título precisa de mais corpo para pesar o
   mesmo que a Bodoni dos outros */
.disco[data-cor="entretanto"] .disco__t{font-size:clamp(2.55rem,4.3vw,3.7rem);line-height:.92;letter-spacing:.005em}
.disco[data-cor="entretanto"] .tema__t{font-size:1.04rem}

/* abas: as plataformas no leitor da discografia e os filtros dos vídeos */
.abas{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.aba{display:inline-flex;align-items:center;gap:.5rem;
     font-family:inherit;font-size:.68rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
     letter-spacing:.13em;color:var(--tinta-fraca);background:none;border:1px solid var(--linha);
     border-radius:999px;padding:.5rem 1rem;cursor:pointer;
     transition:color .3s var(--curva),border-color .3s var(--curva),background-color .3s var(--curva)}
.aba:hover{color:var(--tinta);border-color:var(--linha-forte)}
.aba--on{background:var(--cobalto);border-color:var(--cobalto);color:var(--papel)}
.aba:focus-visible{outline:2px solid var(--cobalto);outline-offset:2px}
.ic--aba{width:1rem;height:1rem;flex:none}
.ic--min{width:.85rem;height:.85rem;flex:none}

.alin{list-style:none;margin:1rem 0 0;padding:0;border-top:1px solid var(--linha)}
.alin__f{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:start;gap:1rem;
         padding:.8rem .2rem;border-bottom:1px solid var(--linha)}
.alin__n{font-size:.68rem;font-weight:700;font-stretch:72%;letter-spacing:.14em;color:var(--tinta-fraca);
          padding-top:.22rem}
/* título e autoria em coluna: quem escreveu a letra e quem fez a música fica
   sempre à vista, e não escondido dentro do painel da letra */
.alin__q{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.alin__t{font-size:.98rem;min-width:0}
.alin__a{font-size:.72rem;line-height:1.45;color:var(--tinta-fraca)}
.alin__a--falta{font-style:italic;opacity:.72}
.alin__v{color:var(--cobalto);font-size:.7rem;text-decoration:none;
         width:24px;height:24px;border-radius:50%;border:1px solid var(--linha-forte);
         display:grid;place-items:center;transition:background-color .3s var(--curva),color .3s var(--curva)}
.alin__v:hover{background:var(--cobalto);color:var(--papel)}
.alin__d{font-size:.78rem;color:var(--tinta-fraca);font-variant-numeric:tabular-nums;min-width:2.6rem;
          text-align:right;padding-top:.12rem}

/* ── faixa: botões de vídeo, letra e partitura ──────────── */
.alin__f{grid-template-columns:auto minmax(0,1fr) auto auto}
.alin--larga{margin-top:1.4rem}
.alin__b{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:flex-end}
.fx{display:inline-flex;align-items:center;gap:.35rem;font-family:inherit;
    font-size:.62rem;font-weight:600;font-stretch:78%;text-transform:uppercase;letter-spacing:.12em;
    color:var(--tinta-fraca);background:none;border:1px solid var(--linha);border-radius:999px;
    padding:.35rem .7rem;cursor:pointer;white-space:nowrap;
    transition:color .3s var(--curva),border-color .3s var(--curva)}
.fx:hover{color:var(--cobalto);border-color:var(--cobalto)}
.ic--fx{width:.8rem;height:.8rem;flex:none}
.video-c__x{margin:.5rem 0 0;display:flex;gap:.35rem;flex-wrap:wrap}

/* painel de texto: letra ou partitura */
.lente--folha{align-items:start;overflow-y:auto}
.folha{width:min(680px,100%);background:var(--papel);border-radius:16px;
       padding:clamp(1.8rem,5vw,3.2rem);margin:auto;box-shadow:var(--sombra);
       transform:translateY(12px);transition:transform .35s var(--curva)}
.lente--dentro .folha{transform:translateY(0)}
.folha .d--m{margin:.5rem 0 0}
.folha__a{margin:.6rem 0 0;font-size:.82rem;color:var(--tinta-fraca)}
.folha__t{margin-top:clamp(1.4rem,3vw,2.2rem);font-family:var(--display);
          font-size:clamp(1.05rem,1.7vw,1.28rem);line-height:1.7;
          font-variation-settings:'opsz' 18}
.folha__t p{margin:0 0 1.5rem}
.folha__t p:last-child{margin-bottom:0}
/* o refrão (versos que começam por «> » nos dados) sai em itálico, como no livreto do CD */
.folha__t .refrao{font-style:italic}
.folha__p{margin-top:clamp(1.4rem,3vw,2.2rem)}
.folha__p img{width:100%;height:auto;border:1px solid var(--linha);border-radius:10px;
              background:var(--superficie)}
.folha__d{margin:.9rem 0 0;font-size:.7rem;font-weight:600;font-stretch:78%;
          text-transform:uppercase;letter-spacing:.13em}
.folha__d a{color:var(--cobalto);border-bottom:1px solid currentColor}

/* ── vídeos ─────────────────────────────────────────────── */
.videos{display:flex;flex-direction:column;gap:0}
.videos__l{display:flex;flex-direction:column;gap:0}

/* filtros: a mesma pastilha das abas de plataforma, para a casa toda usar o
   mesmo botão */
.vfiltros{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.vfiltros__n{margin-left:.4rem;font-variant-numeric:tabular-nums}
.videos__nota{margin:0 0 clamp(1.8rem,4vw,2.8rem);max-width:68ch}

/* Um ano por bloco, recolhível. O ano em corpo grande faz de marcador — é o
   mesmo gesto do número do ano na discografia, e as duas páginas leem-se da
   mesma maneira. */
.vano{position:relative}
.vano__s{list-style:none;cursor:pointer;display:grid;
         grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
         gap:.4rem 1rem;padding:.2rem 0}
.vano__s::-webkit-details-marker{display:none}
.vano__a{font-family:var(--display);font-size:clamp(2rem,5vw,3.1rem);line-height:.9;
         letter-spacing:-.02em;color:var(--tinta)}
.vano__q{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.vano__n{font-size:.68rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
         letter-spacing:.16em;color:var(--tinta-fraca)}
.vano__d{font-size:.78rem;color:var(--cobalto);line-height:1.4}
.vano__v{width:.6rem;height:.6rem;border-right:1.6px solid var(--tinta-fraca);
         border-bottom:1.6px solid var(--tinta-fraca);rotate:45deg;translate:0 -3px;
         transition:rotate .3s var(--curva),translate .3s var(--curva)}
.vano[open] > .vano__s .vano__v{rotate:-135deg;translate:0 2px}
.vano__s:focus-visible{outline:2px solid var(--cobalto);outline-offset:4px}
.vano[open] > .vano__s{margin-bottom:clamp(1.4rem,3vw,2.2rem)}

/* mesma separação que na discografia: traço a toda a largura */
.vgrupo{position:relative;padding-block:clamp(2.6rem,6vw,4.6rem);
        border-top:1px solid var(--linha-forte)}
.vgrupo:first-child{border-top:0;padding-top:0}
.vgrupo[hidden]{display:none}
.vgrupo__cab{margin-bottom:clamp(1.4rem,3vw,2.2rem);max-width:60ch}
.vgrupo__cab .legenda{margin-top:.5rem}
.videos__g{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
/* uma classe com display vence o [hidden] do agente do utilizador */
.videos__g[hidden]{display:none}
.videos__g + .videos__g{margin-top:clamp(1.5rem,3vw,2.5rem)}
.vgrupo__mais{margin-top:clamp(1.6rem,3vw,2.4rem);display:flex;justify-content:center}
@media (min-width:640px){.videos__g{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.videos__g{grid-template-columns:repeat(3,1fr)}}
.video-c{scroll-margin-top:7rem;min-width:0}
.video-c__t{margin:.9rem 0 .2rem;font-size:1.05rem;font-weight:600}
.video-c__fado{font-size:.8rem;font-weight:400;color:var(--tinta-fraca);white-space:nowrap}
.video-c__l{margin:0;font-size:.72rem;font-weight:600;font-stretch:76%;text-transform:uppercase;
            letter-spacing:.16em;color:var(--tinta-fraca)}
/* a que disco pertence o tema — deixou de ser o capítulo e passou a ser isto */
.video-c__d{margin:.35rem 0 0;font-size:.72rem;font-weight:600;font-stretch:78%;
            text-transform:uppercase;letter-spacing:.12em}
.video-c__d a{color:var(--cobalto);border-bottom:1px solid transparent;
              transition:border-color .3s var(--curva)}
.video-c__d a:hover{border-bottom-color:var(--cobalto)}
.video-c__a{margin:.45rem 0 0;font-size:.82rem;color:var(--tinta-fraca);line-height:1.5}
.video-c__o{margin:.25rem 0 0;font-size:.78rem;color:var(--tinta-fraca);line-height:1.5;font-style:italic}
.video-c__c{margin:.35rem 0 0;font-size:.68rem;font-weight:600;font-stretch:76%;text-transform:uppercase;
            letter-spacing:.14em;color:var(--tinta-fraca)}

/* leitor sobreposto dos vídeos */
.lente{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
       background:color-mix(in srgb,var(--tinta) 88%,transparent);opacity:0;
       transition:opacity .3s var(--curva);backdrop-filter:blur(6px)}
.lente--dentro{opacity:1}
/* a dos vídeos é um <dialog> (js/lente.js): a página toda, sem a moldura, as
   margens e o fundo que o browser lhe dá, e o escurecer é o dela */
dialog.lente{width:auto;height:auto;max-width:none;max-height:none;margin:0;border:0;color:inherit}
dialog.lente::backdrop{background:transparent}
.lente__q{width:min(1100px,100%);transform:scale(.97);transition:transform .35s var(--curva)}
.lente--dentro .lente__q{transform:scale(1)}
.lente__v{position:relative;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;
          box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.lente__v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lente__t{margin:.9rem 0 0;color:var(--papel);font-size:.9rem;text-align:center;opacity:.85}
html[data-tema="escuro"] .lente__t{color:var(--tinta)}
.lente__f{position:absolute;top:clamp(.6rem,2vw,1.4rem);right:clamp(.6rem,2vw,1.4rem);
          width:2.8rem;height:2.8rem;border-radius:50%;border:1px solid rgba(255,255,255,.35);
          background:rgba(255,255,255,.08);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
          display:grid;place-items:center;transition:background-color .3s var(--curva)}
.lente__f:hover{background:rgba(255,255,255,.2)}

/* ── temas escritos para outras vozes ───────────────────── */
.vozes{display:grid;gap:clamp(1.6rem,3vw,2.2rem);margin-top:clamp(1.4rem,3vw,2.4rem);
       grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.voz{display:flex;flex-direction:column;gap:1rem;border:1px solid var(--linha);border-radius:16px;
     padding:clamp(1.1rem,2.4vw,1.5rem);background:var(--papel);min-width:0}
.sec--fundo .voz{background:var(--papel)}
.voz__cap{margin:0}
.voz__capa{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border:1px solid var(--linha);
           border-radius:10px;background:var(--superficie);display:block}
.voz__cap figcaption{margin-top:.5rem;font-size:.66rem;font-weight:600;font-stretch:76%;
                     text-transform:uppercase;letter-spacing:.14em;color:var(--tinta-fraca)}
.voz__q{display:flex;flex-direction:column;gap:.5rem;min-width:0}
.voz__t{font-family:var(--display);font-size:clamp(1.4rem,2.2vw,1.85rem);line-height:1.05;margin:.1rem 0 0;
        font-variation-settings:'opsz' 26;overflow-wrap:break-word}
.voz__f{margin:0;font-size:.82rem;color:var(--tinta-fraca);font-style:italic}
.voz__d{margin:0;font-size:.88rem;color:var(--tinta-fraca)}
.voz__leitor{width:100%;height:152px;border:0;border-radius:12px;margin-top:.5rem;background:var(--superficie)}
.voz__leitor--fechado{display:flex;align-items:center;justify-content:center}
/* botão com a mesma tipografia dos .cap que são <a> — o <button> não a herda */
.voz__bt{cursor:pointer;font-family:inherit;background:none;appearance:none}
.voz__v:not(:empty){margin-top:.8rem}
.voz__vf{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;display:block}
.voz__capa + .credito{margin:.4rem 0 0}

/* lista «também escreveu», na página das letras */
.pv__q{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pv__a{font-size:.78rem;color:var(--tinta-fraca);line-height:1.45}

/* ── páginas legais ─────────────────────────────────────── */
.legal{max-width:64ch}
.legal h2{font-family:var(--display);font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.1;
          margin:clamp(2.2rem,4vw,3rem) 0 .8rem;font-variation-settings:'opsz' 24}
.legal h2:first-child{margin-top:0}
.legal p{margin:0 0 1rem;font-size:.95rem;line-height:1.75;color:var(--tinta-fraca)}
.legal ul{margin:0 0 1rem;padding-left:1.15rem}
.legal li{font-size:.95rem;line-height:1.75;color:var(--tinta-fraca);margin-bottom:.5rem}
.legal b{color:var(--tinta);font-weight:600}
.legal a{color:var(--cobalto);text-decoration:none;border-bottom:1px solid currentColor}
.legal__data{margin-top:2.5rem;font-size:.8rem;font-style:italic}
.legal .resumo{margin:0 0 2.2rem;padding:.2rem 0 .2rem 1.2rem;border-left:3px solid var(--cobalto)}
.legal .resumo h3{font-family:var(--corpo);font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;margin:0 0 .7rem;color:var(--tinta)}
.legal .resumo ul{margin:0;padding-left:1.1rem}
.legal .resumo li{font-size:.95rem;line-height:1.6;color:var(--tinta);margin-bottom:.45rem}
/* o disco em leitura fácil: letra maior, mais espaço, uma ideia por linha */
.facil{max-width:40rem}
.facil h2{font-family:var(--display);font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.15;margin:2.6rem 0 1rem}
.facil h2:first-child{margin-top:0}
.facil p,.facil li{font-size:1.15rem;line-height:1.7;color:var(--tinta)}
.facil p{margin:0 0 .55rem}
.facil ol,.facil ul{margin:0 0 .8rem;padding-left:1.4rem}
.facil li{margin-bottom:.7rem}
.facil a{color:var(--cobalto);text-decoration:underline;text-underline-offset:.15em}

/* aviso de cookies */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:clamp(.8rem,2vw,1.4rem);
    transform:translateY(120%);transition:transform .45s var(--curva)}
.ck--dentro{transform:translateY(0)}
.ck__in{max-width:var(--env,1400px);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;
        gap:1rem clamp(1rem,3vw,2.5rem);padding:clamp(1rem,2.4vw,1.5rem) clamp(1.1rem,3vw,2rem);
        background:var(--papel);border:1px solid var(--linha-forte);border-radius:16px;
        box-shadow:var(--sombra)}
.ck__t{margin:0;flex:1 1 26ch;font-size:.86rem;line-height:1.6;color:var(--tinta-fraca)}
.ck__t a{color:var(--cobalto);text-decoration:underline;text-underline-offset:.15em}
.ck__b{display:flex;flex-wrap:wrap;gap:.6rem;flex:none;max-width:100%}
/* «Accepter la mesure d'audience» não cabe numa linha a 320 px: os botões do
   banner podem partir o texto, em vez de saírem do ecrã. */
.ck__b .cap{white-space:normal;text-align:center;max-width:100%}
/* Os dois botões do banner com o mesmo peso. Havia aqui um `background:none`
   e uma cor fraca no de recusar, que anulavam o cap--cheio e faziam do «não»
   a opção mais difícil de ver — que é exatamente o que não pode ser. */
.ck__r{font-family:inherit;cursor:pointer}

/* As três ações de uma data — bilhetes, ver mais, calendário — apareciam em
   três pesos diferentes na mesma linha, e no telemóvel empilhavam em duas
   filas. Só os bilhetes são a ação principal; as outras duas são ligações. */
.data__a .cap--fino{border-color:transparent;padding-inline:.4rem}
.data__a .cap--fino:hover{border-color:var(--linha-forte)}

/* rodapé: ligações legais */
.pe__legal{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;align-items:center}
.pe__legal a,.pe__ck{font:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;
                     cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;
                     transition:border-color .3s var(--curva),color .3s var(--curva)}
.pe__legal a:hover,.pe__ck:hover{color:var(--cobalto);border-bottom-color:var(--cobalto)}
.pe__l--ic a{display:inline-flex;align-items:center;gap:.5rem}

/* atalho da página inicial para as outras */
.portas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.porta{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem 1.5rem;border:1px solid var(--linha);
       border-radius:16px;background:var(--papel);transition:transform .4s var(--curva),border-color .4s var(--curva)}
.sec--fundo .porta{background:var(--papel)}
.porta:hover{transform:translateY(-4px);border-color:var(--cobalto)}
.porta__t{font-family:var(--display);font-size:1.5rem;line-height:1.05;font-variation-settings:'opsz' 24}
.porta__d{font-size:.85rem;color:var(--tinta-fraca)}
.porta__s{margin-top:.4rem;color:var(--cobalto);font-size:.9rem}

/* ── percurso ───────────────────────────────────────────── */
.percurso{list-style:none;margin:1.2rem 0 0;padding:0;border-top:1px solid var(--linha)}
.passo{display:grid;grid-template-columns:4.2rem minmax(0,1fr);gap:.4rem 1.4rem;align-items:baseline;
       padding:1rem 0;border-bottom:1px solid var(--linha)}
.passo__a{font-family:var(--display);font-size:1.35rem;color:var(--cobalto);
          font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 18}
.passo__t{font-size:.92rem;line-height:1.65;color:var(--tinta-fraca);max-width:68ch}
@media (max-width:520px){.passo{grid-template-columns:1fr;gap:.2rem}}

/* ── fotografias reais ──────────────────────────────────── */
.cheia__img{width:100%;height:auto;display:block}
@media (max-width:640px){.cheia__img{aspect-ratio:4/5;object-fit:cover}}
.sobre__f-cx{margin:0}
.sobre__img{width:100%;height:auto;border:1px solid var(--linha);display:block}
.sobre__cred{margin-top:.7rem;font-size:.64rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
             letter-spacing:.14em;color:var(--tinta-fraca)}
/* As fotografias de imprensa: três em linha. Cada uma com a sua proporção
   deixava um buraco por baixo do palco, que é largo, entre dois retratos
   altos. Em linha levam todas a do retrato oficial (4:5), que assim não perde
   nada; o «No festival» (3:4) perde uma tira em cima e em baixo, e o recorte
   fica alto, para não lhe cortar a cara; o palco mostra o meio (e o `sizes`
   dele no imprensa.html pede a largura que o recorte precisa, não a da
   coluna). O ficheiro de cada uma, inteiro, é o do kit. No telemóvel, uma por
   linha, ficam como são. */
.g3{display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:start}
@media (min-width:700px){
  .g3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g3 .foto img{aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
}
.foto{margin:0;display:flex;flex-direction:column;gap:.7rem;min-width:0}
.foto img{width:100%;height:auto;display:block;border:1px solid var(--linha)}

/* ── crédito de imagem ──────────────────────────────────── */
.credito,figcaption,.sobre__cred,.mais__c{
  margin:.6rem 0 0;font-size:.62rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
  letter-spacing:.13em;color:var(--tinta-fraca);line-height:1.5}
.cart .credito,.video-c .credito{margin-top:.45rem}

/* ── cronologia ─────────────────────────────────────────── */
/* Duas formas do mesmo conteúdo. Acima dos 1040px é uma linha vertical colada
   à esquerda, que acompanha a leitura. Abaixo é um painel recolhido: a fila
   horizontal que aqui esteve cortava-se na margem e não se via que rolava. */
.comLinha{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.4rem,3vw,3.2rem)}
.comLinha__q{min-width:0}
.linha{min-width:0}
.linha__l{list-style:none;margin:0;padding:0}
.linha__larga{display:none}
.linha__a{font-weight:700;color:var(--cobalto)}

@media (min-width:1040px){
  .comLinha{grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:start}
  .linha{position:sticky;top:calc(var(--nav-alt,5.2rem) + 1.4rem)}
  .linha__larga{display:block}
  .linha__curta{display:none}

  .linha__rot{margin:0 0 1rem}
  .linha__larga .linha__l{border-left:1px solid var(--linha);padding-left:1.15rem}
  .linha__i{position:relative}
  .linha__i a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .7rem;
              padding:.55rem 0;text-decoration:none;color:var(--tinta-fraca);
              transition:color .3s var(--curva)}
  /* marca cheia num lançamento, vazia num tema solto */
  .linha__i::before{content:"";position:absolute;left:-1.15rem;top:1.05rem;
                    width:7px;height:7px;border-radius:99px;translate:-50% 0;
                    background:var(--papel);border:1px solid var(--linha-forte);
                    transition:background .3s var(--curva),border-color .3s var(--curva),
                               scale .3s var(--curva)}
  .linha__i--marco::before{background:var(--linha-forte)}
  .linha__i:hover a,.linha__i--aqui a{color:var(--tinta)}
  .linha__i--aqui::before{background:var(--cobalto);border-color:var(--cobalto);scale:1.35}
  .linha__a{grid-row:span 2;font-size:.7rem;letter-spacing:.04em;padding-top:.15rem}
  .linha__q{display:flex;flex-direction:column;gap:.1rem;min-width:0}
  .linha__t{font-size:.85rem;line-height:1.35}
  .linha__i--marco .linha__t{font-weight:600}
  .linha__n{font-size:.64rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
            letter-spacing:.09em;color:var(--tinta-fraca);line-height:1.35}
}

/* painel recolhido, no telemóvel e no tablet */
.linha__curta{border:1px solid var(--linha);border-radius:12px;background:var(--papel)}
.sec--fundo .linha__curta{background:var(--papel)}
.linha__curta > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;
                        padding:.85rem 1rem;font-size:.68rem;font-weight:700;font-stretch:72%;
                        text-transform:uppercase;letter-spacing:.16em;color:var(--tinta)}
.linha__curta > summary::-webkit-details-marker{display:none}
.linha__s-n{margin-left:auto;font-size:.72rem;font-weight:600;color:var(--tinta-fraca);
            letter-spacing:normal}
.linha__s-v{width:.55rem;height:.55rem;border-right:1.5px solid var(--tinta-fraca);
            border-bottom:1.5px solid var(--tinta-fraca);rotate:45deg;translate:0 -2px;
            transition:rotate .3s var(--curva)}
.linha__curta[open] > summary .linha__s-v{rotate:-135deg;translate:0 2px}
.linha__curta[open] > summary{border-bottom:1px solid var(--linha)}
.linha__curta .linha__l{padding:.4rem 0 .6rem}
.linha__curta .linha__i a{display:grid;grid-template-columns:3.2rem minmax(0,1fr);gap:.15rem .6rem;
                          padding:.6rem 1rem;text-decoration:none;color:var(--tinta)}
.linha__curta .linha__i--aqui a{background:color-mix(in srgb,var(--cobalto) 8%,transparent)}
.linha__curta .linha__a{grid-row:span 2;font-size:.74rem}
.linha__curta .linha__t{font-size:.88rem;line-height:1.3}
.linha__curta .linha__i--marco .linha__t{font-weight:600}
.linha__curta .linha__n{font-size:.64rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
                        letter-spacing:.09em;color:var(--tinta-fraca)}
/* na discografia a linha está no fim da página, recolhida, em todas as
   larguras (a lateral, com a página curta, já não acompanhava nada); aberta,
   as entradas leem-se em colunas */
.linha--fim{position:static;margin-top:clamp(1.4rem,3vw,2.2rem);scroll-margin-top:6rem}
.linha--fim .linha__curta{display:block}
/* as marcas da linha lateral (o ::before do ecrã largo) não são deste painel */
.linha--fim .linha__i::before{content:none}
.linha--fim .linha__curta > summary{min-height:2.9rem}
@media (min-width:760px){
  .linha--fim .linha__curta .linha__l{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
}

/* de onde saiu a letra: no sítio de uma artista, uma letra sem proveniência
   não vale muito mais do que letra nenhuma */
.folha__fonte{margin:1.6rem 0 0;padding-top:1rem;border-top:1px solid var(--linha);
              font-size:.66rem;font-weight:600;font-stretch:78%;text-transform:uppercase;
              letter-spacing:.12em;color:var(--tinta-fraca)}

/* ── painel de uma faixa: vídeo, letra, ou os dois ──────── */
/* Um só painel para os três casos. Com vídeo e letra ao mesmo tempo, ficam
   lado a lado no ecrã largo e um sobre o outro no estreito.
   A letra só rola dentro da própria coluna QUANDO É COLUNA, do 900 para cima,
   que é onde faz sentido: assim o vídeo não sai de vista. Empilhada, no
   telemóvel, ela flui e é o painel que rola — um só. Antes rolava nos dois
   sítios: a letra ficava numa caixa de 500 px com 704 de texto, cortada a
   meio de um verso, e o painel à volta nem se mexia. */
.lente--faixa .fx__q{width:min(1100px,100%);max-height:calc(100dvh - clamp(2rem,8vw,6rem));
                     display:flex;flex-direction:column;gap:clamp(.9rem,2vw,1.4rem);
                     background:var(--papel);border-radius:16px;
                     padding:clamp(1.4rem,3.5vw,2.4rem);overflow:auto;
                     transform:scale(.97);transition:transform .35s var(--curva)}
.lente--dentro .fx__q{transform:scale(1)}
.fx__cab{display:flex;flex-direction:column;gap:.5rem}
.fx__cab .d{margin:0}
.fx__l{min-width:0}
/* o `flex:none` não é arrumação: sem ele o vídeo é o item que a coluna
   encolhe quando o texto não cabe, e perde o 16/9 — 125 px de altura onde
   pedia 195, com os controlos do YouTube em cima do título. */
.lente--faixa .lente__v{border-radius:12px;flex:none}

@media (min-width:900px){
  .lente--duplo .fx__q{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
                       grid-template-rows:auto minmax(0,1fr);align-items:start;
                       column-gap:clamp(1.4rem,3vw,2.4rem)}
  .lente--duplo .fx__cab{grid-column:1 / -1}
  .lente--duplo .fx__l{max-height:60dvh;overflow:auto;padding-right:.6rem}
  /* a letra ao lado do vídeo tem metade da largura: o corpo desce com ela */
  .lente--duplo .folha__t{margin-top:0;font-size:1.02rem;line-height:1.62}
  .lente--duplo .folha__t p{margin-bottom:1.1rem}
}
.lente--faixa .folha__t{margin-top:0}
/* o original por baixo da tradução: um filete e mais nada — vê-se que é
   português. Depois das regras de cima, que lhe tirariam a margem. */
.folha__t.folha__t--orig{margin-top:2.2rem;padding-top:2rem;border-top:1px solid var(--linha)}

/* ── o leitor da página, preso ao fundo ─────────────────── */
/* Um só, para a página toda (js/paginas.js, abrirOuvir): no telemóvel uma
   folha encostada ao fundo do ecrã, no computador um cartão no canto. Abaixo
   do menu (120) e acima do aviso de cookies (90); a folha da letra e a lente
   dos vídeos (220) vão por cima dele, e a música continua por baixo. */
.ouvirF{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--papel);
        border-top:1px solid var(--linha-forte);border-radius:16px 16px 0 0;
        box-shadow:0 -20px 50px -32px rgba(8,32,58,.6);
        padding:.6rem 1rem calc(.9rem + env(safe-area-inset-bottom));
        transform:translateY(100%);transition:transform .45s var(--curva)}
/* (com as duas classes, para ganhar ao transform do computador, mais abaixo) */
.ouvirF.ouvirF--dentro{transform:none}
.ouvirF:focus{outline:none}
.ouvirF__cab{display:flex;align-items:center;gap:.4rem .8rem}
.ouvirF__q{margin:0;flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.ouvirF__s{font-size:.62rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.18em;
           color:var(--tinta-fraca);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ouvirF__t{font-family:var(--display);font-size:1.3rem;line-height:1.15;font-variation-settings:'opsz' 24;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ouvirF__abrir{flex:none;display:inline-flex;align-items:center;gap:.35rem;min-height:2.75rem;
               font-size:.66rem;font-weight:600;font-stretch:78%;text-transform:uppercase;letter-spacing:.12em;
               color:var(--cobalto)}
.ouvirF__abrir:hover{text-decoration:underline;text-underline-offset:.25em}
.ouvirF__f{flex:none;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--linha-forte);
           display:grid;place-items:center;font-size:1.5rem;line-height:1;color:var(--tinta);
           transition:border-color .3s var(--curva),color .3s var(--curva)}
.ouvirF__f:hover{border-color:var(--cobalto);color:var(--cobalto)}
.ouvirF__abas{margin:.45rem 0 0}
.ouvirF__abas .aba{min-height:2.75rem;padding:.4rem .85rem}
.ouvirF__p{margin-top:.6rem}
.ouvirF__if{display:block;width:100%;height:13.5rem;border:0;border-radius:12px;background:var(--superficie)}
.ouvirF--faixa .ouvirF__if{height:9.5rem}
html.com-ouvir body{padding-bottom:var(--ouvirF-alt,0px)}
@media (min-width:760px){
  .ouvirF{left:auto;right:1.5rem;bottom:1.5rem;width:min(27rem,calc(100% - 3rem));
          border:1px solid var(--linha-forte);border-radius:16px;padding:.8rem 1.1rem 1.1rem;
          box-shadow:var(--sombra);transform:translateY(calc(100% + 2rem))}
  .ouvirF__if{height:18rem}
  html.com-ouvir body{padding-bottom:calc(var(--ouvirF-alt,0px) + 1.5rem)}
}

/* ── marcar uma videochamada ────────────────────────────
   O seletor é a primeira coisa a fazer nesta página, e não uma secção a
   seguir a outra: o cabeçalho encurta e a secção encosta-lhe. */
.topo-p--curto{padding-block:clamp(4.5rem,10vh,7rem) clamp(1.2rem,3vw,1.8rem);border-bottom:0}
.sec--colado{padding-top:0}
.mc-ver{margin-bottom:1.4rem}

/* ── vídeo em destaque, na página inicial ──────────────── */
.dest{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media (min-width:900px){.dest{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}}
.dest__v{min-width:0}
.dest__q{display:flex;flex-direction:column;gap:.9rem;min-width:0}
.dest__t{margin:0}
.dest__a{margin:0;font-size:.88rem}
.dest__b{display:flex;flex-wrap:wrap;gap:.7rem;margin:.4rem 0 0}
.dest__bt{cursor:pointer;font-family:inherit;appearance:none}
/* na inicial, o vídeo em destaque encostava ao leitor que vem a seguir */
#destaque:not(:empty) + .ouvir{margin-top:clamp(3rem,7vw,5.5rem)}

/* ── imprensa, na página inicial ───────────────────────── */
.dizem{display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
@media (min-width:860px){.dizem{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.dizem .pecas{margin-top:1rem}
.dizem .cit__t{font-size:clamp(1.15rem,2.1vw,1.6rem)}

/* ── botão de ouvir, no pé do hero ─────────────────────── */
.hero__ouvir{flex:none}

.saiu__l{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.saiu__l a{display:inline-flex;align-items:baseline;gap:.55rem;text-decoration:none;
           border:1px solid var(--linha);border-radius:99px;padding:.55rem 1rem;
           font-size:.72rem;font-weight:600;font-stretch:80%;color:var(--tinta);
           transition:border-color .3s var(--curva),color .3s var(--curva)}
.saiu__l a:hover{border-color:var(--cobalto);color:var(--cobalto)}
.saiu__a{font-size:.66rem;color:var(--tinta-fraca)}

/* ── resumo dos temas escritos para outras vozes (inicial) ── */
/* Mais compacto do que os cartões da discografia de propósito: aqui o que
   interessa é o número — três discos de outras pessoas — e não a ficha. */
.vozes-r{list-style:none;margin:clamp(1.6rem,3.5vw,2.6rem) 0 0;padding:0;
         display:grid;gap:clamp(1rem,2.2vw,1.6rem);max-width:52rem;
         grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.voz-r{min-width:0}
.voz-r__a{display:flex;flex-direction:column;gap:.9rem;text-decoration:none;color:inherit}
.voz-r__capa{width:100%;height:auto;aspect-ratio:1;object-fit:contain;display:block;
             border:1px solid var(--linha);border-radius:10px;background:var(--superficie);
             transition:border-color .35s var(--curva)}
.voz-r__a:hover .voz-r__capa{border-color:var(--cobalto)}
.voz-r__q{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.voz-r__quem{font-size:.7rem;font-weight:700;font-stretch:80%;letter-spacing:.1em;
             text-transform:uppercase;color:var(--tinta-fraca)}
.voz-r__tema{font-family:var(--display);font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.1;
             transition:color .35s var(--curva)}
.voz-r__a:hover .voz-r__tema{color:var(--cobalto)}
.voz-r__pe{font-size:.72rem;color:var(--tinta-fraca)}

/* ── subscrever ─────────────────────────────────────────── */
/* Duas caras do mesmo formulário: a completa, no fim da discografia, e a
   compacta do rodapé, que é só o campo debaixo de um rótulo. */
.sub{display:flex;flex-direction:column;gap:1.1rem;max-width:38rem}
.sub__q{display:flex;flex-direction:column;gap:.8rem}
.sub__t{margin:0}
.sub__x{max-width:46ch}
.sub__linha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem}
.campo--sub{flex:1 1 15rem;min-width:0}
.sub__bt{flex:none}
.sub__msg{margin:0;font-size:.82rem;color:var(--tinta-fraca);min-height:1.2em}
.sub__msg.erro{color:var(--sol)}
.sub__nota{margin:0;font-size:.74rem;color:var(--tinta-fraca)}
.sub__nota a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.sub__nota a:hover{color:var(--cobalto)}

/* a caixa do fim da discografia respira mais */
.sub-cx .sub{max-width:44rem}

/* no rodapé ocupa a largura toda, por baixo das quatro colunas */
.pe__sub{margin-top:clamp(2.2rem,4.5vw,3.4rem);padding-top:clamp(1.6rem,3vw,2.2rem);
         border-top:1px solid var(--linha)}
/* …a não ser que a página já peça o email: a discografia tem a sua caixa
   logo antes do rodapé, e a do disco o aviso da venda e o registo do
   exemplar. Era o mesmo pedido duas e três vezes seguidas. */
body:has(main :is([data-subscrever],#exemplar)) .pe__sub{display:none}
.pe__sub .sub{gap:.9rem;max-width:34rem}
.pe__sub .sub__nota{font-size:.7rem}

/* ── a página de um disco: o «entretanto» em CD ──────────
   martarosa.pt/entretanto, o endereço do código QR do livreto. Os blocos são
   os do resto do site — .alin, .factos, .foto, .form, .campo —, e
   aqui só o que lhes falta: a capa ao lado do título, as canções com o texto
   dela e a letra recolhida, quatro fotografias em vez de três, a ficha técnica
   em três colunas e o registo do exemplar. */
.disco-p__g{display:grid;gap:clamp(1.8rem,4vw,4rem);align-items:center}
@media (min-width:760px){.disco-p__g{grid-template-columns:minmax(0,.4fr) minmax(0,1fr)}}
.disco-p__f{margin:0;max-width:440px}
.disco-p__capa{width:100%;height:auto;aspect-ratio:1;border:1px solid var(--linha);
               box-shadow:var(--sombra);background:var(--superficie)}
.disco-p .d--l{margin:1rem 0 0}
.disco-p__ed{margin:1.1rem 0 0;font-size:.7rem;font-weight:700;font-stretch:72%;text-transform:uppercase;
             letter-spacing:.18em;color:var(--cobalto)}
.disco-p__q .txt{margin:1.1rem 0 0}
.disco-p__q .topo-p__t{margin-top:1.4rem}

/* o alinhamento: cada título leva à sua canção, mais abaixo na página */
.alin--disco{margin-top:0}
.alin--disco .alin__f{grid-template-columns:auto minmax(0,1fr) auto;align-items:baseline;padding:1rem .2rem}
.alin--disco .alin__t{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.2;
                      font-variation-settings:'opsz' 24;text-decoration:underline 1px var(--linha-forte);
                      text-underline-offset:.22em;transition:color .3s var(--curva)}
.alin--disco .alin__t:hover{color:var(--cobalto);text-decoration-color:currentColor}
.alin__s{font-family:var(--corpo);font-size:.78rem;color:var(--tinta-fraca)}
.alin--disco .alin__a{font-size:.78rem}
.alin--disco .alin__d{font-size:.9rem}
.alin__tot{display:flex;justify-content:flex-end;align-items:baseline;gap:1rem;margin:1rem .2rem 0;
           font-size:.7rem;font-weight:700;font-stretch:72%;text-transform:uppercase;letter-spacing:.16em;
           color:var(--tinta-fraca)}
.alin__tot time{font-size:.9rem;font-weight:400;font-stretch:100%;letter-spacing:0;color:var(--tinta)}

/* as canções: o texto dela em itálico, e a letra recolhida por baixo */
.cancoes{border-top:1px solid var(--linha-forte)}
.cancao{display:grid;gap:1rem clamp(1.6rem,4vw,4rem);padding-block:clamp(1.8rem,4vw,3rem);
        border-bottom:1px solid var(--linha);scroll-margin-top:7rem}
@media (min-width:860px){.cancao{grid-template-columns:minmax(0,.36fr) minmax(0,1fr)}}
.cancao__cab{display:flex;flex-direction:column;gap:.5rem}
.cancao__n{margin:0;font-size:.68rem;font-weight:700;font-stretch:72%;letter-spacing:.14em;color:var(--cobalto)}
.cancao__t{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);
           line-height:1.05;letter-spacing:-.01em;font-variation-settings:'opsz' 48;text-wrap:balance}
.cancao__a{margin:0;font-size:.8rem;color:var(--tinta-fraca)}
.cancao__q{min-width:0;max-width:60ch}
.cancao__x{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(1.12rem,1.9vw,1.4rem);
           line-height:1.5;color:var(--tinta);font-variation-settings:'opsz' 18}
.cancao__l{margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.cancao__lt{padding:0 clamp(1rem,2.4vw,1.5rem) clamp(1.2rem,2.4vw,1.6rem)}
.cancao__lt .folha__t:first-child{margin-top:clamp(1rem,2vw,1.4rem)}

/* quatro fotografias: uma por linha no telemóvel, duas no meio, quatro no largo */
.g4{display:grid;gap:clamp(1rem,2.5vw,2rem);align-items:start}
@media (min-width:560px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.g4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* a ficha técnica: os quatro grupos do livreto (quem toca, a gravação, a edição
   e o prémio), dois a dois a partir do tablet — quatro colunas apertavam os
   nomes e os papéis, que vão lado a lado em cada linha */
.ficha3{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:760px){.ficha3{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ficha3__t{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.25rem,2vw,1.5rem);
           font-variation-settings:'opsz' 24}
.ficha3 .factos{margin-top:.9rem}
.ficha3__pe{margin-top:clamp(2rem,4vw,3rem);padding-top:1.4rem;border-top:1px solid var(--linha);
            display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;color:var(--tinta-fraca)}
.ficha3__pe p{margin:0}

/* o registo do exemplar, em dois passos: o email, para toda a gente, e o número,
   numa réplica da faixa por baixo do livreto. A mensagem de erro fica a tinta,
   com um filete de sol ao lado: o sol, no papel claro, tem contraste de 2,5:1 —
   chega para um filete, não para se ler. */
.exemplar__q{display:flex;flex-direction:column;gap:1.2rem;max-width:46ch}
.exemplar__q > *{margin:0}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.insc{align-self:start;max-width:560px;background:var(--papel);border:1px solid var(--linha);border-radius:18px;
      box-shadow:var(--sombra);padding:clamp(1.2rem,4vw,2rem);gap:1.6rem}
.insc__passo{display:grid;gap:.7rem}
.insc__passo--cd{padding-top:1.6rem;border-top:1px solid var(--linha)}
.insc__t{margin:0;font-size:1rem;line-height:1.35;font-weight:600;color:var(--tinta)}
.insc__t small{font-size:.86rem;font-weight:400;color:var(--tinta-fraca)}
.insc__n{display:inline-grid;place-items:center;width:1.55rem;height:1.55rem;margin-right:.55rem;border-radius:50%;
         background:var(--cobalto);color:var(--papel);font-size:.78rem;font-weight:700;vertical-align:.08em}
.insc__email{font:inherit;font-size:1.05rem;color:var(--tinta);background:var(--superficie);width:100%;
             border:1px solid var(--linha-forte);border-radius:12px;padding:.85rem 1rem;
             transition:border-color .35s var(--curva)}
.insc__email::placeholder{color:var(--tinta-fraca);opacity:.7}
.insc__email:focus{outline:2px solid var(--cobalto);outline-offset:2px;border-color:var(--cobalto)}
.insc__email[aria-invalid="true"]{border-color:var(--sol);box-shadow:0 0 0 1px var(--sol)}
.insc__dica{margin:0;font-size:.8rem;line-height:1.5;color:var(--tinta-fraca)}
.insc__pe{display:grid}
.insc__pe .cap{padding:.95rem 1.2rem;font-size:.78rem}
.insc .form__msg:not(:empty){margin-top:.9rem}
.exemplar .form__msg.erro{color:var(--tinta);padding-left:.7rem;border-left:2px solid var(--sol)}
.exemplar__nota{margin:0;font-size:.74rem;color:var(--tinta-fraca)}
.exemplar__nota a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.exemplar__nota a:hover{color:var(--cobalto)}

/* a faixa do digipack, como está impressa: a névoa e o bordô do disco e a letra
   do livreto (Source Serif 4), também no tema escuro — é um objeto, como uma
   fotografia. O número escreve-se na linha, como à mão. */
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/source-serif-4.woff2') format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/source-serif-4-italic.woff2') format('woff2')}
.faixa{--nevoa:#C9D6D4;--bordo:#752A31;--bic:#1F2430;container-type:inline-size;background:var(--nevoa);color:var(--bordo);
       font-family:'Source Serif 4',Georgia,serif;border-radius:3px;
       /* as versaletes, mesmo nas páginas em chinês e japonês, que desligam a síntese (herda-se) */
       font-synthesis:small-caps;
       box-shadow:0 1px 0 rgba(0,0,0,.05),0 14px 30px -22px rgba(8,32,58,.6);
       padding:clamp(1.2rem,5.4cqi,2rem) 1rem clamp(1.1rem,5cqi,1.8rem);
       display:flex;flex-direction:column;align-items:center;gap:clamp(.8rem,3.8cqi,1.3rem);text-align:center}
.faixa__v{margin:0;font-style:italic;font-size:clamp(.98rem,3.4cqi,1.2rem);line-height:1.3}
.faixa__n{margin:0;display:flex;align-items:baseline;justify-content:center;gap:.55em;white-space:nowrap;
          font-size:clamp(.8rem,2.5cqi,.92rem)}
.faixa .sc{font-variant:small-caps;letter-spacing:.07em;text-transform:lowercase}
.faixa__n input{width:5.4em;border:0;border-bottom:1px solid var(--bordo);background:transparent;border-radius:0;
                text-align:center;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:1.7em;
                line-height:1;color:var(--bic);padding:0 0 .04em}
.faixa__n input:focus{outline:none;border-bottom:2px solid var(--bordo);margin-bottom:-1px}
.faixa__n input[aria-invalid="true"]{border-bottom:2px solid var(--sol);margin-bottom:-1px}

/* ── chinês ─────────────────────────────────────────────────
   A Bodoni e a Archivo não têm um único carácter chinês, e não se embute uma
   fonte que os tenha: são vários megas por peso. Os nomes, as datas e os
   números continuam a sair nas duas da casa, que vêm primeiro na lista; o
   chinês cai para a fonte do sistema — Songti e PingFang nos Apple, Noto no
   Android, SimSun e YaHei no Windows —, com serifa nos títulos e sem serifa no
   texto, como o resto do site.

   O resto é o que o chinês não leva. Itálico: não existe, e o browser inventa
   um inclinado que se lê mal — o `font-synthesis` desliga-o, e o latim à volta
   continua com o itálico verdadeiro da Bodoni. Espaçamento largo entre letras:
   separa caracteres que são palavras. Rótulos de 10 px, que em latim são
   versaletes e em chinês ficam ilegíveis. E as entrelinhas sobem: um carácter
   chinês ocupa o quadrado inteiro, e as entrelinhas de .9 dos títulos
   encavalitavam as linhas. */
:root:lang(zh){
  --display:'Bodoni Moda','Songti SC','Noto Serif SC','Noto Serif CJK SC','Source Han Serif SC','STSong','SimSun',serif;
  --corpo:'Archivo',-apple-system,'PingFang SC','Hiragino Sans GB','Noto Sans SC','Noto Sans CJK SC','Source Han Sans SC','Microsoft YaHei',system-ui,sans-serif;
}
/* O japonês, pelo mesmo caminho: Mincho nos títulos e Gothic no texto, das
   que vêm com o sistema — Hiragino nos Apple, Yu no Windows, Noto no
   Android. As regras de baixo servem as duas línguas. */
:root:lang(ja){
  --display:'Bodoni Moda','Hiragino Mincho ProN','Yu Mincho','YuMincho','Noto Serif JP','Noto Serif CJK JP','Source Han Serif JP',serif;
  --corpo:'Archivo',-apple-system,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic','YuGothic','Noto Sans JP','Noto Sans CJK JP','Meiryo',system-ui,sans-serif;
}
:lang(ja){line-break:strict}
:is(:lang(zh),:lang(ja)){font-synthesis:none}
body:is(:lang(zh),:lang(ja)){line-height:1.75}
:is(:lang(zh),:lang(ja)) .d{line-height:1.22;letter-spacing:0}
:is(:lang(zh),:lang(ja)) .menu__l a{line-height:1.4}
:is(:lang(zh),:lang(ja)) .txt{line-height:1.8}
:is(:lang(zh),:lang(ja)) .rot,:is(:lang(zh),:lang(ja)) .nav__links a,:is(:lang(zh),:lang(ja)) .data__mes,:is(:lang(zh),:lang(ja)) .selo,:is(:lang(zh),:lang(ja)) .passada__d,
:is(:lang(zh),:lang(ja)) .plat__s,:is(:lang(zh),:lang(ja)) .factos dt,:is(:lang(zh),:lang(ja)) .peca__o,:is(:lang(zh),:lang(ja)) .cit__f,:is(:lang(zh),:lang(ja)) .campo label,
:is(:lang(zh),:lang(ja)) .saltar,:is(:lang(zh),:lang(ja)) .cap,:is(:lang(zh),:lang(ja)) .nav__fer .cap,:is(:lang(zh),:lang(ja)) .cap--fino{
  font-size:.8rem;letter-spacing:.06em
}
/* o widget de marcação traz a sua folha, com rótulos pequenos e espaçados
   para o latim */
:is(:lang(zh),:lang(ja)) .mc__rot,:is(:lang(zh),:lang(ja)) .mc__parte,:is(:lang(zh),:lang(ja)) .mc__campo label,:is(:lang(zh),:lang(ja)) .mc__dia-s{
  font-size:.78rem;letter-spacing:.04em
}
:is(:lang(zh),:lang(ja)) .mc__bt{letter-spacing:.04em}
/* os rótulos pequenos da página do disco, como os outros */
:is(:lang(zh),:lang(ja)) .disco-p__ed,:is(:lang(zh),:lang(ja)) .cancao__n,:is(:lang(zh),:lang(ja)) .alin__tot{
  font-size:.8rem;letter-spacing:.06em
}
/* e os da discografia */
:is(:lang(zh),:lang(ja)) :is(.temas__mais,.fichaD > summary,.fichaD__l dt,.fichaD__ligs > span,.ouvirF__s,.ouvirF__abrir,.tema__n,
  .linha__curta > summary){
  font-size:.8rem;letter-spacing:.06em
}

/* ── tailandês ───────────────────────────────────────────────
   Pelo caminho do chinês e do japonês: a Bodoni e a Archivo não têm um
   carácter tailandês, e não se embute nenhuma fonte. Os nomes, as datas e os
   números continuam nas duas da casa, que vêm primeiro; o tailandês cai para a
   do sistema — Thonburi nos Apple, Noto no Android, Leelawadee e Tahoma no
   Windows.

   O que o tailandês pede de diferente é outro: as vogais e os tons sobem e
   descem fora da linha, e as entrelinhas de .9 dos títulos cortavam-nos — por
   isso sobem mais do que as do chinês. Espaçamento entre letras nenhum: afasta
   as vogais e os tons da consoante a que pertencem. Itálico e versaletes
   também não, que o tailandês não tem. E não há espaços entre as palavras —
   quem parte as linhas é o browser, com o dicionário dele. */
:root:lang(th){
  --display:'Bodoni Moda','Noto Serif Thai','Thonburi','Leelawadee UI','Tahoma',serif;
  --corpo:'Archivo',-apple-system,'Thonburi','Noto Sans Thai','Leelawadee UI','Tahoma',system-ui,sans-serif;
}
:lang(th){font-synthesis:none}
body:lang(th){line-height:1.8}
:lang(th) .d{line-height:1.38;letter-spacing:0}
:lang(th) :is(.hero__frase,.ph__n,.bio__linha,.cit__t,.legal h2,.voz-r__tema){line-height:1.5}
:lang(th) .menu__l a{line-height:1.5}
:lang(th) .txt{line-height:1.85}
:lang(th) :is(.rot,.nav__links a,.data__mes,.selo,.passada__d,.plat__s,.factos dt,.peca__o,.cit__f,.campo label,
  .saltar,.cap,.nav__fer .cap,.cap--fino,.disco-p__ed,.cancao__n,.alin__tot,
  .temas__mais,.fichaD > summary,.fichaD__l dt,.fichaD__ligs > span,.ouvirF__s,.ouvirF__abrir,.linha__curta > summary){
  font-size:.82rem;letter-spacing:0
}
:lang(th) :is(.mc__rot,.mc__parte,.mc__campo label,.mc__dia-s,.mc__bt){font-size:.8rem;letter-spacing:0}
.linguas > summary span:lang(th){font-size:.8rem;letter-spacing:0}

/* ── o texto que se usa, legível (28/10/2026) ───────────────
   Os rótulos pequenos em maiúsculas (.rot, datas, créditos) são desenho e
   ficam. O que se lê para fazer alguma coisa — botões, nomes dos campos,
   notas, a língua — tinha 10,5 a 11 px no telemóvel: passa a pelo menos
   12 px em maiúsculas e 14 px em texto corrido. Só no ecrã: a impressão tem
   as suas medidas. */
@media screen{
  .cap{font-size:.78rem}
  .cap--fino{font-size:.72rem}
  .nav__fer .cap{font-size:.74rem}
  .campo label{font-size:.76rem}
  .cartao__bt{font-size:.76rem}
  .sub__nota,.pe__sub .sub__nota,.exemplar__nota{font-size:.875rem}
  .pe__legal{font-size:.8rem}
}