body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-primary-dark);   /* #004880 → blå mörk */
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-neutral-light); /* #F5F5F5 */
}

h1, h2, h3 {
  font-family: "Merriweather", serif;
  font-weight: 700;
  line-height: 1.2;
}

.site-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
}

.site-nav a {
  font-weight: 700;
  font-style: italic;
  color: var(--color-secondary);      /* guld */
  text-decoration: none;  
}

.site-nav a:hover,
.site-nav a:focus {
  text-decoration: underline;
  color: var(--color-secondary-dark); /* mörk guld */
}

.pagination { 
  display: flex; 
  gap: 1rem; 
  padding-top: 1rem; 
}

/* Bas för listor med kort */
.list-reset { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
  display: grid; 
  gap: 1rem; 
}

/* Teaser-block (återanvänds av episode/speaker) */
.teaser {
  border: 1px solid var(--color-secondary-light); /* ljus guld */
  border-radius: .5rem;
  padding: 1rem;
  background: var(--color-neutral-light);
  transition: transform 0.2s ease;
}
.teaser:hover, .teaser:focus { 
  transform: rotate(2deg) scale(1.02) 
}
.teaser a { 
  text-decoration: none; 
  color: var(--color-secondary); 
}
.teaser__title { margin: 0 0 .25rem; font-weight: 700; }
.teaser__meta  { margin: 0; color: var(--color-muted); font-size: .875rem; }
.teaser__summary { margin: 0; }

.hero { 
  display:flex; 
  gap:1.5rem; 
  align-items:center; 
  padding:1.5rem 0; 
  border-bottom:1px solid var(--color-neutral-light); 
}
.hero__media img { 
  width:110px; 
  height:110px; 
  object-fit:cover; 
  border-radius:12px; 
}
.hero__body h1 { margin:0 0 .25rem; }
.hero__body .subtitle { margin:.25rem 0 1rem; color: var(--color-muted); }
.hero__cta { display:flex; gap:.75rem; margin-bottom:.5rem; }
.btn { 
  display:inline-block; 
  padding:.5rem .9rem; 
  border-radius:.5rem; 
  text-decoration:none; 
  font-weight:700; 
  border:1px solid var(--color-neutral-dark); 
}
.btn--ghost { background:transparent; }
.hero__meta { margin:0; color: var(--color-muted); font-size:.875rem; }

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  padding: 0;
  list-style: none;
}