html, body{
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

:root{
  --bg: #0f0f10;

  --nav-margin: 10px 0 10px;

  --btn-radius: 20px;
  --btn-bg: var(--nav-glass);
  --btn-border: var(--nav-border);
  --btn-text: #2b2a27;
  --btn-bg-hover: rgba(255,255,255,.48);
  --btn-border-hover: rgba(255,255,255,.60);

  --shadow-1: 0 6px 18px rgba(0,0,0,.24);
}

.book-page{
  min-height: calc(var(--vh, 1vh) * 100);
  display: flex;
  flex-direction: column;
}

.book-hero{
  padding: 16px 20px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.book-hero__content{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: 36px;
  align-items: center;
}

.book-hero__cover{
  justify-self: center;
  width: clamp(260px, 28vw, 420px);
  aspect-ratio: 2 / 3;
  border-radius: 33px;
  overflow: hidden;
  border: transparent;
  background: none;
  box-shadow:
    0 0 10px rgba(255,210,100,.25),
    0 0 20px rgba(255,220,130,.20),
    0 0 30px rgba(255,200,0,.15);
}

.book-hero__cover img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;

  opacity: 0;
  filter: blur(10px);
  transition: opacity .35s ease-out, filter .35s ease-out;
  animation: book-cover-zoom 1.4s ease-out forwards;
  animation-delay: 0.15s;
}

.book-hero__cover img.is-loaded{
  opacity: 1;
  filter: blur(0);
}

@keyframes book-cover-zoom{
  from{ transform: scale(1); }
  to{ transform: scale(1.03); }
}

.book-hero__meta{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #f5f5f5;
  min-width: 0;
}

.book-hero__title{
  font-family: var(--ff);
  font-size: clamp(28px, 4.2vw, 50px);
  line-height: 1.08;
  margin: 0 0 6px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .05em;
  color: #383731;
  text-shadow:
    0 0 6px rgba(255,215,80,.5),
    0 0 12px rgba(255,220,100,.35),
    0 0 18px rgba(255,230,130,.25);

  position: relative;
  -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  animation: book-ink-reveal 1.8s steps(40, end) forwards;
  animation-delay: 0.1s;
}

.book-hero__subtitle{
  font-family: var(--ff);
  font-size: clamp(20px, 2.2vw, 30px);
  margin: 6px 0 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  opacity: .92;
  color: #383731;
  text-shadow:
    0 0 6px rgba(255,215,80,.5),
    0 0 12px rgba(255,220,100,.35),
    0 0 18px rgba(255,230,130,.25);

  display: block;
  line-height: 1.4;
  height: 1.4em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  min-width: 0;

  max-width: 520px;
  width: min(520px, 100%);
  flex: 0 0 auto;
  margin-left: auto;
  margin-right: auto;

  position: relative;
  -webkit-mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  mask: linear-gradient(#000 0 0) left / 0% 100% no-repeat;
  animation: book-ink-reveal 1.5s steps(32, end) forwards;
  animation-delay: 0.4s;
}

.book-hero__subtitle.is-hero-marquee{
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
}

.book-hero__subtitle .hero-marquee-inner{
  display: inline-flex;
  gap: var(--hero-marquee-gap, 10px);
  white-space: nowrap;
  animation-name: hero-marquee;
  animation-duration: var(--hero-marquee-duration, 8s);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: running;

  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.book-hero__subtitle .hero-marquee-segment{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  padding: 0;
}

.book-hero__subtitle:not(.is-hero-marquee) .hero-marquee-inner{
  animation-name: none;
  animation-duration: 0s;
}

@keyframes hero-marquee{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(calc(var(--hero-marquee-distance) * -1), 0, 0); }
}

@keyframes book-ink-reveal{
  to{
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
}

.book-hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
  justify-content: center;
  border-radius: 20px;
}

.book-hero__actions .btn-primary{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  margin-top: 10px;
}

body.book-page-ready .book-hero__actions .btn-primary{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.85s;
}

.book-description{
  max-width: 1030px;
  margin: 28px auto 22px;

  border-radius: 26px;
  overflow: hidden;

  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(255, 215, 120, 0.22), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08) 40%, rgba(255,255,255,0.06));
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: var(--shadow-1);

  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

body.book-page-ready .book-description{
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2.05s;
}

.book-description__head{
  position: relative;
  padding: 18px 26px 14px;
  background: transparent;
}

.book-description__head::after{
  content: "";
  display: block;
  height: 2px;
  margin: 12px auto 0;

  width: clamp(180px, 32vw, 320px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.book-description__heading{
  margin: 0;

  text-align: center;
  font-family: var(--ff);
  font-size: 1.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;

  color: #000000;
  opacity: 0.78;

  border-bottom: none;
}

.book-description__body{
  position: relative;
  padding: 6px 26px 0px;
}

.book-description__body::after{
  content: "";
  display: block;
  height: 2px;
  margin-top: 20px;
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);

  width: clamp(300px, 74vw, 900px);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));
}

.book-description__text{
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.75;

  color: #111111;
  opacity: 0.92;

  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

.book-description__back{
  margin-top: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;
  padding: 16px 20px 16px;

  text-decoration: none;
  font-family: var(--ff);
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;

  color: #383731;
  -webkit-text-fill-color: #383731;

  border-top: none;

  transition: opacity var(--motion-fast) var(--ease-soft), transform var(--motion-normal) var(--ease-soft);
}

@media (hover:hover) and (pointer:fine){
  .book-description__back:hover{
    opacity: 0.92;
    transform: translateY(-1px);
  }
}

.book-description__back:active{
  transform: translateY(0);
  opacity: 0.88;
}

.book-error{
  max-width: 600px;
  margin: 80px auto;
  padding: 0 20px;
  text-align: center;
  color: #f5f5f5;
}

.book-error a{
  color: #ffd278;
  text-decoration: none;
}

.book-error a:hover{ text-decoration: underline; }

@media (max-width: 399px){
  :root{ --nav-margin: 0 0 15px; }
  .book-hero{ padding: 0px 4px 8px; }
  .book-hero__content{ grid-template-columns: minmax(0, 1fr); text-align: center; gap: 14px; }
  .book-hero__meta{ align-items: center; }
  .book-hero__cover{ width: clamp(250px, calc(128.48px + 37.97vw), 280px); }
  .book-hero__title{ font-size: clamp(1.3rem, calc(0.692405rem + 3.037975vw), 1.45rem); line-height: 1.4; font-weight: 650; }
  .book-hero__subtitle{ font-size: clamp(1.2rem, calc(0.592405rem + 3.037975vw), 1.35rem); max-width: 75vw; width: 100%; font-weight: 650; }

  .book-hero__actions{ justify-content: center; }
  .book-hero__actions .btn-primary{ padding: 6px 14px; font-size: clamp(0.9rem, calc(0.292405rem + 3.037975vw), 1.05rem); letter-spacing: clamp(0.08em, calc(-0.001013em + 0.025316vw), 0.10em); }
  .book-description{ margin-top: 0px; max-width: 100%; }
  .book-description__heading{ font-size: clamp(1.1rem, calc(0.289873rem + 4.050633vw), 1.3rem); letter-spacing: clamp(0.08em, calc(-0.001013em + 0.025316vw), 0.10em); }
  .book-description__text{ font-size: clamp(1.0rem, calc(0.189873rem + 4.050633vw), 1.2rem); }
  .book-description__back{ font-size: clamp(0.9rem, calc(0.292405rem + 3.037975vw), 1.05rem); letter-spacing: clamp(0.08em, calc(-0.001013em + 0.025316vw), 0.10em); }

  .book-description__head::after{ width: clamp(210px, calc(47.721519px + 50.632911vw), 250px); }
  .book-description__body::after{ width: clamp(320px, calc(-125.56962px + 139.240506vw), 430px); }
}

@media (min-width: 400px) and (max-width: 767px){
  :root{ --nav-margin: 0px 0 clamp(15px, calc(9.550409px + 1.362398vw), 20px); }
  .book-hero{ padding: 0px 4px 8px; }
  .book-hero__content{ grid-template-columns: minmax(0, 1fr); text-align: center; gap: 14px; }
  .book-hero__meta{ align-items: center; }
  .book-hero__cover{ width: clamp(280px, calc(181.906px + 24.5235vw), 370px); }
  .book-hero__title{ font-size: clamp(1.45rem, calc(0.850545rem + 2.398366vw), 2rem); line-height: 1.4; font-weight: 650; }
  .book-hero__subtitle{ font-size: clamp(1.35rem, calc(0.804360rem + 2.181619vw), 1.85rem); letter-spacing: clamp(0.08em, calc(0.069101em + 0.027248vw), 0.09em); font-weight: 650; max-width: clamp(300px, calc(136.5123px + 40.8719vw), 450px); width: 100%; }

  .book-hero__actions .btn-primary{ padding: clamp(6px, calc(1.639237px + 1.089918vw), 10px) clamp(14px, calc(5.279564px + 2.179836vw), 22px); font-size: clamp(1.05rem, calc(0.614033rem + 1.743869vw), 1.45rem); letter-spacing: clamp(0.08em, calc(0.069101em + 0.027248vw), 0.09em); border-radius: 999px; }
  .book-description{ margin-top: 0px; max-width: 100%; }
  .book-description__heading{ font-size: clamp(1.3rem, calc(0.645504rem + 2.616350vw), 1.9rem); letter-spacing: clamp(0.08em, calc(0.069101em + 0.027248vw), 0.09em); }
  .book-description__text{ font-size: clamp(1.2rem, calc(0.873024rem + 1.307902vw), 1.5rem); }
  .book-description__back{ font-size: clamp(1.05rem, calc(0.614033rem + 1.743869vw), 1.45rem); letter-spacing: clamp(0.08em, calc(0.069101em + 0.027248vw), 0.09em); }

  .book-description__head::after{ width: clamp(250px, calc(86.512262px + 40.871935vw), 400px); }
  .book-description__body::after{ width: clamp(430px, calc(-27.765668px + 114.441417vw), 850px); }
}

@media (min-width: 768px) and (max-width: 1024px){
  :root{ --nav-margin: 0px 0 clamp(20px, calc(-10px + 3.90625vw), 30px); }
  .book-hero{ padding: 0px 4px clamp(8px, calc(-28px + 4.6875vw), 20px); }
  .book-hero__content{ grid-template-columns: minmax(0, 1fr); gap: 14px; text-align: center; max-width: none; }
  .book-hero__meta{ align-items: center; }
  .book-hero__cover{ width: clamp(370px, calc(-20px + 50.78125vw), 500px); }
  .book-hero__title{ font-size: clamp(2rem, calc(-0.1rem + 4.375vw), 2.7rem); line-height: 1.4; font-weight: 650; }
  .book-hero__subtitle{ font-size: clamp(1.85rem, calc(0.2rem + 3.4375vw), 2.4rem); font-weight: 650; max-width: 60vw; width: 100%; }

  .book-hero__actions .btn-primary{ padding: clamp(10px, calc(4px + 0.78125vw), 12px) clamp(22px, calc(10px + 1.5625vw), 26px); font-size: clamp(1.45rem, calc(0.1rem + 2.8125vw), 1.9rem); letter-spacing: clamp(0.08em, calc(0.12em - 0.00390625vw), 0.09em); border-radius: 999px; }
  .book-description{ margin-top: 0px; max-width: 100%; }
  .book-description__heading{ font-size: clamp(1.9rem, calc(0.1rem + 3.75vw), 2.5rem); letter-spacing: clamp(0.08em, calc(0.12em - 0.00390625vw), 0.09em); }
  .book-description__text{ font-size: clamp(1.5rem, calc(3.125vw), 2.0rem); }
  .book-description__back{ font-size: clamp(1.45rem, calc(0.1rem + 2.8125vw), 1.9rem); letter-spacing: clamp(0.08em, calc(0.12em - 0.00390625vw), 0.09em); }

  .book-description__head::after{ width: clamp(400px, calc(10px + 50.78125vw), 530px); }
  .book-description__body::after{ width: clamp(850px, calc(-50px + 117.1875vw), 1150px); }
}

@media (min-width:1025px) and (max-width:2560px){
  .book-hero{ padding: 7px 18px 26px; max-width: clamp(900px, calc(365.7980px + 52.1173vw), 1700px); }
  .book-hero__content{ gap: 0px; text-align: center; height: clamp(480px, calc(279.674px + 19.5440vw), 780px); min-height: 480px; }
  .book-hero__meta{ align-items: center; }
  .book-hero__cover{ width: clamp(300px, calc(166.4495px + 13.0293vw), 500px); }
  .book-hero__title{ font-size: clamp(2rem, calc(1.0005rem + 1.5640vw), 3.5rem); line-height: 1.2; font-weight: 700; }
  .book-hero__subtitle{ font-size: clamp(1.7rem, calc(0.9666rem + 1.1466vw), 2.8rem); max-width: clamp(370px, calc(229.2300px + 13.6840vw), 580px); font-weight: 700; width: 100%; margin-left: auto; margin-right: auto; }

  .book-hero__actions .btn-primary{ padding: clamp(5px,  calc(1.661px + 0.3257vw), 10px) clamp(15px, calc(10.326px + 0.4560vw), 22px); font-size: clamp(1.1rem, calc(0.766rem + 0.5215vw), 1.6rem); letter-spacing: 0.10em; }
  .book-description{ margin-top: 0px; max-width: clamp(770px, calc(335.9609px + 42.3453vw), 1420px); }
  .book-description__heading{ font-size: clamp(1.4rem, calc(0.999rem + 0.6254vw), 2rem); }
  .book-description__text{ font-size: clamp(1.2rem, calc(0.866rem + 0.5215vw), 1.7rem); }
  .book-description__back{ font-size: clamp(1.1rem, calc(0.766rem + 0.5215vw), 1.6rem); letter-spacing: 0.10em; }

  .book-description__head::after{ width: clamp(350px, calc(283.725px + 6.514658vw), 450px); }
  .book-description__body::after{ width: clamp(850px, calc(349.200px + 48.859935vw), 1600px); }
}

@media (max-width: 1024px), (pointer: coarse){
  .book-description{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    background: rgba(255, 255, 255, 0.33);
    box-shadow: var(--glass-fallback-shadow);
  }

  .book-description__back{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.10) 35%,
        rgba(255,255,255,0.16) 100%);
  }

  .book-hero__actions .btn-primary{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255,255,255,0.33);
    box-shadow: var(--glass-fallback-shadow);
  }

  .book-hero__title{ text-shadow:none; }
  .book-hero__subtitle{ text-shadow:none; }
}


@media (max-width: 1024px){
  .book-hero__cover{ box-shadow: none; }
  .wrap.book-page{
    padding-bottom: 0 !important;
  }
  main[aria-labelledby="bookTitle"]{
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;

    flex: 1 1 auto;

    min-height: calc((var(--vh, 1vh) * 100) - var(--safe-top));
  }

  .book-description{
    max-width: none;
    width: calc(100% + (2 * var(--wrap-pad)));
    margin-left: calc(-1 * var(--wrap-pad));
    margin-right: calc(-1 * var(--wrap-pad));

    margin-top: 0;
    margin-bottom: 0;

    flex: 1 1 auto;

    border-radius: 20px 20px 0 0;
  }

  .book-description__head{
    padding-left: clamp(14px, 3.5vw, 22px);
    padding-right: clamp(14px, 3.5vw, 22px);
  }
  .book-description__body{
    padding-left: clamp(14px, 3.5vw, 22px);
    padding-right: clamp(14px, 3.5vw, 22px);
  }
  .book-description__back{
    padding-left: clamp(14px, 3.5vw, 22px);
    padding-right: clamp(14px, 3.5vw, 22px);

    padding-top: 10px;
    padding-bottom: calc(12px + var(--safe-bottom));
  }
}