.jr-room {
  --hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --gold: #D4AF37;
  --cream: #F4EEDF;
  --ink: #23305A;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(50% 45% at 50% 40%, rgba(255, 200, 130, .2), transparent 70%),
    radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .55) 100%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 190px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 7px),
    linear-gradient(135deg, #3E2617, #2A180E 60%, #1E1109);
}

.jr-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 100%;
  padding: 72px 16px 32px;
}
.jr-fly { position: relative; }

.jr-book {
  --pw: min(400px, calc((100vw - 80px) / 2));
  --ph: min(calc(var(--pw) * 1.36), calc(100dvh - 190px));
  position: relative;
  width: calc(var(--pw) * 2);
  height: var(--ph);
  perspective: 2600px;
  transform: translateX(calc(var(--pw) * -.5));
  transition: transform .9s cubic-bezier(.4, .1, .2, 1);
}
.jr-book.opened { transform: none; }
.jr-book.single {
  --pw: min(420px, calc(100vw - 32px));
  --ph: min(calc(var(--pw) * 1.42), calc(100dvh - 170px));
  width: var(--pw);
  transform: none;
}

.jr-page { position: absolute; top: 0; width: var(--pw); height: 100%; }
.jr-left { left: 0; z-index: 1; visibility: hidden; }
.jr-right { left: var(--pw); z-index: 1; }
.jr-book.single .jr-right { left: 0; }

.jr-book.opened .jr-page { cursor: pointer; }
.jr-book.opened .jr-cover-inside { cursor: pointer; }
.jr-book.opened.at-start .jr-left,
.jr-book.opened.at-end:not(.single) .jr-right { cursor: default; }
.jr-book.past-first .jr-left { z-index: 3; visibility: visible; }

.jr-paper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.12 .9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .42 0 0 0 0 .3 0 0 0 .22 -.06'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .5 0 0 0 0 .3 0 0 0 .45 -.12'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(120% 110% at 50% 45%, transparent 62%, rgba(150, 115, 60, .14)),
    #F9F4E8;
  color: var(--ink);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .5);
}
.jr-paper.r { border-radius: 0 7px 7px 0; }
.jr-paper.l { border-radius: 7px 0 0 7px; }
.jr-book.single .jr-paper.r { border-radius: 7px; }
.jr-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.jr-paper.r::after { background: linear-gradient(90deg, rgba(60, 40, 20, .22), transparent 9%); }
.jr-paper.l::after { background: linear-gradient(-90deg, rgba(60, 40, 20, .22), transparent 9%); }
.jr-book.single .jr-paper.r::after { background: linear-gradient(90deg, rgba(60, 40, 20, .14), transparent 5%); }

.jr-measure { visibility: hidden; pointer-events: none; z-index: -1; }
.jr-scroll {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 50px 38px 44px 46px;
}
.jr-paper.l .jr-scroll { padding: 50px 46px 44px 38px; }
.jr-tape {
  position: absolute;
  top: 12px;
  left: 34px;
  width: 92px;
  height: 24px;
  background: repeating-linear-gradient(90deg, rgba(212, 175, 55, .5) 0 6px, rgba(232, 200, 110, .5) 6px 12px);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.jr-paper.l .jr-tape {
  left: auto;
  right: 34px;
  transform: rotate(3deg);
  background: repeating-linear-gradient(90deg, rgba(143, 28, 36, .28) 0 6px, rgba(190, 80, 90, .28) 6px 12px);
}
.jr-date {
  margin: 0;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 32px;
  text-transform: uppercase;
  color: #8F1C24;
}

.jr-title { margin: 0; font-family: var(--hand); font-size: 46px; font-weight: 700; line-height: 64px; color: #1F2A44; }
.jr-text { margin: 0 0 32px; font-family: var(--hand); font-size: 25px; line-height: 32px; }
.jr-list { margin: 0; padding: 0; list-style: none; }
.jr-list li { position: relative; padding-left: 32px; font-family: var(--hand); font-size: 25px; line-height: 32px; }
.jr-list li::before {
  content: '✓';
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 24px;
  color: #8F1C24;
  transform: rotate(-6deg);
}

.jr-check { margin: 4px 0 0; padding: 0; list-style: none; }
.jr-check li {
  position: relative;
  padding-left: 38px;
  margin-bottom: 6px;
  font-family: var(--hand);
  font-size: 25px;
  line-height: 32px;
}
.jr-box {
  position: absolute;
  left: 4px;
  top: 7px;
  width: 19px;
  height: 19px;
  border: 1.8px solid var(--ink);
  border-radius: 3px 4px 3px 5px;
  transform: rotate(-3deg);
  opacity: .8;
}
.jr-check li:nth-child(even) .jr-box { transform: rotate(2.5deg); }
.jr-check li.done .jr-box::after {
  content: '✓';
  position: absolute;
  left: 2px;
  top: -19px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  color: #8F1C24;
  transform: rotate(-8deg);
}
.jr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jr-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 2px 16px 2px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #FBF7EE;
  font-family: var(--hand);
  font-size: 22px;
  line-height: 28px;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 10px rgba(35, 48, 90, .25);
  transition: transform .15s, background .2s;
}
.jr-action:hover { background: #8F1C24; transform: rotate(-1.5deg) translateY(-1px); }
.jr-action .icon { font-size: 17px; }

.jr-link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: #8F1C24;
  cursor: pointer;
  text-decoration: underline wavy rgba(143, 28, 36, .55) 1.5px;
  text-underline-offset: 5px;
}
.jr-link:hover { color: #6E121A; text-decoration-color: #8F1C24; }
.jr-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }

.jr-qa { margin: 0; }
.jr-qa-item { margin: 0 0 16px; }
.jr-qa-item:last-child { margin-bottom: 0; }
.jr-q { margin: 0; font-family: var(--hand); font-size: 25px; font-weight: 700; line-height: 32px; color: #8F1C24; }
.jr-a { margin: 0; font-family: var(--hand); font-size: 25px; line-height: 32px; }

.jr-photo { margin: 0; display: flex; align-items: flex-end; gap: 12px; }
.jr-photo img {
  display: block;
  width: 120px;
  height: 100px;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
  filter: saturate(.85) sepia(.12);
  user-select: none;
  -webkit-user-drag: none;
}
.jr-photo span {
  padding-bottom: 18px;
  font-family: var(--hand);
  font-size: 21px;
  line-height: 26px;
  color: rgba(31, 42, 68, .75);
  transform: rotate(-3deg);
}

.jr-pics { display: flex; align-items: flex-end; gap: 18px; margin: 0; }
.jr-pic { display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: 46%; text-align: center; }
.jr-pic img {
  display: block;
  width: auto;
  height: var(--ph, 60px);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .22));
  user-select: none;
  -webkit-user-drag: none;
}
.jr-pic:nth-child(odd) img { transform: rotate(-4deg); }
.jr-pic:nth-child(even) img { transform: rotate(3deg); }

.jr-pic.sticker img {
  padding: 3px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 2px 4px rgba(0, 0, 0, .2);
  filter: none;
}
.jr-pic span { font-family: var(--hand); font-size: 19px; line-height: 19px; color: rgba(31, 42, 68, .8); }

.jr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }

.jr-num {
  position: absolute;
  right: 26px;
  bottom: 14px;
  font-family: var(--hand);
  font-size: 19px;
  line-height: 1;
  color: rgba(35, 48, 90, .45);
}
.jr-paper.l .jr-num { right: auto; left: 26px; }
.jr-end {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--hand);
  font-size: 26px;
  color: rgba(35, 48, 90, .45);
}

.jr-endpaper,
.jr-cover-inside {
  background:
    radial-gradient(circle at 0 0, transparent 9px, rgba(143, 28, 36, .26) 10px 11.5px, transparent 12.5px) 0 0 / 24px 24px,
    radial-gradient(circle at 12px 12px, rgba(212, 175, 55, .3) 0 1.5px, transparent 2px) 0 0 / 24px 24px,
    #F3E7D3;
}
.jr-endpaper { display: grid; place-items: center; }
.jr-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72%;
  padding: 22px 18px 20px;
  text-align: center;
  background: #FBF6EA;
  border: 1.5px solid #8F1C24;
  outline: 4px solid #FBF6EA;
  box-shadow: 0 0 0 5.5px #8F1C24, 0 8px 18px rgba(60, 20, 10, .25);
}
.jr-plate-orn { font-size: 22px; color: #B8892B; }
.jr-plate-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(44, 29, 17, .6);
}
.jr-plate-name { font-family: var(--hand); font-size: 52px; font-weight: 700; line-height: 1; color: var(--ink); }
.jr-plate-line { width: 60%; height: 1px; margin-top: 4px; background: rgba(44, 29, 17, .35); }

.jr-cover {
  position: absolute;
  top: 0;
  left: var(--pw);
  z-index: 2;
  width: var(--pw);
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4, .1, .2, 1), opacity .3s;
}
.jr-book.single .jr-cover { left: 0; }
.jr-book.opened .jr-cover { transform: rotateY(-180deg); }
.jr-book.single.opened .jr-cover {
  opacity: 0;
  pointer-events: none;
  transition: transform .9s cubic-bezier(.4, .1, .2, 1), opacity .25s .55s;
}
.jr-cover-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.jr-cover-front {
  display: block;
  padding: 0;
  border-radius: 4px 14px 14px 4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 70% at 35% 25%, rgba(255, 220, 190, .14), transparent 70%),
    linear-gradient(150deg, #7A2A24, #5E1D1A 55%, #431311);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 220, 190, .2);
  cursor: pointer;
}
.jr-cover-front::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 7%;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1));
}

.jr-cover-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  user-select: none;
  -webkit-user-drag: none;
}
.jr-cover-front:has(.jr-cover-photo)::before { display: none; }
.jr-cover-front:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.jr-cover-inside {
  display: grid;
  place-items: center;
  transform: rotateY(180deg);
  border-radius: 14px 4px 4px 14px;
  box-shadow: inset -10px 0 18px rgba(60, 40, 20, .18), 0 24px 50px rgba(0, 0, 0, .45);
}

.jr-ribbon {
  position: absolute;
  bottom: -30px;
  left: calc(var(--pw) * 1.62);
  z-index: 0;
  width: 12px;
  height: 40px;
  background: #B8892B;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
}
.jr-book.single .jr-ribbon { left: 14%; }

.jr-leaf {
  position: absolute;
  top: 0;
  z-index: 5;
  width: var(--pw);
  height: 100%;
  transform-style: preserve-3d;
}
.jr-leaf.r { left: var(--pw); transform-origin: 0 50%; }
.jr-leaf.l { left: 0; transform-origin: 100% 50%; }
.jr-book.single .jr-leaf.r { left: 0; }
.jr-leaf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.jr-leaf-back { transform: rotateY(180deg); }

.jr-corner { position: absolute; bottom: 0; z-index: 4; display: none; width: 46px; height: 46px; }
.jr-corner.next { right: 0; border-radius: 0 0 7px 0; }
.jr-corner.prev { left: 0; border-radius: 0 0 0 7px; }
.jr-book.opened .jr-corner { display: block; }
.jr-book.at-start .jr-corner.prev,
.jr-book.at-end .jr-corner.next { display: none; }
.jr-corner.next:hover {
  background: linear-gradient(135deg, transparent 50%, #E8DDC6 50%, #FBF7EE 72%);
  box-shadow: -3px -3px 6px rgba(0, 0, 0, .12);
}
.jr-corner.prev:hover {
  background: linear-gradient(-135deg, transparent 50%, #E8DDC6 50%, #FBF7EE 72%);
  box-shadow: 3px -3px 6px rgba(0, 0, 0, .12);
}

.jr-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s .4s;
}
.jr-room.is-open .jr-nav { opacity: 1; pointer-events: auto; }
.jr-nav-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cream);
  color: #2C1D11;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  transition: transform .12s, opacity .2s;
}
.jr-nav-btn:active { transform: scale(.94); }
.jr-nav-btn:disabled { opacity: .3; cursor: default; }
.jr-nav-btn .icon { font-size: 20px; }
.jr-count { min-width: 52px; text-align: center; font-family: var(--hand); font-size: 24px; color: var(--cream); }
.jr-hint {
  margin: -40px 0 0;
  pointer-events: none;
  font-family: var(--hand);
  font-size: 24px;
  color: rgba(244, 238, 223, .75);
  transition: opacity .3s;
}
.jr-room.is-open .jr-hint { opacity: 0; }
.jr-room.leaving .jr-nav,
.jr-room.leaving .jr-hint { opacity: 0; }

.jr-x {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--cream);
  color: #2C1D11;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.jr-x .icon { font-size: 22px; }

@media (max-width: 719px) {
  .jr-scroll,
  .jr-paper.l .jr-scroll { padding: 46px 26px 36px 30px; }
  .jr-title { font-size: 40px; line-height: 64px; }
  .jr-text, .jr-list li { font-size: 23px; }
}

.jr-sticker {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 1;
  width: var(--sw, 84px);
  height: auto;
  padding: 6px;
  border-radius: 12px;
  background: #fff;
  transform: rotate(7deg);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 1px 4px 8px rgba(60, 40, 20, .22);
  pointer-events: none;
  user-select: none;
}

.jr-sticker.cutout {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)) drop-shadow(1px 4px 6px rgba(60, 40, 20, .25));
}

.jr-stickers {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 10px 18px;
  pointer-events: none;
}
.jr-sticker.bottom { position: relative; top: auto; right: auto; transform: rotate(-5deg); }
.jr-sticker.bottom:nth-child(even) { transform: rotate(6deg) translateY(-6px); }
@media (max-width: 719px) {
  .jr-sticker { top: 18px; right: 16px; width: calc(var(--sw, 84px) * .84); padding: 5px; }

  .jr-stickers { position: relative; left: auto; right: auto; bottom: auto; margin-top: 26px; }
}