html { color-scheme: dark; }
body { margin: 0; background: #000; }
/* Use the original logo's luminance as its alpha, preserving every edge. */
img[src="/assets/images/empire-logo.png"] {
  -webkit-mask-image: url('/assets/images/empire-logo.png');
  mask-image: url('/assets/images/empire-logo.png');
  mask-mode: luminance;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: brightness(0) invert(1);
}
.skip-link { position: fixed; top: -100px; left: 16px; padding: 12px 20px; background: #dc2626; color: white; z-index: 1000; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #ef4444; outline-offset: 4px; }
#request-status { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 100; padding: 18px 24px; max-width: calc(100vw - 32px); background: #18181b; border: 1px solid #ef4444; color: white; box-shadow: 0 10px 50px #0008; font-family: 'Exo 2', sans-serif; }
button[aria-busy="true"] { opacity: .65; cursor: wait; }
#project-viewer { padding: 32px; width: min(1100px, calc(100vw - 32px)); max-height: 90dvh; border: 1px solid #ef444450; background: #09090b; color: white; font-family: 'Exo 2', sans-serif; }
#project-viewer::backdrop { background: #000e; backdrop-filter: blur(6px); }
#project-viewer h2 { font-size: 28px; margin: 8px 50px 24px 0; }
#project-viewer p { color: #ef4444; letter-spacing: .15em; font-size: 13px; }
#project-viewer img { display: block; max-height: 65dvh; width: 100%; object-fit: contain; }
.project-close { position: absolute; top: 16px; right: 24px; color: white; font-size: 36px; cursor: pointer; }
@media (max-width: 639px) {
  #project-viewer { padding: 20px; }
  [role="dialog"] .px-24 { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}