/* A IDENTIDADE DA MOSTRA — âmbar sobre madeira queimada.
 *
 * ⌁ ELA NÃO É A DO TOCADOR, DE PROPÓSITO. O tocador é cinza neutro porque ele não pode competir com a
 * obra que desenha dentro dele; a mostra é o contrário — ela é uma vitrine, e o que ela emoldura são
 * quadros de cenas com muito marrom, muito céu e muita luz baixa. O âmbar é a cor que o motor já
 * produz nas próprias obras (a luz da oficina, o sol da aurora), então a moldura pertence ao que ela
 * mostra em vez de discutir com ele.
 */

:root {
  --tinta: #1C0A02;          /* o fundo: madeira queimada, mais fundo que o quadro do vídeo */
  --tinta-alta: #2A1106;     /* o cartão */
  --tinta-borda: #4A2410;
  --brasa: #FB923C;          /* o âmbar da família */
  --brasa-fraca: #FDBA74;
  --papel: #F6EDE4;          /* o texto, cor de papel e não branco puro */
  --papel-fraco: #C3AB98;
  --verde: #86EFAC;
  --raio: 14px;
  --serifa: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sem-serifa: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--papel);
  font: 400 16px/1.6 var(--sem-serifa);
  /* APPS-GUIDE 8 */
  touch-action: pan-y;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ⌁ O FUNDO TEM UM CLARÃO NO TOPO e ele tem função: sem ele a página é um retângulo preto
 * uniforme de dois metros de altura, e a rolagem não dá nenhuma pista de onde se está. */
body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto;
  height: 60vh;
  background: radial-gradient(120% 100% at 50% 0%, #4A2410 0%, transparent 70%);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}

main, .topo { position: relative; z-index: 1; }

a { color: var(--brasa); }

code {
  font: 500 .86em/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--brasa-fraca);
  background: #ffffff0d;
  padding: .12em .4em;
  border-radius: 5px;
}

/* ── A CAPA ─────────────────────────────────────────────────────────────────────────────────── */

.capa {
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(3rem, 10vw, 6rem) clamp(1.1rem, 4vw, 2rem) clamp(2rem, 6vw, 3.5rem);
  text-align: center;
}

.capa h1 {
  font: 600 clamp(2.4rem, 9vw, 4.2rem)/1.03 var(--serifa);
  letter-spacing: -.025em;
  margin: 0 0 1rem;
}
.capa h1 span { color: var(--brasa); }

.capa .linha {
  font-size: clamp(1.02rem, 2.6vw, 1.2rem);
  color: var(--papel-fraco);
  max-width: 40rem;
  margin: 0 auto;
}

/* O PLACAR — a pergunta que a coleção existe para responder, em uma linha. */
.placar {
  margin: 2.2rem auto 0;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: .6rem 1.1rem;
  border: 1px solid var(--tinta-borda);
  border-radius: 999px;
  background: #ffffff08;
  font-size: .92rem;
  color: var(--papel-fraco);
}
.placar b { color: var(--brasa); font-variant-numeric: tabular-nums; }

/* ── OS FILTROS ─────────────────────────────────────────────────────────────────────────────── */

/* ⌁ O GRUPO É NAVEGAÇÃO, NÃO SEÇÃO — ver a nota no index.html. Em telas estreitas a faixa rola na
 * horizontal DENTRO DELA MESMA, e é por isso que ela tem `overflow-x` próprio: sem isso os cinco
 * botões empurrariam a página inteira e criariam a rolagem lateral que a lei 8 proíbe. */
.filtros {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: .5rem;
  padding: .85rem clamp(1.1rem, 4vw, 2rem);
  margin-bottom: 1.8rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* ⌁ OPACA, E NÃO QUASE. Com o roteiro aberto o corpo do cartão rola por baixo desta barra, e a
   * transparência deixava uma linha de texto borrada aparecer entre os filtros e o vídeo grudado —
   * sujeira que não existia enquanto nada rolava por baixo dela. O desfoque fica para quem o
   * suporta, mas já sobre fundo cheio. */
  background: var(--tinta);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tinta-borda);
}
.filtros::-webkit-scrollbar { display: none; }

.filtros button {
  flex: 0 0 auto;
  font: 600 .86rem/1 var(--sem-serifa);
  color: var(--papel-fraco);
  background: #ffffff0a;
  border: 1px solid var(--tinta-borda);
  border-radius: 999px;
  padding: .55rem .95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filtros button:hover { background: #ffffff16; color: var(--papel); }
.filtros button em {
  font-style: normal;
  font-size: .8em;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}
.filtros button.ativo {
  background: var(--brasa);
  color: #2A1106;
  border-color: var(--brasa);
}
.filtros button.ativo em { opacity: .8; }
.filtros button:focus-visible { outline: 2px solid var(--brasa-fraca); outline-offset: 2px; }

/* ── OS GRUPOS ──────────────────────────────────────────────────────────────────────────────── */

.grupos {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem) 4rem;
}

.conta-do-grupo {
  color: var(--papel-fraco);
  max-width: 44rem;
  margin: 0 0 1.6rem;
}

/* ⌁ GRUPO VAZIO APARECE, e dizendo o que falta. Ver a lei em scripts/colecao.mjs. */
.vazio {
  border: 1px dashed var(--tinta-borda);
  border-radius: var(--raio);
  padding: 1.5rem;
  color: var(--papel-fraco);
  font-size: .95rem;
}

/* ── UMA OBRA ───────────────────────────────────────────────────────────────────────────────── */

/* ⌁ `align-items: start` E NÃO O ESTICAMENTO PADRÃO. Sem isso o grid iguala a altura dos cartões de
 * uma linha, e o mais curto ganha um vão vazio de um dedo entre as etiquetas e o botão — porque o
 * botão é empurrado para o pé pelo `margin-top:auto`. Cada cartão passa a ter a altura do próprio
 * conteúdo, que é o que faz a coluna parecer uma lista de obras e não uma tabela mal preenchida. */
.obras {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}

.obra {
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borda);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ⌁ O CARTÃO ABERTO NÃO PODE RECORTAR, porque `overflow: hidden` em QUALQUER ancestral mata o
 * `position: sticky` do vídeo — em silêncio, sem erro nenhum: a regra continua aplicada, o vídeo
 * simplesmente nunca gruda. O recorte existe para o `border-radius` aparar o vídeo nos cantos de
 * cima; com o cartão aberto quem apara é o `.quadro`, que tem o raio dele. Fechado, nada muda. */
.obra.lendo { overflow: visible; }
.obra.lendo .quadro {
  border-radius: var(--raio) var(--raio) 0 0;
  overflow: hidden;
}

/* ⌁ O VÍDEO NÃO TOCA SOZINHO, e isso não é timidez: quatro vídeos disparando juntos numa página
 * arrancam som na cara de quem abriu e gastam a franquia de dados de quem está na rua. `preload`
 * fica em `none` pelo mesmo motivo — a capa é uma imagem de 20 KB, e ela basta até alguém querer
 * ver. Quem toca é quem clica. */
.obra video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: cover;
}

.obra .corpo {
  padding: 1.15rem 1.2rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  flex: 1;
}

.obra h3 {
  font: 600 1.28rem/1.2 var(--serifa);
  margin: 0;
}

.obra .intencao {
  margin: 0;
  color: var(--papel-fraco);
  font-size: .94rem;
}

.obra .duracao {
  font-size: .8rem;
  color: var(--papel-fraco);
  font-variant-numeric: tabular-nums;
}

/* As capacidades declaradas. */
.caps-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.caps-lista li {
  font: 500 .76rem/1.25 var(--sem-serifa);
  color: var(--papel-fraco);
  background: #ffffff0a;
  border: 1px solid var(--tinta-borda);
  border-radius: 6px;
  padding: .32em .55em;
}
/* A capacidade que pôs a obra no grupo escolhido — acesa; as outras continuam visíveis. */
.caps-lista li.nesse {
  color: var(--brasa-fraca);
  background: #FB923C1a;
  border-color: #FB923C40;
}

/* ⌁ A PROCEDÊNCIA DA LISTA APARECE, e as duas não parecem iguais. "A obra promete isto" e "lemos
 * isto no arquivo dela" são afirmações de força diferente — ver a lei em scripts/colecao.mjs. */
.procedencia {
  font-size: .74rem;
  color: var(--papel-fraco);
  margin: -.35rem 0 0;
}

.acoes {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: .3rem;
}

.acoes a {
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  padding: .55rem .9rem;
  border-radius: 9px;
  border: 1px solid var(--tinta-borda);
  color: var(--papel);
  background: #ffffff0a;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.acoes a:hover { background: #ffffff16; border-color: #6B3418; }
.acoes a:active { transform: translateY(1px); }
.acoes a.primaria {
  background: var(--brasa);
  color: #2A1106;
  border-color: var(--brasa);
}
.acoes a.primaria:hover { background: var(--brasa-fraca); border-color: var(--brasa-fraca); }

/* A ressalva de que o que toca não é o que o vídeo mostra. */
.ressalva {
  font-size: .78rem;
  color: var(--papel-fraco);
  background: #ffffff08;
  border-left: 2px solid #6B3418;
  padding: .5rem .7rem;
  border-radius: 0 6px 6px 0;
  margin: 0;
}

/* O que ainda não tem obra. */
.pendentes {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem) 5rem;
}
.pendentes h2 {
  font: 600 1.3rem/1.2 var(--serifa);
  margin: 0 0 .5rem;
}
.pendentes > p { color: var(--papel-fraco); margin: 0 0 1rem; max-width: 44rem; }
.pendentes ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pendentes li {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  flex-wrap: wrap;
  border: 1px dashed var(--tinta-borda);
  border-radius: 9px;
  padding: .65rem .85rem;
  font-size: .9rem;
  color: var(--papel-fraco);
}
.pendentes li strong { color: var(--papel); font-weight: 600; }

.pe {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 clamp(1.1rem, 4vw, 2rem) 4rem;
  color: var(--papel-fraco);
  font-size: .86rem;
  border-top: 1px solid var(--tinta-borda);
  padding-top: 1.6rem;
}

/* ── A PÁGINA DE ROTEIRO ────────────────────────────────────────────────────────────────────── */

.roteiro .topo {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 0;
}
.volta { text-decoration: none; font-size: .9rem; }
.volta:hover { text-decoration: underline; }

.roteiro main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1.1rem, 4vw, 2rem) 5rem;
}

.rotulo {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--brasa);
  margin: 0 0 .5rem;
}

.roteiro h1 {
  font: 600 clamp(2rem, 7vw, 3rem)/1.06 var(--serifa);
  margin: 0 0 .9rem;
  letter-spacing: -.02em;
}

.roteiro .linha {
  font-size: 1.08rem;
  color: var(--papel);
  margin: 0 0 1.3rem;
}

.oQueEsta {
  color: var(--papel-fraco);
  font-size: .92rem;
  border-left: 2px solid var(--tinta-borda);
  padding-left: .9rem;
  margin: 0 0 1.8rem;
}

.porque {
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borda);
  border-radius: var(--raio);
  padding: 1.1rem 1.2rem;
  margin: 0 0 2rem;
}
.porque p { margin: 0; color: var(--papel-fraco); font-size: .93rem; }

h5 {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .71rem;
  color: var(--brasa);
  margin: 0 0 .6rem;
  font-weight: 700;
}
h5 .lido {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--papel-fraco);
  margin-left: .4rem;
}

.caps { margin-bottom: 2.2rem; }
.caps ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.caps li { display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; font-size: .9rem; }
.caps li strong { color: var(--brasa-fraca); font-weight: 600; min-width: 10rem; }
.caps li span { color: var(--papel-fraco); }

.cena {
  border-top: 1px solid var(--tinta-borda);
  padding-top: 1.5rem;
  margin-bottom: 2rem;
}
.cena h3 {
  font: 600 1.4rem/1.2 var(--serifa);
  margin: 0 0 1rem;
}

.blocos, .textos, .sons { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .8rem; }

.bloco {
  background: var(--tinta-alta);
  border: 1px solid var(--tinta-borda);
  border-radius: 10px;
  padding: .85rem 1rem;
}
.bloco h4 { font: 600 1rem/1.3 var(--sem-serifa); margin: 0 0 .3rem; }
.bloco .faz { margin: 0; font-size: .88rem; color: var(--papel-fraco); }

.saidas { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .25rem; }
.saidas li { font-size: .82rem; color: var(--papel-fraco); }
.saidas span { opacity: .75; }

.texto { border-left: 2px solid var(--tinta-borda); padding-left: .9rem; }
.texto blockquote {
  margin: 0 0 .35rem;
  font: 500 1rem/1.45 var(--serifa);
  color: var(--papel);
}
.texto .onde { margin: 0; font-size: .8rem; color: var(--papel-fraco); }
.escolhas { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.escolhas li {
  font-size: .85rem;
  color: var(--brasa-fraca);
  background: #FB923C10;
  border-radius: 6px;
  padding: .3rem .55rem;
}

.sons li { display: flex; gap: .7rem; flex-wrap: wrap; align-items: baseline; font-size: .89rem; }
.sons li span { color: var(--papel-fraco); }

.rodape {
  border-top: 1px solid var(--tinta-borda);
  padding-top: 1.2rem;
  color: var(--papel-fraco);
  font-size: .8rem;
}
.rodape p { margin: 0; }

/* ⌁ QUEM PEDE MENOS MOVIMENTO RECEBE MENOS. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ═══ O ROTEIRO SEGUNDO A SEGUNDO ═════════════════════════════════════════════════════════════════
 *
 * ⌁ O CARTÃO ABERTO OCUPA A LINHA INTEIRA. A coleção é uma grade de colunas de 22rem, e um roteiro
 * de 63 momentos dentro de uma dessas colunas nasce ilegível — duas ou três palavras por linha, uma
 * rolagem sem fim. Aberto, o cartão sai da grade (`grid-column: 1/-1`) e vira a página; fechado, ele
 * volta ao lugar exatamente como estava. Nada muda para quem não abriu. */
.obra.lendo {
  grid-column: 1 / -1;
}

/* ⌁ ABERTO, O TÍTULO SOBE PARA CIMA DO VÍDEO. Fechado, o cartão é vídeo-e-depois-texto, que é a
 * ordem certa para passar os olhos. Aberto, o vídeo gruda no topo e o texto que estava ACIMA dele
 * rola para fora — e quem desce trinta momentos deixa de ver de que obra é o roteiro que está
 * lendo. Pôr o corpo antes resolve sem mexer no HTML: ele rola normalmente, o vídeo gruda depois
 * dele, e o título continua ao alcance de uma rolada para cima. */
.obra.lendo .corpo { order: -1; }

/* ⌁ O VÍDEO GRUDA NO TOPO ENQUANTO O ROTEIRO ROLA, e é a razão de esta área existir: o pedido é
 * comparar a imagem com o que ela devia ser, com uma mão no celular. Se o vídeo sobe junto com a
 * rolagem, comparar vira rolar para cima, achar o instante, rolar para baixo, esquecer.
 *
 * ⌁ O `sticky` SÓ VALE COM O CARTÃO ABERTO. Grudado o tempo todo, o vídeo de um cartão fechado
 * flutuaria sobre a grade ao rolar a coleção — um efeito que ninguém pediu e que atrapalha quem só
 * quer passar os olhos. */
.obra .quadro { background: #000; }

/* ⌁ ELE GRUDA ABAIXO DA BARRA DE FILTROS, que já é `sticky` no topo com `z-index: 5`. Com `top: 0`
 * os dois disputam a mesma faixa: a barra fica por cima e come a borda de cima do vídeo. O `top` é a
 * altura dela, medida no `--alto-dos-filtros` que a página escreve ao desenhar — e o `z-index`
 * menor mantém a barra por cima quando eles se encontram. */
.obra.lendo .quadro {
  position: sticky;
  top: var(--alto-dos-filtros, 0px);
  z-index: 3;
  /* A sombra separa o vídeo grudado do roteiro que passa por baixo dele. */
  box-shadow: 0 10px 22px -12px #000;
}

/* ⌁ NO CELULAR O VÍDEO GRUDADO NÃO PODE COMER A TELA. Um 16/9 em retrato ocupa pouco mais de um
 * quinto da altura, e isso está bom; o teto existe para a paisagem, onde 16/9 tomaria a tela inteira
 * e não sobraria roteiro nenhum para ler ao lado. */
.obra.lendo .quadro video {
  max-height: 42vh;
  object-fit: contain;
}

.segundos {
  border-top: 1px solid var(--tinta-borda);
}

/* ⌁ A ÁREA NASCE FECHADA (`details` sem `open`), e é o estado que se olha primeiro. Um roteiro de
 * 63 momentos aberto por padrão faria a coleção abrir com quatro paredes de texto no lugar dos
 * vídeos, que é o oposto do que esta página é. */
.segundos > summary {
  list-style: none;
  cursor: pointer;
  padding: .95rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .18rem;
  transition: background .15s ease;
  /* O alvo do dedo: 44px é o mínimo confortável no celular. */
  min-height: 44px;
  justify-content: center;
}
.segundos > summary::-webkit-details-marker { display: none; }
.segundos > summary:hover { background: #ffffff0a; }
.segundos > summary:focus-visible { outline: 2px solid var(--brasa-fraca); outline-offset: -2px; }

.segundos > summary .rotulo {
  font: 600 .88rem/1.3 var(--sem-serifa);
  color: var(--papel);
  display: flex;
  align-items: center;
  gap: .5rem;
}
/* A seta é o único sinal de que isto abre — ela gira quando abre. */
.segundos > summary .rotulo::before {
  content: '';
  width: .5rem;
  height: .5rem;
  border-right: 2px solid var(--brasa);
  border-bottom: 2px solid var(--brasa);
  transform: rotate(-45deg);
  transition: transform .18s ease;
  flex: none;
}
.segundos[open] > summary .rotulo::before { transform: rotate(45deg); }

.segundos > summary .dica {
  font-size: .76rem;
  color: var(--papel-fraco);
  padding-left: 1rem;
}

/* ⌁ O CONTEÚDO SÓ EXISTE COM A ÁREA ABERTA, e isto é explícito de propósito. Um `details` esconde
 * os filhos que não são o `summary` — mas só enquanto eles não têm um `display` próprio, e dar
 * `padding` a este bloco já bastava para ele escapar: fechado, a área continuava com o roteiro
 * inteiro na tela, empurrando a página. É o defeito que só aparece FECHANDO, depois de abrir. */
.segundos:not([open]) .dentro { display: none; }
.segundos[open] .dentro { display: block; padding: 0 1.2rem 1.3rem; }

.carregando-roteiro,
.sem-roteiro {
  color: var(--papel-fraco);
  font-size: .86rem;
  margin: .2rem 0 0;
}

/* ⌁ O SELO DIZ QUANTO FOI CONFERIDO. Ver a lei no HTML: um roteiro completo que não conferiu nada e
 * uma obra realmente auditada não podem sair iguais na tela. */
.selo {
  margin: .1rem 0 1rem;
  padding: .55rem .7rem;
  border-radius: 8px;
  font: 500 .76rem/1.45 var(--sem-serifa);
  color: var(--papel-fraco);
  background: #ffffff0a;
  border: 1px solid var(--tinta-borda);
  font-variant-numeric: tabular-nums;
}
.selo b { color: var(--papel); }
.selo.ok { border-color: #86EFAC40; }
.selo.ok b { color: var(--verde); }
.selo.diverge, .selo.vazio { border-color: #FB923C40; color: var(--brasa-fraca); }

.momentos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* A cena entra como faixa quando muda — uma obra atravessa várias, e sem isto a lista corrida não
 * diz onde um ato acaba e o outro começa. */
.faixa-de-cena {
  margin: 1.1rem 0 .3rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.faixa-de-cena:first-child { margin-top: 0; }
.faixa-de-cena span {
  font: 600 .7rem/1 var(--sem-serifa);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--brasa-fraca);
  flex: none;
}
.faixa-de-cena::after {
  content: '';
  height: 1px;
  background: var(--tinta-borda);
  flex: 1;
}

/* ⌁ O RELÓGIO NUMA COLUNA FIXA, e o que acontece na outra. Alinhados, os instantes viram uma régua
 * que se percorre com o olho enquanto o vídeo roda — que é o gesto que esta área existe para servir.
 * Em telas estreitas as duas viram uma só, porque 6rem de coluna fixa não cabem com o texto. */
.momento {
  display: grid;
  grid-template-columns: 5.4rem 1fr;
  gap: .3rem .9rem;
  padding: .5rem 0;
  border-top: 1px solid #ffffff0d;
}
.momento:first-of-type { border-top: 0; }

.momento .quando {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}
.momento .quando b {
  font: 600 .92rem/1.3 var(--sem-serifa);
  color: var(--brasa);
}
.momento .quando span {
  font-size: .68rem;
  color: var(--papel-fraco);
}

.momento .oQue { min-width: 0; }

.momento .ve {
  margin: 0;
  font-size: .9rem;
  color: var(--papel);
}

/* ⌁ O PORQUÊ FICA MAIS APAGADO QUE O QUE SE VÊ, e a hierarquia é a do gesto: confere-se primeiro o
 * que devia acontecer, e só se lê o porquê quando o que se vê não bate. */
/* ⌁ ELE ZERA O QUE HERDA DE `.porque`, que na página de intenção é uma CAIXA com fundo e borda.
 * O mesmo nome em dois lugares fazia cada linha do roteiro virar um quadro emoldurado — trinta
 * molduras empilhadas onde devia haver uma nota apagada embaixo do que se vê. */
.momento .porque {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: .2rem 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--papel-fraco);
}

.procedencia-do-roteiro {
  margin: 1.2rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--tinta-borda);
  font-size: .74rem;
  line-height: 1.55;
  color: var(--papel-fraco);
}

@media (max-width: 30rem) {
  .momento {
    grid-template-columns: 1fr;
    gap: .15rem;
  }
  .momento .quando {
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
  }
  .segundos[open] .dentro { padding: 0 1rem 1.2rem; }
  .segundos > summary { padding: .95rem 1rem; }
}

/* Quem pediu menos movimento não ganha a seta girando. */
@media (prefers-reduced-motion: reduce) {
  .segundos > summary .rotulo::before { transition: none; }
}