/* Navy and red wave theme, shared by every ALENZACODES site. MIT, John Khan. */
:root {
  --w-navy: #011f5b;
  --w-navy-2: #0b2d6e;
  --w-red: #990000;
  --w-cream: #fbf8f1;
  --w-paper: #ffffff;
  --w-sand: #f4f1ea;
  --w-ink: #14213d;
  --w-muted: #4a5570;
  --w-line: #dcd6c8;
  --w-good: #1b6b3a;
  --w-bad: #b3261e;
  --w-warn: #8a5a00;
  --w-on-navy: #ffffff;
  --w-on-navy-muted: #d6dceb;
  --w-serif: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --w-script: "Pinyon Script", "Snell Roundhand", "Segoe Script", cursive;
  --w-sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --w-wave-h: 30px;
}

/* Navy band with flowing lines and a wave edge. Add class="w-wave" to a header. */
.w-wave {
  position: relative;
  background-color: var(--w-navy);
  background-image: url("wave-lines.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  color: var(--w-on-navy);
  margin-bottom: var(--w-wave-h);
  border-bottom: 0;
}
.w-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-1 * var(--w-wave-h) + 1px);
  height: var(--w-wave-h);
  background: url("wave.svg") top / 100% 100% no-repeat;
  pointer-events: none;
}

/* Headings in a classic serif. */
.w-serif,
.w-headings h1,
.w-headings h2,
.w-headings h3 {
  font-family: var(--w-serif);
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* Script is for short accents only, never for body text. */
.w-script {
  font-family: var(--w-script);
  font-weight: 400;
  font-size: 1.6em;
  line-height: 1;
  color: var(--w-red);
}
.w-wave .w-script {
  color: var(--w-on-navy);
}

/* Thin wave rule between sections. */
.w-rule {
  height: 14px;
  border: 0;
  margin: 24px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7c15-8 30 8 45 0s30-8 45 0 22 6 30 3' fill='none' stroke='%23990000' stroke-width='1.6'/%3E%3C/svg%3E")
    center / 120px 14px repeat-x;
}

@media (max-width: 600px) {
  :root {
    --w-wave-h: 18px;
  }
}
@media print {
  .w-wave {
    background-image: none;
  }
  .w-wave::after {
    display: none;
  }
}