/* Calendar: white paper, blue ink. The month comes first; the list of events stands beside it, or under it when
   the window is narrow. The line of this world is a tear-off line with a tick for every day of the week. */
.page-calendar { --text: #101B3F; }
.page-calendar main { max-width: 1280px; margin: 0 auto; padding-top: clamp(20px, 4vh, 40px); color: var(--text); }
.cal-head { display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 16px; color: var(--ink); }
.cal-head .mark { width: 48px; height: 48px; }
.cal-head h1 { font-size: clamp(34px, 4.6vw, 56px); font-weight: 800; letter-spacing: -0.02em; }
.cal-next { justify-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 4px 12px; font-size: 15.5px; text-align: right; }
.cal-next .k { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cal-next a { font-weight: 700; }

/* the tear-off line: dashes, and a tick where each of the seven columns of the month begins */
.cal { margin-top: 22px; padding-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 9px, #0000 9px 15px) 0 6px / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, #0000 2px calc(100% / 14)) 0 0 / 100% 14px no-repeat; }

#calendar-view { min-height: 420px; }
.cal-wait { padding: 24px 0; }
.fc { --fc-border-color: rgba(36, 87, 245, 0.3); --fc-page-bg-color: #fff; --fc-neutral-bg-color: rgba(36, 87, 245, 0.06);
  --fc-today-bg-color: rgba(36, 87, 245, 0.1); --fc-event-bg-color: #2457F5; --fc-event-border-color: #2457F5; --fc-event-text-color: #fff;
  --fc-button-bg-color: #fff; --fc-button-border-color: #2457F5; --fc-button-text-color: #2457F5;
  --fc-button-hover-bg-color: #2457F5; --fc-button-hover-border-color: #2457F5;
  --fc-button-active-bg-color: #2457F5; --fc-button-active-border-color: #2457F5; --fc-list-event-hover-bg-color: rgba(36, 87, 245, 0.08);
  font-family: inherit; }
.fc .fc-toolbar.fc-header-toolbar { margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.fc .fc-toolbar-title { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.fc .fc-toolbar-title::first-letter { text-transform: uppercase; }
.fc .fc-button { border-radius: 0; border-width: 2px; padding: 6px 12px; font-size: 14.5px; font-weight: 700; box-shadow: none !important; }
.fc .fc-button-primary:hover, .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { color: #fff; }
.fc .fc-button-primary:disabled { opacity: 0.45; background: #fff; color: #2457F5; }
.fc .fc-col-header-cell-cushion { padding: 8px 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.fc .fc-daygrid-day-number { padding: 6px 8px; font-size: 15px; font-weight: 700; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums; }
.fc .fc-day-today .fc-daygrid-day-number { color: var(--ink); }
.fc .fc-day-other .fc-daygrid-day-top { opacity: 0.7; }
.fc .fc-daygrid-event { border-radius: 0; padding: 2px 5px; font-size: 13px; font-weight: 600; white-space: normal; }
.fc .fc-daygrid-dot-event { display: block; background: var(--fc-event-bg-color); color: #fff; }
.fc .fc-daygrid-dot-event .fc-daygrid-event-dot { display: none; }
.fc .fc-daygrid-dot-event .fc-event-time { font-weight: 700; margin-right: 4px; }
.fc .fc-daygrid-dot-event:hover { background: #1A45CC; }
.fc .fc-list-event-title a { color: var(--text); font-weight: 600; }
.fc .fc-list-day-cushion { font-weight: 700; color: var(--ink); }

#events h2, .cal-more h2 { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.grp { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.evs { display: grid; gap: 14px; margin-top: 10px; }
.ev { display: grid; gap: 4px; padding: 14px 16px; border: 2px solid var(--ink); scroll-margin-top: 24px; }
.ev.is-past { border-style: dashed; border-width: 1.5px; }
.ev:target { background: rgba(36, 87, 245, 0.1); }
.ev-when { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.ev h3 { font-size: 18px; line-height: 1.25; }
.ev-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.badge { padding: 1px 7px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; }
.ev-note { font-size: 15px; }
.ev-links { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.note, .none { margin-top: 14px; font-size: 14px; }

.cal-more { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.cal-more section { display: grid; gap: 10px; align-content: start; max-width: 52ch; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; }
.btn { display: inline-block; padding: 8px 16px; border: 2px solid var(--ink); color: var(--ink); font-weight: 700; text-decoration: none; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: #fff; }

@media (max-width: 1099px) {
  .cal { grid-template-columns: minmax(0, 1fr); }
  .cal-more { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cal-head { grid-template-columns: auto 1fr; row-gap: 8px; }
  .cal-next { grid-column: 1 / -1; justify-self: start; justify-content: flex-start; text-align: left; }
  .fc .fc-toolbar-title { font-size: 20px; }
}