html {
  --navTopicHeight: 52px;
  --navBgColor: transparent;
  --navBtnColor: #674881b7;
  --navTxtColor: #fff;
  --navBtnHover: #856319;
  --navTxtHover: #fde6b3;
  --h1Color: #ffffff;
  --bookHover: #dba300;
}

.nav-topic {
  max-width: 1360px;
  margin-inline: auto;
}

.nav-topic ul {
  margin-left: 2em;
}

@media (max-width: 707px) {
  .nav-topic {
    scroll-snap-type: unset;
  }
  .nav-topic ul {
    margin-left: auto;
  }
}

.nav-topic.sticky {
  --navBgColor: #000;
  right: 0;
}

.nav-topic.sticky ul {
  margin-left: auto;
}

.nav-topic a {
  padding: 0.5rem 1.5rem;
}

/* Hero */

.topic-cover__header {
  position: relative;
  user-select: none;
  max-width: 1220px;
  padding: 5vh 1em 0;
  margin-inline: auto;
}

.hero {
  position: relative;
  color: var(--h1Color);
  box-sizing: border-box;
  font-family: Montserrat, "Noto Sans TC" !important;
  max-width: 605px;
}

.hero h1 {
  position: relative;
  display: inline-block;
  font:
    800 clamp(1.8em, 4.2vw, 3em) / 1.2 Montserrat,
    "Noto Sans TC" !important;
  color: var(--h1Color);
  margin-bottom: 0.5em;
  text-align: center;
  z-index: 2;
}

h1 .break {
  position: relative;
  display: inline-block;
}

.hero h1:before,
h1 .break:before {
  content: "工商書房";
  position: absolute;
  left: 0;
  top: 0;
  margin: auto;
  -webkit-text-stroke: 0.1em #675777;
  font-size: 1em;
  color: #868585;
  z-index: -1;
  transform: translate(0.02em, 0.03em);
}

h1 .break:before {
  content: "2025 年度選書";
}

@media (max-width: 445px) {
  .hero h1:before {
    inset: 0;
  }
}

h1 .sub {
  position: relative;
  display: block;
  font-size: 0.48em;
  text-align: right;
  transform-origin: right;
  font-family: "Noto Serif TC", Serif !important;
  margin-top: 0.5em;
}

h1 .sub:before {
  content: "";
  position: absolute;
  /* inset: 0; */
  margin: auto;
  top: auto;
  bottom: 0.3em;
  height: 0.1em;
  left: 0.5em;
  right: 11.5em;
  background: var(--h1Color);
}

.hero p {
  position: relative;
  font-size: 0.88em;
}

.hero:before,
.hero:after,
.hero p:after {
  content: "";
  position: absolute;
  animation: updown 20s ease-in-out infinite;
  filter: drop-shadow(5px 5px 15px #fff5);
}

.hero:before {
  width: 70px;
  height: 70px;
  right: -57px;
  top: -37px;
  background: 0 / contain url(/Other/topic.ctee/bestbook/image/333.webp) no-repeat;
  rotate: -13deg;
  animation-delay: 0.5s;
}

.hero:after {
  width: 80px;
  height: 80px;
  left: 450px;
  bottom: -60px;
  background: 0 / contain url(/Other/topic.ctee/bestbook/image/111.webp) no-repeat;
  rotate: -64deg;
}

.hero p:after {
  width: 80px;
  height: 110px;
  left: -57px;
  top: -66px;
  background: 0 / contain url(/Other/topic.ctee/bestbook/image/222.webp) no-repeat;
  rotate: 144deg;
  animation-delay: 1.5s;
}

.fixedBg {
  background: #000;
}

.fixedBg img {
  position: absolute;
  width: 105%;
  height: 105lvh;
}

.fixedBg img:nth-of-type(1) {
  transform-origin: 50% 30%;
  animation: zoom 25.13s ease-in-out infinite 0.3s;
  filter: contrast(1.35);
}

.fixedBg img:nth-of-type(2) {
  transform-origin: 90% 50%;
  animation: rotate 25.7s ease-in-out infinite 0.4s;
}

.fixedBg img:last-of-type {
  transform-origin: 90% 50%;
  animation: rotate 30.17s ease-in-out infinite 0.2s;
  filter: brightness(1.5);
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(3deg) scale(1.05);
    filter: brightness(1.3);
  }
  70% {
    transform: rotate(-5deg) scale(1.03);
    filter: brightness(1);
  }
  100% {
    transform: rotate(0deg);
  }
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.02);
  }
  70% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes updown {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 16px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 內容各區塊 */
#T1 > *,
#T99 > * {
  z-index: 2;
}

#T1:before,
#T99:before {
  background: var(--navBgColor);
  z-index: 1;
  /* backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); */
}

/* #T1:before {
  mask: linear-gradient(to top, #000 85%, transparent 100%);
} */

#T99:before {
  background: #0005;
  border-top: solid 1px var(--accentColor);
}

.box-title {
  color: var(--navTxtHover);
  text-align: left;
  font: 600 1.3em/1 "Noto Sans TC";
}

/* .group-box {
  padding-inline: 1em;
  max-width: 1220px;
} */

.group-box > * {
  margin-inline: auto;
  max-width: 980px;
}

.col--4 {
  align-items: stretch;
  gap: 1rem;
}

.book__card {
  display: grid;
  grid-template-rows: 280px auto auto;
  align-items: center;
  background: #fff;
  border-radius: 0.25em;
  padding: 1em;
  gap: 0.2em;
  position: relative;
  overflow: hidden;
}

.book__card:before,
.book__card:after {
  content: "";
  background: var(--bookHover);
  width: 100%;
  height: 0;
  position: absolute;
  transition: height 500ms ease-out;
}

.book__card:before {
  top: 0;
}

.book__card:after {
  bottom: 0;
}

.book__card:hover:before {
  border-radius: 0.25em 0.25em 0 0;
  height: 8px;
  transition: height 500ms ease-out;
}

.book__card:hover:after {
  border-radius: 0 0 0.25em 0.25em;
  height: 8px;
  transition: height 500ms ease-out;
}

.book__card:hover img {
  transform: scale(1.15);
  transition: transform 500ms ease-out 30ms;
}

.book__card img {
  align-self: center;
  max-height: 250px;
  width: auto;
  max-width: 200px;
  margin-inline: auto;
  transition: transform 500ms ease-out 30ms;
}

.book-title {
  text-align: center;
  align-self: start;
}

.book-title a {
  color: #7e6514;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  height: 3em;
}

.book-title a:hover {
  text-decoration: none;
}

.note {
  grid-column: 1/-1;
  color: var(--navTxtColor);
  font-size: 0.78em;
  text-align: center;
  margin-block: 1rem;
}

.note a {
  color: var(--bookHover);
}

/* #T99 {
  min-height: 100svh;
  align-content: center;
} */

#T99 ul,
#T99 li {
  list-style: none;
  margin: 0;
  padding: 0;
}

#T99 ul {
  gap: 1em;
  margin-top: 1em;
}

#T99 img {
  border-radius: 0.25rem;
  transition: transform 500ms ease-out 30ms;
}

#T99 img:hover {
  transform: scale(1.08);
  transition: transform 500ms ease-out 30ms;
}