.event-flyer.event-flyer-centenary {
  overflow: hidden;
  border-radius: 10px;
  background: #173927 !important;
}

.event-flyer-centenary .flyer-artwork {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
}

/* Give regular event pages the school photo treatment, with a quiet dark wash
   behind the title and event details. */
.event-flyer:not(.event-flyer-centenary) {
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(9, 24, 20, .76), rgba(9, 24, 20, .46) 58%, rgba(9, 24, 20, .28)), url('../images/hero.webp') center 52% / cover no-repeat !important;
}

.event-flyer.event-flyer-reunion {
  background-image: linear-gradient(90deg, rgba(9, 24, 20, .76), rgba(9, 24, 20, .46) 58%, rgba(9, 24, 20, .28)), url('../images/reunion-2018.jpg') !important;
  background-position: center 52% !important;
}

.event-flyer:not(.event-flyer-centenary) .flyer-shade {
  background: transparent !important;
}

.event-flyer:not(.event-flyer-centenary) .flyer-copy h1 {
  color: #fff !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .2);
}

.event-flyer:not(.event-flyer-centenary) .flyer-copy p {
  color: #ffd27a !important;
}

.event-flyer:not(.event-flyer-centenary) .flyer-location {
  color: #fff !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

.event-flyer-centenary .flyer-shade {
  background: transparent !important;
}

.event-flyer-centenary .flyer-copy {
  top: 9%;
  left: 6%;
  right: 6%;
  bottom: auto;
  max-width: 640px;
  transform: none;
}

.event-flyer-centenary .flyer-copy h1 {
  color: #fff !important;
  text-shadow: none;
}

.event-flyer-centenary .flyer-copy p {
  color: #ffd27a;
  text-shadow: none;
}

.event-flyer-centenary .flyer-location {
  color: #fff !important;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The poster already carries its own anniversary lettering; keep event metadata below it. */
.event-flyer-centenary .flyer-copy,
.event-flyer-centenary .flyer-shade {
  display: none !important;
}

@media (max-width: 850px) {
  .event-flyer-centenary .flyer-copy {
    top: 8%;
    left: 5%;
    max-width: 80%;
  }
}

@media (max-width: 560px) {
  .event-flyer:not(.event-flyer-centenary) {
    height: auto;
    aspect-ratio: 16 / 10;
    background-position: 58% center !important;
  }

  .event-flyer.event-flyer-reunion {
    background-position: 58% center !important;
  }

  .event-flyer:not(.event-flyer-centenary) .flyer-copy {
    right: 18px;
    bottom: 16px;
    left: 18px;
    max-width: none;
  }

  .event-flyer:not(.event-flyer-centenary) .flyer-copy h1 {
    margin: 0 0 7px;
    font-size: 23px !important;
    line-height: 1.2;
  }

  .event-flyer:not(.event-flyer-centenary) .flyer-copy p {
    margin-bottom: 7px;
    font-size: 14px;
    line-height: 1.35;
  }

  .event-flyer:not(.event-flyer-centenary) .flyer-location {
    font-size: 11px;
    line-height: 1.35;
  }

  .event-flyer.event-flyer-centenary {
    height: auto !important;
    min-height: 0;
    aspect-ratio: 1855 / 1334;
    border-radius: 8px;
    background: #173927 !important;
  }

  .event-flyer-centenary .flyer-artwork {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: none;
  }

}

@media (max-width: 380px) {
  .event-flyer:not(.event-flyer-centenary) .flyer-copy h1 {
    font-size: 21px !important;
  }
}