/* CLOUWN site typography and controls, shared by the landing and support pages. */
:root {
  --clouwn-paper: #f4f2ea;
  --clouwn-ink: #1a1815;
  --clouwn-red: #c8341f;
  --clouwn-line: #c9c4b5;
  --clouwn-display: 'Oswald', sans-serif;
  --clouwn-body: 'PT Serif', Georgia, serif;
  --clouwn-meta: 'JetBrains Mono', monospace;
}
.clouwn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 20px;
  border: 2px solid var(--clouwn-red);
  border-radius: 0;
  background: var(--clouwn-red);
  color: var(--clouwn-paper);
  box-shadow: 5px 5px 0 var(--clouwn-ink);
  font: 700 18px/1.1 var(--clouwn-display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-decoration: none;
}
.clouwn-button:hover {
  border-color: var(--clouwn-ink);
  background: var(--clouwn-ink);
  color: var(--clouwn-paper);
  box-shadow: 5px 5px 0 var(--clouwn-red);
}
.clouwn-button.secondary {
  border-color: var(--clouwn-ink);
  background: transparent;
  color: var(--clouwn-ink);
}
.clouwn-button.secondary:hover { background: var(--clouwn-ink); color: var(--clouwn-paper); }