* {
    font-family: 'Oxygen', sans-serif;
    line-height: 1.6;
  }
  
  /* Consistent color palette */
:root {
    --primary-purple: #8e44ad;
    --secondary-blue: #3498db; 
    --accent-teal: #1abc9c;
}

p {
    font-size: 0.95em;
    line-height: 1.65;
    max-width: 65ch;
    width: 95%;
    margin-bottom: 0.8em; /* Add this to reduce paragraph spacing */
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap');

h1 {
    font-family: 'Playfair Display', serif;
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 5px; /* Reduce space after title */
    margin-top: 10px;
    letter-spacing: -0.5px;
}

h2 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 1.3;
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 5px;
    margin-top: 0px; /* Reduce space above h2 */
    margin-bottom: 5px; /* Small space between h2 and italic */
}

i {
    display: block;
    margin-bottom: 5px; /* Increase space after italic text */
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    background-color: lightgray;
    margin: 0;
    padding: 0;
}

.page {
    width: 900px;
    background-color: white;
    margin: 10px auto;
    padding: 15px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.vis-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.pure-g {
    margin-bottom: 10px;
    padding: 20px 0;
    border-bottom: 1px solid #e0e0e0;
}

/* Add this to reduce space between title and visualizations */
.pure-g:first-of-type {
    margin-bottom: 3px;
    padding-bottom: 5px; /*padding for title*/
    padding-top: 5px;
}

/* Left border accents for visual hierarchy */
.pure-g:not(:first-child):not(:last-child) {
    border-left: 4px solid #e0e0e0;
    padding-left: 10px;
    margin-bottom: 5px; /* Add this to reduce space between sections */
}

/* Metadata section - minimal spacing */
.pure-g:last-child {
    margin-bottom: 0px;
    margin-top: 5px;
    border-bottom: none;
    padding-bottom: 5px;
}

/* Subtle background variations */
.pure-g:nth-child(even) {
    background-color: #fafafa;
}

.pure-g.map {
    border-left-color: #2196F3;
    background-color: #f3f8ff;
}

/* Fix excessive spacing in map section */
.pure-g.map .pure-u-1-2:first-child {
    width: 32%;
    padding-top: 25px;
}
.pure-g.heatmap {
    border-left-color: #9C27B0;
    background-color: #fdf4ff;
}

/* Force proper grid layout */
.pure-u-1-2 {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}

.metadata p {
    font-size: 12px;
    margin-bottom: 0.2em;
    margin-top: 0.2em;
    line-height: 1.2;
}

/* Also target the first p element specifically */
.metadata p:first-of-type {
    margin-top: 0px !important;
}

/* And the last p element */
.metadata p:last-of-type {
    margin-bottom: 0px !important;
}

/* Heatmap section layout */
.pure-g .pure-u-1-2:first-child {
    width: 32%;
    padding-right: 25px;
}

.pure-g .pure-u-1-2:last-child {
    width: 68%;
}

/* Scale charts appropriately within their containers */
#vis1, #vis2, #vis3, #vis4 {
    width: 100%;
    height: auto;
}