:root {
  color-scheme: light dark;
  --fundo: #F6F7F4;
  --superficie: #FFFFFF;
  --tinta: #121815;
  --suave: #5D6862;
  --fraco: #8A948E;
  --linha: #E0E5DE;
  --acento: #1F5C4A;
  --acento-fundo: rgba(31, 92, 74, 0.09);
  --quente: #A83318;
  --quente-fundo: rgba(168, 51, 24, 0.06);
  --serifa: "Newsreader", Georgia, "Times New Roman", serif;
  --sem-serifa: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E1211;
    --superficie: #161C1A;
    --tinta: #E7ECE8;
    --suave: #9AA6A0;
    --fraco: #6F7A75;
    --linha: #242D2A;
    --acento: #71C4A6;
    --acento-fundo: rgba(113, 196, 166, 0.13);
    --quente: #E9846A;
    --quente-fundo: rgba(233, 132, 106, 0.09);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--sem-serifa);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.pagina {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1.75rem 1rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* topo */
.topo { display: flex; flex-direction: column; gap: 0.8rem; }
.marca {
  font-family: var(--serifa);
  font-size: clamp(2.4rem, 10vw, 3.2rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.marca.menor { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.voltar { font-family: var(--mono); font-size: 0.75rem; color: var(--suave); text-decoration: none; }

.carimbo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--suave);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 0.5rem 0;
}
.carimbo b { color: var(--tinta); font-weight: 500; }
.carimbo form { margin: 0; }

.botao {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--superficie);
  border: 1px solid var(--acento);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}
.botao.cheio { width: 100%; padding: 0.7rem; background: var(--acento); color: var(--fundo); }
.link { font: inherit; color: var(--acento); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

.aviso {
  margin: 0;
  font-size: 0.85rem;
  color: var(--suave);
  background: var(--acento-fundo);
  border-left: 2px solid var(--acento);
  padding: 0.55rem 0.8rem;
}

.atalhos { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.atalhos a {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-decoration: none;
  color: var(--suave);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
}
.atalhos a.atual { color: var(--acento); border-color: var(--acento); }

/* seções */
section { display: flex; flex-direction: column; gap: 1.2rem; scroll-margin-top: 1rem; }
.cabeca {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  border-bottom: 2px solid var(--tinta);
  padding-bottom: 0.35rem;
}
.cabeca h2 { font-size: 0.94rem; font-weight: 600; letter-spacing: 0.02em; margin: 0; }
.cabeca.quente { border-color: var(--quente); }
.cabeca.quente h2 { color: var(--quente); }
.nota { font-family: var(--mono); font-size: 0.68rem; color: var(--suave); }
.mais { margin-left: auto; font-family: var(--mono); font-size: 0.7rem; color: var(--acento); }

.lista { display: flex; flex-direction: column; gap: 1.35rem; }

.historia { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.historia h3 {
  font-family: var(--serifa);
  font-size: 1.18rem;
  font-weight: 600;
  line-height: 1.28;
  margin: 0;
  overflow-wrap: anywhere;
}
.historia p { margin: 0; color: var(--suave); font-size: 0.945rem; line-height: 1.6; }
.historia.destaque {
  border-left: 2px solid var(--quente);
  background: var(--quente-fundo);
  padding: 0.8rem 0.9rem;
}
.fontes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.6rem;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fraco);
}
.fontes a { color: var(--acento); text-decoration: none; border-bottom: 1px solid currentColor; }
.tags { font-family: var(--mono); font-size: 0.64rem; color: var(--fraco); }

.vazio { color: var(--suave); }
.alerta { color: var(--quente); }

/* rodapé */
.rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
  border-top: 1px solid var(--linha);
  padding-top: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--fraco);
}
.rodape b { color: var(--suave); font-weight: 500; }
.rodape form { margin: 0 0 0 auto; }

/* entrada */
.entrar { max-width: 20rem; margin: 18vh auto 0; display: flex; flex-direction: column; gap: 1.5rem; }
.entrar form { display: flex; flex-direction: column; gap: 0.6rem; }
.entrar label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--suave); }
.entrar input {
  font: inherit;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: 3px;
  padding: 0.65rem 0.75rem;
}
.entrar p { margin: 0; font-size: 0.85rem; }