/* A little paper-cut story world, built around the author's original covers. */
.hero-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #fcf2e4;
}
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .36;
  background-image: radial-gradient(#ba9f731f .8px, transparent .8px);
  background-size: 9px 9px;
  pointer-events: none;
}
.hero-playful {
  position: relative;
  min-height: 670px;
  grid-template-columns: 1fr 1fr;
  gap: 35px;
  padding-block: 50px 72px;
}
.hero-playful .hero-copy {padding-bottom: 12px}
.hero-playful .hero-welcome {
  display: inline-flex;
  background: #e9e0f2;
  color: #68517b;
  border: 1px solid #d4c5df;
  border-radius: 9px 14px 8px 13px;
  padding: 10px 14px;
  margin-bottom: 25px;
  font-size: 9px;
  letter-spacing: 1.3px;
  transform: rotate(-2deg);
}
.hero-welcome svg {width: 17px; height: 17px; fill: #a590bc; stroke: #68517b; stroke-width: 1.2}
.hero-playful h1 {
  font-family: var(--body);
  font-size: clamp(58px, 5.8vw, 84px);
  font-weight: 700;
  letter-spacing: -4.5px;
  line-height: 1.15;
  margin-bottom: 25px;
}
.hero-line {display: block; white-space: nowrap}
.hero-playful h1 em {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.05em;
  line-height: 1.08;
  color: #a44731;
  background: #f5cd68;
  padding: 0 13px 9px 9px;
  margin: 5px 0 3px 4px;
  border-radius: 10px 17px 9px 15px;
  transform: rotate(-4deg);
  box-shadow: 4px 5px 0 #dbad4a;
}
.hero-playful h1 em::after {display: none}
.hero-playful .hero-copy > p {font-size: 14px; line-height: 1.9; color: #64705e; margin: 27px 0}
.hero-playful .hero-actions {gap: 22px; align-items: center}
.hero-playful .hero-actions > .button {
  background: #a84932;
  font-size: 13px;
  border-radius: 14px 18px 13px 19px;
  border: 1px solid #8a3928;
  box-shadow: 3px 5px 0 #d58b65;
  padding: 17px 24px;
  transform: rotate(-1deg);
}
.hero-playful .hero-actions > .button:hover {transform: translateY(-3px) rotate(1deg); box-shadow: 4px 8px 0 #d58b65}
.hero-playful .hero-actions > .button:active {transform: translate(2px, 3px); box-shadow: 1px 2px 0 #d58b65}
.hero-surprise {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.surprise-dice {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e6e5d3;
  transform: rotate(9deg);
  transition: transform .4s;
}
.surprise-dice svg {width: 25px; height: 25px; fill: none; stroke: #4c6648; stroke-width: 1.4}
.surprise-dice circle {fill: #4c6648; stroke: none}
.hero-surprise:hover {color: var(--rust)}
.hero-surprise:hover .surprise-dice {transform: rotate(-16deg)}
.hero-playful .hero-footnote {gap: 8px; color: #777660; font-size: 10px; margin-top: 27px}
.hero-footnote > svg {width: 15px; height: 15px; fill: none; stroke: #b66b51; stroke-width: 1.4; transform: rotate(-12deg)}
.hero-playful .hero-art {min-height: 515px}
.hero-playful .hero-blob {
  top: 15%;
  left: 7%;
  width: 87%;
  height: 76%;
  background: #ece7c9;
  border-radius: 43% 57% 51% 49% / 45% 39% 61% 55%;
  transform: rotate(-7deg);
}
.hero-playful .hero-blob::after {
  border: 1.5px dashed #aab28f;
  inset: -13px -10px -10px 9px;
  border-radius: 43% 57% 51% 49% / 45% 39% 61% 55%;
  transform: rotate(14deg);
}
.hero-playful .hero-book {border-radius: 4px; box-shadow: 5px 14px 0 #42573814, 5px 18px 25px #33402e20}
.hero-playful .hero-book.book-back {width: 49%; top: 22%; right: 6%; transform: rotate(12deg); animation: book-bob-back 7s ease-in-out infinite}
.hero-playful .hero-book.book-front {width: 53%; top: 40%; left: 2%; transform: rotate(-11deg); animation: book-bob-front 6.2s ease-in-out infinite}
.hero-playful .hero-book:hover,.hero-playful .hero-book:focus-visible {animation-play-state: paused; transform: rotate(-2deg) translateY(-9px)}
.hero-playful .hero-book.book-back:hover,.hero-playful .hero-book.book-back:focus-visible {transform: rotate(4deg) translateY(-9px)}
.hero-sun {position: absolute; width: 100px; height: 100px; right: 5%; top: 0; color: #d79949; transform: rotate(10deg); animation: sun-sway 9s ease-in-out infinite; pointer-events: none}
.hero-rainbow {position: absolute; width: 100px; height: 75px; left: 6%; top: 8%; fill: none; stroke-width: 9; stroke-linecap: round; transform: rotate(-16deg); opacity: .9; pointer-events: none}
.hero-flight {position: absolute; width: 100%; height: 85%; left: -6%; top: 3%; fill: none; stroke: #a7b195; stroke-width: 1.3; stroke-dasharray: 4 8; pointer-events: none}
.hero-playful .art-note {top: 8%; right: 27%; font-size: 20px; color: #7c647d; transform: rotate(-8deg)}
.hero-playful .star-one {width: 47px; height: 47px; left: -4%; top: 37%; stroke: #bd7357; fill: #f5ce702b; animation: star-rock 8s ease-in-out infinite}
.hero-playful .star-two {width: 42px; height: 42px; right: -1%; bottom: 8%; stroke: #886f99; fill: #d9c8e74a; animation: star-rock 7s ease-in-out infinite reverse}
.hero-confetti {position: absolute; display: block; width: 9px; height: 9px; background: #c78c6f; border-radius: 3px; transform: rotate(25deg); pointer-events: none}
.confetti-one {left: 38%; top: 2%; width: 8px; height: 16px; background: #b8a1c7; transform: rotate(30deg)}
.confetti-two {left: -2%; bottom: 12%; background: #b3bd91; border-radius: 50%}
.confetti-three {right: 1%; top: 39%; width: 13px; height: 5px; transform: rotate(-25deg)}
.hero-playful .age-seal {right: 9%; bottom: 1%; width: 110px; height: 110px; color: #624d78; background: #dfd0eb; border-radius: 43% 57% 46% 54% / 54% 43% 57% 46%; box-shadow: 3px 4px 0 #c4add6; transform: rotate(10deg)}
.hero-playful .age-seal strong {font-family: var(--body); font-size: 34px; font-weight: 700; letter-spacing: -1px}
.hero-playful .age-seal span {font-size: 6.5px; letter-spacing: .8px}
.hero-playful .hero-caption {left: 28%; bottom: -23px; font-size: 15px; font-family: var(--display); font-style: italic; color: #86624f; transform: rotate(-5deg)}
.caption-arrow {position: absolute; width: 64px; height: 46px; bottom: 10px; left: -58px; fill: none; stroke: #a07d5d; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round}
.hero-wave {position: absolute; left: 0; bottom: -1px; width: 100%; height: 42px; fill: #eff0e7; pointer-events: none}
/* A temporary paper badge; the news script removes it after 10 November in Budapest. */
.hero-vote-patch {
  position: absolute;
  z-index: 3;
  top: 38px;
  left: calc(50% + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 190px;
  padding: 24px 17px 20px;
  border: 1.5px solid #a76c2d;
  border-radius: 22px 28px 21px 30px;
  background: #f8d477;
  color: #493d28;
  text-align: center;
  box-shadow: 5px 7px 0 #c89b4b40;
  transform: rotate(-7deg);
  transition: transform .2s, box-shadow .2s;
}
.hero-vote-patch::before {content: "";position: absolute;inset: 7px;border: 1px dashed #ae7b39;border-radius: 17px 22px 16px 24px;pointer-events: none}
.vote-patch-kicker {font-size: 9px;letter-spacing: 1.1px;font-weight: 700}
.vote-patch-year {font-family: var(--display);font-size: 49px;line-height: 1.15;letter-spacing: -2px;margin-top: 1px}
.vote-patch-book {font-family: var(--display);font-style: italic;font-size: 13px;line-height: 1.4;margin-top: 4px}
.vote-patch-action {display: flex;align-items: center;justify-content: center;gap: 10px;min-height: 43px;width: 100%;padding: 9px 12px;margin-top: 15px;border-radius: 11px;background: #963c28;color: #fff9ed;font-size: 15px;font-weight: 700;box-shadow: 0 3px 0 #76301f}
.vote-patch-action .icon {width: 18px;height: 18px;transform: rotate(-35deg)}
.vote-patch-star {position: absolute;top: -16px;right: -12px;width: 38px;height: 38px;fill: #bd664b;stroke: #8d402b;stroke-width: 1.2;transform: rotate(10deg)}
.hero-vote-patch:hover {transform: translateY(-4px) rotate(-3deg);box-shadow: 6px 11px 0 #c89b4b40}
.hero-vote-patch:focus-visible {outline: 3px solid #493d28;outline-offset: 6px;transform: rotate(-3deg)}
.has-vote-highlight .hero-rainbow,.has-vote-highlight .art-note {visibility: hidden}
@media(max-width:1199px) and (min-width:960px) {.hero-vote-patch{width:174px;padding:22px 15px 18px;top:42px}.vote-patch-year{font-size:44px}.vote-patch-book{font-size:12px}.vote-patch-action{font-size:14px;margin-top:12px}}
@media(max-width:959px) and (min-width:720px) {.hero-vote-patch{width:146px;padding:19px 12px 15px;top:30px;left:calc(50% + 6px)}.vote-patch-kicker{font-size:7px;letter-spacing:.8px}.vote-patch-year{font-size:37px}.vote-patch-book{font-size:10px}.vote-patch-action{min-height:37px;font-size:12px;padding:7px;gap:7px;margin-top:11px}.vote-patch-star{width:30px;height:30px;top:-12px;right:-10px}.has-vote-highlight .hero-book.book-back{top:36%}}
@media(max-width:719px) {
  .hero-vote-patch {position: relative;top: auto;left: auto;justify-self: start;display: grid;grid-template-columns: minmax(0,1fr) auto;column-gap: 17px;row-gap: 0;width: min(100%,355px);padding: 15px 19px;margin: 0 0 28px;transform: rotate(-2deg);text-align: left;border-radius: 15px 20px 14px 21px;box-shadow: 3px 4px 0 #c89b4b40}
  .hero-vote-patch::before {inset: 5px;border-radius: 11px 16px 10px 17px}
  .vote-patch-kicker {grid-column: 1;font-size: 8px;letter-spacing: .8px}
  .vote-patch-year {grid-column: 1;font-size: 31px;letter-spacing: -1px;margin: 0}
  .vote-patch-book {grid-column: 1;font-size: 11px;margin-top: 1px}
  .vote-patch-action {grid-column: 2;grid-row: 1 / 4;width: auto;font-size: 14px;min-height: 45px;padding: 11px 14px;margin: 0;gap: 7px}
  .vote-patch-action .icon {width: 17px;height: 17px}
  .vote-patch-star {width: 29px;height: 29px;top: -12px;right: -8px}
  .has-vote-highlight .hero-welcome {display: none}
  .has-vote-highlight .hero-rainbow,.has-vote-highlight .art-note {visibility: visible}
}
@media print {.hero-vote-patch{display:none}}
@keyframes book-bob-front {0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes book-bob-back {0%,100%{translate:0 -5px}50%{translate:0 6px}}
@keyframes sun-sway {0%,100%{rotate:-4deg}50%{rotate:8deg}}
@keyframes star-rock {0%,100%{rotate:-10deg}50%{rotate:12deg}}
@media(min-width:1500px) {.hero-playful {min-height: 720px}.hero-playful .hero-art{min-height: 555px; max-height: none}.hero-playful h1{font-size: 86px}}
@media(max-width:1199px) {.hero-playful{gap: 25px; min-height: 640px}.hero-playful h1{font-size: 64px;letter-spacing: -3.5px}.hero-playful .hero-art{min-height: 500px}.hero-playful .hero-actions{gap: 17px}.hero-playful .hero-actions>.button{padding: 16px 20px;font-size: 12px;gap: 16px}.hero-surprise{font-size: 11px;gap: 7px}.surprise-dice{width: 30px;height: 30px}.hero-playful .hero-copy>p{font-size: 13px}.hero-playful .art-note{right: 24%;font-size: 17px}.hero-sun{width: 82px;height: 82px}.hero-rainbow{width: 85px;height: 65px}.hero-playful .hero-caption{font-size: 13px;left: 24%}.hero-playful .age-seal{width: 97px;height: 97px;right: 7%;bottom: 5%}.hero-playful .age-seal strong{font-size: 31px}}
@media(max-width:959px) and (min-width:720px) {.hero-playful{gap: 12px;min-height: 610px;padding-block: 44px 65px}.hero-playful h1{font-size: 51px;letter-spacing: -2.8px}.hero-playful .hero-art{min-height: 470px}.hero-playful .hero-welcome{font-size: 7px;letter-spacing: 1px;padding: 9px 11px;gap: 6px}.hero-playful .hero-copy>p{font-size: 12px}.hero-playful .hero-actions{gap: 14px;flex-wrap: wrap}.hero-playful .hero-actions>.button{padding: 15px 20px;font-size: 12px}.hero-surprise{padding-block: 4px}.hero-playful .hero-book.book-back{top: 28%;right: 7%;width: 52%}.hero-playful .hero-book.book-front{top: 45%;left: 0%;width: 58%}.hero-playful .age-seal{width: 83px;height: 83px;right: 1%;bottom: 3%}.hero-playful .age-seal span{font-size: 5.5px}.hero-playful .age-seal strong{font-size: 27px}.hero-sun{right: 1%;top: 7%;width: 75px;height: 75px}.hero-rainbow{left: 3%;top: 13%;width: 68px;height: 55px}.hero-playful .art-note{right: 19%;top: 23%;font-size: 14px}.hero-playful .hero-caption{bottom: -23px;left: 24%;font-size: 11px}.hero-playful .star-one{top: 36%;width: 33px;height: 33px}.hero-playful .star-two{width: 28px;height: 28px;bottom: 17%;right: -3%}.confetti-one{left: 43%;top: 6%}}
@media(max-width:719px) {
  .hero-playful {grid-template-columns: 1fr;gap: 0;min-height: 0;padding-block: 32px 65px}
  .hero-playful .hero-copy {padding-bottom: 0}
  .hero-playful .hero-welcome {font-size: 8px;letter-spacing: 1px;padding: 9px 12px;margin-bottom: 23px}
  .hero-playful h1 {font-size: clamp(49px,12.8vw,74px);letter-spacing: -3px;line-height: 1.14;margin: 0 0 20px}
  .hero-playful h1 em {padding: 0 10px 7px 7px;margin-left: 3px;box-shadow: 3px 4px 0 #dbad4a;border-radius: 8px 13px 7px 12px}
  .hero-playful .hero-copy>p {font-size: 13px;line-height: 1.9;margin: 24px 0}
  .hero-playful .desktop-break {display: none}
  .hero-playful .hero-actions {gap: 20px;flex-wrap: wrap}
  .hero-playful .hero-actions>.button {font-size: 12px;padding: 15px 20px;min-height: 51px;gap: 15px}
  .hero-surprise {font-size: 11px;gap: 7px;padding: 5px 0}
  .surprise-dice {width: 30px;height: 30px}
  .surprise-dice svg {width: 23px;height: 23px}
  .hero-playful .hero-footnote {font-size: 9px;margin-top: 23px}
  .hero-playful .hero-art {width: min(430px,100%);min-height: 405px;margin-top: 27px}
  .hero-playful .hero-blob {top: 17%;left: 8%;width: 85%;height: 73%}
  .hero-playful .hero-book.book-front {top: 43%;left: 2%;width: 55%}
  .hero-playful .hero-book.book-back {top: 24%;right: 6%;width: 49%}
  .hero-sun {width: 73px;height: 73px;right: 4%;top: 1%}
  .hero-rainbow {width: 78px;height: 60px;left: 6%;top: 10%}
  .hero-playful .art-note {font-size: 15px;top: 9%;right: 26%}
  .hero-playful .star-one {width: 32px;height: 32px;left: -1%;top: 34%}
  .hero-playful .star-two {width: 30px;height: 30px;right: -1%;bottom: 10%}
  .hero-playful .age-seal {width: 85px;height: 85px;right: 7%;bottom: 1%}
  .hero-playful .age-seal strong {font-size: 27px}
  .hero-playful .age-seal span {font-size: 5px;letter-spacing: .7px}
  .hero-playful .hero-caption {left: 24%;bottom: -22px;font-size: 12px}
  .caption-arrow {width: 50px;height: 38px;left: -45px;bottom: 9px}
  .confetti-one {top: 0;left: 37%;width: 5px;height: 12px}
  .confetti-two {bottom: 9%;left: 1%;width: 6px;height: 6px}
  .confetti-three {right: 0;top: 39%;width: 10px}
  .hero-wave {height: 28px}
}
@media(max-width:370px) {.hero-playful h1{font-size: 47px;letter-spacing: -2.9px}.hero-playful .hero-actions{gap: 13px}.hero-playful .hero-actions>.button{font-size: 11px;padding: 15px 16px;gap: 12px}.hero-surprise{font-size: 10px;gap: 6px}.surprise-dice{width: 26px;height: 26px}.hero-playful .hero-art{min-height: 345px}.hero-playful .art-note{font-size: 13px;right: 25%;top: 10%}.hero-sun{width: 62px;height: 62px}.hero-rainbow{width: 65px;height: 50px}.hero-playful .age-seal{width: 74px;height: 74px;bottom: 0;right: 5%}.hero-playful .age-seal strong{font-size: 24px}.hero-playful .age-seal span{font-size: 4.5px}.hero-playful .hero-caption{font-size: 11px;bottom: -24px}.hero-playful .hero-copy>p{font-size: 12px}}
@media(prefers-reduced-motion:reduce) {.hero-playful *, .hero-playful *::after {animation: none!important;transition: none!important}}
@media print {.hero-stage{background: white}.hero-playful{display: block;min-height: 0}.hero-playful h1{font-size: 40px}.hero-playful h1 em{box-shadow: none}.hero-playful .hero-actions,.hero-wave{display: none}}