/* style.css */
:root {
  --bg: #fdf6e3;    /* Soft Sepia */
  --text: #2c3e50;
  --link-color: #0044cc;
  --max-width: 1000px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --text: #e0e0e0;
    --link-color: #4da3ff;
  }
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Georgia", serif;
  line-height: 1.8;
  margin: 0;
  padding: 0;
}

/* THE FIX: This centers everything perfectly */
.page-wrapper {
  display: grid;
  /* Left Margin | Centered Content | Right Margin */
  grid-template-columns: 1fr min(var(--max-width), 90%) 1fr;
  row-gap: 60px;
  padding-bottom: 80px;
}

/* Force all top-level elements into the center column */
.page-wrapper > * {
  grid-column: 2;
}

/* TYPOGRAPHY */
h1 { font-family: sans-serif; font-size: 2.5rem; text-align: center; margin-top: 4rem; }
h2 { font-family: sans-serif; font-size: 1.8rem; text-align: center; margin-bottom: 2rem; }
.tagline { text-align: center; font-style: italic; color: #666; }

/* THE LIBRARY GRID (2 Columns) */
.story-grid {
  display: grid;
  /* Automatically makes 2 columns on desktop, 1 on mobile */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 50px;
}

.story-card h3 a {
  color: var(--link-color);
  text-decoration: none;
}

.story-card h3 a:hover { text-decoration: underline; }

.story-meta { font-size: 0.9rem; color: #888; margin-top: -10px; }

/* HUB SECTION */
.hub-section {
  background: rgba(0, 0, 0, 0.03); /* Subtle contrast */
  padding: 40px;
  border-radius: 8px;
}

.hub-links { list-style: none; padding: 0; text-align: center; }
.hub-links li { margin-bottom: 15px; }

/* FOOTER */
.site-footer {
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top: 40px;
  font-size: 0.9rem;
}
/* Specific fix for the Story Pages */
.reader-mode {
  /* This ensures the grid from the body doesn't squash the story content */
  display: block; 
  padding: 0;
}

.story-content {
  max-width: 800px;  /* Optimal reading width */
  margin: 0 auto;    /* The "Holy Grail" of centering */
  padding: 40px 20px; /* Gives you that missing left/right margin */
}

.story-content h1 {
  text-align: center;
  margin-bottom: 0.5rem;
}

.story-content .story-meta {
  text-align: center;
  margin-bottom: 3rem;
  color: #666;
}

/* Fix the Images to be centered and well-spaced */
.story-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 3rem auto; /* Centers the image and adds vertical space */
  border-radius: 4px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Subtle HCI touch for depth */
}