:root {
  --fundo: #f4efe4;
  --cartao: #fffdf8;
  --texto: #15130f;
  --suave: #5a5246;
  --borda: #15130f;
  --destaque: #d62718;
  --destaque-fundo: #fbe9e3;
  --marca: #ffd23f;
  --marca-texto: #15130f;
  /* cores alternadas entre os stories: vermelho, azul, verde, roxo */
  --c2: #1f4fd1; --c2-fundo: #e7edfc;
  --c3: #0b7a43; --c3-fundo: #e2f3e9;
  --c4: #7a2bb8; --c4-fundo: #f1e7fa;
  --titulo: "Cormorant Garamond", "Georgia", "Times New Roman", serif;
  --corpo: "Source Serif 4", "Georgia", "Times New Roman", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14120f;
    --cartao: #1e1b17;
    --texto: #f2ece0;
    --suave: #b3aa9a;
    --borda: #f2ece0;
    --destaque: #ff5a43;
    --destaque-fundo: #2c1d18;
    --marca: #ffd23f;
    --marca-texto: #15130f;
    --c2: #7fa4ff; --c2-fundo: #1b2338;
    --c3: #4cc98a; --c3-fundo: #15291f;
    --c4: #c18cff; --c4-fundo: #261c33;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 17px/1.55 var(--corpo);
}

.topo, main, .rodape {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
}
.topo { padding-top: 26px; padding-bottom: 8px; }
.selo {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 10px;
  background: var(--destaque);
  color: #fff;
  font: 700 0.75rem/1.4 var(--corpo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
h1 {
  font: 700 2.7rem/1.02 var(--titulo);
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 4px double var(--borda);
  letter-spacing: -0.01em;
}
h1 em { font-style: italic; color: var(--destaque); }
.sub { color: var(--suave); margin: 10px 0 16px; font-style: italic; }

.busca {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--cartao);
  border: 2px solid var(--borda);
  padding: 0 12px;
}
.busca svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--texto); stroke-width: 2.4; stroke-linecap: round; }
.busca input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--texto);
  font: inherit;
  padding: 11px 0;
}
.busca:focus-within { border-color: var(--destaque); }

main { padding-top: 18px; padding-bottom: 8px; display: grid; gap: 18px; }

.story {
  background: var(--cartao);
  border: 2px solid var(--borda);
  box-shadow: 5px 5px 0 var(--borda);
  border-top: 8px solid var(--destaque);
  padding: 18px 16px 16px;
}
.story:nth-child(4n+2) { --destaque: var(--c2); --destaque-fundo: var(--c2-fundo); }
.story:nth-child(4n+3) { --destaque: var(--c3); --destaque-fundo: var(--c3-fundo); }
.story:nth-child(4n+4) { --destaque: var(--c4); --destaque-fundo: var(--c4-fundo); }
.data { color: var(--suave); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.story h2 {
  font: 700 1.65rem/1.15 var(--titulo);
  margin: 0 0 10px;
}
.contexto { margin: 0 0 8px; color: var(--suave); }

.marca {
  font-weight: 700;
  background: linear-gradient(transparent 12%, var(--marca) 12%, var(--marca) 88%, transparent 88%);
  color: var(--marca-texto);
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.story h2 .marca { font-weight: 700; }

.fontes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.fontes a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--destaque-fundo);
  border-left: 4px solid var(--destaque);
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.fontes a:active { opacity: 0.75; }
.veiculo {
  display: block;
  font: 700 0.74rem/1.5 var(--corpo);
  color: var(--destaque);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.titulo-fonte { display: block; }
.nota { display: block; color: var(--suave); font-size: 0.9rem; margin: 4px 2px 0; }

.aviso { color: var(--suave); text-align: center; padding: 24px 0; margin: 0; }
.rodape { color: var(--suave); font-size: 0.9rem; font-style: italic; padding-top: 12px; padding-bottom: 32px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.story .aviso { text-align: left; padding: 4px 0 0; font-size: 0.9rem; }