:root {
  color-scheme: dark;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #030303;
}

body {
  color: #342719;
}

.collection-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.collection-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.28) saturate(0.52) blur(0.12rem);
  transform: scale(1.012);
}

.collection-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 8%, rgba(0, 0, 0, 0.22) 56%, rgba(0, 0, 0, 0.84) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.26), transparent 25%, rgba(0, 0, 0, 0.38));
}

.collection-vignette::after {
  content: "";
  position: absolute;
  right: -2%;
  bottom: -3%;
  width: 29%;
  height: 39%;
  background: radial-gradient(ellipse at 55% 45%, rgba(7, 7, 7, 0.9), rgba(0, 0, 0, 0.98) 78%);
  filter: blur(0.8rem);
}

.book-motion-layer {
  position: absolute;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.book-motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  filter:
    brightness(0.86)
    saturate(0.72)
    sepia(0.08)
    drop-shadow(0 1.2rem 1.8rem rgba(0, 0, 0, 0.86));
}

.collection-stage.is-entering .book-entry-motion,
.collection-stage.is-exiting .book-exit-motion {
  opacity: 1;
}

.collection-stage.is-ready .book-motion-layer {
  opacity: 0;
  visibility: hidden;
}

.collection-stage.is-exiting .book-motion-layer {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 300ms ease,
    visibility 0s linear 0s;
}

.collection-book {
  position: absolute;
  z-index: 14;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.78);
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 420ms;
}

.collection-stage.is-ready .collection-book {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition:
    opacity 420ms ease,
    transform 520ms ease,
    visibility 0s linear 0s;
}

.book-shell {
  position: relative;
  width: min(78vw, 74rem);
  height: min(72vh, 40.5rem);
  min-height: 27rem;
  filter:
    drop-shadow(0 1.8rem 2rem rgba(0, 0, 0, 0.86))
    drop-shadow(0 0 1.2rem rgba(129, 79, 34, 0.18));
}

.open-spread {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border: 0.55rem solid #251910;
  border-radius: 4.4% 4.4% 5.6% 5.6% / 3% 3% 5% 5%;
  background: #5e4d34;
  box-shadow:
    inset 0 0 0 0.18rem rgba(133, 92, 48, 0.62),
    inset 0 0 2.4rem rgba(9, 6, 4, 0.78);
}

.collection-page {
  position: relative;
  min-width: 0;
  padding: clamp(2.8rem, 6.2vh, 5rem) clamp(2.6rem, 4.5vw, 5.2rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(3deg, transparent 0 7%, rgba(78, 54, 29, 0.045) 7.4% 8%),
    radial-gradient(ellipse at 50% 42%, rgba(242, 219, 171, 0.44), transparent 68%),
    linear-gradient(145deg, #b59b6d 0%, #8f754d 64%, #6d5639 100%);
  box-shadow:
    inset 0 0 2.8rem rgba(44, 29, 16, 0.56),
    inset 0 0 0 1px rgba(228, 199, 139, 0.18);
}

.collection-page-left {
  border-right: 1px solid rgba(48, 30, 16, 0.68);
}

.collection-page-right {
  border-left: 1px solid rgba(176, 138, 79, 0.18);
}

.book-centre-fold {
  position: absolute;
  z-index: 7;
  left: calc(50% - 0.55rem);
  top: 0.5%;
  width: 1.1rem;
  height: 99%;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(28, 17, 9, 0.78), rgba(164, 126, 75, 0.15) 48%, rgba(30, 18, 10, 0.8));
  filter: blur(0.08rem);
}

.collection-page h1 {
  margin: 0;
  color: #3b2716;
  font-size: clamp(2.4rem, 4.8vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 1px rgba(238, 211, 159, 0.3);
}

.page-subtitle,
.right-page-mark {
  margin: 0.8rem 0 2.1rem;
  color: rgba(74, 48, 26, 0.76);
  font-size: clamp(0.85rem, 1.35vw, 1.25rem);
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.right-page-mark {
  margin-top: 1.4rem;
  margin-bottom: clamp(3rem, 9vh, 5.5rem);
  font-size: clamp(1rem, 1.6vw, 1.5rem);
}

.contents-list {
  display: grid;
  gap: clamp(0.65rem, 1.8vh, 1.2rem);
}

.contents-list a {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  align-items: center;
  min-height: 3.6rem;
  padding: 0.55rem 0.9rem 0.55rem 0.45rem;
  color: #3b2817;
  font-size: clamp(1.1rem, 2vw, 1.85rem);
  letter-spacing: 0.035em;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 51, 27, 0.32);
  transition:
    color 240ms ease,
    padding-left 240ms ease,
    text-shadow 240ms ease;
}

.contents-list a:hover,
.contents-list a:focus-visible {
  padding-left: 0.8rem;
  color: #6c3f17;
  text-shadow: 0 0 0.5rem rgba(137, 75, 22, 0.3);
  outline: none;
}

.contents-number {
  color: rgba(113, 72, 34, 0.78);
  font-size: 0.7em;
  font-style: italic;
}

.contents-list-right {
  gap: clamp(1.3rem, 4vh, 2.4rem);
}

.page-ornament {
  position: absolute;
  left: 14%;
  width: 72%;
  height: 1.1rem;
  opacity: 0.5;
  background:
    linear-gradient(90deg, transparent, #755026 18%, transparent 18.8% 81.2%, #755026 82%, transparent),
    radial-gradient(circle, #704820 0 16%, transparent 18%) center / 1.1rem 1.1rem repeat-x;
}

.ornament-top {
  top: 4.5%;
}

.ornament-bottom {
  bottom: 4.5%;
}

.bookmark {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 8.8rem;
  height: 3.4rem;
  padding: 0 1.2rem;
  color: #b79051;
  font: 600 clamp(0.82rem, 1.2vw, 1.12rem)/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(27, 15, 7, 0.96);
  border: 1px solid rgba(112, 70, 31, 0.82);
  background:
    linear-gradient(145deg, rgba(94, 56, 26, 0.98), rgba(42, 25, 14, 0.99));
  box-shadow:
    inset 0 0 0 0.15rem rgba(133, 91, 48, 0.26),
    0 0.65rem 0.8rem rgba(0, 0, 0, 0.54);
  transition:
    transform 220ms ease,
    filter 220ms ease;
}

.bookmark:hover,
.bookmark:focus-visible {
  filter: brightness(1.28);
  outline: none;
}

.bookmark-top {
  top: -2.8rem;
  border-radius: 0.45rem 0.45rem 0 0;
}

.bookmark-bottom {
  bottom: -2.8rem;
  border-radius: 0 0 0.45rem 0.45rem;
}

.bookmark-war {
  left: 8%;
}

.bookmark-lyric {
  left: 28%;
}

.bookmark-tales {
  right: 11%;
}

.bookmark-back {
  left: 0;
  min-width: 10.5rem;
  color: #d3aa52;
  text-transform: lowercase;
  cursor: pointer;
  border-color: rgba(188, 127, 47, 0.72);
  background:
    repeating-linear-gradient(18deg, transparent 0 11%, rgba(236, 185, 83, 0.035) 11.5% 12.5%),
    linear-gradient(145deg, #69245e, #3c1239 64%, #230b24);
  box-shadow:
    inset 0 0 0 0.16rem rgba(226, 170, 69, 0.25),
    inset 0 0 1rem rgba(14, 5, 15, 0.58),
    0 0.75rem 0.9rem rgba(0, 0, 0, 0.64);
  text-shadow:
    0 1px 0 #281019,
    0 0 0.32rem rgba(224, 167, 67, 0.46);
}

.bookmark-city {
  left: 37%;
}

.bookmark-misc {
  right: 8%;
}

.sound-notice {
  position: absolute;
  z-index: 40;
  right: 1.4rem;
  top: 1.2rem;
  margin: 0;
  padding: 0.65rem 0.9rem;
  color: #bba078;
  font-size: 0.85rem;
  border: 1px solid rgba(150, 111, 66, 0.3);
  border-radius: 0.25rem;
  background: rgba(8, 6, 5, 0.82);
}

@media (max-width: 900px), (max-height: 650px) {
  .book-shell {
    width: min(84vw, 68rem);
    height: min(68vh, 34rem);
    min-height: 20rem;
  }

  .collection-page {
    padding: 2.3rem 2rem;
  }

  .bookmark {
    min-width: 6.4rem;
    height: 2.7rem;
    padding: 0 0.7rem;
  }

  .bookmark-top {
    top: -2.25rem;
  }

  .bookmark-bottom {
    bottom: -2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-motion-layer {
    display: none;
  }

  .collection-book {
    transition: none;
  }
}