.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 */
  }
}