html { scroll-behavior: smooth; }
    body { margin: 0; background: #14100C; color: #F2E9DE; font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
    a { color: #D97A45; text-decoration: none; }
    a:hover { color: #F6C89A; }
    ::selection { background: #B15A2E; color: #FBF8F1; }

/* image-slot replacements */
.credit {
  position: absolute; left: 6px; bottom: 6px; max-width: calc(100% - 12px);
  font: 400 9.5px/1.4 'IBM Plex Mono', monospace; color: rgba(251,248,241,.72);
  background: rgba(0,0,0,.42); padding: 3px 6px; border-radius: 2px;
  pointer-events: auto;
}
.credit a { color: inherit; }
.credit a:hover { text-decoration: underline; color: inherit; }

/* modals (were <sc-if> branches) — beats the backdrop's inline display:flex */
.modal[hidden] { display: none !important; }

@media print {
  .credit, .modal { display: none !important; }
}


/* hover / focus states lifted out of style-hover attrs */
.x1:hover { color: #F6C89A }
.x2:hover { border-color: #F6C89A; color: #F6C89A }
.x3:hover { background: #F2E9DE; color: #14100C }
.x4:hover { color: #14100C }