/* Basic page setup */
html, body {
  margin: 0;
  padding: 0;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background-color: #f0f0f0; /* Light grey background for the overall page */
  color: #333;
}

/* Narrative Section Styling */
#narrative-section {
  background-color: #ffffff; /* White background */
  min-height: 100vh;
  padding: 40px 5%;
  box-sizing: border-box;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); 
}

/* Center the text blocks as a column */
#narrative-section h1,
#narrative-section h2,
#narrative-section p,
#narrative-section ul {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* --- KEY CHANGES HERE --- */
/* H1: "Visualizing the Language of Hate" */
#narrative-section h1 {
  font-size: 5.85rem;  
  text-align: center; 
  color: #000;
  line-height: 1.1;     /* Increased leading (was 1.0) */
  margin-top: 2rem;
  margin-bottom: 7rem;  /* Increased spacing (was 5rem) */
  padding-bottom: 1rem;
}

/* H2: "What Is This Visualization About?" */
#narrative-section h2 {
  font-size: 2.25rem;
  color: #000;
  margin-top: 4.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #ddd;
}

/* P: Paragraph text */
#narrative-section p {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}

/* UL: List element */
#narrative-section ul {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  padding-left: 20px;
  box-sizing: border-box;
}

#narrative-section li {
  margin-bottom: 10px;
}

/* Helper Styles (Unchanged) */
#narrative-section b, 
#narrative-section strong {
  color: #c80000; 
}

#narrative-section code {
  background-color: #eee;
  padding: 2px 5px;
  border-radius: 4px;
  font-family: monospace;
}

/* --- Visualization Container (Unchanged) --- */
#visualization-container {
  margin-left: auto;
  margin-right: auto; 
  margin-top: 0; 
  margin-bottom: 40px; 
  
  width: 1920px; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  line-height: 0; 
}

canvas {
  display: block;
}