/* Poesia Mato-grossense — janela do casario ao anoitecer */
:root {
  --noite: #26375b;
  --noite-luz: #32476f;
  --noite-2: #1d2b4a;
  --anil: #1a3661;
  --anil-claro: #2d5da1;
  --cal: #e5dacf;
  --cal-forte: #f3ece2;
  --cal-sombra: #d5c8b6;
  --pedra-tinta: #15203a;
  --lampiao: #f6d36b;
  --lampiao-forte: #fbe190;
  --parede: #26375b;
  --tinta-ouro: #1d2846;      /* tinta sobre o dourado: igual nos dois temas */
  --ouro-texto: #f6d36b;      /* dourado usado como texto ou contorno fino */
  --linha-rgb: 229 218 207;   /* linhas finas e véus sobre o fundo */
  /* parede do acervo à noite: cal na sombra azul, só as janelas acesas brilham */
  --muro-topo: rgb(33 46 76 / .9); --muro-base: rgb(24 35 60 / .93); --muro-sombra: rgb(5 8 18 / .55);
  --muro-tinta: #ece4d6; --muro-tinta-2: #b8b1a6; --muro-linha-rgb: 229 218 207;
  --aba-fundo: rgb(255 255 255 / .04); --aba-fundo-hover: rgb(255 255 255 / .09);
  --aba-ativa-fundo: #f6d36b; --aba-ativa-tinta: #1d2846;
  --busca-fundo: rgb(8 14 30 / .55); --busca-borda: rgb(229 218 207 / .3);
  --x0: 0px;

  --face: 'Vend Sans', ui-sans-serif, system-ui, sans-serif;
  --face-legivel: 'Atkinson Hyperlegible Next', 'Vend Sans', ui-sans-serif, sans-serif;

  /* unidade da janela: o desenho foi feito para 380px de largura */
  --u: calc(100vw / 380);
  --verga-h: calc(72 * var(--u));
  --peitoril-h: calc(87 * var(--u));
  --veneziana-w: calc(31.5 * var(--u));

  --verso-tam: calc(20.4 * var(--u));
  --verso-entre: 1.45;
  --ease-saida: cubic-bezier(.23, 1, .32, 1);
  --ease-mover: cubic-bezier(.77, 0, .175, 1);
  --ease-gaveta: cubic-bezier(.32, .72, 0, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--parede);
  color: var(--cal);
  font-family: var(--face);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lampiao); color: var(--tinta-ouro); }
:focus-visible { outline: 3px solid var(--lampiao-forte); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; }
img { display: block; }
.plate { width: 100%; height: 100%; object-fit: cover; }

.pular {
  position: fixed; z-index: 50; left: 50%; top: 8px; translate: -50% -200%;
  background: var(--lampiao); color: var(--tinta-ouro); padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: translate .3s var(--ease-saida);
}
.pular:focus-visible { translate: -50% 0; }

/* ---------- moldura fixa da janela ---------- */
.verga {
  background-color: #d6c9b7;
  position: fixed; z-index: 20; inset: 0 0 auto 0; height: calc(65.5 * var(--u));
}
.verga > .plate { position: absolute; inset: 0; }
.placa {
  --c: calc(5 * var(--u));
  position: absolute; left: calc(109.5 * var(--u)); top: calc(20.5 * var(--u));
  width: calc(162.6 * var(--u)); height: calc(34.5 * var(--u));
  display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u));
  background: #e3d9c8 url("assets/plates/placa-moldura.webp") center / 100% 100% no-repeat;
  color: var(--pedra-tinta); text-decoration: none;
  font-weight: 600; font-size: calc(13.1 * var(--u)); letter-spacing: 0;
}
.botao-aa {
  position: absolute; left: calc(334 * var(--u)); top: calc(28 * var(--u));
  width: calc(25.6 * var(--u)); height: calc(25.6 * var(--u));
  border-radius: 50%; border: calc(1.2 * var(--u)) solid var(--pedra-tinta);
  background: transparent; color: var(--pedra-tinta);
  font: 500 calc(11.8 * var(--u))/1 var(--face); cursor: pointer;
}
.botao-aa::after { content: ""; position: absolute; inset: -9px; }

.veneziana {
  position: fixed; z-index: 15; top: calc(58 * var(--u)); bottom: calc(95 * var(--u));
  width: calc(31.5 * var(--u));
  transform: scaleX(calc(var(--veneziana-w) / (31.5 * var(--u))));
  transition: transform .42s var(--ease-mover);
}
.veneziana.esq { left: 0; transform-origin: left center; }
.veneziana.dir { right: 0; transform-origin: right center; }
.veneziana .plate { object-position: center top; }

/* moldura anil interna, a sala ao fundo */
.sala {
  position: fixed; z-index: 1;
  left: calc(34 * var(--u)); right: calc(34 * var(--u));
  top: var(--verga-h); bottom: calc(95 * var(--u));
  background:
    linear-gradient(180deg, var(--noite-luz), var(--noite) 55%);
  border: calc(4 * var(--u)) solid var(--moldura-sala, color-mix(in oklab, var(--anil) 80%, var(--noite)));
  border-top-width: calc(3 * var(--u));
  box-shadow: inset 0 calc(4 * var(--u)) calc(14 * var(--u)) rgb(5 8 18 / .45);
  pointer-events: none;
}
.sala .plate { mix-blend-mode: lighten; }
.sala .quadro { object-fit: cover; position: absolute; left: calc(-8.5 * var(--u)); top: calc(14 * var(--u)); width: calc(102 * var(--u)); height: calc(90 * var(--u)); opacity: .5; }
.sala .estante { object-fit: fill; position: absolute; left: calc(261.5 * var(--u)); top: calc(239 * var(--u)); width: calc(33 * var(--u)); height: calc(218.5 * var(--u)); opacity: .45; }

/* ---------- o poema ---------- */
.interior {
  position: relative; z-index: 5;
  padding: calc(94 * var(--u) + 0px) calc(53 * var(--u)) calc(118 * var(--u));
  min-height: 100dvh;
}
.poema { display: flex; flex-direction: column; }
.autor { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0; }
.retrato {
  width: calc(68.5 * var(--u)); height: calc(74 * var(--u));
  object-fit: contain;
}
.autor figcaption { margin-top: calc(4 * var(--u)); line-height: 1; font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: .01em; color: var(--cal); }
.autor figcaption a { text-decoration: none; }
.autor figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1 {
  margin: calc(13 * var(--u)) calc(-12 * var(--u)) calc(16 * var(--u));
  text-align: center;
  font-size: calc(42 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: 0;
  color: var(--cal); text-wrap: balance;
}

.versos { margin-left: calc(4 * var(--u)); }
.estrofe { margin: 0 0 calc(13 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.verso {
  position: relative; display: block;
  font-size: var(--verso-tam); font-weight: 500; line-height: var(--verso-entre);
  letter-spacing: -.005em; color: var(--cal);
  padding: 0 calc(6 * var(--u)) 0 calc(6 * var(--u) + 1.2em); text-indent: -1.2em;
  margin-left: calc(-6 * var(--u));
  border-radius: calc(3 * var(--u));
  transition: background-color .26s var(--ease-saida), color .26s var(--ease-saida);
}
/* a luz da janela cai sobre o verso falado; o peitoril de luz marca por forma, não só por cor */
.verso.aceso { background: var(--lampiao); color: var(--tinta-ouro); }
.verso.aceso::after {
  content: ""; position: absolute; left: calc(-4.5 * var(--u)); right: calc(-4 * var(--u)); bottom: calc(-4.2 * var(--u));
  height: calc(1.8 * var(--u)); border-radius: 2px; background: var(--cal-sombra);
  box-shadow: 0 1px 0 rgb(0 0 0 / .5);
}

/* ---------- modos de acesso ---------- */
.modos {
  display: grid; grid-template-columns: 65fr 65fr 68fr 67fr; gap: calc(5.5 * var(--u));
  margin: calc(-4 * var(--u)) calc(-2 * var(--u)) 0;
}
.modo {
  height: calc(50.5 * var(--u));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(3 * var(--u));
  border-radius: calc(11 * var(--u));
  border: calc(1.2 * var(--u)) solid color-mix(in oklab, var(--cal) 70%, var(--noite));
  background: rgb(var(--linha-rgb) / .03); color: var(--cal);
  font: 500 calc(10.4 * var(--u))/1.1 var(--face); letter-spacing: -.01em; white-space: nowrap; cursor: pointer;
  transition: background-color .3s var(--ease-saida), color .3s var(--ease-saida), transform .2s var(--ease-saida);
}
.modo svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.modo-aa { font-size: calc(20 * var(--u)); font-weight: 500; line-height: 1; height: calc(21 * var(--u)); display: grid; place-items: center; }
.modo[aria-pressed="true"] { background: var(--lampiao); border-color: var(--lampiao); color: var(--tinta-ouro); }
.modo:active { transform: scale(.97); }

/* ---------- peitoril e player ---------- */
.peitoril {
  background-color: #d0c1ab;
  position: fixed; z-index: 25; inset: auto 0 0 0; height: calc(87.4 * var(--u));
}
.peitoril > .plate { position: absolute; inset: auto 0 0 0; height: calc(95 * var(--u)); object-position: center bottom; }
.player { position: absolute; inset: 0; }
.play {
  position: absolute; left: calc(44.5 * var(--u)); top: calc(4 * var(--u));
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  border: calc(1.4 * var(--u)) solid rgb(12 15 20 / .55); background: var(--lampiao); color: var(--tinta-ouro);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgb(0 0 0 / .45), inset 0 calc(-2 * var(--u)) 0 rgb(0 0 0 / .12);
  transition: transform .2s var(--ease-saida);
}
.play:active { transform: scale(.95); }
.play svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.play .i-play { display: none; }
.play[aria-label^="Ouvir"] .i-play { display: block; margin-left: calc(3 * var(--u)); }
.play[aria-label^="Ouvir"] .i-pausa { display: none; }

.progresso { position: absolute; left: calc(110 * var(--u)); width: calc(182 * var(--u)); top: 0; height: calc(62 * var(--u)); color: var(--pedra-tinta); }
.tempo { position: absolute; left: calc(20 * var(--u)); top: calc(9 * var(--u)); margin: 0; font-size: calc(14.4 * var(--u)); font-weight: 500; font-variant-numeric: tabular-nums; }
.voz { position: absolute; left: 0; right: 0; top: calc(41 * var(--u)); margin: 0; text-align: center; font-size: calc(11.6 * var(--u)); font-weight: 500; }
.trilho {
  --p: 35.6%;
  position: absolute; left: 0; right: 0; top: calc(28 * var(--u)); margin: 0;
  height: calc(14 * var(--u)); background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.trilho::-webkit-slider-runnable-track {
  height: calc(5.6 * var(--u)); border-radius: 99px;
  background: linear-gradient(to right, var(--lampiao) var(--p), #f4efe6 var(--p));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08);
}
.trilho::-moz-range-track { height: calc(4.6 * var(--u)); border-radius: 99px; background: #f4efe6; }
.trilho::-moz-range-progress { height: calc(4.6 * var(--u)); border-radius: 99px; background: var(--lampiao); }
.trilho::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: calc(-4.7 * var(--u));
  width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%;
  background: var(--lampiao); border: 0; box-shadow: 0 1px 3px rgb(0 0 0 / .45);
}
.trilho::-moz-range-thumb { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: var(--lampiao); border: 0; }

.velocidade {
  position: absolute; left: calc(303 * var(--u)); top: calc(19 * var(--u));
  min-width: calc(34 * var(--u)); height: calc(30 * var(--u));
  border: 0; background: transparent; color: var(--pedra-tinta);
  font: 500 calc(20 * var(--u))/1 var(--face); letter-spacing: -.02em; cursor: pointer;
}
.velocidade::after { content: ""; position: absolute; inset: -9px; }

/* sem gravação ainda: o peitoril avisa que a voz vem de uma pessoa */
.aguardando {
  position: absolute; left: calc(44.5 * var(--u)); right: calc(36 * var(--u)); top: calc(4 * var(--u)); height: calc(52 * var(--u));
  display: flex; align-items: center; gap: calc(14 * var(--u)); color: var(--pedra-tinta);
}
.aguardando[hidden] { display: none; }
.aguardando-icone {
  flex: none; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%;
  display: grid; place-items: center;
  border: calc(1.4 * var(--u)) dashed color-mix(in oklab, var(--pedra-tinta) 55%, transparent);
}
.aguardando-icone svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.aguardando p { margin: 0; display: grid; gap: calc(2 * var(--u)); line-height: 1.25; }
.aguardando strong { font-size: calc(15 * var(--u)); font-weight: 600; }
.aguardando span { font-size: calc(12.2 * var(--u)); font-weight: 500; color: color-mix(in oklab, var(--pedra-tinta) 78%, #d0c1ab); }
.sem-narracao .play, .sem-narracao .progresso, .sem-narracao .velocidade,
.sem-narracao [data-modo="ouvir"], .sem-narracao [data-modo="ler-junto"] { display: none; }
.sem-narracao .modos { grid-template-columns: 1fr 1fr; }
.sem-narracao .verso { cursor: auto; }
.sem-narracao .verso:hover:not(.aceso) { background: none; }

/* ---------- estados do poema ---------- */
.verso { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .verso:hover:not(.aceso) { background: rgb(246 211 107 / .10); } }
.verso.lido:not(.aceso) { color: color-mix(in oklab, var(--cal) 72%, var(--noite)); }
.verso.parou-aqui::before {
  content: ""; position: absolute; left: calc(-11 * var(--u)); top: 50%; translate: 0 -50%;
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--lampiao);
}
.verso:focus-visible { outline-offset: 1px; }

.continuar {
  margin: calc(-4 * var(--u)) 0 calc(14 * var(--u)); align-self: flex-start;
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px;
  padding: 0 calc(14 * var(--u)); border-radius: 999px;
  border: calc(1.6 * var(--u)) solid var(--ouro-texto); background: transparent; color: var(--ouro-texto);
  font: 600 calc(13.5 * var(--u))/1.2 var(--face); cursor: pointer;
}
.continuar[hidden] { display: none; }
.interior { display: flex; flex-direction: column; }

/* ---------- abaixo da dobra ---------- */
.ficha, .mais { margin-top: calc(40 * var(--u)); }
.ficha h2, .mais h2 {
  margin: 0 0 calc(12 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; letter-spacing: -.005em; color: var(--cal-forte);
}
.ficha dl { margin: 0; display: grid; gap: calc(10 * var(--u)); }
.ficha dl > div { display: grid; grid-template-columns: calc(78 * var(--u)) 1fr; gap: calc(8 * var(--u)); align-items: baseline; }
.ficha dt { font-size: calc(12.5 * var(--u)); color: color-mix(in oklab, var(--cal) 70%, var(--noite)); }
.ficha dd { margin: 0; font-size: calc(14.5 * var(--u)); line-height: 1.4; }
.ficha dd a { text-underline-offset: 3px; text-decoration-color: rgb(var(--linha-rgb) / .45); }
.pendente {
  display: inline-block; margin-left: .4em; padding: .05em .55em; border-radius: 999px;
  border: 1px solid var(--ouro-texto); color: var(--ouro-texto); font-size: .8em; vertical-align: .08em;
}
.nota-prototipo {
  margin: calc(16 * var(--u)) 0 0; padding: calc(12 * var(--u)) calc(14 * var(--u));
  border-radius: calc(10 * var(--u)); background: rgb(45 93 161 / .16); border: 1px solid rgb(45 93 161 / .38);
  font-size: calc(13 * var(--u)); line-height: 1.5; color: var(--cal);
}
.mais ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgb(var(--linha-rgb) / .16); }
.mais li { border-bottom: 1px solid rgb(var(--linha-rgb) / .16); padding-block: 2px; }
.mais a {
  display: grid; grid-template-columns: calc(14 * var(--u)) 1fr; column-gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) 0; min-height: 44px; text-decoration: none;
}
.mais a::before {
  content: ""; grid-row: 1 / span 2; align-self: center; width: calc(14 * var(--u)); height: calc(19 * var(--u));
  border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 2px 2px; border: calc(1.6 * var(--u)) solid var(--anil-claro);
  background: var(--noite); transition: background-color .3s var(--ease-saida), border-color .3s var(--ease-saida);
}
.mais a:hover::before, .mais a:focus-visible::before { background: var(--lampiao); border-color: var(--lampiao); }
.mais .t { font-size: calc(16 * var(--u)); font-weight: 500; line-height: 1.3; }
.mais .a { font-size: calc(12.5 * var(--u)); color: color-mix(in oklab, var(--cal) 70%, var(--noite)); margin-top: 2px; }
.assinatura {
  margin: calc(34 * var(--u)) 0 0; font-size: calc(12 * var(--u)); line-height: 1.5;
  color: color-mix(in oklab, var(--cal) 72%, var(--noite));
}

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- painel de leitura ---------- */
.painel {
  width: min(100%, 28.75rem); max-height: min(88dvh, 720px); margin: auto auto 0; padding: 0;
  border: 0; border-radius: 18px 18px 0 0; background: #ece4d6; color: var(--pedra-tinta);
  box-shadow: 0 -12px 40px rgb(0 0 0 / .45);
  font-family: var(--face);
}
/* véu atrás do painel: a página fica embaçada e escurecida, como vidro fosco, e entra junto com o painel */
.painel::backdrop {
  background: rgb(4 5 10 / .5);
  -webkit-backdrop-filter: blur(10px) saturate(.9); backdrop-filter: blur(10px) saturate(.9);
}
.painel[open]::backdrop { animation: veu .3s var(--ease-saida); }
@keyframes veu { from { opacity: 0; } }
.painel[open] { animation: subir .32s var(--ease-gaveta); }
@keyframes subir { from { translate: 0 100%; } }
.painel form { padding: 18px 20px 26px; }
.painel-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.painel h2 { margin: 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.fechar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; }
.fechar:hover { background: rgb(12 15 20 / .08); }
.fechar svg { width: 22px; height: 22px; }
.painel fieldset { border: 0; margin: 0; padding: 24px 0 2px; }
.painel fieldset:first-of-type { padding-top: 10px; }
.painel fieldset:first-of-type .opcoes { display: grid; grid-template-columns: repeat(3, 1fr); }
.painel fieldset:first-of-type .opcoes span { justify-content: center; width: 100%; padding: 0 8px; white-space: nowrap; }
.painel legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: #4b4438; }
.painel fieldset > :not(legend) { clear: both; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcoes label { position: relative; }
.opcoes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcoes span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px;
  border: 1.6px solid rgb(12 15 20 / .28); font-weight: 500; transition: background-color .2s, border-color .2s;
}
.opcoes input:checked + span { background: var(--pedra-tinta); border-color: var(--pedra-tinta); color: var(--lampiao-forte); }
.opcoes input:focus-visible + span { outline: 3px solid var(--anil-claro); outline-offset: 2px; }
.amostra-legivel { font-family: var(--face-legivel); }
.dica { margin: 8px 0 0; font-size: .85rem; line-height: 1.45; color: #4b4438; }
.chave { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin-bottom: 8px; font-weight: 500; cursor: pointer; }
.chave input {
  appearance: none; -webkit-appearance: none; order: 2; width: 52px; height: 30px; border-radius: 999px; margin: 0;
  background: rgb(12 15 20 / .22); position: relative; cursor: pointer; transition: background-color .25s var(--ease-saida);
}
.chave input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: translate .25s var(--ease-saida); }
.chave input:checked { background: var(--pedra-tinta); }
.chave input:checked::after { translate: 22px 0; background: var(--lampiao-forte); }

/* ---------- preferências de leitura ---------- */
body[data-tamanho="grande"] { --verso-tam: calc(25 * var(--u)); --veneziana-w: calc(14 * var(--u)); }
body[data-tamanho="enorme"] { --verso-tam: calc(30 * var(--u)); --veneziana-w: calc(8 * var(--u)); }
body[data-tamanho="grande"] .interior, body[data-tamanho="enorme"] .interior { padding-inline: calc(32 * var(--u)); }
body[data-tamanho="enorme"] .interior { padding-inline: calc(24 * var(--u)); }
body[data-tamanho="grande"] .sala, body[data-tamanho="enorme"] .sala { left: calc(var(--veneziana-w) + 2px); right: calc(var(--veneziana-w) + 2px); }
body[data-tamanho="grande"] .sala .plate, body[data-tamanho="enorme"] .sala .plate { opacity: .35; }
body[data-tamanho="grande"] .modos, body[data-tamanho="enorme"] .modos { grid-template-columns: 1fr 1fr; }
body[data-tamanho="grande"] .modo, body[data-tamanho="enorme"] .modo { flex-direction: row; gap: 8px; font-size: calc(13 * var(--u)); height: calc(52 * var(--u)); }
body[data-espaco="amplo"] { --verso-entre: 1.85; }
body[data-espaco="amplo"] .estrofe { margin-bottom: calc(26 * var(--u)); }
body[data-fonte="legivel"] .verso, body[data-fonte="legivel"] h1, body[data-fonte="legivel"] .ficha, body[data-fonte="legivel"] .mais { font-family: var(--face-legivel); }
body[data-fonte="legivel"] .verso { letter-spacing: .01em; }

/* alto contraste: preto e branco puros, luz amarela forte, sem cenário */
:root.contraste body { --cal: #ffffff; --cal-forte: #ffffff; --lampiao: #ffd60a; --noite: #000; --noite-luz: #000; --noite-2: #000; --parede: #000; --tinta-ouro: #000; --ouro-texto: #ffd60a; --linha-rgb: 255 255 255; color-scheme: dark; }
:root.contraste body .sala { background: #000; border-color: #fff; box-shadow: none; }
:root.contraste body .sala .plate { display: none; }
:root.contraste body .verso.lido:not(.aceso) { color: #fff; }
:root.contraste body .verso.aceso { background: #ffd60a; color: #000; outline: 2px solid #fff; }
:root.contraste body .verso.aceso::after { background: #fff; }
:root.contraste body .modo { border-width: 2px; }
:root.contraste body .nota-prototipo { background: #111; border: 1px solid #ffd60a; }

body.sem-movimento *, body.sem-movimento *::before, body.sem-movimento *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- computador: a janela no meio da fachada à noite ---------- */
@media (min-width: 640px) {
  /* computador adaptável: a unidade da janela acompanha a altura da tela (e a largura, em janelas estreitas),
     de um notebook pequeno a um monitor grande; o rem acompanha junto, então colunas e textos crescem na mesma proporção */
  :root {
    --u: max(1px, min(2px, calc(100dvh / 672), calc(100vw / 600)));
    font-size: clamp(16px, calc(11.4 * var(--u)), 22.5px);
  }
  /* no computador a janela continua sendo a tela inteira: verga e peitoril de ponta a ponta,
     venezianas nas bordas, o poema numa coluna de leitura no meio da sala */
  body.pagina-poema { background: var(--noite); }
  .pagina-poema .placa { left: calc(50% - 81.3 * var(--u)); }
  .pagina-poema .botao-aa { left: auto; right: calc(46 * var(--u)); }
  .pagina-poema .interior { width: min(100%, 44rem + 106 * var(--u)); margin-inline: auto; }
  .pagina-poema .player { left: calc(50% - 190 * var(--u)); right: auto; width: calc(380 * var(--u)); }
  /* os objetos da sala acompanham a coluna do poema, não as bordas da tela */
  .sala .quadro { left: max(calc(18 * var(--u)), calc(50% - 22rem - 120 * var(--u))); top: calc(40 * var(--u)); }
  .sala .estante { left: auto; right: max(calc(14 * var(--u)), calc(50% - 22rem - 70 * var(--u))); }
  .verga > .plate, .peitoril > .plate, .rodape .plate { object-fit: fill; }
  .pagina-poema .versos { align-self: center; margin-left: 0; }
  .pagina-poema .modos { width: min(100%, 36rem); align-self: center; }
  .pagina-poema .continuar { align-self: center; }
  .pagina-poema .ficha, .pagina-poema .mais, .pagina-poema .assinatura { width: min(100%, 36rem); align-self: center; }
  .painel { margin: auto; border-radius: 18px; }
}

/* captura só das placas */
.so-placas .placa, .so-placas .botao-aa, .so-placas .interior, .so-placas .player { visibility: hidden; }

/* =================== fachada: início e autor =================== */
.pagina-inicio, .pagina-autor {
  background:
    radial-gradient(90% 50% at 50% 0%, rgb(242 193 78 / .07), transparent 70%),
    var(--parede);
}
.pagina-inicio .verga, .pagina-autor .verga { position: sticky; top: 0; left: 0; right: 0; }
.pagina-inicio .placa, .pagina-autor .placa { left: calc(50% - 81.3 * var(--u)); }
.pagina-inicio .botao-aa, .pagina-autor .botao-aa { left: auto; right: calc(20 * var(--u)); }
.fachada { padding: calc(30 * var(--u)) calc(22 * var(--u)) calc(56 * var(--u)); max-width: 70rem; margin: 0 auto; }
.fachada h2 { margin: 0 0 calc(14 * var(--u)); font-size: calc(22 * var(--u)); font-weight: 700; letter-spacing: -.01em; color: var(--cal-forte); text-wrap: balance; }

.abertura h1 {
  margin: 0; text-align: left; font-size: calc(36 * var(--u)); line-height: 1.04; font-weight: 700; letter-spacing: -.02em;
  color: var(--cal-forte); text-wrap: balance;
}
.sub { margin: calc(14 * var(--u)) 0 0; max-width: 34em; font-size: calc(16 * var(--u)); line-height: 1.5; color: color-mix(in oklab, var(--cal) 82%, var(--parede)); }

/* a janela acesa do perfil do poeta */

.perfil-janela {
  position: relative; display: block; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: 46% 46% 0 0 / 16% 16% 0 0;
  border: calc(9 * var(--u)) solid #d9cebd;
  box-shadow: inset 0 0 0 calc(5 * var(--u)) var(--anil), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / .45);
  background:
    radial-gradient(60% 55% at 50% 38%, #fff0bf 0%, #f6d36b 40%, #c9993e 80%, #6e5022 100%);
}

.d-ven { position: absolute; top: 0; bottom: 0; width: 13%; height: 100%; object-fit: cover; z-index: 1; filter: brightness(.95); }
.d-ven.esq { left: 0; } .d-ven.dir { right: 0; }

/* o acervo como fachada de janelas */
.acervo { margin-top: calc(56 * var(--u)); scroll-margin-top: calc(90 * var(--u)); }
.acervo-topo { display: grid; gap: calc(12 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.acervo-topo h2 { margin: 0; }
.busca {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px;
  border-radius: 14px; border: 1.6px solid rgb(229 218 207 / .35); background: color-mix(in oklab, var(--noite-2) 70%, transparent); color: var(--cal);
}
.busca:focus-within { border-color: var(--lampiao); }
.busca svg { width: 20px; height: 20px; flex: none; opacity: .8; }
.busca input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--cal-forte); font: 500 1rem var(--face); outline: none; }
.busca input::placeholder { color: color-mix(in oklab, var(--cal) 60%, var(--parede)); }
.janelas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(22 * var(--u)) calc(16 * var(--u)); }
.janelas li[hidden] { display: none; }
.janela { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit; }
.vidraca {
  position: relative; display: block; aspect-ratio: 3 / 4; margin-bottom: calc(9 * var(--u));
  border-radius: 50% 50% 0 0 / 18% 18% 0 0; overflow: hidden;
  border: calc(6 * var(--u)) solid #d4c9b8;
  box-shadow: inset 0 0 0 calc(3.5 * var(--u)) var(--anil);
  background: radial-gradient(70% 50% at 50% 35%, var(--noite-luz), var(--noite-2));
  transition: background .5s var(--ease-saida);
}
.vidraca img { position: absolute; top: 0; height: 100%; width: 15%; object-fit: cover; }
.vidraca img:first-child { left: 0; } .vidraca img:last-child { right: 0; }
.janela.acesa .vidraca, a.janela:focus-visible .vidraca {
  background: radial-gradient(60% 55% at 50% 40%, #fff0bf, #f6d36b 45%, #b8893a 100%);
}
a.janela:focus-visible { outline: none; }
a.janela:focus-visible .vidraca { outline: 3px solid var(--lampiao-forte); outline-offset: 3px; }
.titulo-j { font-size: calc(15.5 * var(--u)); font-weight: 600; line-height: 1.25; color: var(--cal-forte); text-wrap: balance; }
.autor-j { font-size: calc(12.5 * var(--u)); color: color-mix(in oklab, var(--cal) 72%, var(--parede)); }
.janela.fechada .vidraca { filter: saturate(.7) brightness(.85); }
.em-breve {
  align-self: flex-start; margin-top: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid rgb(var(--linha-rgb) / .3); font-size: calc(11 * var(--u)); color: color-mix(in oklab, var(--cal) 70%, var(--parede));
}
.vazio { margin: 12px 0 0; color: var(--cal); }

.como { margin-top: calc(60 * var(--u)); }

.historia { margin-top: calc(60 * var(--u)); padding-top: calc(28 * var(--u)); border-top: 1px solid rgb(var(--linha-rgb) / .14); }
.historia p { margin: 0; max-width: 62ch; font-size: calc(16 * var(--u)); line-height: 1.6; color: color-mix(in oklab, var(--cal) 86%, var(--parede)); }


/* autor */
.perfil { display: grid; justify-items: center; text-align: center; }
.perfil-janela { width: min(100%, 320px); }
.perfil { position: relative; }
.perfil-janela { background: radial-gradient(60% 55% at 50% 40%, #fff0bf, #f6d36b 45%, #b8893a 100%); }
.perfil-retrato {
  position: absolute; top: calc(9 * var(--u)); left: 50%; translate: -50% 0; width: min(46%, 150px);
  -webkit-mask: radial-gradient(ellipse 41% 44% at 50% 50%, #000 97%, #0000 100%); mask: radial-gradient(ellipse 41% 44% at 50% 50%, #000 97%, #0000 100%);
  filter: sepia(.25);
}
.perfil h1 { margin: calc(18 * var(--u)) 0 0; font-size: calc(36 * var(--u)); font-weight: 700; letter-spacing: -.02em; color: var(--cal-forte); }
.perfil-local { margin: 4px 0 0; color: color-mix(in oklab, var(--cal) 72%, var(--parede)); }
.bio, .pagina-autor .mais { margin-top: calc(40 * var(--u)); max-width: 40rem; margin-inline: auto; }

:root.contraste body.pagina-inicio, :root.contraste body.pagina-autor { background: #000; }
body[data-fonte="legivel"] .fachada { font-family: var(--face-legivel); }
body[data-tamanho="grande"] .fachada { font-size: 1.15em; }
body[data-tamanho="enorme"] .janelas { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .pagina-inicio .verga, .pagina-autor .verga { left: 0; right: 0; }
  .pagina-inicio .botao-aa, .pagina-autor .botao-aa { left: auto; right: calc(24 * var(--u)); }
  .fachada { padding-inline: 2.5rem; padding-top: 3rem; }
  .abertura h1 { font-size: clamp(2.6rem, 4.6vw, 4.2rem); }
  .sub { font-size: 1.15rem; }
  .janelas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.25rem 1.75rem; }
  .acervo-topo { grid-template-columns: 1fr minmax(16rem, 24rem); align-items: end; }
  .fachada h2 { font-size: 1.7rem; }
  .titulo-j { font-size: 1.05rem; } .autor-j { font-size: .9rem; }
  .historia p { font-size: 1.02rem; }
}

/* ---------- revisão: fachada caiada, janelas fechadas, demonstrações ---------- */

.acervo {
  position: relative; margin-inline: calc(50% - 50vw); padding: calc(40 * var(--u)) max(calc(22 * var(--u)), calc(50vw - 32.5rem)) calc(46 * var(--u));
  background:
    linear-gradient(rgb(92 70 40 / .10), rgb(60 44 24 / .22)),
    url("assets/plates/parede.webp") center / 420px repeat;
  color: var(--muro-tinta);
}
.acervo h2, .acervo .titulo-j { color: var(--muro-tinta); }
.acervo .autor-j { color: var(--muro-tinta-2); }
.acervo .em-breve { color: #4a4031; border: 0; background: none; padding: 0; margin-top: 2px; font-style: italic; }
.acervo .vazio { color: var(--muro-tinta); }
.acervo a.janela:focus-visible .vidraca { outline-color: var(--muro-tinta); }
.acervo .busca { background: var(--busca-fundo); border-color: var(--busca-borda); color: var(--muro-tinta); }
.janela.fechada .vidraca { background: #132950 url("assets/plates/janela-fechada.webp") center / cover; filter: none; }
.janela.fechada .vidraca img { display: none; }
.janela.acesa .vidraca { box-shadow: inset 0 0 0 calc(3.5 * var(--u)) var(--anil), 0 0 0 1px rgb(0 0 0 / .3), 0 calc(14 * var(--u)) calc(30 * var(--u)) rgb(0 0 0 / .45); }

.como { margin-top: calc(56 * var(--u)); }
.demos { display: grid; gap: calc(26 * var(--u)); }
.demo { margin: 0; display: grid; gap: calc(12 * var(--u)); }
.demo p { margin: 0; }
.demo figcaption { font-size: calc(15 * var(--u)); line-height: 1.5; color: color-mix(in oklab, var(--cal) 84%, var(--parede)); max-width: 40ch; }
.demo strong { color: var(--cal-forte); font-weight: 600; }
.demo-verso { display: grid; justify-items: start; gap: 2px; font-size: calc(19 * var(--u)); font-weight: 500; color: color-mix(in oklab, var(--cal) 70%, var(--parede)); }
.demo-verso span { padding: 0 6px; margin-left: -6px; border-radius: 3px; }
.demo-verso .aceso { background: var(--lampiao); color: var(--tinta-ouro); box-shadow: 0 3px 0 -1px var(--cal-sombra); }
.demo-tamanhos { display: flex; align-items: baseline; gap: calc(18 * var(--u)); color: var(--cal-forte); font-weight: 600; line-height: 1; }
.demo-tamanhos span:nth-child(1) { font-size: calc(20 * var(--u)); }
.demo-tamanhos span:nth-child(2) { font-size: calc(30 * var(--u)); }
.demo-tamanhos span:nth-child(3) { font-size: calc(42 * var(--u)); }
.demo-contraste { display: grid; justify-items: start; gap: 2px; padding: calc(14 * var(--u)) calc(16 * var(--u)); background: #000; border: 2px solid #fff; border-radius: 10px; color: #fff; font-size: calc(19 * var(--u)); font-weight: 600; justify-self: start; }
.demo-contraste .aceso { background: #ffd60a; color: #000; padding: 0 6px; margin-left: -6px; border-radius: 3px; outline: 2px solid #fff; }
@media (min-width: 640px) {
  .demos { grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
  .demo-verso, .demo-contraste { font-size: 1.15rem; }
  .demo figcaption { font-size: 1rem; }
  .demo-tamanhos span:nth-child(1) { font-size: 1.3rem; } .demo-tamanhos span:nth-child(2) { font-size: 2rem; } .demo-tamanhos span:nth-child(3) { font-size: 2.8rem; }
  .acervo { padding-block: 3.5rem 4rem; }
}

/* alto contraste também na parede do acervo */
:root.contraste body .acervo { background: #000; box-shadow: none; border-block: 2px solid #fff; --muro-tinta: #fff; --muro-tinta-2: #fff; --muro-linha-rgb: 255 255 255; --aba-fundo: #000; --aba-ativa-fundo: #ffd60a; --aba-ativa-tinta: #000; --busca-fundo: #000; --busca-borda: #fff; }
:root.contraste body .acervo h2, :root.contraste body .acervo .titulo-j, :root.contraste body .acervo .autor-j, :root.contraste body .acervo .vazio { color: #fff; }
:root.contraste body .acervo .em-breve { color: #fff; border-color: #fff; background: #000; }
:root.contraste body .nota-prototipo { background: #000; border-color: #ffd60a; }

/* ---------- Lavra: placa, medalhões, autor ---------- */
.placa span { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding-left: .16em; }

.bio-corpo { display: grid; gap: calc(18 * var(--u)); }
.bio-corpo p { margin: 0 0 calc(12 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.6; color: color-mix(in oklab, var(--cal) 88%, var(--parede)); max-width: 60ch; }
.capa { margin: 0; justify-self: start; width: min(46%, 180px); }
.capa img { width: 100%; border-radius: 3px; box-shadow: 0 10px 24px rgb(0 0 0 / .5); }
.capa figcaption { margin-top: 8px; font-size: calc(12.5 * var(--u)); color: color-mix(in oklab, var(--cal) 70%, var(--parede)); }
.fontes { font-size: calc(12.5 * var(--u)) !important; color: color-mix(in oklab, var(--cal) 72%, var(--parede)) !important; }
@media (min-width: 640px) {
  .bio-corpo { grid-template-columns: 180px 1fr; gap: 32px; align-items: start; }
  .capa { width: 11.25rem; }
  .bio-corpo p { font-size: 1.02rem; }
  .placa span { font-size: calc(17 * var(--u)); }
}

/* ---------- versão mais delicada (pedido da professora) ---------- */
/* parede do acervo: cal lisa, a textura só sussurra */
.acervo {
  background:
    linear-gradient(var(--muro-topo), var(--muro-base)),
    url("assets/plates/parede.webp") center / 420px repeat;
  box-shadow: inset 0 10px 18px -12px var(--muro-sombra), inset 0 -10px 18px -12px var(--muro-sombra);
}
.vidraca { border-width: calc(5 * var(--u)); box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--anil); }
.perfil-janela { border-width: calc(7 * var(--u)); box-shadow: inset 0 0 0 calc(3.5 * var(--u)) var(--anil), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgb(5 8 18 / .45); }
.nota-prototipo { background: rgb(45 93 161 / .12); border-color: rgb(45 93 161 / .3); }
/* luz da janela: quando a pessoa passa o mouse, a janela acende de leve */
@media (hover: hover) and (pointer: fine) {
  a.janela .vidraca { transition: filter .2s var(--ease-saida); }
  a.janela:hover .vidraca { filter: brightness(1.06); }
  .mais a:hover::before { background: var(--lampiao); border-color: var(--lampiao); }
}
/* toque: resposta imediata */
.play, .modo, .continuar, .velocidade { transition-property: transform, background-color, color, border-color; transition-duration: .16s; transition-timing-function: var(--ease-saida); }
.continuar:active { transform: scale(.97); }
@media (min-width: 640px) {
  .painel[open] { animation: aparecer .22s var(--ease-saida); }
  @keyframes aparecer { from { opacity: 0; scale: .97; } }
}

/* =================== qualidade de vida =================== */
/* voltar: espelho do botão Aa, no outro lado da verga */
.botao-voltar {
  position: absolute; left: calc(20.4 * var(--u)); top: calc(28 * var(--u));
  width: calc(25.6 * var(--u)); height: calc(25.6 * var(--u));
  display: grid; place-items: center; border-radius: 50%;
  border: calc(1.2 * var(--u)) solid var(--pedra-tinta); color: var(--pedra-tinta);
  transition: transform .16s var(--ease-saida), background-color .2s var(--ease-saida);
}
.botao-voltar svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.botao-voltar::after { content: ""; position: absolute; inset: -9px; }
.botao-voltar:active, .botao-aa:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .botao-voltar:hover, .botao-aa:hover { background: rgb(21 32 58 / .08); } }
.so-placas .botao-voltar { visibility: hidden; }

/* compartilhar e copiar */
.acoes { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); margin-top: calc(18 * var(--u)); }
.acao {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: 0 calc(15 * var(--u)) 0 calc(12 * var(--u));
  border-radius: 999px; border: calc(1.2 * var(--u)) solid color-mix(in oklab, var(--cal) 55%, var(--noite));
  background: transparent; color: var(--cal-forte); font: 500 calc(14 * var(--u))/1 var(--face); cursor: pointer;
  transition: transform .16s var(--ease-saida), background-color .2s var(--ease-saida), border-color .2s var(--ease-saida), color .2s var(--ease-saida);
}
.acao svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.acao:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .acao:hover { border-color: var(--cal); background: rgb(var(--linha-rgb) / .06); } }
.acao.feito { border-color: var(--ouro-texto); color: var(--ouro-texto); }
.acao [data-rotulo] { transition: opacity .2s var(--ease-saida); }

/* outros poemas ainda em preparação: a mesma linha da lista, com a janela fechada e sem link */
.mais .item-preparo {
  display: grid; grid-template-columns: calc(14 * var(--u)) 1fr; column-gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) 0; min-height: 44px;
}
.mais .item-preparo::before {
  content: ""; grid-row: 1 / span 3; align-self: center; width: calc(14 * var(--u)); height: calc(19 * var(--u));
  border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 2px 2px; border: calc(1.6 * var(--u)) solid var(--anil-claro);
  background: repeating-linear-gradient(to bottom, var(--anil) 0 calc(2.4 * var(--u)), var(--noite-2) calc(2.4 * var(--u)) calc(3.6 * var(--u)));
}
.mais .item-preparo .t { color: color-mix(in oklab, var(--cal) 86%, var(--noite)); }
.mais .preparo { font-size: calc(12.5 * var(--u)); font-style: italic; color: color-mix(in oklab, var(--cal) 72%, var(--noite)); margin-top: 1px; }
.ver-acervo {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: calc(6 * var(--u));
  color: var(--ouro-texto); font-weight: 600; font-size: calc(14.5 * var(--u));
  text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in oklab, var(--lampiao) 50%, transparent);
}

/* busca: quantos poemas apareceram */
.contagem { margin: calc(-6 * var(--u)) 0 calc(14 * var(--u)); font-size: .9rem; font-weight: 500; color: var(--muro-tinta); }
.contagem:empty { display: none; }

/* painel Aa: desfazer tudo de uma vez */
.restaurar {
  width: 100%; min-height: 48px; margin-top: 18px; border-radius: 12px;
  border: 1.6px solid rgb(21 32 58 / .28); background: transparent; color: var(--pedra-tinta);
  font: 600 1rem var(--face); cursor: pointer; transition: transform .16s var(--ease-saida), background-color .2s, opacity .2s;
}
.restaurar:active:not(:disabled) { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .restaurar:hover:not(:disabled) { background: rgb(21 32 58 / .06); } }
.restaurar:disabled { opacity: .45; cursor: default; }
.restaurar:focus-visible { outline: 3px solid var(--anil-claro); outline-offset: 2px; }

:root.contraste body .acao { border-color: #fff; border-width: 2px; color: #fff; }
:root.contraste body .acao.feito { border-color: #ffd60a; color: #ffd60a; }
:root.contraste body .mais .item-preparo .t, :root.contraste body .mais .preparo { color: #fff; }
:root.contraste body .ver-acervo { color: #ffd60a; }
:root.contraste body .acervo .contagem { color: #fff; }

@media (min-width: 640px) {
  .pagina-poema .botao-voltar { left: calc(46 * var(--u)); }
  .pagina-autor .botao-voltar { left: calc(24 * var(--u)); }
}

/* =================== acervo completo: autores sem retrato e textos ainda não publicados =================== */
/* sem foto de uso livre, o medalhão mostra as iniciais, no mesmo lugar e tamanho do retrato */
.retrato-iniciais {
  display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); margin-block: calc(5 * var(--u));
  border-radius: 50%; background: var(--pedra-tinta); border: calc(2.5 * var(--u)) solid #ece4d6;
  color: #ece4d6; font-size: calc(19 * var(--u)); font-weight: 700; letter-spacing: .06em; padding-left: .06em;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / .35);
}
.perfil-iniciais {
  display: grid; place-items: center; aspect-ratio: 5 / 6; border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 40%, #f6efe2, #e3d6bd); color: var(--pedra-tinta);
  font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: .06em; padding-left: .06em;
  -webkit-mask: none; mask: none; filter: none; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgb(21 32 58 / .25);
}

/* texto protegido ou em revisão: o lugar do poema explica por que ele ainda não aparece */
.texto-pendente {
  margin: calc(6 * var(--u)) 0 calc(22 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  border: calc(1.2 * var(--u)) dashed color-mix(in oklab, var(--cal) 45%, var(--noite)); border-radius: calc(12 * var(--u));
  max-width: 34rem; align-self: center;
}
.texto-pendente p { margin: 0; font-size: calc(15 * var(--u)); line-height: 1.55; color: color-mix(in oklab, var(--cal) 90%, var(--noite)); text-wrap: pretty; }
.texto-pendente .pendente-titulo { margin-bottom: calc(8 * var(--u)); font-size: calc(18 * var(--u)); font-weight: 600; line-height: 1.3; color: var(--cal-forte); text-wrap: balance; }
.poema:has(.texto-pendente) { display: flex; flex-direction: column; }

/* situação do texto embaixo de cada janela */
.situacao { margin-top: 2px; font-size: calc(12 * var(--u)); font-style: italic; color: color-mix(in oklab, var(--cal) 72%, var(--parede)); }
.acervo .situacao { color: var(--muro-tinta-2); }
@media (min-width: 640px) { .situacao { font-size: .82rem; } }

:root.contraste body .retrato-iniciais { background: #000; border-color: #fff; color: #fff; }
:root.contraste body .texto-pendente { border-color: #fff; }
:root.contraste body .texto-pendente p { color: #fff; }
:root.contraste body .acervo .situacao { color: #fff; }

/* acervo em dois grupos: o que já se lê e o que espera liberação */

/* os poetas: atalho para a página de cada autor */

.poeta-rosto {
  grid-row: 1 / span 3; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #ece4d6; border: calc(2 * var(--u)) solid #ece4d6;
}
.poeta-rosto img { width: 112%; height: 112%; object-fit: cover; }
.poeta-rosto.sem-foto { background: var(--noite-2); color: #ece4d6; font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: .05em; }

@media (min-width: 640px) {
  .poeta-rosto { width: 3.5rem; height: 3.5rem; }
}

:root.contraste body .poeta-rosto.sem-foto { background: #000; border-color: #fff; color: #fff; }

/* verso recuado na fonte (o espaço em branco também é texto) */
.verso.recuo { margin-left: calc(-6 * var(--u) + 2.4em); }

/* acervo grande: em tela larga, mais janelas por fileira e menos rolagem */
@media (min-width: 1100px) {
  .janelas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .janelas .titulo-j { font-size: .98rem; }
}

/* =================== abertura: a fachada dos poetas =================== */
.abertura { padding-top: calc(6 * var(--u)); }
.abertura-texto { display: grid; gap: calc(14 * var(--u)); }
.abertura-lado { display: grid; gap: calc(18 * var(--u)); }
.abertura-lado .sub { margin: 0; }
.abertura-acoes { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.botao-primario, .botao-secundario {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 calc(20 * var(--u));
  border-radius: 999px; font: 600 calc(15.5 * var(--u))/1 var(--face); text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease-saida), background-color .2s var(--ease-saida), border-color .2s var(--ease-saida);
}
.botao-primario { background: var(--lampiao); color: var(--tinta-ouro); border: 0; box-shadow: 0 6px 16px rgb(5 8 18 / .3); }
.botao-secundario { background: transparent; color: var(--cal-forte); border: calc(1.3 * var(--u)) solid color-mix(in oklab, var(--cal) 55%, var(--noite)); }
.botao-primario:active, .botao-secundario:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .botao-primario:hover { background: var(--lampiao-forte); }
  .botao-secundario:hover { border-color: var(--cal); background: rgb(var(--linha-rgb) / .06); }
}

/* o casario: uma janela acesa por poeta, na noite azul; no celular, a rua corre para o lado */
.casario {
  /* a faixa rola para o lado e corta o que passa da borda: o respiro em cima e embaixo deixa a janela subir
     no hover e a sombra aparecer inteiras */
  list-style: none; margin: calc(20 * var(--u)) calc(-22 * var(--u)) calc(-14 * var(--u)); padding: calc(14 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  display: grid; grid-auto-flow: column; grid-auto-columns: calc(112 * var(--u)); gap: calc(14 * var(--u));
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: calc(22 * var(--u)); scrollbar-width: none;
}
.casario::-webkit-scrollbar { display: none; }
.casario li { scroll-snap-align: start; }
.casa { display: grid; gap: calc(8 * var(--u)); justify-items: center; text-decoration: none; color: inherit; }
.casa-janela {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: 50% 50% 0 0 / 22% 22% 0 0; border: calc(5 * var(--u)) solid #d4c9b8;
  background: radial-gradient(60% 55% at 50% 40%, #fff0bf, #f6d36b 45%, #b8893a 100%);
  box-shadow: inset 0 0 0 calc(2.5 * var(--u)) var(--anil), 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(5 8 18 / .5), 0 0 calc(40 * var(--u)) rgb(246 211 107 / .12);
  transition: transform .2s var(--ease-saida), filter .2s var(--ease-saida);
}
.casa-janela .d-ven { width: 15%; }
.casa-rosto { position: relative; z-index: 0; width: 60%; display: grid; place-items: center; }
.casa-rosto img { width: 100%; height: auto; }
.casa-rosto.sem-foto {
  aspect-ratio: 5 / 6; border-radius: 50%; background: radial-gradient(70% 70% at 50% 40%, #f6efe2, #e3d6bd);
  box-shadow: inset 0 0 0 calc(1.6 * var(--u)) rgb(21 32 58 / .25);
  color: var(--pedra-tinta); font-weight: 700; font-size: calc(20 * var(--u)); letter-spacing: .05em; padding-left: .05em;
}
.casa-nome { text-align: center; font-size: calc(13 * var(--u)); font-weight: 600; line-height: 1.25; color: var(--cal-forte); text-wrap: balance; }
.casa-mais .casa-rosto.sem-foto { background: none; box-shadow: inset 0 0 0 calc(1.6 * var(--u)) rgb(21 32 58 / .45); }
.casa:active .casa-janela { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .casa:hover .casa-janela { transform: translateY(-3px); filter: brightness(1.05); } }
.casa:focus-visible { outline: none; }
.casa:focus-visible .casa-janela { outline: 3px solid var(--lampiao-forte); outline-offset: 3px; }
.abertura-nota { margin-top: calc(26 * var(--u)); }

@media (min-width: 640px) {
  .abertura { padding-top: 1rem; }
  .abertura-texto { grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: end; }
  .abertura-lado { gap: 1.4rem; padding-bottom: .4rem; }
  .botao-primario, .botao-secundario { font-size: 1rem; padding: 0 1.4rem; }
  .casario {
    margin: 3rem 0 0; padding: 0; overflow: visible; grid-auto-flow: row;
    grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 1.25rem;
  }
  .casa-nome { font-size: .9rem; }
  .casa-rosto.sem-foto { font-size: 1.25rem; }
  .abertura-nota { max-width: 44rem; margin-top: 2.2rem; }
}

/* =================== acervo por poeta: abas e blocos =================== */
.abas { display: flex; gap: calc(8 * var(--u)); margin: 0 calc(-22 * var(--u)) calc(8 * var(--u)); padding: 2px calc(22 * var(--u)) calc(6 * var(--u)); overflow-x: auto; scrollbar-width: none; }
.abas::-webkit-scrollbar { display: none; }
.aba {
  flex: none; min-height: 44px; padding: 0 calc(16 * var(--u)); border-radius: 999px; white-space: nowrap;
  border: 1.4px solid rgb(var(--muro-linha-rgb) / .32); background: var(--aba-fundo); color: var(--muro-tinta);
  font: 500 calc(14 * var(--u))/1 var(--face); cursor: pointer;
  transition: background-color .2s var(--ease-saida), color .2s var(--ease-saida), border-color .2s var(--ease-saida), transform .16s var(--ease-saida);
}
.aba[aria-pressed="true"] { background: var(--aba-ativa-fundo); border-color: var(--aba-ativa-fundo); color: var(--aba-ativa-tinta); }
.aba:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .aba:hover:not([aria-pressed="true"]) { border-color: rgb(var(--muro-linha-rgb) / .6); background: var(--aba-fundo-hover); } }
.aba:focus-visible { outline: 3px solid var(--muro-tinta); outline-offset: 2px; }

.bloco-poeta { padding-top: calc(26 * var(--u)); margin-top: calc(22 * var(--u)); border-top: 1px solid rgb(var(--muro-linha-rgb) / .16); }
.blocos > .bloco-poeta:first-child, .blocos > [hidden] + .bloco-poeta { border-top: 0; margin-top: calc(6 * var(--u)); padding-top: calc(10 * var(--u)); }
.bloco-cabeca { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.poeta-rosto {
  width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: #ece4d6; border: calc(2 * var(--u)) solid #ece4d6;
  box-shadow: 0 2px 6px rgb(21 32 58 / .25);
}
.poeta-rosto img { width: 112%; height: 112%; object-fit: cover; }
.poeta-rosto.sem-foto { background: var(--pedra-tinta); color: #ece4d6; font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: .05em; }
.bloco-nome h3 { margin: 0; font-size: calc(19 * var(--u)); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; color: var(--muro-tinta); text-wrap: balance; }
.bloco-nome p { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 0 .9em; font-size: calc(13 * var(--u)); color: var(--muro-tinta-2); font-variant-numeric: tabular-nums; }
.sobre-poeta {
  display: inline-flex; align-items: center; min-height: 44px; font-size: calc(13.5 * var(--u)); font-weight: 600; color: var(--muro-tinta);
  text-underline-offset: 4px; text-decoration-color: rgb(var(--muro-linha-rgb) / .4); white-space: nowrap;
}
.bloco-nota { margin: calc(-6 * var(--u)) 0 calc(16 * var(--u)); max-width: 60ch; font-size: calc(13.5 * var(--u)); line-height: 1.5; color: var(--muro-tinta-2); }

/* o vidro aceso mostra o primeiro verso, como quem lê pela janela */
.vidro-verso, .vidro-situacao {
  position: absolute; inset: 22% 18% 14%; z-index: 1; display: grid; place-items: center; text-align: center;
  color: #3a2c14; text-wrap: balance; overflow: hidden;
}
.vidro-verso { font-size: calc(12.5 * var(--u)); font-weight: 600; line-height: 1.28; letter-spacing: -.005em; }
.vidro-situacao { font-size: calc(11.5 * var(--u)); font-style: italic; line-height: 1.3; color: #5a4520; }
.janelas .titulo-j { display: block; }

@media (min-width: 640px) {
  .abas { flex-wrap: wrap; overflow: visible; margin: 0 0 .5rem; padding: 0; }
  .aba { font-size: .92rem; padding: 0 1rem; }
  .bloco-poeta { padding-top: 2rem; margin-top: 1.75rem; }
  .bloco-cabeca { grid-template-columns: auto auto 1fr; }
  .bloco-cabeca .sobre-poeta { justify-self: start; margin-left: .5rem; }
  .poeta-rosto { width: 3.5rem; height: 3.5rem; }
  .poeta-rosto.sem-foto { font-size: 1.05rem; }
  .bloco-nome h3 { font-size: 1.35rem; } .bloco-nome p { font-size: .92rem; }
  .sobre-poeta { font-size: .92rem; }
  .bloco-nota { font-size: .95rem; }
  .vidro-verso { font-size: .82rem; } .vidro-situacao { font-size: .78rem; }
}

:root.contraste body .botao-secundario { border-color: #fff; color: #fff; }
:root.contraste body .casa-janela { background: #ffd60a; border-color: #fff; box-shadow: none; }
:root.contraste body .aba { border-color: #fff; background: #000; color: #fff; }
:root.contraste body .aba[aria-pressed="true"] { background: #ffd60a; border-color: #ffd60a; color: #000; }
:root.contraste body .bloco-poeta { border-color: #fff; }
:root.contraste body .bloco-nome h3, :root.contraste body .bloco-nome p, :root.contraste body .sobre-poeta, :root.contraste body .bloco-nota { color: #fff; }
:root.contraste body .poeta-rosto.sem-foto { background: #000; border-color: #fff; color: #fff; }
:root.contraste body .vidro-verso, :root.contraste body .vidro-situacao { color: #000; }
body[data-tamanho="enorme"] .casario { grid-auto-columns: calc(150 * var(--u)); }

/* em tela larga, os poetas com poucos poemas ficam lado a lado; quem tem muitos ocupa a largura toda */
@media (min-width: 1100px) {
  .blocos { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; align-items: start; }
  .blocos > .bloco-poeta { margin-top: 0; }
  .blocos > .bloco-poeta.largo, .blocos > .bloco-poeta:only-of-type { grid-column: 1 / -1; }
  .bloco-poeta .janelas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bloco-poeta.largo .janelas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .blocos > .bloco-poeta { border-top: 1px solid rgb(var(--muro-linha-rgb) / .16); padding-top: 2rem; margin-bottom: 1rem; }
  .blocos > .bloco-poeta:first-child { border-top: 0; padding-top: .6rem; }
}

/* =================== tema escuro: a noite funda =================== */
/* o claro (padrão) é o azul desbotado que a professora aprovou; no escuro tudo vira noite:
   o que era claro escurece, o texto escuro clareia, o azul vira preto. Só as janelas douradas ficam acesas.
   data-visto é o tema que está na tela (o "sistema" já resolvido), gravado no <html> antes da pintura. */
:root[data-visto="escuro"] {
  --noite: #0f1117; --noite-luz: #171a22; --noite-2: #08090d; --parede: #0b0c11;
  --cal: #e9e1d3; --cal-forte: #f6f0e5; --cal-sombra: #d5c8b6;
  --ouro-texto: #f6d36b; --linha-rgb: 233 225 211;
  --muro-topo: rgb(19 21 28 / .95); --muro-base: rgb(11 12 17 / .97); --muro-sombra: rgb(0 0 0 / .7);
  --muro-tinta: #ece4d6; --muro-tinta-2: #aaa398; --muro-linha-rgb: 233 225 211;
  --aba-fundo: rgb(255 255 255 / .03); --aba-fundo-hover: rgb(255 255 255 / .08);
  --aba-ativa-fundo: #f6d36b; --aba-ativa-tinta: #1d2846;
  --busca-fundo: rgb(0 0 0 / .35); --busca-borda: rgb(233 225 211 / .26);
  color-scheme: dark;
}
:root[data-visto="escuro"] .pagina-inicio, :root[data-visto="escuro"] .pagina-autor { background: radial-gradient(90% 50% at 50% 0%, rgb(246 211 107 / .06), transparent 70%), var(--parede); }
:root[data-visto="escuro"] .sala .plate { opacity: .3; }

/* engrenagem no lugar do Aa */
.botao-aa { display: grid; place-items: center; padding: 0; }
.botao-aa svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* tema: controle segmentado com rádios de verdade, ícone acima do nome */
.segmentos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 14px; border: 1.6px solid rgb(21 32 58 / .22); }
.segmentos label { position: relative; display: block; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos label > span {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 60px; padding: 6px;
  border-radius: 11px; font-weight: 500; font-size: .92rem; color: #4b4438; cursor: pointer; transition: background-color .2s, color .2s;
}
.segmentos svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.segmentos input:checked + span { background: var(--pedra-tinta); color: var(--lampiao-forte); }
.segmentos input:focus-visible + span { outline: 3px solid var(--anil-claro); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .segmentos label:hover input:not(:checked) + span { background: rgb(21 32 58 / .06); color: var(--pedra-tinta); } }
.so-celular { display: none; }
@media (pointer: coarse) { .so-celular { display: inline; } .so-computador { display: none; } }
.painel fieldset.tema { padding-top: 10px; }
.painel fieldset.tema + fieldset { padding-top: 22px; }
.painel fieldset:first-of-type .opcoes { display: flex; }
.painel fieldset.tema + fieldset .opcoes { display: grid; grid-template-columns: repeat(3, 1fr); }
.painel fieldset.tema + fieldset .opcoes span { justify-content: center; width: 100%; padding: 0 8px; white-space: nowrap; }
/* o × não desenha caixa: quem chega pelo teclado vê o × acender */
.fechar:hover { background: transparent; color: var(--pedra-tinta); }
.fechar:focus-visible { outline: none; background: rgb(21 32 58 / .1); }

/* ----- no escuro, o que era claro escurece ----- */
/* pedra da verga, do peitoril e do rodapé: a mesma pedra, sem luz */
:root[data-visto="escuro"] .verga, :root[data-visto="escuro"] .peitoril { background-color: #15171d; }
:root[data-visto="escuro"] .verga > .plate, :root[data-visto="escuro"] .peitoril > .plate, :root[data-visto="escuro"] .rodape .plate { filter: brightness(.24) saturate(.4) contrast(1.15); }
:root[data-visto="escuro"] .placa { background: #1b1e26; border: 1.5px solid rgb(233 225 211 / .32); border-radius: calc(4 * var(--u)); color: #ece4d6; }
:root[data-visto="escuro"] .botao-aa, :root[data-visto="escuro"] .botao-voltar { color: #ece4d6; border-color: rgb(236 228 214 / .8); }
/* o player no peitoril */
:root[data-visto="escuro"] .progresso, :root[data-visto="escuro"] .velocidade, :root[data-visto="escuro"] .aguardando { color: #ece4d6; }
:root[data-visto="escuro"] .aguardando span { color: #b9b2a7; }
:root[data-visto="escuro"] .aguardando-icone { border-color: rgb(236 228 214 / .5); }
:root[data-visto="escuro"] .trilho::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--lampiao) var(--p), #3a3d46 var(--p)); }
:root[data-visto="escuro"] .trilho::-moz-range-track { background: #3a3d46; }
/* o azul vira preto: venezianas e molduras das janelas */
:root[data-visto="escuro"] .veneziana .plate, :root[data-visto="escuro"] .d-ven, :root[data-visto="escuro"] .vidraca img { filter: brightness(.42) saturate(.35); }
:root[data-visto="escuro"] .vidraca, :root[data-visto="escuro"] .casa-janela, :root[data-visto="escuro"] .perfil-janela { border-color: #2b2e37; }
:root[data-visto="escuro"] .vidraca, :root[data-visto="escuro"] .casa-janela { box-shadow: inset 0 0 0 calc(2.5 * var(--u)) #0b0c11, 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / .6), 0 0 calc(40 * var(--u)) rgb(246 211 107 / .1); }
:root[data-visto="escuro"] { --moldura-sala: #23262e; }
:root[data-visto="escuro"] .casa-rosto.sem-foto { background: #1b1e26; color: #ece4d6; box-shadow: inset 0 0 0 calc(1.6 * var(--u)) rgb(236 228 214 / .3); }
:root[data-visto="escuro"] .perfil-iniciais { background: #1b1e26; color: #ece4d6; box-shadow: inset 0 0 0 calc(2 * var(--u)) rgb(236 228 214 / .3); }
:root[data-visto="escuro"] .retrato-iniciais, :root[data-visto="escuro"] .poeta-rosto.sem-foto { background: #1b1e26; }

/* o painel de configurações também entra na noite; o marcado vira dourado */
:root[data-visto="escuro"] .painel { background: #15171d; color: #ece4d6; box-shadow: 0 -16px 48px rgb(0 0 0 / .75); }
:root[data-visto="escuro"] .painel::backdrop { background: rgb(0 0 0 / .55); }
:root[data-visto="escuro"] .painel legend, :root[data-visto="escuro"] .dica { color: #a9a296; }
:root[data-visto="escuro"] .opcoes span { border-color: rgb(236 228 214 / .24); }
:root[data-visto="escuro"] .opcoes input:checked + span { background: #f6d36b; border-color: #f6d36b; color: #1d2846; }
:root[data-visto="escuro"] .segmentos { border-color: rgb(236 228 214 / .2); }
:root[data-visto="escuro"] .segmentos label > span { color: #a9a296; }
:root[data-visto="escuro"] .segmentos input:checked + span { background: #f6d36b; color: #1d2846; }
:root[data-visto="escuro"] .chave input { background: rgb(255 255 255 / .18); }
:root[data-visto="escuro"] .chave input:checked { background: #f6d36b; }
:root[data-visto="escuro"] .chave input:checked::after { background: #1d2846; }
:root[data-visto="escuro"] .restaurar { border-color: rgb(236 228 214 / .3); color: #ece4d6; }
:root[data-visto="escuro"] .fechar:hover { color: #fff; }
:root[data-visto="escuro"] .fechar:focus-visible { background: rgb(255 255 255 / .12); }
@media (hover: hover) and (pointer: fine) {
  :root[data-visto="escuro"] .segmentos label:hover input:not(:checked) + span { background: rgb(255 255 255 / .06); color: #ece4d6; }
  :root[data-visto="escuro"] .opcoes label:hover span { border-color: rgb(236 228 214 / .5); }
  :root[data-visto="escuro"] .restaurar:hover:not(:disabled) { background: rgb(255 255 255 / .06); }
  :root[data-visto="escuro"] .botao-voltar:hover, :root[data-visto="escuro"] .botao-aa:hover { background: rgb(255 255 255 / .08); }
}

/* =================== alto contraste: um modo só, igual em qualquer tema =================== */
/* para baixa visão: preto, branco e amarelo, sem degradê, sem textura, sem pedra e sem veneziana.
   ":root.contraste body" pesa mais que as regras do tema escuro (":root[data-visto] ..."), então o contraste sempre vence. */
:root.contraste body { background: #000; }
/* verga, peitoril e rodapé: faixas pretas com fio branco; a placa vira etiqueta de contorno */
:root.contraste body .verga, :root.contraste body .peitoril { background: #000; }
:root.contraste body .verga { border-bottom: 2px solid #fff; }
:root.contraste body .peitoril { border-top: 2px solid #fff; }
:root.contraste body .verga > .plate, :root.contraste body .peitoril > .plate, :root.contraste body .rodape .plate { display: none; }
:root.contraste body .placa { background: #000; border: 2px solid #fff; border-radius: 4px; color: #fff; }
:root.contraste body .botao-aa, :root.contraste body .botao-voltar { color: #fff; border: 2px solid #fff; background: #000; }
/* poema: sem venezianas, sem objetos; a moldura é um fio branco */
:root.contraste body .veneziana { display: none; }
:root.contraste body .sala { background: #000; border-color: #fff; box-shadow: none; }
:root.contraste body .sala .plate { display: none; }
/* player */
:root.contraste body .progresso, :root.contraste body .velocidade, :root.contraste body .aguardando, :root.contraste body .aguardando span { color: #fff; }
:root.contraste body .aguardando-icone { border: 2px solid #fff; }
:root.contraste body .play { background: #ffd60a; color: #000; border: 2px solid #fff; box-shadow: none; }
:root.contraste body .trilho::-webkit-slider-runnable-track { background: linear-gradient(to right, #ffd60a var(--p), #fff var(--p)); box-shadow: none; }
:root.contraste body .trilho::-moz-range-track { background: #fff; }
/* janelas: vidro amarelo liso, moldura branca, sem venezianas e sem sombra; texto preto */
:root.contraste body .vidraca, :root.contraste body .casa-janela, :root.contraste body .perfil-janela {
  background: #ffd60a; border: 2px solid #fff; box-shadow: none; filter: none;
}
:root.contraste body .vidraca img, :root.contraste body .d-ven { display: none; }
:root.contraste body .vidro-verso, :root.contraste body .vidro-situacao { color: #000; inset: 14% 10% 10%; }
:root.contraste body .casa-rosto.sem-foto, :root.contraste body .perfil-iniciais, :root.contraste body .retrato-iniciais, :root.contraste body .poeta-rosto.sem-foto {
  background: #000; color: #fff; box-shadow: inset 0 0 0 2px #fff; border-color: #fff;
}
:root.contraste body .casa-nome, :root.contraste body .titulo-j { color: #fff; }
:root.contraste body .nota-prototipo { background: #000; border: 2px solid #ffd60a; color: #fff; }
/* painel de configurações */
:root.contraste body .painel { background: #000; color: #fff; border: 0; box-shadow: 0 -16px 48px rgb(0 0 0 / .9); }
:root.contraste body .painel::backdrop { background: rgb(0 0 0 / .45); }
:root.contraste body .painel legend, :root.contraste body .dica { color: #fff; }
:root.contraste body .opcoes span, :root.contraste body .segmentos, :root.contraste body .restaurar { border: 2px solid #fff; color: #fff; background: #000; }
:root.contraste body .segmentos label > span { color: #fff; }
:root.contraste body .opcoes input:checked + span, :root.contraste body .segmentos input:checked + span { background: #ffd60a; border-color: #ffd60a; color: #000; }
:root.contraste body .chave input { background: #000; box-shadow: inset 0 0 0 2px #fff; }
:root.contraste body .chave input::after { background: #fff; box-shadow: none; }
:root.contraste body .chave input:checked { background: #ffd60a; box-shadow: none; }
:root.contraste body .chave input:checked::after { background: #000; }
:root.contraste body .fechar { color: #fff; }
:root.contraste body .restaurar:disabled { opacity: .6; }
/* botões e links */
:root.contraste body .botao-primario { background: #ffd60a; color: #000; box-shadow: none; border: 2px solid #ffd60a; }
:root.contraste body .botao-secundario, :root.contraste body .acao, :root.contraste body .modo { border: 2px solid #fff; color: #fff; background: #000; }
:root.contraste body .modo[aria-pressed="true"] { background: #ffd60a; border-color: #ffd60a; color: #000; }
:root.contraste body .acao.feito { border-color: #ffd60a; color: #ffd60a; }
:root.contraste body .ver-acervo, :root.contraste body .sobre-poeta { color: #ffd60a; text-decoration-color: #ffd60a; }
:root.contraste body .pendente { border-color: #ffd60a; color: #ffd60a; }
:root.contraste body .texto-pendente { border: 2px dashed #fff; }
:root.contraste body .mais ul, :root.contraste body .mais li, :root.contraste body .bloco-poeta { border-color: #fff; }
:root.contraste body .capa img { box-shadow: none; outline: 2px solid #fff; }
:root.contraste body :focus-visible { outline: 3px solid #ffd60a; outline-offset: 3px; }
:root.contraste body.pagina-inicio, :root.contraste body.pagina-autor, :root.contraste body.pagina-poema { background: #000; }
:root.contraste body .mais a::before { border-color: #fff; background: #000; }
:root.contraste body .mais a:hover::before, :root.contraste body .mais a:focus-visible::before { background: #ffd60a; border-color: #ffd60a; }
:root.contraste body .mais .item-preparo::before { border-color: #fff; background: #000; }
:root.contraste body .ficha dt, :root.contraste body .mais .a, :root.contraste body .assinatura, :root.contraste body .verso.lido:not(.aceso) { color: #fff; }
/* reduzir movimento também vale para o véu do painel */
body.sem-movimento .painel::backdrop { animation: none; }
@media (prefers-reduced-motion: reduce) { .painel::backdrop { animation: none; } }

/* =================== névoa da janela: o verso se apaga antes de chegar à moldura =================== */
/* faixas fixas no alto e no pé do quarto, na cor do próprio quarto, com um leve desfoque. Elas ficam acima do texto
   e desenham a borda da sala por cima dele: nenhum verso cruza a moldura, em nenhum tema */
.nevoa { position: fixed; left: 0; right: 0; z-index: 14; pointer-events: none; }
/* a névoa começa colada na pedra e cobre também a fresta até a borda da sala; depois esmaece com um leve desfoque */
.nevoa::before { content: ""; position: absolute; inset: 0; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.nevoa::after { content: ""; position: absolute; left: 0; right: 0; background: var(--moldura-sala, color-mix(in oklab, var(--anil) 80%, var(--noite))); }
.nevoa.topo { top: 0; height: calc(var(--verga-h) + 46 * var(--u)); }
.nevoa.topo::before {
  background: linear-gradient(var(--parede) var(--verga-h), var(--noite-luz) var(--verga-h));
  -webkit-mask-image: linear-gradient(#000 calc(var(--verga-h) + 10 * var(--u)), transparent);
          mask-image: linear-gradient(#000 calc(var(--verga-h) + 10 * var(--u)), transparent);
}
.nevoa.topo::after { top: var(--verga-h); height: calc(3 * var(--u)); }
.nevoa.base { bottom: 0; height: calc(135 * var(--u)); }
.nevoa.base::before {
  background: linear-gradient(to top, var(--parede) calc(95 * var(--u)), var(--noite) calc(95 * var(--u)));
  -webkit-mask-image: linear-gradient(to top, #000 calc(102 * var(--u)), transparent);
          mask-image: linear-gradient(to top, #000 calc(102 * var(--u)), transparent);
}
.nevoa.base::after { bottom: calc(95 * var(--u)); height: calc(4 * var(--u)); }
/* no contraste: preto puro, um só fio branco no alto e no pé (sem a linha dupla da pedra) */
:root.contraste body { --moldura-sala: #fff; }
:root.contraste body .nevoa::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root.contraste body.pagina-poema .verga { border-bottom: 0; }
:root.contraste body.pagina-poema .peitoril { border-top: 0; }
.so-placas .nevoa { visibility: hidden; }

/* =================== rodapé: a soleira da casa =================== */
/* uma faixa fina de pedra, e embaixo o fecho do site: marca, atalhos e crédito, num azul mais fundo que a página */
:root { --rodape-fundo: #1b2846; --rodape-tinta: #ece4d6; --rodape-tinta-2: #b7b0a5; --rodape-linha: rgb(236 228 214 / .14); }
:root[data-visto="escuro"] { --rodape-fundo: #08090d; --rodape-tinta-2: #a39d93; }
:root.contraste body { --rodape-fundo: #000; --rodape-tinta: #fff; --rodape-tinta-2: #fff; --rodape-linha: #fff; }
.rodape { position: relative; background: var(--rodape-fundo); color: var(--rodape-tinta); }
.rodape-pedra { position: relative; height: calc(26 * var(--u)); overflow: hidden; background: #d0c1ab; box-shadow: 0 8px 18px -10px rgb(0 0 0 / .55); }
.rodape-pedra .plate { position: absolute; top: 0; left: -3%; width: 106% !important; height: 100%; object-fit: cover !important; object-position: center 18%; }
.rodape-corpo {
  display: grid; gap: calc(26 * var(--u)); max-width: 70rem; margin: 0 auto;
  padding: calc(36 * var(--u)) calc(22 * var(--u)) calc(28 * var(--u));
}
.rodape-corpo p { margin: 0; }
.rodape-nome {
  display: flex; align-items: center; gap: .55em;
  font-size: calc(19 * var(--u)); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--rodape-tinta);
}
.rodape-nome img { width: auto; height: 1.9em; flex: none; filter: drop-shadow(0 0 1.5px rgb(236 228 214 / .9)); }
.rodape-lema { margin-top: calc(10 * var(--u)) !important; max-width: 30ch; font-size: calc(14.5 * var(--u)); line-height: 1.5; color: var(--rodape-tinta-2); text-wrap: pretty; }
.rodape-links { display: grid; align-content: start; gap: calc(2 * var(--u)); }
.rodape-links a {
  justify-self: start; display: inline-flex; align-items: center; min-height: 40px; font-size: calc(15 * var(--u)); font-weight: 500;
  color: var(--rodape-tinta); text-decoration: none; transition: color .2s var(--ease-saida);
}
@media (hover: hover) and (pointer: fine) { .rodape-links a:hover { color: var(--lampiao); } }
.rodape-links a:focus-visible { outline: 3px solid var(--lampiao-forte); outline-offset: 2px; border-radius: 4px; }
.rodape-credito { display: grid; gap: calc(8 * var(--u)); align-content: start; font-size: calc(14 * var(--u)); line-height: 1.55; color: var(--rodape-tinta-2); }
.rodape-credito strong { color: var(--rodape-tinta); font-weight: 600; }
.rodape-fim {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(6 * var(--u)) calc(18 * var(--u));
  max-width: 70rem; margin: 0 auto; padding: calc(16 * var(--u)) calc(22 * var(--u)) calc(22 * var(--u) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rodape-linha); font-size: calc(12.5 * var(--u)); color: var(--rodape-tinta-2);
}
@media (min-width: 640px) {
  .rodape-pedra { height: 1.6rem; }
  .rodape-corpo { grid-template-columns: 1.3fr .8fr 1.2fr; gap: 3rem; padding: 3rem 2.5rem 2.5rem; }
  .rodape-nome { font-size: 1.3rem; }
  .rodape-lema, .rodape-credito, .rodape-links a { font-size: .95rem; }
  .rodape-fim { padding: 1.1rem 2.5rem 1.6rem; font-size: .85rem; }
}
:root[data-visto="escuro"] .rodape-pedra { background: #15171d; }
:root.contraste body .rodape-pedra { display: none; }
:root.contraste body .rodape { border-top: 2px solid #fff; }
:root.contraste body .rodape-nome img { filter: none; }
:root.contraste body .rodape-links a { color: #ffd60a; text-decoration: underline; text-underline-offset: 4px; }

/* =================== cabeçalho: marca na placa, atalhos e tema rápido =================== */
/* inspirado no SuitCode: o emblema ao lado do nome, as seções à mão no computador, um sol/lua ao lado da engrenagem,
   e a barra que some ao descer e volta ao subir (só na página inicial e na do autor; no poema a verga é a moldura) */
.placa-simbolo { width: auto; height: calc(23 * var(--u)); flex: none; transition: transform .25s var(--ease-saida); }
@media (hover: hover) and (pointer: fine) { .placa:hover .placa-simbolo { transform: translateY(-1px) scale(1.06); } }
.placa:focus-visible { outline: 3px solid var(--lampiao-forte); outline-offset: 3px; border-radius: 4px; }

.botao-tema {
  position: absolute; top: calc(28 * var(--u)); right: calc(56 * var(--u));
  width: calc(25.6 * var(--u)); height: calc(25.6 * var(--u)); padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: calc(1.2 * var(--u)) solid var(--pedra-tinta); background: transparent; color: var(--pedra-tinta); cursor: pointer;
  transition: transform .16s var(--ease-saida), background-color .2s var(--ease-saida);
}
.botao-tema::after { content: ""; position: absolute; inset: -6px; }
.botao-tema svg { grid-area: 1 / 1; width: calc(14 * var(--u)); height: calc(14 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: opacity .25s var(--ease-saida), transform .35s var(--ease-saida); }
.botao-tema .i-sol { opacity: 0; transform: rotate(-60deg) scale(.6); }
:root[data-visto="escuro"] .botao-tema .i-lua, :root.contraste .botao-tema .i-lua { opacity: 0; transform: rotate(60deg) scale(.6); }
:root[data-visto="escuro"] .botao-tema .i-sol, :root.contraste .botao-tema .i-sol { opacity: 1; transform: none; }
.botao-tema:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .botao-tema:hover { background: rgb(21 32 58 / .08); } }
.botao-tema:focus-visible { outline: 3px solid var(--lampiao-forte); outline-offset: 3px; }
:root[data-visto="escuro"] .botao-tema { color: #ece4d6; border-color: rgb(236 228 214 / .8); }
:root.contraste body .botao-tema { color: #fff; border: 2px solid #fff; background: #000; }
.so-placas .botao-tema, .so-placas .verga-nav { visibility: hidden; }

/* atalhos das seções: só no computador */
.verga-nav { display: none; }
@media (min-width: 900px) {
  .verga-nav {
    position: absolute; top: calc(20.5 * var(--u)); height: calc(34.5 * var(--u)); left: max(2.5rem, calc(50% - 35rem));
    display: flex; align-items: center; gap: 1.6rem;
  }
  .pagina-autor .verga-nav { left: max(calc(24 * var(--u) + 3rem), calc(50% - 35rem)); }
  .verga-nav a {
    position: relative; font-size: .92rem; font-weight: 600; letter-spacing: .01em; color: var(--pedra-tinta); text-decoration: none; padding: .3rem 0;
  }
  .verga-nav a::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor;
    transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-saida);
  }
  .verga-nav a:hover::after, .verga-nav a:focus-visible::after { transform: scaleX(1); }
  .verga-nav a:focus-visible { outline: none; }
  :root[data-visto="escuro"] .verga-nav a { color: #ece4d6; }
  :root.contraste body .verga-nav a { color: #ffd60a; }
}

/* posições dos botões da direita em cada página */
.pagina-inicio .botao-tema, .pagina-autor .botao-tema { right: calc(55.6 * var(--u)); }
.pagina-poema .botao-tema { right: calc(56 * var(--u)); }
@media (min-width: 640px) {
  .pagina-inicio .botao-tema, .pagina-autor .botao-tema { right: calc(59.6 * var(--u)); }
  .pagina-poema .botao-tema { right: calc(81.6 * var(--u)); }
}

/* barra que acompanha a rolagem (início e autor) */
.pagina-inicio .verga, .pagina-autor .verga { transition: transform .26s var(--ease-gaveta), box-shadow .26s var(--ease-saida); }
.verga.rolada { box-shadow: 0 8px 22px -12px rgb(0 0 0 / .55); }
.verga.fora { transform: translateY(-100%); }
body.sem-movimento .verga { transition: none; }
@media (prefers-reduced-motion: reduce) { .verga { transition: none !important; } }
:root.contraste body .placa-simbolo { filter: none; }
:root[data-visto="escuro"] .placa-simbolo { filter: drop-shadow(0 0 1px rgb(236 228 214 / .9)); }