/* Your custom CSS goes here */
/* This file will be served from /css/custom.css */

/* Font Setup */
/* Charter for body text */


main {
  max-width: 40vw;
  margin: 0 auto;
}

body {
  background-color: #E6E2E0;
  color: #333;
  font-family: 'Charter', Georgia, serif;
  font-weight: 300;
  letter-spacing: -0.015em;
  font-size: 14px;
  line-height: 1.6;
  text-wrap: pretty;
  text-rendering: optimizeLegibility;
}

.title-group{
  margin-bottom: 1rem;
}

/* Instrument Serif for headers */
h1, h2, h3, h4, h5, h6,
header h2,
.post .title h1,
.post-list h1 {
  font-family: 'Instrument Serif', Georgia, serif;
  color: #202020;
}

h1 { 
  font-size: 1.9rem;   /* ~30px */
  line-height: 1.25;
  font-weight: 400;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
h2 { 
  font-size: 2.4rem; margin-top: 2.5rem;
}
h3 { 
  font-size: 1.9rem; margin-top: 2rem;
 }

a:hover {
  color: #8F5E19;
}

.title h1 a {
  color: #202020;
  font-size: 1.9rem;   /* ~30px */
  line-height: 1.25;
  font-weight: 400;
}

header h2 a {
  color: #AD721F !important
}

header h2 a:hover {
  color: #8F5E19 !important
}

.date {
  color: #202020;
}

.content {
  font-size: 1em;
  line-height: 1.3;
}

a {
  color: #666;
}

p {
  margin: 1.25em 0;
  font-size: 1.2em;
}

div.header-container {
  max-width: 40vw;
  margin: 0 auto;
}

div.header-container h2 {
  margin: 0;
  max-width: 50vw;
}

/* Media queries for smaller screens - larger max-width */
@media (max-width: 1024px) {
  main {
    max-width: 90%;
  }
  
  div.header-container {
    max-width: 90%;
  }
  
  div.header-container h2 {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  main {
    max-width: 95%;
    padding: 0 15px;
  }
  
  div.header-container {
    max-width: 95%;
  }
}

@media (max-width: 400px) {
  main {
    max-width: 100%;
    padding: 0 10px;
  }
  
  div.header-container {
    max-width: 100%;
  }
}