/* ==========================================================
   DREAM FORGE PRODUCTIONS — shared styles for every page.
   Page-specific styles live in each page's own <style> tag.
   ========================================================== */

/* FONT */
@font-face {
  font-family: 'commitmono';
  src: url('fonts/CommitMono-400-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* RESET */
* {
  box-sizing: border-box;
}

body {
  font-family: 'commitmono', monospace;
  margin: 0;
  background: black;
  color: white;

  /* keeps the footer at the bottom on short pages */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* LINKS */
a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  opacity: 0.8;
}

/* KEYBOARD FOCUS (shows when tabbing, not when clicking) */
:focus-visible {
  outline: 1px solid white;
  outline-offset: 3px;
}

/* PLAIN BUTTON (looks like text: lightbox arrows, close buttons) */
.plain-button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* HEADER (nav drops under the logo on narrow phones) */
header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 20px;
  padding: 15px 20px;
}

/* NAV */
nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
  margin: 0;
  padding: 0;
}

/* FOOTER */
footer {
  text-align: center;
  padding: 20px;
  opacity: 0.6;
}

footer .social {
  margin-top: 20px;
}

/* CENTERED MESSAGE PAGES (contact, store, under construction) */
.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;
  text-align: center;
}

.centered p {
  margin: 0;
}

@media (max-width: 600px) {
  .centered {
    justify-content: flex-start;
  }
}

/* RESPECT "REDUCE MOTION" SETTING */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}