.illustration-week {
  align-items: start;
}
.illustration-week .fridge-stage {
  position: relative;
}
.illustration-week .drawn-fridge-scenes {
  mix-blend-mode: multiply;
}
.illustration-week .drawn-fridge-scenes img {
  mix-blend-mode: normal;
}
@media (prefers-color-scheme: dark) {
  .illustration-site .illustration-week .drawn-fridge-scenes {
    mix-blend-mode: normal;
  }
}
.illustration-week .static-day-label {
  display: block;
  margin-block: 12px;
  color: var(--muted);
}
.illustration-week [hidden] {
  display: none !important;
}
.illustration-week.is-enhanced .drawn-fridge-scenes {
  position: relative;
  aspect-ratio: 836 / 1880;
}
.illustration-week.is-enhanced .static-day-label {
  display: none;
}
.illustration-week.is-enhanced [data-frame] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.illustration-week .drawn-fridge-day {
  position: relative;
  margin-top: 20px;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
}
.illustration-week .drawn-fridge-day span {
  display: block;
  margin-top: 5px;
  font: 11px/1.5 var(--sans);
  color: var(--muted);
}
.illustration-week .week-controls button {
  margin: 8px 4px;
  padding: 7px 10px;
  border: 1px solid var(--control-line, #819074);
  border-radius: 16px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: 12px var(--sans);
}
.illustration-week .week-controls button[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper, #f8f6ed);
}
.illustration-week .week-controls button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.illustration-week [aria-current="step"] h3 {
  color: var(--accent-current, #557450);
}
@media (min-width: 801px) and (min-height: 760px) {
  .illustration-week.is-enhanced .illustrated-fridge {
    position: sticky;
    top: 100px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .illustration-week.is-enhanced .illustrated-fridge {
    position: static;
  }
}

.illustration-week .illustrated-fridge {
  width: min(100%, 390px);
  margin: 0 auto;
  text-align: center;
}
.illustration-week .illustrated-fridge figcaption {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
}

/* Smooth the scroll/mouse scrub without enlarging or cropping the drawing. */
.illustration-week .fridge-stage,
.illustration-week .fridge-stage:hover,
.illustration-week .fridge-stage:focus-visible {
  transform: none;
}
.illustration-week.is-enhanced [data-frame] {
  transition: opacity 1000ms ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .illustration-week.is-enhanced [data-frame] {
    transition: none;
  }
}