:root {
  --mc-ink: #172121;
  --mc-muted: #66716f;
  --mc-line: #d8dfdc;
  --mc-paper: #f7f8f3;
  --mc-accent: #d65a3a;
  --mc-accent-soft: #f8ded5;
}

.mc-calendar {
  max-width: 920px;
  margin: 2rem auto;
  color: var(--mc-ink);
  background: var(--mc-paper);
  border: 1px solid var(--mc-line);
  padding: clamp(1.25rem, 4vw, 2.75rem);
  font-family: Georgia, 'Times New Roman', serif;
}

.mc-calendar__header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; }
.mc-calendar__eyebrow { margin: 0 0 .35rem; color: var(--mc-accent); font: 700 .72rem/1 sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.mc-calendar__title { margin: 0; font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 400; }
.mc-calendar__controls { display: flex; align-items: center; gap: .4rem; }
.mc-calendar button { color: inherit; background: transparent; border: 1px solid var(--mc-line); cursor: pointer; font: inherit; }
.mc-calendar__button { width: 2.35rem; height: 2.35rem; font-size: 1.1rem !important; }
.mc-calendar__today { padding: .55rem .8rem; font: 600 .75rem/1 sans-serif !important; text-transform: uppercase; letter-spacing: .04em; }
.mc-calendar button:hover, .mc-calendar button:focus-visible { border-color: var(--mc-accent); outline: 2px solid var(--mc-accent-soft); outline-offset: 1px; }
.mc-calendar__status { min-height: 1.2em; margin: 0 0 .8rem; color: var(--mc-muted); font: .8rem/1.4 sans-serif; }
.mc-calendar__weekdays, .mc-calendar__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mc-calendar__weekdays { color: var(--mc-muted); border-bottom: 1px solid var(--mc-line); font: 700 .7rem/1 sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.mc-calendar__weekdays span { padding: .75rem .45rem; }
.mc-calendar__days { border-left: 1px solid var(--mc-line); }
.mc-calendar__day { position: relative; min-height: 5.8rem; padding: .65rem; text-align: left; border-top: 0 !important; border-right: 1px solid var(--mc-line) !important; border-bottom: 1px solid var(--mc-line) !important; }
.mc-calendar__day--empty { background: rgba(216, 223, 220, .2); }
.mc-calendar__day--today > span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; color: #fff; background: var(--mc-accent); border-radius: 50%; }
.mc-calendar__day i { display: block; width: .45rem; height: .45rem; margin-top: 1rem; background: var(--mc-accent); border-radius: 50%; }
.mc-calendar__details { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--mc-line); font-family: sans-serif; }
.mc-calendar__details h3 { margin: 0 0 .75rem; font: 700 .85rem/1.2 sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.mc-calendar__details article { padding: .75rem 0; border-top: 1px solid var(--mc-line); }
.mc-calendar__details article p { margin: .35rem 0; color: var(--mc-muted); font-size: .9rem; }
.mc-calendar__details a { color: var(--mc-accent); font-size: .8rem; font-weight: 700; }

@media (max-width: 620px) {
  .mc-calendar__header { align-items: start; flex-direction: column; }
  .mc-calendar__day { min-height: 3.9rem; padding: .4rem; font-size: .9rem; }
  .mc-calendar__weekdays span { padding: .6rem .2rem; font-size: .58rem; }
  .mc-calendar__day i { margin-top: .45rem; }
}
