/* estilo.css — Jorge Caetano
   Papel, tinta, espaço e tipografia. Nada decorativo.
   Regra: a obra é o elemento visual. O resto sai da frente.

   A paleta vem da capa de "Quando a Vida Quebrou", medida do arquivo de
   impressão: papel osso, tinta azul-marinho, ouro como acento. Não é o site
   copiando o livro — é o site e o livro sendo o mesmo objeto.

   Duas vozes tipográficas:
     serifada     -> a obra: títulos, textos, letras (como no livro)
     monoespaçada -> os dados do acervo: ano, estado, créditos, ISRC
   A monoespaçada é o que faz isto parecer um arquivo, e não um folder.
   O ouro nunca entra em texto corrido: sobre o papel dá 3,28:1, que reprova
   para leitura. Só em traço. */

:root {
  --papel:        #f6f3ec;  /* papel da capa          */
  --tinta:        #19283f;  /* tinta da capa, 13,4:1  */
  --tinta-fraca:  #55606f;  /* apoio, 7,0:1           */
  --ouro:         #a6803e;  /* acento da capa — traço, nunca texto */
  --linha:        #e0dbd0;
  --linha-forte:  #948c7b;  /* bordas de componente, 3.01:1 */
  --realce:       #19283f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --e1: .5rem;  --e2: 1rem;   --e3: 1.5rem;
  --e4: 2.5rem; --e5: 4rem;   --e6: 6.5rem;

  --largura: 74rem;
  --leitura: 36rem;
}

/* Escuro: segunda opção, escolhida no alto da página. */
:root[data-tema="escuro"] {
  --papel: #12171f; --tinta: #eeeae0; --tinta-fraca: #a2a9b4; --ouro: #c2a15c;
  --linha: #242c38; --linha-forte: #5b6474; --realce: #eeeae0;
}

/* Barra de rolagem e controles nativos acompanham o tema. */
:root { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; }

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.125rem/1.62 var(--serif);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--tinta-fraca); }

:focus-visible { outline: 2px solid var(--realce); outline-offset: 3px; border-radius: 2px; }

.pular {
  position: absolute; left: -9999px;
  background: var(--tinta); color: var(--papel);
  padding: var(--e2); z-index: 10;
}
.pular:focus { left: var(--e2); top: var(--e2); }

/* ---------- cabeçalho / rodapé ---------- */

.cabecalho {
  display: flex; align-items: center;
  gap: var(--e3);
  max-width: var(--largura);
  margin: 0 auto;
  padding: var(--e3) var(--e2);
  border-bottom: 1px solid var(--linha);
}
.cabecalho__nome {
  font: 600 .8125rem/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.cabecalho__menu { display: flex; gap: var(--e3); margin-left: auto; }
.cabecalho__menu a {
  font: 400 .8125rem/1 var(--mono);
  letter-spacing: .09em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta-fraca);
}
.cabecalho__menu a:hover { color: var(--tinta); }

/* Lupa: círculo de contorno fino, como os ícones do rodapé e o botão da
   chave de tema. Leva à página de busca. */
.cabecalho__busca {
  display: grid; place-items: center; flex: none;
  width: 1.875rem; height: 1.875rem; margin-left: var(--e3);
  border: 1px solid var(--linha-forte); border-radius: 50%;
  color: var(--tinta);
}
.cabecalho__busca:hover { border-color: var(--tinta); }
.cabecalho__busca svg, .busca__campo svg { width: .9375rem; height: .9375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }

/* Chave Claro / Escuro: um trilho com o botão redondo e o nome do modo em
   uso. No claro o botão (sol) fica à direita; no escuro (lua), à esquerda.
   Cores só dos tokens do tema: nada novo na paleta. */
.tema {
  display: inline-flex; align-items: center; gap: .5rem;
  flex-direction: row-reverse;
  min-width: 7.25rem; height: 1.875rem; padding: 0 .75rem 0 .1875rem;
  margin-left: var(--e1);
  border: 1px solid var(--linha-forte); border-radius: 999px;
  background: var(--linha); color: var(--tinta);
  font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; align-self: center;
}
.tema[hidden] { display: none; }
.tema[aria-checked="false"] { padding: 0 .1875rem 0 .75rem; }
.tema[aria-checked="true"] { flex-direction: row; }
.tema__texto { flex: 1; text-align: center; }
.tema__botao {
  width: 1.375rem; height: 1.375rem; border-radius: 50%;
  background: var(--papel); border: 1px solid var(--linha-forte);
  display: grid; place-items: center;
}
.tema__botao svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tema[aria-checked="true"] .tema__sol, .tema[aria-checked="false"] .tema__lua { display: none; }
.tema:hover { border-color: var(--tinta); }

/* Rodapé: uma linha de ícones (ouvir · acompanhar · contato) e, embaixo,
   o crédito e os links de serviço. Ícones na cor do texto, sem cor de marca. */
.rodape {
  max-width: var(--largura);
  margin: var(--e6) auto 0;
  padding: var(--e4) var(--e2) var(--e4);
  border-top: 1px solid var(--linha);
  color: var(--tinta-fraca);
}
.rodape__icones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e1) var(--e3); }
.rodape__grupo { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.rodape__grupo a {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--linha-forte);
  color: var(--tinta-fraca);
}
.rodape__grupo a:hover { color: var(--tinta); border-color: var(--tinta); }
.rodape__grupo svg { width: 1rem; height: 1rem; fill: currentColor; }
.rodape__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e1) var(--e3);
  margin-top: var(--e3); padding-top: var(--e3);
  border-top: 1px solid var(--linha);
  font: .75rem/1.6 var(--mono); letter-spacing: .02em;
}
.rodape__base p { margin: 0; }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); }
.rodape__links a { color: var(--tinta-fraca); text-decoration: none; }
.rodape__links a:hover { color: var(--tinta); text-decoration: underline; }
.rodape__links span { white-space: nowrap; }

/* ---------- blocos comuns ---------- */

main { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e2); }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; letter-spacing: -.012em; }
h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); margin: 0 0 var(--e2); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); margin: 0 0 var(--e2); }
h3 { font-size: 1.25rem; margin: 0 0 var(--e1); }

.estado {
  display: inline-block;
  font: 500 .8125rem/1 var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  padding: .34em .6em;
  border: 1px solid var(--linha-forte);
  color: var(--tinta-fraca);
  white-space: nowrap;
}
.estado--em-producao { border-color: var(--ouro); color: var(--tinta); }
.estado--gravada     { border-style: dashed; }
.estado--arquivado   { opacity: .6; }

.marca {
  font: 500 .75rem/1 var(--mono); white-space: nowrap;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-fraca);
  margin-left: var(--e1);
}

.ficha {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e4);
  margin: var(--e3) 0;
  padding: var(--e2) 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  font-family: var(--mono); font-size: .875rem;
}
.ficha > div { display: flex; flex-direction: column; gap: .3em; }
.ficha dt { color: var(--tinta-fraca); letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }
.ficha dd { margin: 0; }
.ficha code { font: inherit; }

.links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin: var(--e2) 0; padding: 0; }
.links a { font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.links--destaque a { border-bottom: 2px solid var(--tinta); text-decoration: none; padding-bottom: .25em; }
.links--destaque .links__principal { flex-basis: 100%; }
.links--destaque .links__principal a {
  display: inline-flex; align-items: center; gap: .6em;
  border: 1px solid var(--tinta); padding: .75em 1.1em;
  background: var(--tinta); color: var(--papel);
}
.links--destaque .links__principal a:hover { background: transparent; color: var(--tinta); }
.links__principal svg { width: .875rem; height: .875rem; fill: currentColor; flex: none; }

/* Gravações: um play redondo, no mesmo desenho dos ícones do rodapé. */
.gravacoes__play {
  display: grid; place-items: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  border: 1px solid var(--linha-forte); color: var(--tinta-fraca);
}
.gravacoes__play:hover { color: var(--tinta); border-color: var(--tinta); }
.gravacoes__play svg { width: .75rem; height: .75rem; fill: currentColor; margin-left: .06rem; }

.links-lista { list-style: none; padding: 0; margin: 0; }
.links-lista li { border-bottom: 1px solid var(--linha); padding: var(--e2) 0; }

/* ---------- home ---------- */

.abertura {
  display: grid; gap: var(--e5);
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: center;
  padding: var(--e5) 0 var(--e6);
}
/* O retrato é a foto oficial, em preto e branco neutro. O fundo de estúdio foi retirado no
   arquivo (WebP com transparência): a figura fica sobre o papel do site,
   sem caixa nem borda, nos dois temas. Do topo até a cintura, esmaecendo
   no papel — a foto "acontece" dentro da página em vez de terminar numa
   linha. Mesmo conceito em todas as telas (escolha do autor). */
.abertura__foto { margin: 0; }
.abertura__foto img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
          mask-image: linear-gradient(to bottom, #000 78%, transparent);
}
.abertura__foto figcaption {
  /* crédito: presente, mas abaixo do nome na hierarquia */
  font: .75rem/1.5 var(--mono);
  color: var(--tinta-fraca);
  margin-top: var(--e1);
}
/* A assinatura da fotógrafa no lugar do crédito escrito: desenho em vetor
   (nítido em qualquer tela), na cor de apoio do texto, nos dois temas.
   O nome dela continua no rótulo lido por leitor de tela. */
.abertura__assinatura { display: block; height: 2.4rem; margin-top: var(--e2); color: var(--tinta-fraca); }
.abertura__assinatura svg { height: 100%; width: auto; display: block; }

.abertura--sem-foto { grid-template-columns: 1fr; padding: var(--e6) 0 var(--e5); }
.abertura--sem-foto .abertura__linha { font-size: .9375rem; }
.abertura__texto h1 { font-size: clamp(2.5rem, 7vw, 4.5rem); }
/* A linha de abertura é fala do autor, não dado de acervo: entra na serifada,
   como o resto da prosa do site. */
.abertura__linha {
  font-size: 1.0625rem; line-height: 1.6;
  color: var(--tinta-fraca); max-width: 32rem;
  margin: 0 0 var(--e3);
}
.faixa { padding: var(--e5) 0; border-top: 1px solid var(--linha); }
.faixa__cabeca { margin-bottom: var(--e4); max-width: var(--leitura); }
.faixa__cabeca p { color: var(--tinta-fraca); margin: 0; }
.faixa--obra .faixa__cabeca h2::after {
  content: ""; display: inline-block; width: .5em; height: .5em;
  background: var(--ouro); border-radius: 50%; margin-left: .45em; vertical-align: .12em;
}
.faixa--nota { color: var(--tinta-fraca); font-size: .9375rem; max-width: var(--leitura); }

.grade {
  display: grid; gap: var(--e2);
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.cartao {
  background: var(--papel);
  border: 1px solid var(--linha);
  padding: var(--e3);
  text-decoration: none;
  display: flex; flex-direction: column; gap: .35rem;
  min-height: 9.5rem;
}
.cartao:hover { background: var(--linha); }
/* Capa no cartão: altura fixa, largura livre. O livro fica retrato, os
   discos ficam quadrados — cada obra no formato que ela tem de verdade.
   Nada é cortado. */
.cartao__capa {
  align-self: flex-start;      /* sem isso o flex estica a imagem na largura */
  height: 10rem; width: auto; max-width: 100%;
  margin-bottom: var(--e2);
  box-shadow: 0 0 0 1px var(--linha);
}
.cartao__tipo { font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
.cartao__titulo { font-family: var(--serif); font-size: 1.5rem; margin: .2rem 0 0; }
.cartao__meta { font: .8125rem/1.4 var(--mono); color: var(--tinta-fraca); margin: 0; display: flex; gap: var(--e1); align-items: center; flex-wrap: wrap; }
.cartao__resumo { font-size: .9375rem; color: var(--tinta-fraca); margin: 0; }

.lista-historias { list-style: none; padding: 0; margin: 0; }
.lista-historias li { border-top: 1px solid var(--linha); }
.lista-historias li:last-child { border-bottom: 1px solid var(--linha); }
.lista-historias a {
  display: grid; gap: var(--e1) var(--e3);
  grid-template-columns: 7rem 1fr;
  padding: var(--e3) 0; text-decoration: none;
}
.lista-historias a:hover .lista-historias__titulo { text-decoration: underline; }
.lista-historias time { font: .8125rem/1.6 var(--mono); color: var(--tinta-fraca); }
.lista-historias__titulo { font-family: var(--serif); font-size: 1.375rem; }
.lista-historias__tipo { grid-column: 2; font: .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); }
.lista-historias__resumo { grid-column: 2; color: var(--tinta-fraca); font-size: .9375rem; }

/* ---------- páginas de obra ---------- */

.obra, .texto { padding: var(--e5) 0 var(--e4); }
.obra__cabeca, .texto__cabeca, .pagina__cabeca { max-width: var(--leitura); }
.obra__cabeca .ficha, .texto__cabeca .ficha { max-width: none; }
.obra__trilha { font: .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0 0 var(--e3); }
.obra__resumo { font-family: var(--serif); font-size: 1.25rem; color: var(--tinta-fraca); margin: 0 0 var(--e2); }
.obra__capa { margin: var(--e4) 0; max-width: 28rem; }
/* A capa é arte da obra: entra em cor e sem tratamento. */
.obra__capa img { border: 1px solid var(--linha); }
.obra__ouvir-rotulo { font: .8125rem/1.4 var(--mono); color: var(--tinta-fraca); margin: var(--e2) 0 0; }
.obra__volta { margin-top: var(--e5); padding-top: var(--e3); border-top: 1px solid var(--linha); font: .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.obra__volta a { text-decoration: none; }

.secao { margin: var(--e5) 0; max-width: var(--leitura); }
.secao__intro { color: var(--tinta-fraca); font-size: .9375rem; margin: -.5rem 0 var(--e3); }
.secao p, .texto__corpo p { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.72; }
.secao blockquote, .texto__corpo blockquote {
  margin: var(--e3) 0; padding-left: var(--e3);
  border-left: 2px solid var(--linha-forte); color: var(--tinta-fraca);
}
.secao ul, .secao ol, .texto__corpo ul, .texto__corpo ol { padding-left: 1.2em; }
.secao li, .texto__corpo li { margin-bottom: .4em; font-family: var(--serif); font-size: 1.0625rem; }
hr { border: 0; border-top: 1px solid var(--linha); margin: var(--e4) 0; }

.secao--origem { border-left: 2px solid var(--ouro); padding-left: var(--e3); }
.secao--letra p {
  white-space: pre-line;
  font-size: 1.125rem; line-height: 1.9;
  color: var(--tinta-fraca);
}

.video { position: relative; aspect-ratio: 16/9; margin: var(--e3) 0; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.audio { margin: var(--e3) 0; }
.audio figcaption { font: .75rem/1.5 var(--mono); color: var(--tinta-fraca); margin-bottom: var(--e1); }
.audio audio { width: 100%; }

.faixas, .gravacoes { list-style: none; padding: 0; margin: 0; }
.faixas li {
  display: grid; grid-template-columns: 2.5rem 1fr auto; gap: var(--e2);
  align-items: baseline; padding: var(--e2) 0; border-bottom: 1px solid var(--linha);
}
.faixas__num { font: .8125rem/1 var(--mono); color: var(--tinta-fraca); }
.faixas__titulo { font-family: var(--serif); font-size: 1.125rem; }
.faixas__meta { display: flex; gap: var(--e1); align-items: center; }

.gravacoes li {
  display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); align-items: baseline;
  padding: var(--e2) 0; border-bottom: 1px solid var(--linha);
}
.gravacoes__interprete { font-family: var(--serif); font-size: 1.125rem; }
.gravacoes__meta { font: .8125rem/1 var(--mono); color: var(--tinta-fraca); }
.gravacoes a { font: .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* ---------- índices ---------- */

.pagina__cabeca { padding: var(--e5) 0 var(--e3); }
.pagina__intro { color: var(--tinta-fraca); font-size: 1.0625rem; }
.pagina__nota { margin-top: var(--e4); font: .8125rem/1.6 var(--mono); color: var(--tinta-fraca); }

.vozes {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--linha);
}
.vozes__lista { list-style: none; padding: 0; margin: 0 0 var(--e4); max-width: var(--leitura); border-top: 1px solid var(--linha); }
.vozes__lista li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem var(--e3); padding: var(--e2) 0; border-bottom: 1px solid var(--linha); }
.vozes__lista a { font-size: 1.25rem; }
.vozes__meta { font: .8125rem/1.5 var(--mono); color: var(--tinta-fraca); }
/* Playlist: a capa entra como as capas dos discos — em cor, sem tratamento. */
.playlist { display: grid; grid-template-columns: 11rem minmax(0, var(--leitura)); gap: var(--e3); align-items: start; }
.playlist__capa { width: 11rem; height: 11rem; border: 1px solid var(--linha); }
.playlist__rotulo {
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-fraca); margin: 0 0 var(--e2);
}
.playlist__titulo { font-size: 1.75rem; margin: 0 0 var(--e2); }
h3.playlist__titulo { font-size: 1.375rem; margin-top: 0; }
.playlist__texto { margin: 0 0 var(--e2); }
.playlist__link a {
  font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid var(--ouro); padding-bottom: .25em;
}
.playlist__nota { font-size: .9375rem; color: var(--tinta-fraca); margin-top: var(--e3); }

.filtros { display: flex; flex-wrap: wrap; gap: var(--e1); margin: var(--e3) 0 var(--e4); }
.filtros button {
  font: 500 .8125rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--tinta-fraca);
  border: 1px solid var(--linha-forte); padding: .55em .8em; cursor: pointer;
}
.filtros button:hover { color: var(--tinta); }
.filtros button.ativo { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.acervo { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); }
.acervo__item { border-bottom: 1px solid var(--linha); }
.acervo__item a {
  display: grid; align-items: baseline; gap: var(--e1) var(--e3);
  grid-template-columns: 4.5rem minmax(0, 1fr) 11rem 16rem;
  padding: var(--e3) 0; text-decoration: none;
}
.acervo__item a:hover .acervo__titulo { text-decoration: underline; }
.acervo__ano, .acervo__tipo { font: .8125rem/1.6 var(--mono); color: var(--tinta-fraca); }
.acervo__tipo { letter-spacing: .08em; text-transform: uppercase; font-size: .75rem; }
.acervo__titulo { font-family: var(--serif); font-size: 1.375rem; }
.acervo__estado { display: flex; flex-wrap: wrap; gap: var(--e1); align-items: center; }

.ano { margin-bottom: var(--e5); }
.ano__titulo { font-family: var(--mono); font-size: .875rem; letter-spacing: .14em; color: var(--tinta-fraca); margin-bottom: var(--e2); }

/* ---------- texto longo ---------- */

.texto__corpo { max-width: var(--leitura); }
.texto__corpo h2 { margin-top: var(--e4); }
.texto__corpo h3 { font-family: var(--mono); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); margin-top: var(--e3); }
.texto__corpo code { font: .9em var(--mono); background: var(--linha); padding: .15em .35em; }
.texto__corpo pre { background: var(--linha); padding: var(--e2); overflow-x: auto; font-size: .875rem; }
.texto__corpo pre code { background: none; padding: 0; }
.texto__corpo table { width: 100%; border-collapse: collapse; font-size: .9375rem; margin: var(--e3) 0; }
.texto__corpo th, .texto__corpo td { text-align: left; padding: .6em 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.texto__corpo th { font: 500 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-fraca); }

/* ---------- busca ---------- */

.busca { max-width: var(--leitura); margin: 0 0 var(--e3); }
.busca__rotulo { display: block; font: 500 .75rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); margin-bottom: var(--e1); }
.busca__campo { display: flex; align-items: center; gap: .75rem; border-bottom: 1px solid var(--tinta); padding: .5rem 0; color: var(--tinta-fraca); }
.busca__campo input {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--tinta);
  font: 400 1.375rem/1.3 var(--serif); padding: 0; outline: none;
}
.busca__campo input::placeholder { color: var(--tinta-fraca); opacity: .8; }
.busca__campo:focus-within { border-bottom-width: 2px; padding-bottom: calc(.5rem - 1px); color: var(--tinta); }
.busca__campo input::-webkit-search-cancel-button { -webkit-appearance: none; }
.busca__estado { font: .8125rem/1.6 var(--mono); color: var(--tinta-fraca); min-height: 1.6em; }
.busca__resultados { list-style: none; padding: 0; margin: 0; max-width: var(--leitura); border-top: 1px solid var(--linha); }
.busca__resultados:empty { border-top: 0; }
.busca__resultados li { border-bottom: 1px solid var(--linha); }
.busca__resultados a { display: grid; gap: .25rem; padding: var(--e2) 0; text-decoration: none; }
.busca__resultados a:hover .busca__titulo { text-decoration: underline; }
.busca__tipo { font: 500 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); }
.busca__titulo { font-size: 1.375rem; }
.busca__trecho { font-size: .9375rem; color: var(--tinta-fraca); }
.busca__trecho mark { background: none; color: var(--tinta); box-shadow: inset 0 -.4em 0 color-mix(in srgb, var(--ouro) 35%, transparent); }

/* ---------- telas pequenas ---------- */

@media (max-width: 52rem) {
  :root { --e5: 3rem; --e6: 4rem; }
  .cabecalho {
    display: grid; grid-template-columns: 1fr auto auto;
    align-items: center; gap: var(--e2) var(--e1);
  }
  .cabecalho__menu { gap: var(--e2); margin-left: 0; grid-column: 1 / -1; grid-row: 2; }
  .cabecalho__busca { grid-column: 2; grid-row: 1; margin-left: 0; width: 2rem; height: 2rem; }
  .tema { grid-column: 3; grid-row: 1; margin-left: 0; }
  /* área de toque maior no celular, sem mudar o desenho */
  .cabecalho__nome, .cabecalho__menu a, .rodape__links a, .obra__volta a {
    padding-block: .6rem; margin-block: -.6rem;
  }
  .cabecalho__nome, .cabecalho__menu a, .rodape__links a, .obra__volta a { display: inline-block; }
  .rodape__grupo { gap: .375rem; }
  .rodape__grupo a { width: 2.25rem; height: 2.25rem; }
  .rodape__icones { column-gap: var(--e2); }
  .playlist { grid-template-columns: 1fr; }
  .abertura { grid-template-columns: 1fr; gap: var(--e3); padding: var(--e4) 0 var(--e5); }
  /* Coluna única: largura limitada para, em tablet, o nome continuar na
     primeira tela. */
  .abertura__foto { order: -1; max-width: 24rem; }
  .acervo__item a { grid-template-columns: 4rem 1fr; }
  .acervo__tipo, .acervo__estado { grid-column: 2; justify-content: flex-start; }
  .lista-historias a { grid-template-columns: 1fr; }
  .lista-historias__tipo, .lista-historias__resumo { grid-column: 1; }
  .faixas li { grid-template-columns: 2rem 1fr; }
  .faixas__meta { grid-column: 2; }
}

@media print {
  .cabecalho__menu, .cabecalho__busca, .tema, .filtros, .obra__volta, .pular, .video { display: none; }
  /* impresso é sempre papel branco, qualquer que seja o tema na tela */
  :root:not(#_) { --papel: #fff; --tinta: #000; --tinta-fraca: #444; --linha: #ccc; --linha-forte: #888; --realce: #000; color-scheme: light; }
  body { color: #000; background: #fff; }
  a { text-decoration: none; }
}