/* /events: title on the left, the way to host one on the right. */
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 40px; }
.events-head h1 { margin: 0; font-family: var(--title); font-size: clamp(34px, 3.4vw, 44px); line-height: 1.05; font-weight: 500; letter-spacing: -.01em; color: var(--strong); }
.events-head .mark-head { flex: 1; }
.events-head .button { height: 36px; padding-inline: 16px; font-size: 14px; }

/* The month at a glance (calendar.js): days with something on glow in the logo's heat; once over, they cool. */
.month { margin-block-end: 48px; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.month-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.list .month-name { margin: 0; font-size: 15px; font-weight: 500; color: var(--strong); }
.month-steps { display: flex; gap: 6px; }
.month-step { display: grid; place-items: center; inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 1px #ffffff26; color: var(--strong); cursor: pointer; }
.month-step svg { inline-size: 16px; block-size: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.month-step:focus-visible { outline: 2px solid var(--faint); outline-offset: 2px; }
.month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.month-wd { padding-block-end: 4px; font-size: 12px; color: var(--faint); }
.month-day { display: grid; place-items: center; block-size: 36px; border-radius: 10px; color: var(--text); }
.month-day.is-on { color: #08090b; font-weight: 600; background: radial-gradient(circle, #ffe679 0 22%, #ff991e 52%, #ff298d 100%); box-shadow: 0 0 18px -4px #ff6a1f; }
.month-day.is-over { color: var(--strong); background: radial-gradient(circle, #ff298d47 0 35%, #9e5af233 65%, #9e5af200 100%); }
.month-day.is-today { box-shadow: inset 0 0 0 1px var(--strong); }
.month-day.is-on.is-today { box-shadow: inset 0 0 0 1px #08090b, 0 0 18px -4px #ff6a1f; }

/* Each event leads with its date; the day of the week is in heat while it's still to come. */
.row-date { inline-size: 64px; aspect-ratio: 4 / 5; display: grid; align-content: center; justify-items: center; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.15; font-variant-numeric: tabular-nums; }
.row-dow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ff991e; text-shadow: 0 0 12px #ff6a1f8c; }
.row-day { font-size: 24px; color: var(--strong); }
.row-mon { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.past .row-dow { color: var(--faint); text-shadow: none; }
.past .row-day { color: var(--text); }