body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  flex: 1;
  background: white;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-container {
  flex: 2;
  background: white;
  display: flex;
  overflow-x: auto;
  padding: 1rem;
  gap: 1rem;
  scroll-behavior: smooth;
}
.cover {
  min-width: 200px;
  width:440px;
  background: black;
  color: white;
  border: 1px solid white;
  border-radius:8px;
  padding: 1rem;
  cursor: crosshair;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 90%;
}
.cover h1 {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 0 0.5rem 0;
}
.cover blockquote,
.cover p {
  margin: 0;
}
.cover.active {
  transform: scale(1.05);
  z-index: 10;
}
.accordion {
  display: flex;
  position: absolute;
  background: white;
  color: black;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: 0rem;
  animation: growIn 0.4s ease-out;
  gap: 1rem;
}
.accordion .cover-preview {
  background: black;
  color: white;
  padding: 1rem;
  border: 1px solid #000;
  flex: 2;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.accordion .cover-preview h1 {
  font-size: 4rem;
  font-weight: 700;
  line-height: 3.7rem;
  margin: 0;
}
.accordion .cover-preview blockquote {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color:grey;
}
.accordion .cover-preview p {
  font-size: 1.5rem;
  margin: 0;
}
.column {
  flex: 1;
  padding: 1rem;
  min-width: 200px;
  box-sizing: border-box;
  overflow: auto;

  /* new lines ↓ */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;


}
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  z-index: 1010;
}
@media (max-width: 768px) {
  .accordion {
    flex-direction: column;
  }
  .accordion .cover-preview {
    flex: none;
    width: 100%;
  }
}
@keyframes growIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



#leftCol   { background:#f5f5ff; }
#rightCol  { background:#fff5f5; }
#foreignCol{ background:#fdfdfd; }   /* keep white-ish for context */
#leftCol h3,
#rightCol h3 { margin:.2em 0 0; font-size:1rem; }



.cover.left     { border-left: 6px solid #0074D9; }
.cover.right    { border-left: 6px solid #FF4136; }
.cover.foreign  { border-left: 6px solid #2ECC40; }