.calendar-planner-page {
  --planner-ink: #171717;
  --planner-line: #d8d7d2;
  --planner-paper: #fff;
  --planner-soft: #f5f4f0;
  --planner-pink: #efd8dc;
  --planner-blue: #dfe9ef;
  background: #fff;
}

.calendar-planner-page .cursor-dot { display: none; }

.calendar-planner-page .planner-intro {
  min-height: 520px;
  padding: clamp(115px, 11vw, 170px) clamp(28px, 6vw, 96px) 80px;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .65fr);
  gap: clamp(45px, 8vw, 130px);
  align-items: end;
}

body.calendar-planner-page .calendar-intro::before { content: "ARTISTS’ APOTHECARY / CREATIVE CALENDAR"; }

.calendar-planner-page .planner-intro h1 {
  margin: 52px 0 0;
  max-width: 950px;
  font: 600 clamp(72px, 9vw, 142px)/.84 var(--sans);
  letter-spacing: -.075em;
}

.calendar-planner-page .planner-intro h1 em { font-style: normal; }
.calendar-planner-page .planner-intro-copy { padding-bottom: 8px; }
.calendar-planner-page .planner-intro-copy p {
  margin: 0 0 30px;
  max-width: 520px;
  font: clamp(20px, 2vw, 29px)/1.42 var(--serif);
}
.calendar-planner-page .planner-intro-copy span {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--planner-ink);
  font: 9px var(--mono);
  letter-spacing: .13em;
}

.calendar-planner-page .calendar-shell {
  padding: clamp(28px, 5vw, 76px);
  background: var(--planner-soft) !important;
  border-bottom: 1px solid var(--planner-ink);
}

.calendar-planner-page .calendar-paper {
  max-width: 1680px;
  padding: clamp(24px, 3vw, 48px);
  background: var(--planner-paper) !important;
  border: 1px solid var(--planner-ink);
  box-shadow: 10px 14px 0 rgba(23,23,23,.08);
  overflow-x: auto;
}

.calendar-planner-page .calendar-toolbar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 0 0 24px;
  border-bottom: 1px solid var(--planner-ink);
}

.calendar-planner-page .month-heading { text-align: left; }
.calendar-planner-page .month-heading span {
  display: block;
  font: 9px var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.calendar-planner-page .month-heading h2 {
  margin: 6px 0 0;
  font: 500 clamp(46px, 5vw, 78px)/.95 var(--serif);
  letter-spacing: -.035em;
}

.calendar-planner-page .month-button,
.calendar-planner-page .today-button {
  border: 1px solid var(--planner-ink);
  border-radius: 0;
  color: var(--planner-ink);
  background: #fff;
}
.calendar-planner-page .month-button { width: 46px; height: 46px; }
.calendar-planner-page .today-button { padding: 13px 17px; }
.calendar-planner-page .month-button:hover,
.calendar-planner-page .today-button:hover,
.calendar-planner-page .month-button:focus-visible,
.calendar-planner-page .today-button:focus-visible {
  color: #fff;
  background: var(--planner-ink);
}

.calendar-planner-page .month-tabs {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-width: 1080px;
  margin: 22px 0 0;
  border: 1px solid var(--planner-line);
  border-bottom: 0;
}
.calendar-planner-page .month-tabs button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--planner-line);
  background: #fff;
  cursor: pointer;
  font: 9px var(--mono);
  text-transform: uppercase;
}
.calendar-planner-page .month-tabs button:last-child { border-right: 0; }
.calendar-planner-page .month-tabs button.active {
  color: #fff;
  background: var(--planner-ink);
}

.calendar-planner-page .calendar-key {
  min-width: 1080px;
  padding: 16px 0 12px;
  border-top: 1px solid var(--planner-ink);
  justify-content: flex-start;
  gap: 24px;
}
.calendar-planner-page .calendar-key i { border: 1px solid var(--planner-ink); }
.calendar-planner-page .key-event { background: var(--planner-pink); transform: none; }
.calendar-planner-page .key-external { background: var(--planner-blue); }
.calendar-planner-page .key-journal { border-radius: 0; background: var(--planner-ink); }
.calendar-planner-page .calendar-scroll-note { display: none; }

.calendar-planner-page .weekday-row,
.calendar-planner-page .calendar-grid {
  grid-template-columns: repeat(7, minmax(154px, 1fr));
  min-width: 1080px;
}
.calendar-planner-page .weekday-row {
  border: 1px solid var(--planner-ink);
  border-bottom: 0;
}
.calendar-planner-page .weekday-row span {
  padding: 12px;
  text-align: center;
  border-right: 1px solid var(--planner-line);
  font: 9px var(--mono);
  letter-spacing: .1em;
}
.calendar-planner-page .calendar-grid { border-color: var(--planner-ink); }
.calendar-planner-page .calendar-day {
  min-height: 255px;
  padding: 12px;
  overflow: hidden;
  background: #fff !important;
  border-color: var(--planner-line);
}
.calendar-planner-page .calendar-day.is-outside { background: #f8f8f6 !important; opacity: .48; }
.calendar-planner-page .calendar-day.is-today { box-shadow: inset 0 0 0 2px var(--planner-ink); }
.calendar-planner-page .calendar-day.is-today::after { display: none; }
.calendar-planner-page .date-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--planner-line);
}
.calendar-planner-page .date-heading .date-number { font: 500 15px var(--serif); }
.calendar-planner-page .date-heading small {
  font: 7px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.calendar-planner-page .day-items {
  display: grid;
  gap: 11px;
  margin-top: 15px;
}
.calendar-planner-page .calendar-day.has-multiple .day-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.calendar-planner-page .planner-entry {
  position: relative;
  display: block;
  min-width: 0;
  padding: 10px 9px 11px;
  color: var(--planner-ink);
  background: #fff;
  border: 1px solid var(--planner-line);
  box-shadow: 3px 4px 9px rgba(23,23,23,.13);
  transition: transform .2s ease, box-shadow .2s ease;
}
.calendar-planner-page .planner-entry.event { background: #fffafa; }
.calendar-planner-page .planner-entry.external { background: #f7fafb; }
.calendar-planner-page .planner-entry.journal { background: #fff; }
.calendar-planner-page .planner-entry:nth-child(even) { transform: rotate(1deg); }
.calendar-planner-page .planner-entry:nth-child(odd) { transform: rotate(-.7deg); }
.calendar-planner-page .planner-entry:hover,
.calendar-planner-page .planner-entry:focus-visible {
  z-index: 4;
  transform: translateY(-3px) rotate(0);
  box-shadow: 5px 7px 14px rgba(23,23,23,.2);
}
.calendar-planner-page .planner-tape {
  position: absolute;
  z-index: 2;
  top: -8px;
  left: 50%;
  width: 54px;
  height: 15px;
  object-fit: cover;
  object-position: center;
  opacity: .8;
  transform: translateX(-50%) rotate(-2deg);
  mix-blend-mode: multiply;
}
.calendar-planner-page .planner-entry-image {
  display: block;
  width: 100%;
  height: 108px;
  object-fit: cover;
  object-position: center;
  filter: none;
}
.calendar-planner-page .planner-entry span {
  display: block;
  margin: 8px 0 4px;
  overflow: hidden;
  color: #666;
  font: 7px var(--mono);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.calendar-planner-page .planner-entry strong {
  display: -webkit-box;
  overflow: hidden;
  font: 500 11px/1.2 var(--serif);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.calendar-planner-page .calendar-day.has-multiple .planner-entry { padding: 7px 6px 8px; }
.calendar-planner-page .calendar-day.has-multiple .planner-entry-image { height: 78px; }
.calendar-planner-page .calendar-day.has-multiple .planner-entry strong { font-size: 9px; -webkit-line-clamp: 2; }
.calendar-planner-page .calendar-empty {
  min-width: 1080px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--planner-ink);
  border-top: 0;
  font-size: 16px;
}

.calendar-planner-page .print-diary {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(420px, 1fr);
  gap: clamp(55px, 9vw, 145px);
  align-items: center;
  padding: clamp(80px, 9vw, 145px) clamp(28px, 8vw, 130px);
  background: #fff !important;
  border-bottom: 1px solid var(--planner-ink);
}
.calendar-planner-page .a4-preview {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 210 / 297;
  padding: 15px;
  background: #fff;
  border: 1px solid var(--planner-ink);
  box-shadow: 12px 15px 0 var(--planner-pink);
  transform: rotate(-1.2deg);
}
.calendar-planner-page .diary-sheet {
  display: flex;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 4vw, 48px);
  flex-direction: column;
  overflow: hidden;
  color: var(--planner-ink);
  background: #fff;
}
.calendar-planner-page .diary-sheet-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--planner-ink);
  font: 7px var(--mono);
  letter-spacing: .12em;
}
.calendar-planner-page .diary-sheet h3 {
  margin: clamp(34px, 6vw, 66px) 0 14px;
  font: 600 clamp(48px, 7vw, 76px)/.82 var(--sans);
  letter-spacing: -.07em;
}
.calendar-planner-page .diary-sheet h3 em { color: var(--planner-pink); font-style: normal; }
.calendar-planner-page .diary-sheet > p,
.calendar-planner-page .diary-sheet > small {
  font: 7px var(--mono);
  letter-spacing: .12em;
}
.calendar-planner-page .diary-rule { margin: 22px 0; border-top: 1px solid var(--planner-ink); }
.calendar-planner-page .diary-note {
  align-self: flex-end;
  max-width: 210px;
  margin: 0 4px 18px 0;
  font: 19px/1.15 "Bradley Hand", cursive;
  transform: rotate(-3deg);
}
.calendar-planner-page .diary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  flex: 1;
  border-top: 1px solid var(--planner-ink);
  border-left: 1px solid var(--planner-ink);
}
.calendar-planner-page .diary-grid i { border-right: 1px solid var(--planner-ink); border-bottom: 1px solid var(--planner-ink); }
.calendar-planner-page .diary-sheet > small { margin-top: 14px; }
.calendar-planner-page .print-copy h2 {
  margin: 34px 0;
  font: 600 clamp(58px, 7vw, 108px)/.86 var(--sans);
  letter-spacing: -.065em;
}
.calendar-planner-page .print-copy h2 em { color: var(--planner-ink); font-style: normal; }
.calendar-planner-page .print-copy p {
  max-width: 620px;
  font: clamp(19px, 1.6vw, 25px)/1.5 var(--serif);
}
.calendar-planner-page .download-button {
  max-width: 520px;
  border-color: var(--planner-ink);
  background: #fff;
}
.calendar-planner-page .monthly-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin: 36px 0 14px;
}
.calendar-planner-page .monthly-downloads .download-button {
  width: 100%;
  margin: 0;
}
.calendar-planner-page .download-button:hover,
.calendar-planner-page .download-button:focus-visible { color: #fff; background: var(--planner-ink); }

@media (max-width: 950px) {
  .calendar-planner-page .planner-intro { grid-template-columns: 1fr; min-height: auto; }
  .calendar-planner-page .planner-intro-copy { max-width: 640px; margin-left: auto; }
  .calendar-planner-page .calendar-paper { padding: 28px 18px; }
  .calendar-planner-page .calendar-scroll-note {
    display: block;
    min-width: 1080px;
    margin: 0;
    padding: 10px 0;
    font: 8px var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .calendar-planner-page .print-diary { grid-template-columns: 1fr; }
  .calendar-planner-page .a4-preview { justify-self: center; }
}

@media (max-width: 650px) {
  .calendar-planner-page .planner-intro { padding: 105px 22px 62px; }
  .calendar-planner-page .planner-intro h1 { font-size: clamp(64px, 18vw, 86px); }
  .calendar-planner-page .planner-intro-copy p { font-size: 19px; }
  .calendar-planner-page .calendar-shell { padding: 20px 10px 35px; }
  .calendar-planner-page .calendar-paper { box-shadow: 6px 8px 0 rgba(23,23,23,.08); }
  .calendar-planner-page .calendar-toolbar { min-width: 340px; grid-template-columns: 42px minmax(0, 1fr) 42px; }
  .calendar-planner-page .calendar-controls .today-button { position: absolute; top: 7px; right: 8px; }
  .calendar-planner-page .month-heading h2 { font-size: 43px; }
  .calendar-planner-page .month-tabs,
  .calendar-planner-page .calendar-key,
  .calendar-planner-page .calendar-scroll-note,
  .calendar-planner-page .weekday-row,
  .calendar-planner-page .calendar-grid,
  .calendar-planner-page .calendar-empty { min-width: 1080px; }
  .calendar-planner-page .print-diary { padding: 80px 24px; }
  .calendar-planner-page .print-copy h2 { font-size: clamp(54px, 16vw, 78px); }
  .calendar-planner-page .monthly-downloads { grid-template-columns: 1fr; }
  .calendar-planner-page .download-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .calendar-planner-page .planner-entry { transition: none; }
}