/*	body { */
/*	  margin: 0; */
/* 	  font-family: 'Georgia', serif; */
/*	  background: url('../images/backgr/*ounds/background-texture.jpg') repeat; */
/*	  background-color: #fdfaf6; */
/*	  color: #333; */
/*	} */

body {
  margin: 0;
  font-family: 'Georgia', serif;
  color: #2e2b23;
  line-height: 1.7;

  background-color: #fdfaf6; /* fallback background color */
  background-image: url('../images/backgrounds/background-texture.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}



header {
  background: url('../images/backgrounds/header-background.jpg') center/cover no-repeat;
  color: white;
  padding: 3rem 1rem 2rem;
  text-align: center;
}


/* Unify hero title styling no matter which element you use */
header h1,
.site-title {
  font-size: 3rem;
  margin: 0;
  color: #fff;
  text-shadow: 2px 2px 5px #000;
  line-height: 1.1;
  font-weight: bold;
}


header h2 {
  font-size: 1.3rem;
  margin-top: 0.5rem;
  text-shadow: 1px 1px 4px #000;
}

header p {
  font-size: 18px;
  color: #f0f0f0;
  max-width: 800px;
  margin: 0 auto;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}


/* Improve legibility of the 1–20 intro paragraph */
.content1 .intro-text {
  max-width: 900px;          /* already set inline; moving to CSS */
  margin: 0 auto 1.5rem;     /* center + a touch more breathing room */
  padding: 18px 22px;        /* give the text a “card” cushion */
  font-size: 1.1rem;         /* ~17.6px default; readable but not huge */
  line-height: 1.75;         /* relaxed line spacing */
  color: #3b2a1a;            /* warmer, higher-contrast body color */
  background: rgba(255,255,255,0.92);  /* soft white panel over texture */
  border: 1px solid #e6dccd; /* matches your palette */
  border-radius: 10px;       /* consistent with your cards */
  box-shadow: 0 2px 8px rgba(0,0,0,0.06); /* subtle lift */
  text-shadow: none;         /* ensure crisp text */
}

/* Slightly larger on big desktops, slightly smaller on phones */
@media (min-width: 1200px) {
  .content1 .intro-text { font-size: 1.125rem; }  /* ~18px */
}
@media (max-width: 640px) {
  .content1 .intro-text {
    font-size: 1rem;         /* ~16px for small screens */
    padding: 16px 18px;
  }
}

.subpage-intro {
  max-width: 900px;
  margin: 30px auto 40px auto;
  padding: 20px 25px;
  background: #fdfdfd;
  border-left: 6px solid #d4af37; /* matches golden accent */
  border-radius: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  font-size: 18px;
  line-height: 1.7;
  color: #333;
}

.subpage-intro strong {
  color: #2c3e50; /* deep blue/gray for emphasis */
}

.main-index-intro {
  max-width: 960px;
  margin: 35px auto 45px auto;
  padding: 25px 30px;
  background-color: #F5EBDD;
  border: 2px solid #e0d6b4; /* subtle gold-tinted border */
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
  font-size: 19px;
  line-height: 1.75;
  color: #333;
  text-align: center;
}

.main-index-intro strong {
  color: #2c3e50;
}


nav {
  background-color: #A67C52;
  padding: 10px;
  text-align: center;
}

nav a {
  color: #fff;
  margin: 0 15px;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  color: #FFE5B4;
}

.nav-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 2rem 0;
}

.nav-button {
  background-color: #F5EBDD;
  color: #5B3924;
  padding: 12px 24px;
  border: 1px solid #d6c6b4;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  font-size: 1rem;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.nav-button:hover {
  background-color: #E8D8C0;
  transform: scale(1.03);
}
.nav-button {
  box-shadow: 1px 2px 6px rgba(0,0,0,0.1);
  margin: 0 10px;
}



.intro-text {
  max-width: 900px;
  margin: 40px auto 30px;
  padding: 0 20px;
  font-size: 20px;
  text-align: center;
  color: #4b3522;
  text-shadow: 0.5px 0.5px 0.5px rgba(255,255,255,0.4);
  line-height: 1.6;
}

.featured {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}

.featured h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.featured a {
  color: #D4A373;
  text-decoration: none;
  font-weight: bold;
}

.featured a:hover {
  color: #bb6b3c;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: 20px auto 60px;
  padding: 0 20px;
}

/* .card { */
/*   background: #ffffff; */
/*   border-radius: 10px; */
/*   box-shadow: 0 2px 8px rgba(0,0,0,0.1); */
/*   padding: 20px; */
/*   text-align: center; */
/*   transition: background-color 0.3s, color 0.3s; */
/*   text-decoration: none */
/* } */

.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background-color: #fefae0;         /* warm, soft background */
  border: 1px solid #ccc;            /* subtle border */
  border-radius: 10px;               /* rounded corners */
  padding: 30px 20px;                /* spacious inner padding */
  color: #333;                       /* clear, dark text */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* subtle elevation */
  text-decoration: none;             /* remove underline if used on <a> */
  text-align: center;                /* center text for fallback */

  transition: all 0.3s ease;         /* smooth transitions */
}



.card a {
  display: block;
  text-decoration: none;
  color: #A65F39;
  font-weight: bold;
  margin-top: 10px;
}

.card:hover {
  background-color: #A67C52;
  color: #fff;
}

.card:hover h3,
.card:hover a {
  color: #fff;
}

.card h3 {
  font-size: 16px;
  margin-bottom: 8px;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.video-container {
  text-align: center;
}

.video-container h2 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.video-container iframe, .video-grid iframe {
  width: 100%;
  height: 300px;
  border-radius: 8px;
}

.content {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.content h2 {
  text-align: center;
  margin-top: 0;
}

.content1 {
  max-width: 900px;
  margin: 40px auto;
  padding: 20px;
}

.content2 {
  max-width: 900px;
  margin: 2rem auto;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

    .commentary-title {
      text-align: center;
      margin-top: 2rem;
      font-size: 1.6rem;
    }

.lecture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;

  max-width: 1200px;     /* Centers and constrains grid width */
  margin: 2rem auto 0;   /* Top spacing and center alignment */
  padding: 1rem;         /* Inner spacing */
}


.lecture-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fefae0;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 30px 20px;
  text-decoration: none;
  color: #333;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}


.lecture-card .lecture-number {
  display: block;
  text-align: center;   /* center both lines */
}
.lecture-card .lecture-number .latest {
  display: block;       /* puts LATEST on its own line */
  font-weight: 700;
  color: #c00;          /* optional: make it red */
  margin-bottom: 4px;
}


.lecture-card:hover {
  background-color: #A67C52;
  color: #fff;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.15);
}

.lecture-card span {
  font-weight: bold;
  font-size: 1.2rem;
}

footer {
  text-align: center;
  font-size: 13px;
  color: #FFF8F0;
  padding: 20px;
  background-color: #A67C52;
}

footer a {
  color: #FFE5B4;
  text-decoration: underline;
}

footer a:hover {
  color: #FFF2D5;
}

/* ==== Two-Column Lecture Layout – Added 2025-08-13 ==== */

/* Wider content variant for lecture pages so Spotify titles fit */
.content.content--wide { max-width: 1200px; }

/* Two-column grid: left = commentary/questions; right = media */
.two-col-grid {
  display: grid;
  grid-template-columns: minmax(520px, 2fr) minmax(380px, 1fr);
  gap: 24px;
  align-items: start;
}

/* Stack on medium screens to preserve Spotify titles */
@media (max-width: 1100px) {
  .two-col-grid { grid-template-columns: 1fr; }
}

/* Spacing between stacked media items on the right */
.media-stack > * + * { margin-top: 16px; }

/* Responsive 16:9 wrapper for YouTube iframes */
.embed-16x9 { position: relative; width: 100%; background:#000; overflow:hidden; }
.embed-16x9::before { content:""; display:block; padding-top:56.25%; } /* 9/16 */
.embed-16x9 > iframe { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Ensure legacy fixed heights do not affect the new layout */
.two-col-grid iframe { height: auto; }

/* Spotify embed utility */
.spotify-embed { width:100%; border:0; display:block; border-radius:12px; }
.spotify-embed.tall { height:232px; }

/* Right column: center the embeds and constrain max width for aesthetics */
.col-right { display:flex; flex-direction:column; align-items:center; }
.col-right .embed-16x9, .col-right .spotify-embed { width:100%; max-width:560px; margin-inline:auto; }

@media (max-width: 700px) {
  .col-right .embed-16x9, .col-right .spotify-embed { max-width: none; }
}

/* Commentary spacing */
.commentary p { margin:0 0 1rem 0; }
.commentary section + section { margin-top:24px; }