.calendar-page { background: var(--gold); min-height: 100vh; }
.calendar-sheet { width: min(800px, calc(100% - 4rem)); min-height: 100vh; margin-inline: auto; background: var(--gold); }
.calendar-return { display: flex; align-items: center; gap: .25rem; min-height: 4rem; color: var(--red); text-decoration: none; font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.25; }
.calendar-return__icon { display: grid; place-items: center; flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--red); }
.calendar-return__icon::before { content: ''; border-top: .75rem solid transparent; border-bottom: .75rem solid transparent; border-right: 1.3rem solid white; margin-left: -.25rem; }
.calendar-title { background: var(--red); color: white; text-align: center; font-size: clamp(2.7rem, 7vw, 4rem); padding: .3rem .5rem .45rem; border-bottom: 3px solid var(--gold); }
.calendar-frame { width: 100%; aspect-ratio: 4 / 3; background: #f0f4f9; }
.calendar-frame iframe { display: block; width: 100%; height: 100%; border: 1px solid #aab1b8; }
.calendar-actions { display: flex; justify-content: center; padding: 1.4rem 0 5rem; }
.calendar-whats-on { display: block; width: 35%; min-width: 13.5rem; padding: .15rem .5rem .25rem; border: 4px solid white; color: white; text-decoration: none; text-align: center; font-size: clamp(2rem, 5vw, 3rem); transition: background-color .25s ease; }
.calendar-whats-on:hover { background: var(--red); }
.calendar-return:focus-visible, .calendar-whats-on:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.calendar-notes { padding: 1rem; white-space: pre-line; }
@media (max-width: 560px) {
  .calendar-sheet { width: calc(100% - 1.5rem); }
  .calendar-frame { aspect-ratio: auto; height: 480px; }
  .calendar-return { min-height: 3.8rem; }
}