/* CERENE Sustainability Lab — Miku Lenentine site
   Layout modeled on the Travis Idol Site Template: masthead banner, thin top-right nav
   strip, left sidebar nav, main content column, footer bar. Palette shifted to blue. */

body { font-family: Georgia, "Times New Roman", serif; margin: 0; color: #1a2530; background: #3d4f5c; }

.site {
  max-width: 900px;
  margin: 2rem auto;
  background: #fbfdff;
  box-shadow: 0 0 0 2px #1a2530;
}

header.masthead {
  padding: 1.5rem 2rem;
  background: linear-gradient(135deg, #0b3d63 0%, #1c6ea4 100%);
  color: #fff;
}
header.masthead .masthead-name { margin: 0; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.02em; }
header.masthead .masthead-tagline { margin: 0.25rem 0 0 0; font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.9; }

nav.primary-nav {
  background: #17557f;
  padding: 0.5rem 2rem;
  font-family: Arial, sans-serif;
  font-size: 0.85rem;
  text-align: right;
}
nav.primary-nav a { color: #fff; margin-left: 1.25rem; text-decoration: none; }
nav.primary-nav a:hover { text-decoration: underline; }

.page-layout { display: flex; align-items: flex-start; }

nav.sidebar {
  flex: 0 0 220px;
  background: #dceaf5;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  min-height: 60vh;
}
nav.sidebar a { color: #0b3d63; text-decoration: none; font-weight: bold; padding-bottom: 0.4rem; border-bottom: 1px solid #bcd8ec; }
nav.sidebar a:hover { text-decoration: underline; }

main { flex: 1; padding: 1.75rem 2rem; max-width: 780px; }

.page-title { color: #0b3d63; margin: 0 0 0.25rem 0; font-size: 1.5rem; }
.page-subtitle { margin: 0 0 0.15rem 0; font-size: 1.15rem; color: #17557f; }
.page-subtitle2 { margin: 0 0 1.25rem 0; font-size: 0.95rem; color: #5c7590; }

h2 { color: #0b3d63; border-bottom: 2px solid #bcd8ec; padding-bottom: 0.25rem; margin-top: 2rem; }
h3 { color: #17557f; margin-bottom: 0.25rem; }

.bio { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
.bio-text { flex: 1; min-width: 260px; order: 1; }
.sl-img-wrap, .headshot { order: 2; }
.headshot { max-width: 220px; border: 3px solid #bcd8ec; border-radius: 4px; }
.contact-block p, .research-interests p, .affiliation p { margin: 0.25rem 0; }

.spheres { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0; }
.sphere-card {
  flex: 1; min-width: 200px; background: #eef5fb; border-left: 4px solid #0b3d63;
  padding: 1rem; border-radius: 4px;
}
.sphere-card h3 { margin-top: 0; }

.cta-button {
  display: inline-block; background: #0b3d63; color: #fff; padding: 0.6rem 1.1rem;
  text-decoration: none; border-radius: 4px; font-family: Arial, sans-serif;
  font-size: 0.9rem; margin: 0.75rem 0;
}
.cta-button:hover { background: #17557f; }

.card-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0; }
.card {
  flex: 1; min-width: 240px; border: 1px solid #cfe0ee; border-radius: 6px;
  padding: 1rem; background: #fff;
}
.card img { max-width: 100%; border-radius: 4px; margin-bottom: 0.5rem; }
.card h3 { margin: 0 0 0.25rem 0; }
.card .focus { font-style: italic; color: #3a5a75; margin: 0 0 0.5rem 0; }
.placeholder-note { font-size: 0.8rem; color: #8a97a3; }

.project-entry, .video-entry, .course-entry, .publication-entry {
  margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid #e2edf6;
}

.calendar-embed, .storymap-embed {
  border: 2px dashed #bcd8ec; padding: 2rem; text-align: center; color: #5c7590;
  background: #f5f9fc; border-radius: 6px; font-family: Arial, sans-serif;
}

footer {
  padding: 1rem 2rem;
  font-size: 0.8rem;
  color: #fff;
  background: #17557f;
  text-align: center;
}

@media (max-width: 700px) {
  .page-layout { flex-direction: column; }
  nav.sidebar { flex-direction: row; flex-wrap: wrap; width: auto; min-height: unset; }
}