/* Translucent glass with a softly blurred fractal texture. */
body.modal-open { overflow: hidden; }

.modal-card .actions { margin-top: 24px; }
.modal-card .primary { white-space: normal; text-align: center; }
.modal-card h3 { padding-right: 24px; overflow-wrap: anywhere; }

@media (max-width: 580px) {
  .modal { padding: 12px; }
  .modal-card { padding: 28px 20px; max-height: 86dvh; }
  .modal-card h3 { font-size: 25px; }
  .modal-card .actions .primary { width: 100%; }
}

.modal {
  background: rgba(25, 32, 38, .48);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-card {
  background-color: rgba(230, 237, 215, .75);
  color: var(--brand-dark);
  color-scheme: light;
  background-image: url('../assets/modal-fractal.svg');
  background-position: center;
  background-size: cover;
  border-color: rgba(230, 237, 215, .65);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow:
    0 28px 90px rgba(25, 32, 38, .4),
    0 0 40px rgba(230, 237, 215, .12),
    inset 0 1px 0 rgba(230, 237, 215, .8);
}

.modal-card p,
.modal-card li {
  color: #374237;
}

.modal-card .eyebrow {
  color: #486f0b;
}

.modal-card .tag {
  background: rgba(230, 237, 215, .5);
  border-color: rgba(25, 32, 38, .22);
  color: var(--brand-dark);
}

.modal-card .resource-link { color: #486f0b; }
.modal-close { color: var(--brand-dark); }
.modal-card a:focus-visible,
.modal-close:focus-visible { outline-color: #486f0b; }

.modal-close:hover,
.modal-close:focus-visible {
  color: #486f0b;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .modal-card {
    background-color: rgba(230, 237, 215, .75);
  }
}