@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-It.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-Semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-SemiboldIt.woff2") format("woff2");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Adobe Text Pro";
  src: url("assets/fonts/AdobeTextPro-BoldIt.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "CoFo Sans";
  src: url("assets/fonts/cofosans-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}


:root {
  --paper: #060706;
  --ink: #f2f0e9;
  --seaweed: #ff9bb6;
  --neon: #ff9bb6;

  --red: var(--seaweed);
  --blue: #ff9bb6;

  --line: rgba(242, 240, 233, 0.28);

  --font-text:
    "Adobe Text Pro",
    "Adobe Text",
    Georgia,
    "Times New Roman",
    serif;

  --font-sans:
    "CoFo Sans",
    Arial,
    Helvetica,
    sans-serif;

  --page-pad: clamp(18px, 2.5vw, 42px);

  --ease:
    cubic-bezier(.22, .8, .18, 1);
}


* {
  box-sizing: border-box;
}


html {
  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--paper);
}


body {
  margin: 0;

  width: 100%;
  height: 100%;

  min-width: 300px;

  color: var(--ink);
  background: var(--paper);

  font-family: var(--font-sans);

  line-height: 1.32;

  overflow: hidden;
}


button,
a,
input,
textarea,
select {
  color: inherit;
  font: inherit;
}


button {
  -webkit-tap-highlight-color: transparent;
}


button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}


.nowrap {
  white-space: nowrap;
}


.eyebrow {
  margin: 0;

  font-size: 11px;

  letter-spacing: .11em;

  text-transform: uppercase;
}


/* ======================================================
   BACKGROUND
====================================================== */

.ambient {
  position: fixed;

  inset: 0;

  z-index: -1;

  background:
    radial-gradient(
      circle at 16% 72%,
      rgba(255, 155, 182, .11),
      transparent 28%
    ),
    radial-gradient(
      circle at 82% 17%,
      rgba(255, 105, 145, .075),
      transparent 23%
    ),
    linear-gradient(
      128deg,
      #030403,
      #090b08 48%,
      #040504
    );
}


.ambient::after {
  content: "";

  position: absolute;

  inset: -25%;

  opacity: .12;

  background:
    repeating-linear-gradient(
      116deg,
      transparent 0 30px,
      rgba(255, 155, 182, .13) 31px,
      transparent 33px
    );

  animation: drift 26s linear infinite;
}


/* ======================================================
   HERO
====================================================== */

.hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(210px, 1fr)
    minmax(330px, 1.25fr)
    minmax(210px, 1fr);

  align-items: center;

  gap: clamp(20px, 3vw, 60px);

  width: 100%;

  height: 100svh;
  min-height: 0;

  padding: var(--page-pad);

  overflow: hidden;
}


.open-dismiss {
  position: absolute;

  inset: 0;

  z-index: 6;

  display: none;

  padding: 0;

  border: 0;
  outline: 0;

  background: rgba(0, 0, 0, .001);

  appearance: none;
  -webkit-appearance: none;

  caret-color: transparent;

  cursor: default;
}


.open-dismiss:focus,
.open-dismiss:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}


body[data-book-state="open"]
.open-dismiss {
  display: block;
}


/* ======================================================
   STORY
====================================================== */

.story-orbit {
  position: absolute;

  inset: 0;

  z-index: 4;

  pointer-events: none;

  transition: opacity .35s ease;
}


.story-fragment {
  position: absolute;

  width: min(350px, 29vw);

  padding: 14px;

  color: var(--ink);

  background: transparent;

  border: 0;

  opacity: .32;

  transform: scale(.985);

  pointer-events: auto;

  cursor: default;

  transition:
    opacity .52s ease,
    transform .62s var(--ease);
}


.story-fragment:hover,
.story-fragment:focus,
.story-fragment.is-revealed {
  z-index: 5;

  opacity: .96;

  transform: scale(1);

  outline: 0;
}


.story-fragment h2 {
  margin: 0 0 8px;

  color: var(--neon);

  font-family: var(--font-sans);

  font-size: 10px;
  font-weight: 400;

  letter-spacing: .14em;

  text-transform: uppercase;

  text-shadow:
    0 0 8px rgba(255, 155, 182, .58);
}


.story-fragment > p {
  margin: 0;

  filter: blur(4.5px);

  font-family: var(--font-text);

  font-size: clamp(15px, 1.22vw, 18.5px);

  line-height: 1.42;

  letter-spacing: -.008em;

  transition: filter .62s var(--ease);
}


.story-fragment:hover > p,
.story-fragment:focus > p,
.story-fragment.is-revealed > p {
  filter: blur(0);
}


.story-fragment > p + p {
  margin-top: .8em;
}


.story-sequence {
  position: absolute;

  top: 50%;
  left: 3%;

  width: min(350px, 29vw);

  display: grid;

  gap: clamp(16px, 2.8vh, 30px);

  pointer-events: none;

  transform: translateY(-50%);
}


.story-sequence
.story-fragment {
  position: relative;

  width: 100%;

  padding: 0;

  pointer-events: auto;
}


.story-fragment--who {
  right: 3%;
  bottom: 8%;
}


.story-fragment--what {
  top: 8%;
  right: 3%;
}


.story-mobile-trigger {
  display: none;
}


/* ======================================================
   BOOK STAGE
====================================================== */

.object-stage {
  grid-column: 2;

  position: relative;

  z-index: 2;

  display: flex;

  flex-direction: column;

  width:
    min(
      62vw,
      900px,
      calc((100svh - 96px) * 1.393)
    );

  justify-self: center;

  perspective: 1800px;
}


body[data-book-state="open"]
.object-stage {
  z-index: 7;
}


.issue-line {
  width: min(46ch, 100%);

  margin: 0 auto 16px;

  color: var(--neon);

  font-family: var(--font-text);

  font-size: clamp(14px, 1.1vw, 17px);

  letter-spacing: .008em;

  line-height: 1.22;

  text-align: center;

  text-wrap: balance;

  text-shadow:
    0 0 4px rgba(255, 155, 182, .95),
    0 0 12px rgba(255, 155, 182, .62),
    0 0 28px rgba(255, 155, 182, .28);

  animation:
    issue-flicker
    5.8s
    ease-in-out
    infinite;
}


.issue-line__initial {
  display: inline-block;

  margin-inline: .01em -.03em;

  font-size: 1.32em;
  font-style: italic;

  line-height: .72;

  transform:
    rotate(-8deg)
    translateY(.04em);

  transform-origin: center;
}


/* ======================================================
   CLOSED BOOK — DESKTOP
====================================================== */

.closed-book {
  position: relative;

  isolation: isolate;

  width: min(46vw, 430px);

  margin-inline: auto;

  transition:
    opacity .35s ease,
    transform .7s var(--ease);
}


.closed-book::after {
  content: "";

  position: absolute;

  z-index: 0;

  top: 7%;
  right: 15.25%;
  bottom: 7%;

  width: 14px;

  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, .5) 0%,
      rgba(232, 232, 232, .24) 50%,
      transparent 100%
    );

  border-radius: 0 36% 36% 0;

  filter: blur(3.5px);
}


.cover-button {
  position: relative;

  z-index: 1;

  display: block;

  isolation: isolate;

  width: 100%;

  padding: 0;

  border: 0;
  outline: 0;

  background: none;

  appearance: none;
  -webkit-appearance: none;

  caret-color: transparent;

  cursor: pointer;
}


.cover-button::before,
.cover-button::after {
  content: none;
}


.cover-button picture {
  display: block;
}


.cover-button::-moz-focus-inner {
  padding: 0;
  border: 0;
}


.cover-button:focus,
.cover-button:focus-visible,
.cover-button:-moz-focusring {
  outline: 0 !important;
  box-shadow: none;
}


.desktop-cover-picture {
  position: relative;
  aspect-ratio: 1236 / 1272;
}

.book-cover {
  position: absolute;
  top: 6.2%;
  left: 19.25%;

  z-index: 1;

  display: block;

  width: 62.3%;
  height: 87.3%;
  object-fit: cover;
}


/* desktop vellum */

.vellum {
  position: absolute;

  z-index: 2;

  top: 6.2%;
  left: 19.25%;

  width: 62.3%;
  height: 87.3%;

  overflow: hidden;

  background: #eee9e4;

  box-shadow:
    7px 4px 13px rgba(20, 18, 18, .12);

  transform:
    translate3d(0, 0, 10px);

  transition: opacity .38s ease;
}


.vellum__art {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}


/*
  Compact version выключена на desktop.
*/
.compact-cover-stage {
  display: none;
}


/* DESKTOP HOVER */

@media (hover: hover) and (pointer: fine) {

  .cover-button,
  .cover-button * {
    cursor:
      url("assets/knife-cursor.png") 1 1,
      pointer;
  }


  .cover-button:hover
  .vellum {
    opacity: 0;

    pointer-events: none;
  }

}


/* ======================================================
   OPEN BOOK
====================================================== */

body[data-book-state="open"]
.closed-book {
  position: absolute;

  opacity: 0;

  transform: none;

  pointer-events: none;
}


.open-book {
  display: none;

  width: min(100%, 560px);

  margin: 20px auto;

  opacity: 0;

  transform: none;
}


body[data-book-state="open"]
.open-book {
  display: block;

  animation:
    unfold-spread
    .92s
    cubic-bezier(.2, .72, .2, 1)
    both;
}


.spread-window {
  position: relative;

  width: 100%;

  aspect-ratio: 1644 / 1180;

  overflow: hidden;

  box-shadow:
    1px 2px 2px rgba(0, 0, 0, .88),
    8px 12px 15px -5px rgba(0, 0, 0, .7),
    20px 29px 42px -14px rgba(0, 0, 0, .76),
    0 0 25px rgba(255, 155, 182, .055);
}


.spread-window::after {
  content: "";

  position: absolute;

  z-index: 5;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 48.7%,
      rgba(0, 0, 0, .08) 49.7%,
      rgba(255, 255, 255, .24) 50%,
      rgba(0, 0, 0, .12) 50.3%,
      transparent 51.3%
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(255, 255, 255, .12);
}


.page-flip,
.page-flip canvas,
.page-flip .stf__parent,
.page-flip .stf__wrapper {
  outline: 0 !important;
}


.page-flip {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  touch-action: none;
}


/* ======================================================
   MOBILE READER
====================================================== */

.mobile-page-reader {
  overflow: hidden;

  perspective: 1400px;
}


.mobile-page-stack {
  position: absolute;

  inset: 0;

  overflow: hidden;

  background: var(--paper);
}


.mobile-page-base,
.mobile-page-turn {
  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  width: 100%;
  height: 100%;

  user-select: none;

  pointer-events: none;

  backface-visibility: hidden;
}


.mobile-page-base img,
.mobile-page-turn img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  -webkit-user-drag: none;
}


.mobile-page-turn {
  z-index: 2;

  opacity: 0;
}


.mobile-page-turn.is-turning-next {
  opacity: 1;

  animation:
    mobile-turn-next
    .68s
    cubic-bezier(.24, .68, .24, 1)
    forwards;
}


.mobile-page-turn.is-turning-prev {
  opacity: 1;

  animation:
    mobile-turn-prev
    .68s
    cubic-bezier(.24, .68, .24, 1)
    forwards;
}


.book-page {
  overflow: hidden;

  background: #fbf3e5;
}


.book-page img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  user-select: none;

  pointer-events: none;

  -webkit-user-drag: none;
}


.spread-status {
  position: absolute;

  width: 1px;
  height: 1px;

  padding: 0;
  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;
}


/* ======================================================
   PREORDER
====================================================== */

.book-preorder {
  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 10px auto 0;

  text-align: center;

  transition: opacity .3s ease;
}


.cover-credit {
  width: min(100%, 300px);

  margin: 0 0 8px;

  color: rgba(242, 240, 233, .78);

  font-family: var(--font-sans);

  font-style: italic;

  font-size: 11px;

  line-height: 1.35;

  letter-spacing: .02em;
}


.book-preorder > p {
  margin: 0 0 2px;

  font-size: 10px;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.book-preorder > p.cover-credit {
  margin: 0 0 8px;

  font-size: 11px;

  letter-spacing: .02em;

  text-transform: none;
}


body[data-book-state="open"]
.book-preorder,
body[data-book-state="open"]
.story-orbit {
  opacity: 0;

  pointer-events: none;
}


.order-button {
  --marker-color: var(--neon);

  position: relative;

  display: block;

  isolation: isolate;

  width: min(100%, 225px);

  height: 64px;

  padding: 0;

  color: var(--ink);
  background: transparent;

  border: 0;

  text-transform: uppercase;

  letter-spacing: .07em;

  font-size: 13px;

  cursor: pointer;
}


.order-button > span:first-child {
  position: absolute;

  z-index: 3;

  left: 50%;
  top: 50%;

  white-space: nowrap;

  transform: translate(-50%, -50%);
}


.order-button__line {
  position: absolute;

  z-index: 1;

  inset: 8px 5px 10px;

  display: block;

  border: 1px solid currentColor;

  border-radius: 50%;

  opacity: .48;

  transform:
    rotate(-7deg)
    scale(1, .88);
}


.order-button__marker {
  position: absolute;

  z-index: 3;

  right: 13px;
  top: 13px;

  display: grid;

  place-items: center;

  width: 15px;
  height: 15px;

  overflow: hidden;

  color: transparent;

  background: var(--marker-color);

  border-radius:
    52% 48% 56% 44% /
    46% 57% 43% 54%;

  font-size: 15px;

  line-height: 1;
}


/* ======================================================
   OVERLAY
====================================================== */

.overlay-panel {
  position: fixed;

  inset: 0;

  z-index: 20;

  padding:
    clamp(22px, 5vw, 72px);

  display: grid;

  place-items: center;

  visibility: hidden;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity .45s ease,
    visibility 0s .45s;
}


body.about-open .about,
body.preorder-open .preorder {
  visibility: visible;

  opacity: 1;

  pointer-events: auto;

  transition-delay: 0s;
}


.about {
  color: var(--ink);

  background:
    rgba(5, 7, 5, .97);

  backdrop-filter: blur(16px);
}


.preorder {
  color: var(--ink);

  background:
    rgba(5, 7, 5, .98);
}


.panel-close {
  position: absolute;

  top:
    max(18px, var(--page-pad));

  right:
    max(18px, var(--page-pad));

  z-index: 2;

  padding: 0;

  border: 0 !important;

  outline: 0;

  background: transparent !important;

  font-size: 36px;

  line-height: .7;

  cursor: pointer;
}


.reading-sheet,
.preorder__content {
  width: min(720px, 100%);

  max-height:
    calc(100svh - 90px);

  overflow: auto;
}


.reading-sheet h2,
.preorder h2 {
  margin: 8px 0 30px;

  font-family: var(--font-text);

  font-size:
    clamp(54px, 8vw, 120px);

  font-weight: 400;

  letter-spacing: -.065em;

  line-height: .82;
}


.reading-sheet__intro {
  max-width: 28ch;

  margin:
    0 0 48px auto;

  font-family: var(--font-text);

  font-size:
    clamp(21px, 2vw, 29px);

  line-height: 1.25;
}


.about-grid {
  margin-left: auto;

  max-width: 610px;
}


.about-grid section {
  margin: 0 0 42px;
}


.about-grid h3 {
  margin: 0 0 10px;

  color: var(--seaweed);

  font-size: 11px;
  font-weight: 400;

  letter-spacing: .13em;

  text-transform: uppercase;
}


.about-grid p,
.signoff {
  margin: 0;

  font-family: var(--font-text);

  font-size:
    clamp(18px, 1.7vw, 25px);

  line-height: 1.38;
}


.about-grid p + p {
  margin-top: 1em;
}


.signoff {
  max-width: 610px;

  margin:
    68px 0 20px auto;
}


.wavy-strike {
  padding-inline: .03em;

  text-decoration-line:
    line-through;

  text-decoration-color:
    var(--seaweed);

  text-decoration-thickness:
    1.25px;

  text-decoration-skip-ink:
    none;
}


.authors-line span {
  color: var(--seaweed);

  text-shadow:
    0 0 13px
    rgba(255, 155, 182, .38);
}


.neon-o {
  position: fixed;

  z-index: 1;

  top: 13%;
  left: -8vw;

  color: transparent;

  opacity: .7;

  pointer-events: none;

  -webkit-text-stroke:
    1px var(--neon);

  font-family: var(--font-text);

  font-size:
    clamp(25px, 3.2vw, 52px);

  font-style: italic;

  line-height: 1;

  text-shadow:
    0 0 5px var(--neon),
    0 0 13px rgba(255, 155, 182, .72),
    0 0 28px rgba(255, 155, 182, .34);

  transform: rotate(-18deg);

  animation:
    neon-drift 19s linear infinite,
    neon-flicker 3.7s steps(1) infinite;
}


.preorder__content > p:not(.eyebrow) {
  max-width: 46ch;

  font-family: var(--font-text);

  font-size:
    clamp(18px, 1.7vw, 25px);
}


.preorder__inline-link {
  color: inherit;

  text-decoration-color:
    var(--neon);

  text-decoration-thickness: 1px;

  text-underline-offset: .18em;
}


.order-link {
  display: block;

  width: auto;

  margin: 15px 0 11px;

  padding: 0;

  border: 0;

  background: none;

  color: inherit;

  font-family: var(--font-text);

  font-size:
    clamp(25px, 2.4vw, 39px);

  text-decoration: none;
}


.preorder__secondary {
  margin-top: 32px;

  font-family:
    var(--font-sans) !important;

  font-size: 12px !important;
}


/* ======================================================
   ANIMATIONS
====================================================== */

@keyframes drift {
  to {
    transform:
      translate3d(8%, -6%, 0);
  }
}


@keyframes issue-flicker {

  0%,
  37%,
  43%,
  71%,
  100% {
    opacity: 1;
  }

  40% {
    opacity: .88;
  }

  41% {
    opacity: .97;
  }

  74% {
    opacity: .93;
  }

}


@keyframes unfold-spread {

  0% {
    opacity: 0;

    clip-path:
      inset(0 49% 0 49%);

    filter:
      brightness(.72)
      blur(1.5px);
  }

  46% {
    opacity: .96;
  }

  100% {
    opacity: 1;

    clip-path:
      inset(0);

    filter:
      brightness(1)
      blur(0);
  }

}


@keyframes mobile-turn-next {

  0% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate3d(-5%, 0, 0)
      scale(.988);
  }

}


@keyframes mobile-turn-prev {

  0% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  100% {
    opacity: 0;

    transform:
      translate3d(5%, 0, 0)
      scale(.988);
  }

}


@keyframes compact-book-open {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


@keyframes neon-drift {

  0% {
    left: -8vw;
    top: 13%;

    transform:
      rotate(-18deg);
  }

  48% {
    top: 78%;

    transform:
      rotate(12deg);
  }

  100% {
    left: 105vw;
    top: 31%;

    transform:
      rotate(-10deg);
  }

}


@keyframes neon-flicker {

  0%,
  18%,
  22%,
  62%,
  66%,
  100% {
    opacity: .72;
  }

  20%,
  64% {
    opacity: .18;
  }

  21%,
  65% {
    opacity: .9;
  }

}


/* ======================================================
   LARGE DESKTOP
====================================================== */

@media
  (min-width: 1600px)
  and (min-height: 850px) {

  :root {
    --page-pad:
      clamp(42px, 2.6vw, 76px);
  }

  .hero {
    grid-template-columns:
      minmax(300px, 1fr)
      minmax(620px, 1.3fr)
      minmax(300px, 1fr);

    gap:
      clamp(40px, 4vw, 110px);
  }

  .object-stage {
    width:
      min(
        58vw,
        1600px,
        calc((100svh - 140px) * 1.393)
      );
  }

  .closed-book {
    width:
      clamp(430px, 22vw, 720px);
  }

  .open-book {
    width:
      min(
        48vw,
        1440px,
        calc((100svh - 190px) * 1.393)
      );
  }

}


/* ======================================================
   SHORT DESKTOP
====================================================== */

@media
  (min-width: 1025px)
  and (max-height: 700px) {

  :root {
    --page-pad:
      clamp(10px, 2vh, 18px);
  }

  .object-stage {
    width:
      min(
        58vw,
        760px,
        calc((100svh - 52px) * 1.393)
      );
  }

  .closed-book {
    width:
      min(
        46vw,
        430px,
        calc((100svh - 185px) * .97)
      );
  }

}


/* ======================================================
   TABLET + TOUCH
====================================================== */

@media (max-width: 1024px) {

  .hero {
    grid-template-columns: 1fr;

    padding-top: 24px;
  }


  .object-stage {
    grid-column: 1;

    width:
      min(
        92vw,
        980px,
        calc((100svh - 110px) * 1.393)
      );
  }


  /*
    Это ОДНА страница.

    Открытая книга ниже имеет ровно
    удвоенную ширину.
  */
  .closed-book {
    position: relative;

    width:
      min(38vw, 280px);

    aspect-ratio:
      2362 / 3425;

    margin-inline: auto;
  }


  .closed-book::after {
    display: block;

    top: 3px;
    right: -4px;
    bottom: 3px;

    width: 5px;

    background:
      linear-gradient(
        90deg,
        #f5f2ea 0%,
        #dedad0 72%,
        rgba(255, 255, 255, .38) 100%
      );

    border-radius: 0 2px 2px 0;

    filter: none;

    box-shadow:
      4px 1px 6px rgba(255, 255, 255, .1),
      9px 11px 16px rgba(0, 0, 0, .58);
  }


  /*
    Полностью отключаем desktop изображения.
  */
  .desktop-cover-picture,
  .vellum {
    display: none !important;
  }


  .cover-button {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;

    overflow: hidden;
  }


  /*
    ВАЖНО:

    один контейнер для cover + vellum.
  */
  .compact-cover-stage {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;
  }


  /*
    Обложка всегда лежит снизу.

    При первом тапе она НЕ двигается.
  */
  .compact-cover-base {
    position: absolute;

    inset: 0;

    z-index: 1;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    transform: none !important;
  }


  /*
    Калька лежит поверх той же обложки.
  */
  .compact-cover-vellum {
    position: absolute;

    inset: 0;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;

    opacity: 1;

    transform: none !important;

    transition:
      opacity .28s ease;
  }


  /*
    Первый экран.
  */
  body[data-book-state="vellum"]
  .compact-cover-vellum {
    opacity: 1;
  }


  /* Состояние без кальки оставлено для совместимости. */
  body[data-book-state="cover"]
  .compact-cover-vellum {
    opacity: 0;
  }


  /*
    Сама закрытая книга остаётся
    абсолютно на том же месте.
  */
  body[data-book-state="vellum"]
  .closed-book,
  body[data-book-state="cover"]
  .closed-book {
    position: relative;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none !important;
  }


  /* Один тап скрывает обложку и открывает разворот. */
  body[data-book-state="open"]
  .closed-book {
    position: absolute;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;
  }


  /*
    Две страницы.

    280px × 2 = 560px.
    38vw × 2 = 76vw.
  */
  .open-book {
    width:
      min(76vw, 560px);

    margin:
      20px auto;
  }


  body[data-book-state="open"]
  .open-book {
    animation:
      compact-book-open
      .28s
      ease
      both !important;
  }


  .spread-window {
    width: 100%;

    aspect-ratio:
      1644 / 1180;
  }


  .story-sequence,
  .story-fragment {
    display: none;
  }


  .story-mobile-trigger {
    position: absolute;

    left: 50%;
    bottom: 18px;

    display: block;

    min-height: 44px;

    margin: 0;

    padding: 10px 8px;

    border: 0;

    background: transparent;

    color: #fff;

    opacity: 1;

    filter: none;

    font-family:
      var(--font-text);

    font-size:
      clamp(18px, 2.2vw, 22px);

    font-style: italic;

    cursor: pointer;

    pointer-events: auto;

    text-shadow: none;

    transform:
      translateX(-50%);

    transition:
      opacity .2s ease,
      filter .2s ease;
  }


  .story-mobile-trigger:hover,
  .story-mobile-trigger:focus-visible {
    opacity: 1;

    filter: none;
  }


  body[data-book-state="open"]
  .story-mobile-trigger {
    opacity: 0;

    pointer-events: none;
  }


  .signoff {
    display: none;
  }

}


/* ======================================================
   PHONE
====================================================== */

@media (max-width: 620px) {

  :root {
    --page-pad: 18px;
  }


  .hero {
    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 12px;

    height: 100svh;

    min-height: 0;

    padding-top: 18px;
  }


  .story-orbit {
    inset: 0;
  }


  .story-mobile-trigger {
    bottom: 14px;

    font-size: 18px;
  }


  .object-stage {
    width:
      min(
        calc(100vw - 20px),
        calc((100svh - 160px) * 1.393)
      );

    flex: 0 1 auto;

    min-height: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
  }


  /*
    Одна страница = ровно половина
    будущего разворота.
  */
  .closed-book {
    width: 50%;

    max-width: none;

    aspect-ratio:
      2362 / 3425;
  }


  /*
    Две страницы = 100%.
  */
  .open-book {
    width: 100%;

    max-width: none;
  }


  body[data-book-state="open"]
  .object-stage {
    flex: 1;
  }


  .spread-window {
    aspect-ratio:
      1644 / 1180;
  }


  .compact-cover-base,
  .compact-cover-vellum {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transform: none !important;
  }


  .book-preorder {
    width: 100%;

    margin-top: 5px;
  }


  .book-preorder > p {
    max-width: 260px;
  }


  .order-button {
    width: 220px;

    max-width: 100%;
  }


  .order-link {
    margin: 0;

    padding: 8px 0;

    font-size: 27px;
  }


  .overlay-panel {
    padding:
      58px 20px 24px;

    place-items:
      start center;
  }


  .reading-sheet,
  .preorder__content {
    max-height:
      calc(100svh - 82px);
  }


  .reading-sheet__intro {
    margin-bottom: 40px;

    font-size: 23px;
  }


  .about-grid section {
    margin-bottom: 38px;
  }


  .about-grid p {
    font-size: 18px;
  }

}


@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}