.advent {
  width: min(100%, 920px);
  margin-inline: auto;
  padding-block: 40px 64px;
}
.advent-intro {
  margin-bottom: 28px;
  text-align: center;
}
.advent-intro .kicker { justify-content: center; }
.advent-intro h1 {
  margin-block: 12px;
  font-size: clamp(38px, 6.3vw, 76px);
  letter-spacing: -.04em;
}
.advent-intro > p:not(.kicker) {
  max-width: 50ch;
  margin-inline: auto;
  color: var(--body);
  font-size: 16px;
}
.advent-board {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 20px 32px 32px;
  border: 1px solid #d7b47b85;
  border-radius: 20px;
  background: var(--wine) url("./assets/engraving.svg") center / cover no-repeat;
}
.advent-board::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px;
  border: 1px solid #f8e2b54d;
  border-radius: 12px;
  pointer-events: none;
}
.board-crown {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  color: var(--ivory);
}
.board-crown h2 { font: 500 22px/1.4 var(--serif); }
.board-ornament {
  position: absolute;
  z-index: -1;
  top: 8px;
  width: clamp(28px, 5.6vw, 60px);
  opacity: .76;
  pointer-events: none;
}
.board-bells { left: 3%; transform: rotate(-14deg); }
.board-bauble { right: 3%; transform: rotate(16deg); }
.advent-doors {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.advent-door {
  --door-background: #80333d;
  --door-ink: #fff0d2;
  --door-line: #f0ca8c60;
  position: relative;
  min-width: 0;
  min-height: clamp(76px, 9vw, 106px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #50232a;
  perspective: 440px;
  -webkit-tap-highlight-color: transparent;
}
.advent-door[data-tone="pine"] {
  --door-background: #284538;
  --door-ink: #fff0d2;
}
.advent-door[data-tone="cream"] {
  --door-background: #eedbb6;
  --door-ink: #652e36;
  --door-line: #7f4e474d;
}
.advent-door:last-child { grid-column: span 2; }
.door-front, .door-reveal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: inherit;
  pointer-events: none;
}
.door-front {
  border: 1px solid var(--door-line);
  background: var(--door-background);
  color: var(--door-ink);
  font: 500 clamp(24px, 3.3vw, 40px)/1 var(--serif);
  transform-origin: left center;
  backface-visibility: hidden;
  transition: transform 420ms var(--ease);
}
.door-front::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid var(--door-line);
  border-radius: 4px;
}
.door-front::after {
  content: "";
  position: absolute;
  top: calc(50% - 8px);
  right: 0;
  width: 6px;
  height: 16px;
  border-radius: 8px 0 0 8px;
  background: currentColor;
  opacity: .44;
}
.advent-door:hover:not([data-open]) .door-front { transform: rotateY(-9deg); }
.advent-door[data-open] .door-front { transform: rotateY(-97deg); }
.door-reveal {
  border: 1px solid #d5b47a;
  background: #f2e1c3;
  color: #6b3a34;
}
.door-reveal img {
  width: 66%;
  height: 76%;
  min-height: 0;
  object-fit: contain;
}
.door-reveal .opened-number {
  position: absolute;
  top: 5px;
  left: 8px;
  font: 500 14px/1 var(--serif);
}
.advent-door[aria-current="true"] { outline: 2px solid var(--gold); outline-offset: 2px; }
.advent-door:focus-visible { outline: 2px solid #fff4df; outline-offset: 3px; }
.advent-board noscript { color: var(--ivory); }
.task-sheet {
  margin-top: 24px;
  padding: 28px 36px 36px;
  border: 1px solid #d6b47d;
  border-radius: 16px;
  background: #f6e8cc;
  color: #3b2922;
  scroll-margin-top: 16px;
}
.task-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #8a584744;
}
.task-number { margin-bottom: 8px; color: #70353a; font-size: 13px; font-weight: 600; }
.task-head h2 { font: 500 clamp(26px, 4vw, 42px)/1.15 var(--serif); overflow-wrap: anywhere; }
.task-ornament { flex: none; width: clamp(48px, 10vw, 88px); height: auto; }
.task-copy { display: grid; gap: 16px; margin-top: 16px; }
.task-copy h3 { margin-bottom: 4px; color: #70353a; font-size: 16px; font-weight: 600; }
.task-copy p, .task-copy li { max-width: 70ch; white-space: pre-line; }
.task-copy p + p { margin-top: 8px; }
.task-copy ul, .task-copy ol { margin: 0; padding-left: 24px; }
.task-copy li + li { margin-top: 4px; }
.back-to-doors {
  display: inline-block;
  margin-top: 16px;
  color: #652e36;
  font-size: 14px;
  text-underline-offset: 3px;
}
.back-to-doors:focus-visible { outline-color: #652e36; }

@media (max-width: 640px) {
  .advent { padding-block: 28px 44px; }
  .advent-intro { margin-bottom: 20px; }
  .advent-intro h1 { font-size: clamp(30px, 8.4vw, 52px); }
  .advent-intro > p:last-child { font-size: 14px; }
  .advent-board { padding: 12px 16px 16px; border-radius: 16px; }
  .advent-board::before { inset: 5px; border-radius: 11px; }
  .board-crown { margin-bottom: 12px; }
  .board-crown h2 { font-size: 19px; }
  .board-ornament { top: 8px; }
  .advent-doors { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .advent-door { min-height: clamp(54px, 17vw, 90px); }
  .door-front::before { inset: 4px; }
  .door-front::after { width: 5px; }
  .door-reveal .opened-number { left: 5px; font-size: 11px; }
  .task-sheet { margin-top: 16px; padding: 16px 16px 24px; }
  .task-head { gap: 8px; }
  .task-copy { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .door-front { transition: none; }
}
.calendar-account, .telegram-links, .telegram-actions {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.calendar-account {
  justify-content: center;
  margin-top: 12px;
  color: var(--gold);
  font-size: 14px;
}
.calendar-account[hidden], .telegram-links[hidden] { display: none; }
.calendar-signout {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.telegram-actions { margin-top: 18px; }
.telegram-action {
  padding: 10px 16px;
  border: 1px solid #652e36;
  border-radius: 6px;
  background: #652e36;
  color: #fff4df;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.telegram-action:focus-visible { outline: 2px solid #652e36; outline-offset: 3px; }
.telegram-action:disabled { opacity: .65; cursor: wait; }
.telegram-links a { color: #652e36; }
.telegram-actions p { flex-basis: 100%; }
.task-head h2:focus { outline: none; }
.task-head h2:focus-visible { outline: 2px solid #652e36; outline-offset: 4px; }
.calendar-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
  padding-bottom: 24px;
  color: var(--body);
  font-size: 13px;
}
.calendar-legal[hidden] { display: none; }
.calendar-legal a { color: inherit; text-underline-offset: 3px; }
.calendar-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-bottom: 20px;
  padding: 16px 20px;
  border: 1px solid #d7b47b70;
  border-radius: 12px;
  background: #233d31;
}
.calendar-offer[hidden] { display: none; }
.calendar-offer h2 { font: 500 20px/1.2 var(--serif); }
.calendar-offer p { margin-top: 4px; color: var(--body); font-size: 14px; }
.calendar-offer-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.calendar-offer .calendar-price { margin: 0; color: var(--ivory); font-weight: 600; }
.calendar-offer .telegram-action { background: var(--ivory); color: #39271b; text-decoration: none; }
.calendar-offer .telegram-action:focus-visible { outline-color: var(--ivory); }
.calendar-offer .telegram-action:disabled { cursor: default; }
.calendar-offer .calendar-offer-status { flex-basis: 100%; margin-top: 0; }