/* ==========================================================================
   pagina.css: a composição do capítulo 10, "Como uma IA usa um livro" (IA explicada, FAROL), versão 2

   Gramática de página: LIVRO ABERTO (a mesma da versão 1, que a crítica mandou manter). Página
   esquerda, as fichas de catálogo (os passos, cada uma com o número de chamada no canto); página
   direita, a prancha sangrada até a borda (o palco, preso enquanto as fichas passam); cabeço (a
   régua) preso no alto; numeração de cena em romanos pendurada na margem. O que a versão 2 traz:
   - as treze cenas passam todas pela mesma prancha (não há mais cena à parte: a crítica, item 1);
   - a espinha do capítulo (as três prateleiras: método, teoria, ficção) repetida em miniatura no
     cabeço preso, acesa pela cena corrente (o roteiro, cena I.4);
   - a ficha de maturidade (laboratório, uso inicial, corrente) no mesmo desenho do capítulo 11;
   - termo técnico com o original em pequeno, e número com fonte, como nos capítulos 7 a 9;
   - o sumário da capa como índice de livro, em colunas, com os romanos alinhados.
   Em 390 a prancha vai para o alto (60% da altura) e as fichas passam por baixo dela, sem cobri-la.

   Cada seção, da II em diante, abre num CORTE (FAROL-0414, FAROL-0423, FAROL-0429): o cabeçalho dela vira um espaço de
   uma tela na rolagem e uma cartela presa (fundo cheio, vermelho e preto alternados, o romano muito grande com «de XIII»,
   o título e, quando o texto a trouxer, a frase de entrada) aparece de uma vez e some de uma vez; a prancha some por
   baixo. A seção I não tem corte: a capa é a abertura dela. O nome da seção corrente segue à vista no assunto de cada
   ficha (.ia-ficha-de) e o romano no folio do cabeço. Composição e medidas da cartela portadas do cap. 6
   (site/agente/pagina.css), que as portou do cap. 7 (site/comum-agentes/pagina.css). O motor (palco.js) liga
   html[data-corte] enquanto a cartela está no ar.

   Constrói sobre farol.css (canon CIn-UFPE): nenhuma cor nova, nenhuma sombra, nenhum gradiente.
   Classes próprias levam o prefixo ia-. As classes .cena, .passos, .passo, .palco, .palco-global,
   .palco-capa, .termo, .nota e .maturidade são do contrato com o engenheiro de efeitos (palco.js,
   palco.css). palco.css carrega depois deste arquivo: ele não mexe em position, top, height,
   grid-column e z-index de .palco-global, que são daqui.
   ========================================================================== */

:root {
  --ia-cab: 44px;                       /* altura do cabeço preso (1440) */
  --ia-coluna: 440px;                   /* largura da página de texto (1440) */
  --ia-calha: clamp(32px, 4vw, 64px);   /* a calha entre a página de texto e a prancha */
  --ia-corpo: 17px;                     /* corpo das fichas; 16 em 390, nunca abaixo de 15 */
}

/* --- base ------------------------------------------------------------------ */
.ia-pagina { overflow-x: clip; font-size: var(--ia-corpo); line-height: 1.45; }
.ia-pagina .label { font-size: 12px; }            /* 11 px do canon sobe a 12: legenda mínima em 390 */
.ia-pagina h1, .ia-pagina h2, .ia-pagina h3 { text-wrap: balance; }
.ia-texto { font-size: var(--ia-corpo); line-height: 1.45; }
.ia-texto cite { font-style: italic; }
.ia-texto + .ia-texto { margin-top: 10px; }
/* caminho de arquivo e comando no texto (XII.4, XIII.7): sem terceira fonte; o comando se destaca pelo peso */
.ia-texto code, .ia-comofazer code { font-family: inherit; font-weight: 700; overflow-wrap: anywhere; }

/* --- a capa: vermelho cheio; régua no alto; o alto livre para o palco da capa (os quatro blocos de
       retângulos, do engenheiro); título grande embaixo à esquerda; o sumário como índice no pé --- */
.ia-capa {
  position: relative; isolation: isolate; overflow: clip;
  min-height: 100vh; min-height: 100svh;
  display: grid; grid-template-rows: auto minmax(120px, 1fr) auto auto;
  padding: 0 var(--gut) 20px;
}
/* O palco da capa: camada atrás do texto, do tamanho da capa inteira, fundo transparente (o vermelho é
   do .hero). Especificidade 0,4,0 de propósito: uma regra `.palco:not(.palco-global) { position:
   relative }` em palco.css (0,2,0, carregada depois) o poria em fluxo, com altura zero, e o canvas
   nunca apareceria (revisão visual da versão 1, achado 1). */
.hero.ia-capa > .palco.palco-capa {
  position: absolute; inset: 0; z-index: -1; opacity: 1;
  pointer-events: none; background: transparent; min-height: 0; height: auto;
  border: 0; border-radius: 0;
}
.hero.ia-capa > .palco.palco-capa > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ia-capa > .masthead { grid-row: 1; margin: 0; padding: 14px 0; border-bottom: 0; }
.ia-capa .masthead a { color: var(--farol-branco); border: 0; }
.ia-capa .masthead a:hover { text-decoration: underline; text-underline-offset: 4px; }
/* a linha 2 da grade fica vazia de propósito: é onde os quatro blocos de retângulos aparecem (palco da capa) */
.ia-capa__corpo {
  grid-row: 3; align-self: end;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 36ch);
  column-gap: var(--ia-calha); row-gap: 24px; align-items: end;
  padding: 40px 0 36px;
}
.ia-capa__num { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.ia-capa__marca { font-weight: 900; }   /* a marca no primeiro quadro: FAROL assina o capítulo (a régua da capa é IA explicada ———— título) */
.ia-capa h1 {
  font-size: clamp(54px, 9.4vw, 136px); line-height: .92; letter-spacing: -.015em;
  margin-left: -.04em; max-width: 11ch;
}
.ia-capa__abertura { font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.35; max-width: 36ch; padding-bottom: .3em; }

/* o sumário: o índice de um livro, em colunas que se leem de cima para baixo, com o romano alinhado */
.ia-sumario { grid-row: 4; border-top: 1px solid var(--farol-branco); padding-top: 14px; }
.ia-sumario ol {
  list-style: none;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, auto);
  column-gap: 32px; row-gap: 2px;
}
.ia-sumario a {
  display: grid; grid-template-columns: 2.6em minmax(0, 1fr); align-items: baseline;
  color: var(--farol-branco); border: 0;
  font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.9;
}
.ia-sumario a b { font-weight: 900; }
.ia-sumario a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- o cabeço: a régua presa no alto enquanto o miolo está na tela ---------------------------
   `IA explicada · [espinha] ———— [folio] Como uma IA usa um livro`. O folio fica vazio e o palco.js
   escreve nele o romano da cena corrente. A espinha são as três prateleiras da cena I em miniatura;
   a prateleira da cena corrente acende em vermelho, pela cascata (:has), sem JS próprio. */
.ia-miolo { position: relative; }
.ia-cabeco { position: sticky; top: 0; z-index: 10; background: var(--farol-branco); padding: 0 var(--gut); }
.ia-cabeco .masthead { min-height: var(--ia-cab); padding: 15px 0; }
.ia-cabeco a { border: 0; }
.ia-cabeco a:hover { color: var(--acento-ativo); }
.ia-folio:empty { display: none; }
.ia-espinha { display: none; }   /* só em 1440, onde o cabeço é preso (abaixo) */

/* --- o livro aberto: fichas na página esquerda, prancha na direita ----------------------- */
.ia-livro { position: relative; max-width: 1600px; margin: 0 auto; }
.ia-paginas .cena { padding: 0; }

/* o corte é corte: enquanto a cartela de uma cena está no ar (abaixo), o motor liga html[data-corte] e a prancha some por
   baixo dela, sem transição; volta de uma vez quando ela sai (o motor troca de cena com a cartela no ar, sem voo): descendo,
   no primeiro passo da cena nova, já desenhado, com o relógio dele recomeçando; subindo, no passo da cena de cima, parado.
   A regra vai também nos filhos porque a ficha de um trecho e o seletor de XII (palco.css) têm transição. Em 390 a
   prancha em si fica (é o fundo branco preso sob o qual as fichas passam) */
html[data-corte] .ia-livro > .palco-global > * { visibility: hidden; transition: none; }

/* --- o corte: uma cartela presa à tela entre as seções (FAROL-0414, FAROL-0423) ----------------------
   A mesma composição e as mesmas medidas do cap. 6 (site/agente/pagina.css) e do cap. 7. O header.ia-cena-cab é um espaço
   vazio na rolagem, de uma tela de altura; o palco.js põe o que ele tinha (o romano, o título e, quando houver, a frase) numa
   .ia-cartela presa à tela inteira, por cima do cabeço e da prancha (z 11 > 10), e a põe no ar (.ia-cena-cab--no-ar) de uma
   vez quando esse espaço chega à linha de leitura e a tira de uma vez quando ele a deixa: a cartela não rola, ela troca. Sem
   quadro intermediário e sem transição, igual com movimento reduzido. Fundo cheio alternando vermelho (II, IV, VI…) e preto
   (III, V…); a régua no alto; o romano muito grande sentado sobre o título, no terço de baixo, com o «de XIII» pequeno na
   linha de base dele. Sem frase de entrada (esta página ainda não tem), a cartela é romano, total e título: o bloco grande
   embaixo à esquerda, como a capa (o canon); a coluna da frase fica vazia, e a frase entra nela sozinha quando o texto a
   trouxer. Fora do ar a cartela fica transparente, não escondida, para o título da seção continuar para o leitor de tela. A
   seção I não tem corte: a capa é a abertura dela (.cena--sem-corte, cabeçalho só para leitor de tela). */
.ia-cena-cab { position: relative; height: 100vh; height: 100svh; }
.cena--sem-corte > .ia-cena-cab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ia-cartela {
  position: fixed; inset: 0; z-index: 11;
  opacity: 0; pointer-events: none; transition: none;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 36ch); grid-template-rows: auto minmax(0, 1fr) auto auto auto;   /* a 5ª linha: o termo, quando houver */
  column-gap: clamp(28px, 3vw, 48px); row-gap: 0; align-items: end;   /* a calha da cartela do cap. 7: as medidas são as mesmas nos capítulos */
  padding: 36px var(--gut) 44px;
  background: var(--tinta); color: var(--farol-branco);
}
.ia-cena-cab--no-ar > .ia-cartela { opacity: 1; pointer-events: auto; }
.cena:nth-child(even) .ia-cartela { background: var(--acento); }
/* a régua do canon no alto do corte (o palco.js a escreve: «IA explicada · Capítulo 10 ———— II de XIII») */
.ia-cena-regua { grid-column: 1 / -1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: 16px; }
.ia-cena-regua .rule { position: relative; flex: 1; height: 1px; background: var(--farol-branco); }
/* o único movimento da cartela: o fio da régua se preenche, em branco sobre a cor, com o avanço do espaço do corte pela linha
   de leitura (--ia-corte-p, que o palco.js escreve a cada quadro: 0 quando a cartela entra, 1 quando sai; subindo,
   esvazia). Guiado pela rolagem, não pelo tempo: sem transição, igual com movimento reduzido */
.ia-cena-regua .rule::after {
  content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 3px; background: var(--farol-branco);
  transform: scaleX(var(--ia-corte-p, 0)); transform-origin: 0 50%; transition: none;
}
/* o número: o romano e, na linha de base dele, à direita, o «de XIII» em label (o palco.js escreve os dois numa .ia-cena-numero) */
.ia-cena-numero { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: baseline; gap: 0; }
.ia-cena-num {
  grid-column: 1 / -1; grid-row: 3; display: block; color: inherit;
  font-weight: 900; font-size: clamp(160px, min(30vw, 46vh), 440px); font-size: clamp(160px, min(30vw, 46svh), 440px);
  line-height: .8; letter-spacing: -.04em; margin-left: -.04em;
}
.ia-cena-de { margin-left: 20px; white-space: nowrap; }
.ia-cartela .label { font-size: 12.5px; }   /* a régua e o «de XIII» com a medida da cartela do cap. 6 (lá o rótulo da página inteira é 12,5 px; aqui é 12); a 1440 o «de XIII» sobe a 15 px, abaixo */
.ia-cena-cab h2 {
  grid-column: 1; grid-row: 4; margin-top: 4px;
  font-size: clamp(44px, 5.6vw, 84px); line-height: .95; letter-spacing: -.015em; max-width: 12ch; margin-left: -.03em;
}
/* a frase de entrada de cada seção (FAROL-0414): o que vem, ao lado do título (1440) ou abaixo (390). Esta página ainda não a
   tem; quando o texto a trouxer (p.ia-cena-cab__frase no header), ela entra aqui sem mudar mais nada */
.ia-cena-cab__frase {
  grid-column: 2; grid-row: 4;
  font-size: clamp(18px, 1.6vw, 23px); font-weight: 500; line-height: 1.35; margin: 0; padding-bottom: .25em;
}
.ia-nowrap { white-space: nowrap; }   /* «e-mail» inteiro numa linha na frase da cartela (o palco.js embrulha a palavra) */
.ia-cena-termo { margin-top: 8px; color: var(--tinta); font-size: 15px; font-weight: 700; line-height: 1.4; }  /* 15 px e caixa baixa: é frase, não rótulo */
/* na cartela, o termo (III a VIII: «O que a IA já sabe», «O livro inteiro»…) é o subtítulo da seção: abaixo do título, em branco
   sobre a cor (em tinta ele sumia no fundo preto), numa linha própria da grade; a coluna da frase continua livre para ela */
.ia-cartela .ia-cena-termo { grid-column: 1; grid-row: 5; margin: 14px 0 0; color: inherit; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; }

/* a ficha de catálogo: número de chamada no canto, assunto à direita, um fio, o texto */
.passo {
  position: relative; background: var(--farol-branco);
  border: 1px solid var(--linha); border-radius: var(--raio-sm);
  padding: 12px 22px 20px;
}
.passo.passo--ativo { border-color: var(--tinta); }   /* o palco.js marca o passo ativo: a ficha ativa ganha o fio preto */
.ia-ficha-cab {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--linha);
  font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2;
}
.ia-ficha-num { color: var(--acento); }
.ia-ficha-de { color: var(--tinta); text-align: right; }

/* termo técnico: o nome em português com peso; o original em pequeno, caixa alta, nunca abaixo de 12 px */
.termo { font-weight: 700; }
.termo small {
  font-size: max(12px, .76em); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  margin-left: .3em; white-space: nowrap;
}
.termo small.literal { text-transform: none; letter-spacing: .02em; }   /* SKILL.md e Doc-to-LoRA: a grafia é parte do nome */

/* número com fonte: sobrescrito pequeno em vermelho, que leva ao fecho */
.nota {
  vertical-align: super; line-height: 0; margin-left: 2px;
  font-size: 12px; font-weight: 700; color: var(--acento); border: 0;
}
.nota + .nota { margin-left: 5px; }
.nota:hover { color: var(--acento-ativo); }

/* a ficha de maturidade (o desenho do capítulo 11): a linha, a marca, o rótulo e a leitura. Laboratório em
   contorno tracejado, uso inicial em contorno cheio, corrente em preto cheio. Aqui a marca fica no começo
   da linha: este capítulo não mede a primeira menção. */
.maturidade { position: relative; margin-top: 14px; padding-top: 24px; font-size: 15px; line-height: 1.45; }
.maturidade::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--tinta); }
.maturidade::after {
  content: ''; position: absolute; top: 1px; left: 0; width: 13px; height: 13px;
  background: var(--farol-branco); border: 1px solid var(--tinta); border-radius: 1px;
}
.maturidade[data-maturidade="laboratorio"]::after { border-style: dashed; }
.maturidade[data-maturidade="corrente"]::after { background: var(--tinta); }
.ia-maturidade__rotulo {
  color: var(--tinta); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  margin-right: .5em;
}

/* o "De onde veio" do cartão (texto humano, FAROL-0432): a mesma regra de site/comum-agentes/pagina.css */
.origem { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--linha); font-size: 15px; line-height: 1.45; }
.ia-origem__rotulo {
  color: var(--acento); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  margin-right: .5em;
}

/* a regra da cena XII.1: quatro linhas, na ordem da decisão, cada uma com o seu fio */
.ia-regra { list-style: none; margin: 12px 0 10px; border-top: 1px solid var(--linha); }
.ia-regra li { padding: 7px 0; border-bottom: 1px solid var(--linha); font-size: 16px; line-height: 1.4; }
.ia-regra li b { font-weight: 800; }

/* "como fazer" (cena XII.4): a receita de cada jeito, em três linhas, na coluna de leitura, logo abaixo da
   ficha do seletor; a prancha fica no seletor enquanto se lê */
.ia-comofazer { margin: 28px 0 0; }
.ia-comofazer > div { border-top: 1px solid var(--tinta); padding: 10px 0 14px; }
.ia-comofazer > div:last-child { border-bottom: 1px solid var(--tinta); }
.ia-comofazer dt { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.ia-comofazer dd { font-size: 15px; line-height: 1.5; }

/* 1440: as duas páginas lado a lado; a prancha sangra até a borda direita */
@media (min-width: 960px) {
  .ia-livro {
    display: grid; align-items: start;
    grid-template-columns: var(--gut) minmax(300px, var(--ia-coluna)) var(--ia-calha) minmax(0, 1fr);
  }
  .ia-livro > .palco-global {
    grid-column: 4 / -1; grid-row: 1;
    position: sticky; top: var(--ia-cab);
    height: calc(100vh - var(--ia-cab)); height: calc(100svh - var(--ia-cab));
  }
  .ia-paginas { grid-column: 2; grid-row: 1; padding: 10vh 0 36vh; }
  /* o ritmo em volta do corte (como nos caps. 6 e 7): o último passo da cena fica na prancha tanto quanto os outros (46vh
     entre a ficha e o espaço do corte, como entre duas fichas) antes de a cartela entrar; quando ela sai, a primeira ficha
     da cena nova já está à vista, 16vh abaixo da linha de leitura, com a prancha de volta no passo dela */
  .ia-cena-cab { margin-bottom: 16vh; }
  .cena + .cena { margin-top: 46vh; }
  .passo + .passo { margin-top: 46vh; }
  .cena { scroll-margin-top: 40vh; }   /* a âncora do sumário pousa com a cartela no ar (o espaço dela a 40vh, sobre a linha) */
  /* a seção I começa logo depois da capa, sem corte: o cabeçalho dela (só para leitor de tela) ocupava 58 px e 8vh, que
     ficam como recuo, para a primeira ficha continuar onde estava (a descida da capa para I.1 foi medida assim) */
  .ia-paginas .cena--sem-corte { padding-top: calc(8vh + 58px); scroll-margin-top: calc(var(--ia-cab) + 24px); }
  html[data-corte] .ia-livro > .palco-global { visibility: hidden; }
  .ia-cartela .ia-cena-de { font-size: 15px; }
  .ia-cena-regua .rule::after { height: 4px; top: -1.5px; }
  .ia-comofazer { max-width: var(--ia-coluna); }

  /* a espinha no cabeço: três prateleiras pequenas, a corrente em vermelho */
  .ia-espinha { display: inline-flex; gap: 12px; margin-left: 4px; position: relative; top: -3px; }   /* -3 px: a linha de base das prateleiras na da régua */
  .ia-espinha i {
    display: block; font-style: normal; padding-top: 4px; border-top: 2px solid var(--linha);
    color: var(--tinta); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.15;
  }
  .ia-espinha i.ia-espinha--acesa { color: var(--acento); border-top-color: var(--acento); }
  /* qual prateleira acende, por cena (e, na cena I, por passo): a cascata lê o passo--ativo que o palco.js põe */
  .ia-miolo:has(.passo--ativo[data-passo="niveis.2"]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo="niveis.5"]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="fio."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="pesos."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="mesa."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="fichario."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="rede."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="guia."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="estante."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="teste."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="custo."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="qual."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo^="como."]) [data-nivel="metodo"],
  .ia-miolo:has(.passo--ativo[data-passo="niveis.3"]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo="niveis.5"]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.1"]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.2"]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo^="teste."]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo^="qual."]) [data-nivel="teoria"],
  .ia-miolo:has(.passo--ativo[data-passo="niveis.4"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo="niveis.5"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.3"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.4"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.5"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo="outros.6"]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo^="teste."]) [data-nivel="ficcao"],
  .ia-miolo:has(.passo--ativo[data-passo^="qual."]) [data-nivel="ficcao"] {
    color: var(--acento); border-top-color: var(--acento);
  }
}
@media (min-width: 960px) and (max-width: 1199px) {
  .ia-sumario ol { grid-template-rows: repeat(7, auto); }
}

/* 390: a prancha no alto (60% da altura), as fichas passam por baixo dela */
@media (max-width: 959px) {
  :root { --ia-corpo: 16px; }
  .ia-cabeco { position: static; }
  .ia-livro > .palco-global {
    position: sticky; top: 0; z-index: 2;
    height: 60vh; height: 60svh;
    background: var(--farol-branco); border-bottom: 1px solid var(--linha);
  }
  /* a página das fichas não cria contexto de empilhamento (sem z-index): as fichas passam sob a prancha (z 2) e a cartela
     (z 11) fica por cima da prancha; com o z-index: 1 de antes, a cartela ficaria presa atrás dela (a lição do cap. 6) */
  .ia-paginas { position: relative; padding: 20px var(--gut) 24vh; }
  .ia-cena-cab { margin-bottom: 8vh; margin-bottom: 8svh; }   /* quando a cartela sai, a primeira ficha já aparece sob a prancha */
  /* o vão antes do corte, como no cap. 6: com 20svh a tira sob a prancha fica sem ficha por pouco antes de cada cartela, e o
     palco.js fecha o resto (a cartela entra quando a última ficha deixa a área de leitura, sem esperar o espaço do corte) */
  .cena + .cena { margin-top: 20vh; margin-top: 20svh; }
  .passo + .passo { margin-top: 34vh; margin-top: 34svh; }
  .passo { padding: 10px 16px 16px; }
  .cena { scroll-margin-top: 70vh; scroll-margin-top: 70svh; }   /* a âncora pousa com a cartela no ar */
  /* a seção I sem corte: o recuo do cabeçalho que ela tinha (71 px e 10vh), para a primeira ficha continuar onde estava */
  .ia-paginas .cena--sem-corte { padding-top: calc(10vh + 71px); scroll-margin-top: calc(60vh + 12px); scroll-margin-top: calc(60svh + 12px); }
  /* a cartela a 390: uma coluna; o romano a 46vw (179 px a 390) e o «de XIII» ao lado cabem na largura com o XIII (o mais
     largo, abaixo); a frase, quando houver, abaixo do título, numa quinta linha */
  .ia-cartela { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; row-gap: 0; padding: 28px var(--gut) 36px; }
  .ia-cartela .ia-cena-termo { margin-top: 10px; font-size: 18px; }
  .ia-cena-num { font-size: clamp(132px, 46vw, 200px); font-size: clamp(132px, min(46vw, 34svh), 200px); }
  .ia-cena-de { margin-left: 12px; }
  .ia-cena-cab h2 { grid-column: 1; grid-row: 4; margin-top: 6px; font-size: clamp(40px, 11vw, 56px); max-width: none; }
  .ia-cena-cab__frase { grid-column: 1; grid-row: 6; margin-top: 16px; font-size: 18px; }   /* abaixo do termo, quando os dois existirem */
  /* a régua com título longo: o assunto quebra em duas linhas à direita, e a linha continua visível */
  .ia-capa .masthead > :last-child, .ia-cabeco .masthead > :last-child, .ia-fecho .masthead > :last-child { max-width: 48%; text-align: right; }
  .ia-capa { grid-template-rows: auto minmax(140px, 1fr) auto auto; }
  .ia-capa__corpo { grid-template-columns: minmax(0, 1fr); padding: 32px 0 24px; row-gap: 18px; }
  .ia-capa h1 { font-size: clamp(46px, 14vw, 96px); max-width: none; }
  .ia-sumario ol { grid-template-rows: repeat(7, auto); column-gap: 16px; }
  .ia-sumario a { grid-template-columns: 2.4em minmax(0, 1fr); line-height: 1.5; padding: 3px 0; }
  .ia-regra li { font-size: 15px; }
}
@media (max-width: 479px) {
  .ia-sumario ol { grid-template-rows: repeat(13, auto); }   /* numa coluna só: os nomes longos não cabem em duas */
}

/* --- o fecho: preto cheio; anterior e próximo; as fontes numeradas; FAROL ------------------- */
.ia-fecho .masthead { margin-bottom: 40px; }
.ia-fecho a { color: var(--farol-branco); border-bottom: 1px solid var(--farol-branco); }
.ia-fecho a:hover { color: var(--farol-cinza); border-bottom-color: var(--farol-cinza); }

.ia-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 72px; }
.ia-nav a { display: block; border: 0; border-top: 1px solid var(--farol-branco); padding-top: 14px; }
.ia-nav a:hover { color: var(--farol-branco); }
.ia-nav a:hover .ia-nav__titulo { text-decoration: underline; text-underline-offset: 4px; }
.ia-nav__rotulo { display: block; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.ia-nav__num { font-weight: 900; font-size: clamp(36px, 4vw, 56px); line-height: 1; margin-right: 12px; vertical-align: -2px; }
.ia-nav__titulo { font-weight: 800; font-size: clamp(20px, 2vw, 28px); line-height: 1.1; }
.ia-nav__prox { text-align: right; }

.ia-fecho__rotulo { margin-bottom: 16px; }
.ia-fecho__aviso { font-size: 15px; line-height: 1.5; max-width: 70ch; margin-bottom: 28px; }
.ia-fecho__aviso + .ia-fecho__aviso { margin-top: -20px; }
.ia-fontes { columns: 2; column-gap: 48px; font-size: 15px; line-height: 1.5; padding-left: 2.2em; }
.ia-fontes li { margin-bottom: 8px; scroll-margin-top: 24px; break-inside: avoid; }
.ia-fontes li::marker { font-weight: 800; }
.ia-fontes li:target::marker { color: var(--acento); }
.ia-fontes cite { font-style: italic; }
.ia-fontes a { overflow-wrap: anywhere; }
.ia-fecho__nota { margin-top: 36px; font-size: 15px; line-height: 1.5; max-width: 70ch; }
.ia-fecho .sig { margin-top: 48px; }
.ia-fecho__volta { margin-top: 20px; }
.ia-fecho__volta a { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 959px) {
  .ia-fontes { columns: 1; }
  .ia-nav { gap: 16px; }
  .ia-nav__num { margin-right: 8px; }
}
@media (max-width: 479px) {
  .ia-nav { grid-template-columns: minmax(0, 1fr); }
  .ia-nav__prox { text-align: left; }
}

/* --- movimento reduzido: esta folha não anima nada; a rolagem suave já é desligada em farol.css */