.head-text {
  background-color: rgba(166, 3, 33, 0.5); /* #A60321 at 50% opacity */
  background-size: cover;        /* scale image to cover the box */
  background-repeat: no-repeat;  /* prevent tiling */
  background-position: center;   /* center the image */
  padding: 0.6em 1em;
  margin: 0;

  color: #F7C990;
  font-size: clamp(2em, 4vw, 3em); /* scales between 2em and 3em with viewport width */
  text-align: left;

  width: 100%;
  max-width: 70%;
  white-space: normal;     /* allow wrapping on small screens */
  word-break: break-word;  /* break long words if necessary */
  display: block;
  box-sizing: border-box;

  font-family: 'Actor', 'Roboto', Arial, Helvetica Neue, Helvetica, Arial;
  line-height: 1.2;
}


.pagehead-text {
  position: relative;
  margin: 2em 0 0em 0%; /* top, right, bottom, left */
  text-align: left;
}
	
.hero-image {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../photos/FreyaBookCover_Hero.jpg");
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; 	
  position: relative;
}

.hero-text {
  position: absolute;
  top: 66%;
  left: 0%;
  transform: translateY(-50%);
  z-index: 10;
}


.twocol-list {
  columns: 2;              /* creates two columns */
  column-gap: 2em;         /* optional: spacing between columns */
  max-width: 600px;        /* optional: limit total width */
}


@media (max-width: 700px) {
  .inline-photo {
    width: 70%;
    float: none;
    margin: 1em auto;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25); /* lighter for mobile */
  }
}




.carousel {
  max-width: 900px;
  aspect-ratio: 4 / 3;
  margin: 2rem auto;
  overflow: hidden;
  position: relative;
  border-radius: 12px;
}

.track {
  display: flex;
  transition: transform 0.8s ease-in-out;
}

.track img {
  width: 100%;
  flex-shrink: 0;
  object-fit: cover;
}

/* Buttons styling */
.carousel button {
  position: absolute;
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 5px;
  user-select: none;
}

.carousel .prev { top: 50%; left: 10px; transform: translateY(-50%); }
.carousel .next { top: 50%; right: 10px; transform: translateY(-50%); }
.carousel .pause { top: 10px; right: 10px; font-size: 1.5rem; padding: 0.3rem 0.6rem; }