/* Keep the reference lettering as one proportional lockup on every device. */
.hero--reference {
  min-height: 860px;
  padding: 36px 24px 104px;
}

.hero--reference .hero-center {
  width: 100%;
  max-width: 560px;
}

.hero--reference .hero-center::after { content: none; }

.festival-title--reference {
  display: block;
  width: min(100%, 500px);
  margin: 0 auto;
  line-height: 0;
}

.festival-lettering {
  display: block;
  width: 100%;
  height: auto;
}

.reference-date {
  color: #341707;
  margin: 18px auto 0;
  width: min(100%, 460px);
}

.reference-date-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 70%;
  margin: 0 auto 13px;
}

.reference-date-rule::before,
.reference-date-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #e79c42;
}

.reference-date-rule img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  transform: rotate(22deg);
}

.reference-dates {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  font: 700 clamp(2.5rem, 4.1vw, 3.7rem)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
  white-space: nowrap;
}

.reference-dates time { display: flex; align-items: baseline; }
.reference-dates small {
  font: 800 .42em/1 var(--sans);
  letter-spacing: -.055em;
  margin-left: 2px;
}
.reference-date-dash { font-size: .68em; letter-spacing: 0; }
.reference-time {
  margin-top: 10px;
  font: 700 clamp(1.45rem, 2.8vw, 2rem)/1.2 Georgia, "Times New Roman", serif;
  letter-spacing: -.03em;
}
.reference-time span { display: inline-block; margin: 0 7px; }

.hero--reference .hero-venue {
  margin: 20px auto 0;
  font: 800 clamp(.9375rem, 1.8vw, 1.3rem)/1.55 var(--sans);
  letter-spacing: -.02em;
}
.hero--reference .hero-venue span { display: block; margin-left: 0; }
.hero--reference .leaf-one { left: 23%; top: 145px; width: 76px; }
.hero--reference .note-left { top: 58%; }
.hero--reference .note-right { top: 30%; }

@media (max-width: 1100px) {
  .hero--reference .hero-center { max-width: 500px; }
  .hero--reference .festival-title--reference { width: 450px; max-width: 100%; }
  .hero--reference .leaf-one { left: 13%; top: 115px; width: 65px; }
}

@media (max-width: 800px) {
  .hero--reference { min-height: 735px; padding: 35px 24px 105px; }
  .hero--reference .hero-center { max-width: 425px; }
  .hero--reference .festival-title--reference { width: 380px; }
  .reference-date { margin-top: 16px; max-width: 380px; }
  .reference-dates { font-size: clamp(2.25rem, 7.5vw, 3.1rem); gap: 9px; }
  .reference-time { font-size: 1.65rem; margin-top: 9px; }
  .hero--reference .hero-venue { margin-top: 18px; font-size: 1.0625rem; }
  .hero--reference .leaf-one { left: 4%; top: 200px; width: 48px; }
  .hero--reference .croissant { top: 280px; left: -120px; width: 220px; }
  .hero--reference .bagel { top: 410px; right: -100px; width: 190px; }
}

@media (max-width: 540px) {
  .hero--reference { min-height: 665px; padding: 31px 24px 99px; }
  .hero--reference .festival-title--reference { width: min(100%, 340px); }
  .reference-date { margin-top: 12px; }
  .reference-date-rule { margin-bottom: 10px; gap: 10px; }
  .reference-date-rule img { width: 21px; height: 21px; }
  .reference-dates { font-size: clamp(2.05rem, 8.5vw, 2.8rem); gap: 8px; }
  .reference-time { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }
  .hero--reference .hero-venue { font-size: clamp(.875rem, 3.8vw, 1.0625rem); }
  .hero--reference .branch { width: 155px; height: 232px; }
  .hero--reference .branch-left { top: -120px; left: -90px; }
  .hero--reference .branch-right { top: -120px; right: -90px; }
  .hero--reference .bread { translate: 0 0; }
  .hero--reference .croissant { width: clamp(100px, 31vw, 130px); left: -30px; top: 154px; bottom: auto; transform: rotate(-16deg); }
  .hero--reference .bagel { width: clamp(78px, 23vw, 100px); right: -25px; top: calc(71px + min(100vw - 48px, 340px) * 1.1333); bottom: auto; transform: rotate(12deg); }
  .hero--reference .leaf-one { left: 3px; top: 305px; width: 32px; }
  .hero--reference .leaf-two { top: auto; right: 7%; bottom: 53px; width: 55px; }
  .hero--reference .leaf-three { bottom: 56px; }
}

@media (max-width: 360px) {
  .hero--reference { min-height: 610px; padding: 27px 22px 98px; }
  .reference-dates { gap: 6px; }
  .hero--reference .croissant { top: 125px; }
  .hero--reference .bagel { margin-top: 12px; }
  .hero--reference .leaf-one { top: 273px; }
  .hero--reference .leaf-three { left: 0; width: 52px; }
  .hero--reference .leaf-two { right: 0; width: 45px; }
  .hero--reference .hero-venue { margin-top: 17px; font-size: .875rem; }
}