/* The site footer (home page, privacy and cookie policies, 404): social icons, links and the Merch pop-up.
   Shared by every page so it looks the same everywhere. */
.site-footer { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; padding: 40px 16px 28px; text-align: center;
  font: 13px/1.7 ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Courier New', monospace; color: #d4d6f2; text-shadow: 0 1px 0 #000; }
.site-footer p { margin: 0; font-size: inherit; line-height: inherit; }   /* not the host page's paragraph style */
.site-footer a, .site-footer .foot-link { color: #d4d6f2; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a:hover, .site-footer a:focus-visible, .site-footer .foot-link:hover, .site-footer .foot-link:focus-visible { color: #ffe070; }
.foot-link { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-shadow: inherit; }
/* Merch is a button, so strip any page button styling (the home page's red buttons) to make it look like the other links */
.site-footer .foot-link, .site-footer .foot-link:hover, .site-footer .foot-link:focus-visible, .site-footer .foot-link:active {
  background: none; box-shadow: none; transform: none; letter-spacing: inherit; font-weight: inherit; border-radius: 0; }

/* social icons: plenty of room around them */
.social { display: flex; justify-content: center; gap: 28px; margin: 0 0 28px; }
.social a, .social span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #d4d6f2; background: rgba(4,2,10,0.7); border: 2px solid #3a3a5e; transition: color 0.15s, border-color 0.15s, transform 0.15s; }
.social a:hover, .social a:focus-visible, .social span:hover { color: #ffe070; border-color: #ffe070; transform: translateY(-2px); outline: none; }
.social svg { width: 20px; height: 20px; }

/* the Merch pop-up: the toy card; click anywhere or press Esc to close */
.merch { padding: 0; border: 0; background: none; max-width: min(92vw, 560px); max-height: 92vh; overflow: visible; cursor: zoom-out; }
.merch::backdrop { background: rgba(0,0,0,0.85); }
.merch img { display: block; width: auto; height: auto; max-width: min(92vw, 560px); max-height: 92vh; box-shadow: 0 0 0 2px #000, 0 10px 40px rgba(0,0,0,0.8); }
.merch-close { position: absolute; top: -16px; right: -16px; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; color: #fff; background: #ff3b30; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.6); cursor: pointer; transition: transform 0.15s, background 0.15s; }
.merch-close svg { width: 16px; height: 16px; }
.merch-close:hover, .merch-close:focus-visible { background: #ff5a4f; transform: scale(1.1) rotate(90deg); outline: none; }
@media (prefers-reduced-motion: reduce) { .social a, .social span, .merch-close { transition: none; } .social span:hover, .merch-close:hover, .merch-close:focus-visible { transform: none; } }