/* =====================================================================
   LUMENVERSO — a casa. Folha única, sem JavaScript.

   ⚠️ 18/09/2026: a LOGO de verdade da casa entrou no lugar do letreiro em
   Anton, e com ela a paleta mudou de origem. O ouro agora é o **da logo**,
   `#D4A843`, medido no próprio arquivo — as peças antigas (deck, story,
   impressa) usam `#F2A93B`, mais claro. A página que carrega a marca tem de
   concordar com ela.

   ⚠️ Esta NÃO é a paleta do livro do LUMEN — o motor de impressão usa creme
   #FCFAF5, marinho #3B597D e ciano #1E96AF, escritos à mão em CMYK. Aqui é a
   casa falando, não a linha.

   A convenção das duas linhas vem do deck e da peça de uma página:
   OURO = LUMEN, CIANO = PHAROS.

   Contraste medido sobre o fundo #262430: creme 13,3:1 · ouro 6,9:1 ·
   ciano 8,5:1 · mudo 5,2:1. Todos passam em AA para texto normal.
   ===================================================================== */

@font-face{
  font-family:'Titan One';                /* SÓ os nomes dos dois selos. É a
     família da logo — redonda e pesada. O Anton do deck era grotesca
     condensada, de outro gênero, e saiu do site junto com o letreiro.
     O arquivo é um subconjunto: letra nova entra em `prepara_imagens.py`. */
  src:url('/fonts/titanone.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Nunito;
  src:url('/fonts/nunito.woff2') format('woff2-variations');
  font-weight:200 900;font-style:normal;font-display:swap;
}

:root{
  --noite:#262430;
  --barra:#1C1B24;
  --cartao:#343141;
  --creme:#F5F0E4;
  --ouro:#D4A843;
  --ciano:#35D4E0;
  --mudo:#9A94A8;
  --linha:#484458;
  --tinta-ouro:#241F16;                  /* texto sobre o ouro cheio */
  --tinta-ciano:#11282B;
  /* A coluna CRESCE em tela ampla, até 1440px. Sem isto, um monitor de 1920
     mostrava 370px de fundo vazio de cada lado e a arte ficava do mesmo tamanho
     que num notebook — a tela grande não entregava nada por ser grande.
     É o mesmo teto do site do LUMEN, adotado lá em 12/09. `clamp` em vez de
     media query porque o crescimento é contínuo: 1180 até ~1341px de tela,
     depois 88vw, e para em 1440. Em tela estreita o mínimo não faz mal — é
     `max-width`, então o elemento nunca passa da largura do pai. */
  --env:clamp(1180px,88vw,1440px);
  color-scheme:dark;
  scroll-behavior:smooth;
  scroll-padding-top:86px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noite);color:var(--creme);
  font:400 17px/1.62 Nunito,'Segoe UI',system-ui,sans-serif;
  letter-spacing:.005em;
}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0;font-size:inherit;font-weight:inherit}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,summary:focus-visible,.pula:focus{
  outline:3px solid var(--ouro);outline-offset:3px;border-radius:2px;
}
::selection{background:var(--ouro);color:var(--tinta-ouro)}

.env{max-width:var(--env);margin:0 auto;padding:0 clamp(20px,5vw,48px)}

.pula{
  position:fixed;left:16px;top:-80px;z-index:99;
  background:var(--ouro);color:var(--tinta-ouro);padding:12px 18px;font-weight:800;
}
.pula:focus{top:12px}

/* ------------------------------------------------------------- a barra */
.barra{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  min-height:70px;padding:10px clamp(20px,5vw,48px);
  background:var(--barra);border-bottom:1px solid var(--linha);
}
.marca{display:block;flex:none}
.marca img{height:26px;width:auto}
.barra nav{display:flex;flex-wrap:wrap;gap:6px clamp(14px,2.4vw,30px);justify-content:flex-end}
/* ⚠️ `inline-flex` AQUI NÃO: dentro de um flex container cada pedaço de texto
   vira um item, e o espaço entre itens é descartado — "As duas linhas" saía
   "Asduaslinhas" por causa do <span> que some no celular. `inline-block` com
   padding dá o mesmo alvo de 44px para o dedo e mantém o texto como texto. */
.barra nav a{
  display:inline-block;padding:11px 0;line-height:22px;
  font-size:14.5px;font-weight:700;color:var(--mudo);
  border-bottom:2px solid transparent;
}
.barra nav a:hover{color:var(--creme);border-bottom-color:var(--ouro)}

/* ----------------------------------------------------------- a abertura */
.capa{
  padding:clamp(70px,11vw,132px) 0 clamp(56px,8vw,96px);
  /* o clarão de cima é o do próprio Lumen: quente, e some antes do meio */
  background:radial-gradient(860px 460px at 50% -8%,rgba(212,168,67,.16),transparent 72%);
  border-bottom:1px solid var(--linha);
}
.chapeu{
  font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.24em;
  color:var(--ouro);
}
.capa h1{
  margin-top:22px;
  font-size:clamp(44px,7.4vw,86px);font-weight:900;line-height:1.02;
  letter-spacing:-.025em;
}
.capa .apoio{
  margin-top:24px;max-width:44ch;
  font-size:clamp(21px,2.5vw,30px);line-height:1.34;font-weight:600;color:var(--creme);
}
/* cada metade da frase é uma caixa: a quebra procura a costura antes de cortar
   dentro de uma delas */
.capa .apoio span{display:inline-block}
/* ✍️ A abertura NÃO nomeia a autora. Pedido dela em 18/09: o nome não fica em
   destaque no topo. Ele aparece na seção "A casa" e no rodapé — o lugar que
   ele tem num livro impresso. */
.capa .quem{
  margin-top:30px;padding-top:26px;max-width:58ch;
  border-top:1px solid var(--linha);
  color:var(--mudo);font-size:17px;
}
/* As duas contagens saem do parágrafo e viram par rótulo/conteúdo: quem passa
   o olho lê "duas linhas" e "três ambientes" sem ler a frase inteira. É a
   mesma forma da ficha das portas, um degrau maior.
   ⚠️ O travessão é `::before` do <dd>, e não texto entre as tags: num
   container flex, texto solto entre elementos vira item anônimo e o espaço ao
   redor dele é descartado — a mesma pedra que já colou "Asduaslinhas" no menu. */
.resumo{margin-top:20px;display:grid;gap:9px}
.resumo>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.resumo dt{font-size:17px;font-weight:800;color:var(--creme)}
.resumo dd{font-size:17px;color:var(--mudo)}
.resumo dd::before{content:"— "}

/* ------------------------------------------ a página de endereço errado
   Usa as mesmas peças da abertura (chapéu, h1, apoio, quem) — quem erra o
   endereço não precisa de um desenho novo, precisa de uma saída. O `min-height`
   empurra o rodapé para baixo da dobra em tela alta, para a página não ficar
   um bloco solto no alto. */
.erro{
  display:flex;align-items:center;
  min-height:calc(100svh - 240px);
  padding:clamp(56px,9vw,96px) 0;
  background:radial-gradient(760px 420px at 50% -10%,rgba(212,168,67,.14),transparent 72%);
}
.erro h1{
  margin-top:20px;
  font-size:clamp(36px,5.6vw,64px);font-weight:900;line-height:1.05;letter-spacing:-.02em;
}
.erro .apoio{
  margin-top:20px;max-width:44ch;
  font-size:clamp(19px,2.2vw,26px);line-height:1.34;font-weight:600;
}
.erro .apoio span{display:inline-block}
.erro .quem{
  margin-top:26px;padding-top:24px;max-width:56ch;
  border-top:1px solid var(--linha);color:var(--mudo);
}
.erro .porta{margin-top:30px;color:var(--ouro)}
.erro .porta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta-ouro)}
.erro+.rodape{padding-top:34px}
.erro+.rodape .base a{color:var(--creme);border-bottom:1px solid #F5F0E440}
.erro+.rodape .base a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}

/* --------------------------------------------- cabeça comum das seções */
section>.env>.rotulo{
  font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.2em;
  color:var(--mudo);
}
section h2{
  margin-top:14px;
  font-size:clamp(30px,4.2vw,46px);font-weight:900;line-height:1.1;letter-spacing:-.02em;
}
section .entrada{margin-top:16px;max-width:52ch;color:var(--mudo);font-size:18px}

.linhas,.ambientes,.casa{padding:clamp(64px,9vw,112px) 0}
.ambientes{background:#2B2836;border-block:1px solid var(--linha)}

/* ===================================================== AS DUAS PORTAS ==
   Cada selo é um <details>: a capa é o <summary> (arte, nome, para quem é e
   o botão Abrir) e o miolo é o painel. Nativo — abre no toque e no teclado,
   é anunciado como botão, e o atributo `name` fecha a outra sozinho.

   ⚠️ AS DUAS SÃO IRMÃS: mesma forma, mesmo tamanho, mesma frase, nenhuma
   aberta por padrão. A tela não pode sugerir qual é a certa — é a regra 7 da
   voz do jogo, e vale aqui pelo mesmo motivo.
   ⚠️ `align-items:start` é o que impede a porta fechada de esticar até a
   altura da aberta. Sem isso a fechada vira uma coluna vazia gigante. */
.portas{
  margin-top:clamp(34px,5vw,54px);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,32px);
  align-items:start;
}
.selo{
  background:var(--cartao);border:1px solid var(--linha);border-radius:14px;
  overflow:hidden;transition:border-color .18s ease;
}
.selo summary{
  display:block;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.selo summary::-webkit-details-marker{display:none}
.selo .arte{
  width:100%;aspect-ratio:1.792;object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
  filter:saturate(.88);
}
.selo summary:hover .arte{transform:scale(1.03);filter:saturate(1)}
.selo[open] .arte{filter:saturate(1)}
.frente{display:block;padding:clamp(22px,2.6vw,30px)}
.frente>span{display:block}
.logo-linha{
  font:400 clamp(28px,3.4vw,38px)/1 'Titan One',Impact,sans-serif;
}
.selo-lumen .logo-linha{color:var(--ouro)}
.selo-pharos .logo-linha{color:var(--ciano)}
.latim{margin-top:10px;color:var(--mudo);font-size:14.5px}
.publico{margin-top:16px;font-size:17.5px;font-weight:800;line-height:1.4}

/* O botão Abrir/Fechar. O rótulo é `content`, e muda com o estado do
   <details> — quem lê com leitor de tela já ouve "expandido" pelo próprio
   elemento; isto é para quem vê. */
/* ⚠️ `.frente>span{display:block}` tem especificidade maior que `.abrir`
   sozinha (0,1,1 contra 0,1,0) e transformava a pílula em bloco de largura
   inteira — um botão de 659px de largura. O seletor abaixo é 0,2,0 e devolve
   o inline-flex. Mesma pedra do `.lumen p{margin:0}` que já comeu o respiro do
   rodapé do site do LUMEN: em folha própria, escopar quem perde. */
.frente>.abrir{display:inline-flex}
.abrir{
  display:inline-flex;align-items:center;gap:12px;
  margin-top:22px;min-height:46px;padding:0 20px;
  border:2px solid currentColor;border-radius:999px;
  font-weight:800;font-size:15px;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.abrir::before{content:"Abrir"}
.selo[open] .abrir::before{content:"Fechar"}
.seta{
  width:9px;height:9px;flex:none;
  border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .22s ease;
}
.selo[open] .seta{transform:rotate(-135deg) translate(-1px,-1px)}
.selo-lumen .abrir{color:var(--ouro)}
.selo-pharos .abrir{color:var(--ciano)}
.selo-lumen summary:hover .abrir{background:var(--ouro);border-color:var(--ouro);color:var(--tinta-ouro)}
.selo-pharos summary:hover .abrir{background:var(--ciano);border-color:var(--ciano);color:var(--tinta-ciano)}
.selo-lumen:hover,.selo-lumen[open]{border-color:var(--ouro)}
.selo-pharos:hover,.selo-pharos[open]{border-color:var(--ciano)}

.painel{padding:0 clamp(22px,2.6vw,30px) clamp(24px,2.8vw,32px)}
.selo[open] .painel{animation:abre .26s ease both}
@keyframes abre{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.painel .texto{color:#D8D2E0;font-size:16.5px}

/* A ficha é o que separa uma porta de um cartaz: quem chega aqui quer saber
   o que EXISTE hoje e o que ainda não. Por isso "Em produção" é uma linha da
   tabela, e não uma frase escondida no meio do parágrafo. */
.ficha{margin:22px 0 26px;border-top:1px solid var(--linha)}
.ficha>div{
  display:grid;grid-template-columns:104px 1fr;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--linha);
}
.ficha dt{
  font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  color:var(--mudo);padding-top:3px;
}
.ficha dd{font-size:15.5px;line-height:1.45}

/* O botão que sai da casa — é para ele que a página inteira existe. */
.porta{
  display:inline-flex;align-items:center;gap:10px;
  min-height:48px;padding:0 22px;
  border:2px solid currentColor;border-radius:999px;
  font-weight:800;font-size:16px;letter-spacing:.01em;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease;
}
.porta span{transition:transform .16s ease}
.porta:hover span{transform:translateX(4px)}
.selo-lumen .porta{color:var(--ouro)}
.selo-pharos .porta{color:var(--ciano)}
.selo-lumen .porta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta-ouro)}
.selo-pharos .porta:hover{background:var(--ciano);border-color:var(--ciano);color:var(--tinta-ciano)}

/* ------------------------------------------------- os três ambientes */
.grade-ambientes{
  margin-top:clamp(34px,5vw,54px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px);
}
.ambiente{display:flex;flex-direction:column}
/* ⚠️ As três miniaturas trazem sombra embutida que cobre a folha inteira (o
   alfa não chega a zero nas bordas). Sobre este fundo escuro isso é invisível
   — foi para um fundo escuro que elas foram desenhadas. Se um dia esta seção
   ficar clara, é preciso recortar o alfa, como faz o `monta_stories.py`. */
.quadro{
  display:flex;align-items:flex-end;justify-content:center;
  /* cresce um pouco na tela ampla. Teto em 240px porque a menor das três artes
     tem 397px de altura nativa — acima disso alguma delas ampliaria. */
  height:clamp(190px,14vw,240px);margin-bottom:22px;
}
.quadro img{max-height:100%;width:auto}
.ambiente h3{font-size:23px;font-weight:900;letter-spacing:-.01em}
.ambiente p{margin-top:12px;color:#D0CAD9;font-size:16.5px}
.ambiente .porta{
  align-self:flex-start;margin-top:20px;min-height:44px;padding:0 18px;
  font-size:15px;color:var(--ouro);
}
.ambiente .porta:hover{background:var(--ouro);border-color:var(--ouro);color:var(--tinta-ouro)}

/* Os dois canais no meio da frase. Cada um carrega a cor do seu selo — é a
   mesma convenção das portas, e é o que diz de qual linha é cada canal sem
   precisar de mais uma palavra. */
.canal{font-weight:800;border-bottom:2px solid currentColor;white-space:nowrap}
.canal-lumen{color:var(--ouro)}
.canal-pharos{color:var(--ciano)}
.canal:hover{border-bottom-color:transparent}

/* ------------------------------------------------------------- a casa */
.casa-grade{
  margin-top:clamp(30px,4vw,46px);
  display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;
}
.casa-grade p+p{margin-top:18px}
.casa .nota{color:var(--mudo);font-size:16px}
.verso{
  padding:28px 30px;background:var(--cartao);
  border:1px solid var(--linha);border-left:3px solid var(--ouro);border-radius:12px;
}
.verso blockquote{font-size:19px;line-height:1.5;font-weight:600}
.verso figcaption{
  margin-top:14px;font-size:12px;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ouro);
}

/* ----------------------------------------------------------- o rodapé */
.rodape{background:var(--barra);border-top:1px solid var(--linha);padding:clamp(48px,7vw,72px) 0 34px}
/* Quatro colunas: a marca, as duas caixas, os dois sites e os dois perfis.
   A do e-mail é a mais larga porque o endereço é o que não pode quebrar. */
.rodape-grade{
  display:grid;grid-template-columns:1.15fr 1.05fr .8fr .95fr;gap:clamp(24px,3vw,40px);
  padding-bottom:30px;border-bottom:1px solid var(--linha);
}
.marca-pe{height:32px;width:auto}
.rodape .chapeu{margin-top:14px;color:var(--mudo);font-size:11.5px}
.rodape .rotulo{
  font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ouro);margin-bottom:12px;
}
.contatos p,.enderecos p{font-size:15.5px;line-height:1.5;margin-top:8px}
/* ⚠️ Alvo de toque: nus, estes links tinham 22px de altura — abaixo do mínimo
   de 24px que a norma pede para alvo pequeno. São links EMPILHADOS num rodapé,
   dedo em celular, então vale o padding; o de dentro de frase (os canais) é
   isento por ser inline num parágrafo. */
.contatos a,.enderecos a{display:inline-block;padding:4px 0 2px}
.contatos span{
  display:block;font-size:11px;font-weight:900;letter-spacing:.16em;color:var(--mudo);
}
.contatos a,.enderecos a{border-bottom:1px solid #F5F0E440}
.contatos a:hover,.enderecos a:hover{color:var(--ouro);border-bottom-color:var(--ouro)}
.base{display:grid;gap:10px;padding-top:24px;color:var(--mudo);font-size:12.5px;line-height:1.6}
.base span:first-child{color:#C6C0D2;font-size:13px}

/* --------------------------------------------- tablet deitado e notebook
   ⚠️ O corte era 1000px e deixava o iPad deitado (1024) de fora: o rodapé
   espremia QUATRO colunas em 928px e a dos sites ficava com 166px. 1100 traz
   essa faixa para o desenho de três colunas, com 309px cada. */
@media(max-width:1100px){
  .casa-grade{grid-template-columns:1fr}
  /* A marca ocupa a linha inteira e as TRÊS listas ficam lado a lado. Em duas
     colunas a terceira sobrava sozinha numa linha só dela. */
  .rodape-grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px}
  .rodape-grade>:first-child{grid-column:1/-1}
}
@media(max-width:860px){
  .portas{grid-template-columns:1fr}
  .grade-ambientes{grid-template-columns:1fr;gap:38px}
  .ambiente{
    display:grid;grid-template-columns:120px 1fr;column-gap:24px;align-items:start;
  }
  .quadro{grid-row:span 3;margin-bottom:0;height:auto;max-height:230px;align-items:flex-start}
  .ambiente .porta{grid-column:2}
}

/* ------------------------------------------------------- telas estreitas */
@media(max-width:620px){
  body{font-size:16.5px}
  :root{scroll-padding-top:108px}
  .barra{flex-wrap:wrap;gap:0;min-height:0;padding-bottom:0}
  .marca img{height:24px}
  .barra nav{
    width:100%;justify-content:flex-start;gap:0 20px;
    border-top:1px solid var(--linha);margin-top:6px;
  }
  .barra nav a{padding:10px 0;font-size:13.5px}
  /* ⚠️ O menu tem de caber em UMA linha no celular: a barra é grudada, e uma
     segunda linha come 42px do alto de toda a página. A saída é encurtar o
     rótulo, não espremer o alvo do dedo — "duas" e "três" saem, e o que sobra
     ("As linhas", "Os ambientes") continua dizendo a mesma coisa. */
  .so-largo{display:none}
  .capa .apoio{max-width:none}
  /* No celular "Três ambientes — o livro, o game e os vídeos" não cabe numa
     linha e "Duas linhas — crianças e adolescentes" cabe: um par ficava inteiro
     e o outro quebrava no travessão. Duas contagens irmãs têm de ter a mesma
     forma, então aqui as duas empilham — e o travessão sai, porque travessão
     no começo da linha é ruído. */
  .resumo{gap:15px}
  .resumo>div{display:block}
  .resumo dd::before{content:none}
  .ficha>div{grid-template-columns:92px 1fr;gap:12px}
  .rodape-grade{grid-template-columns:1fr;gap:26px}
  .ambiente{grid-template-columns:96px 1fr;column-gap:18px}
}

/* --------------------------------------------------- celular pequeno
   Abaixo de ~375px os quatro rótulos do menu não cabem numa linha e a barra
   grudada passava de 86 para 130px de altura — 44px comidos do alto de toda
   página. Aperta-se o vão e o corpo, nunca o alvo do dedo. */
@media(max-width:400px){
  .barra nav{gap:0 13px}
  .barra nav a{font-size:13px}
  .marca img{height:22px}
}

@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}