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; }
    @keyframes purityShift { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
    @keyframes heroSheen { from { background-position: 0% 50%; } to { background-position: -50% 50%; } }
    @keyframes caretBlink { 0%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
    @media print { [data-reveal] { opacity: 1 !important; transform: none !important; } }

/* 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 { border-color: rgba(217,122,69,.5) }
.x4:focus { border-color: #D97A45 }
.x5:hover { transform: scale(1.06) }
.x6:hover { transform: scale(1.15); z-index: 20; border-color: rgba(217,122,69,.5); box-shadow: 0 26px 60px rgba(0,0,0,.6) }
.x7:hover { transform: scale(1.15); z-index: 20; box-shadow: 0 26px 60px rgba(0,0,0,.6) }
.x8:hover { transform: scale(1.07); box-shadow: 0 18px 46px rgba(0,0,0,.5), 0 0 0 1px rgba(217,122,69,.45) }
.x9:hover { color: #14100C }
.x10:hover { border-color: #D97A45; color: #F6C89A }