.laurel-award {
  width: 600px;
  aspect-ratio: 5 / 3;
  position: relative;
  background: #fff;
  color: #111;
  font-family: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  text-align: center;
  display: inline-block;
  --laurel-color: #000;
  --rank-color: #b87333; /* bronze by default */
  --laurel-w: 42%;
  --pad: 8%;
}

/* Laurels */
.laurel-award__frame {
  position: absolute;
  inset: 0;
  background:
    url("/images/left_laurel.svg") left 6% center / var(--laurel-w) auto no-repeat,
    url("/images/right_laurel.svg") right 6% center / var(--laurel-w) auto no-repeat;
}

/* Center text block */
.laurel-award__text {
  position: absolute;
  inset: var(--pad);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  gap: 0.25em;
  padding: 0 10%; /* ensures text doesn’t collide with laurels */
}

/* Rank */
.laurel-award__rank {
  color: var(--rank-color);
  font-weight: 700;
  font-size: clamp(16px, 3vw, 26px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Title (multi-line friendly) */
.laurel-award__title {
  max-width: 80%; /* keeps it between laurels */
  font-size: clamp(16px, 3.6vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  word-wrap: break-word;
  hyphens: auto;
}

/* Project name (italic line below) */
.laurel-award__project {
  font-style: italic;
  font-weight: 600;
  font-size: clamp(14px, 2.8vw, 22px);
  margin-top: 0.4em;
}

/* Year at the bottom */
.laurel-award__year {
  font-size: clamp(13px, 2.4vw, 20px);
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-top: 0.2em;
}

/* Rank color variations */
.laurel-award.is-gold   { --rank-color: #c5a200; }
.laurel-award.is-silver { --rank-color: #9fa6b2; }
.laurel-award.is-bronze { --rank-color: #b87333; }

/* Optional: slightly tighter laurels for long titles */
.laurel-award.is-long .laurel-award__frame {
  background:
    url("left_laurel.svg") left 3% center / 40% auto no-repeat,
    url("right-laurel.svg") right 3% center / 40% auto no-repeat;
}