:root {
  --ec-bg: #fdf9f0;
  --ec-surface: #ffffff;
  --ec-surface-soft: #f7f3ea;
  --ec-border: #e6e2d9;
  --ec-text: #1c1c16;
  --ec-muted: #59413c;
  --ec-red: #c7462d;
  --ec-red-deep: #a52e17;
  --ec-teal: #2d666f;
  --ec-shadow: 0 30px 60px rgba(89, 65, 60, 0.12);
}

body.ec-body {
  background:
    radial-gradient(circle at top left, rgba(199, 70, 45, 0.07), transparent 32%),
    radial-gradient(circle at right 20%, rgba(45, 102, 111, 0.09), transparent 26%),
    var(--ec-bg);
  color: var(--ec-text);
  font-family: "Source Sans 3", Arial, sans-serif;
}

.font-newsreader,
.font-newsreader * {
  font-family: "Newsreader", Georgia, serif;
}

.font-newsreader {
  font-family: "Newsreader", Georgia, serif;
}

a {
  color: inherit;
}

details summary::-webkit-details-marker {
  display: none;
}

.ec-top-link {
  color: #3f3f39;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-decoration: none;
  text-transform: uppercase;
}

.ec-top-link:hover,
.ec-top-link--active {
  color: var(--ec-red-deep);
}

.ec-top-link--active {
  border-bottom: 2px solid var(--ec-red-deep);
  padding-bottom: 0.2rem;
}

.ec-dropdown {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  min-width: 12rem;
  border: 1px solid var(--ec-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--ec-shadow);
  padding: 0.75rem;
}

.relative:hover > .ec-dropdown {
  display: block;
}

.ec-dropdown__link {
  display: block;
  padding: 0.45rem 0.35rem;
  text-decoration: none;
}

.ec-dropdown__link:hover {
  color: var(--ec-red-deep);
}

.shadow-xl,
.shadow-2xl {
  box-shadow: var(--ec-shadow);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: "Newsreader", Georgia, serif;
  color: var(--ec-text);
}

.prose h2 {
  font-size: 2.2rem;
  line-height: 1.15;
}

.prose h3 {
  font-size: 1.7rem;
  line-height: 1.2;
}

.prose p,
.prose li {
  color: #4b4b43;
  font-size: 1.08rem;
  line-height: 1.9;
}

.prose a {
  color: var(--ec-red-deep);
  text-decoration: none;
}

.prose a:hover {
  color: var(--ec-red);
}

@media (max-width: 1023px) {
  .ec-dropdown {
    display: none !important;
  }
}

@media print {
  header,
  footer,
  aside,
  nav[aria-label="Breadcrumb"] {
    display: none !important;
  }

  body.ec-body {
    background: #fff;
  }
}