/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Dark Atmospheric Theme Base */
:root {
  --bg-color: #0d0d11;
  --panel-bg: #14141c;
  --border-color: #2a2a38;
  --text-main: #d0d0dc;
  --text-rune: #c5a059; /* Aged gold hue for runes */
  --link-hover: #e5b869;
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: 'Junicode', 'Noto Sans Runic', 'Segoe UI Historic', 'Segoe UI Symbol', sans-serif;
  margin: 0 auto;
  max-width: 850px;
  padding: 20px;
  line-height: 1.6;
}

/* Runic Header Styling */
h1, h2 {
  color: var(--text-rune);
  text-align: center;
  font-weight: normal;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(197, 160, 89, 0.2);
}

/* Link Hub Styles */
.rune-nav ul, .link-hub {
  list-style: none;
  padding: 0;
}

.rune-nav ul {
  display: flex;
  justify-content: center;
  gap: 15px;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  padding: 10px 0;
}

a {
  color: var(--text-rune);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

a:hover {
  color: var(--link-hover);
  text-shadow: 0 0 5px var(--link-hover);
}

/* Render Gallery Frame */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.render-card {
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  margin: 0;
  padding: 10px;
  text-align: center;
}

.render-card img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
}

figcaption {
  font-size: 0.85em;
  margin-top: 8px;
  color: #8a8a9e;
}