:root {
  --navy: #16233C;
  --dourado: #C6A462;
  --creme: #F8F5EF;
  --tinta-suave: #6b6558;
  --linha: #d8d2c4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--navy);
  font-family: Georgia, 'Times New Roman', serif;
  line-height: 1.6;
}

header {
  background: var(--navy);
  padding: 18px 24px;
}
header .marca {
  color: var(--dourado);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
header h1 { color: #fff; font-size: 20px; margin: 4px 0 0; font-weight: normal; }
header nav { margin-top: 10px; }
header nav a { color: #cfd6e4; margin-right: 16px; font-size: 14px; }

main { max-width: 720px; margin: 0 auto; padding: 24px; }

a { color: var(--navy); }

.item {
  border-left: 3px solid var(--dourado);
  padding: 2px 0 2px 14px;
  margin: 22px 0;
}
.item h2 { font-size: 16px; margin: 0 0 6px; }
.item .porque { font-style: italic; color: var(--tinta-suave); }
.item .quando { font-size: 12px; color: var(--tinta-suave); }
.marginal { border-left-color: var(--linha); }

form { display: flex; gap: 8px; margin: 16px 0; }
input[type=email], input[type=search] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}
button {
  padding: 10px 18px;
  border: none;
  background: var(--navy);
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  cursor: pointer;
}

.aviso { padding: 14px; background: #fff; border: 1px solid var(--linha); }
.vazio { color: var(--tinta-suave); }
footer { border-top: 1px solid var(--linha); margin-top: 32px; padding-top: 14px;
         font-size: 12px; color: var(--tinta-suave); }