/* =========================================================
   THE UNEXPECTED GUIDE
   ========================================================= */

:root {

  --forest: #26372a;
  --forest-dark: #18251b;

  --moss: #4c5b3d;
  --olive: #737752;

  --leather: #60432d;
  --leather-dark: #342419;
  --leather-light: #806044;

  --paper: #d8c99f;
  --paper-light: #e8dcba;
  --paper-shadow: #b5a477;

  --ink: #29271d;
  --ink-soft: #5c5540;

}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
}


body {

  margin: 0;

  min-height: 100vh;

  background:

    radial-gradient(
      ellipse at center,
      #354936 0%,
      var(--forest) 65%,
      var(--forest-dark) 100%
    );

  color: var(--ink);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

}


/* =========================================================
   SITE
   ========================================================= */

.site {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 50px 30px;

}


/* =========================================================
   CLOSED BOOK
   ========================================================= */

.book {

  position: relative;

  width: min(500px, 85vw);

  height: min(690px, 78vh);

  display: flex;

  justify-content: center;

  align-items: center;

  perspective: 1800px;

}


/* =========================================================
   COVER
   ========================================================= */

.cover {

  position: relative;

  width: 100%;

  height: 100%;

  padding: 20px;

  border-radius: 8px 12px 12px 8px;

  background:

    linear-gradient(
      105deg,
      var(--leather-dark),
      var(--leather),
      #684a31,
      var(--leather-dark)
    );

  box-shadow:

    10px 15px 30px rgba(0,0,0,.55),

    inset 4px 0 8px rgba(255,255,255,.07),

    inset -5px 0 10px rgba(0,0,0,.35);

  transform-origin: left center;

  transition:

    transform 1s cubic-bezier(.65,.05,.36,1),

    opacity .5s;

}


/* leather texture */

.cover::before {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  opacity: .18;

  background:

    repeating-linear-gradient(
      100deg,
      transparent 0px,
      transparent 5px,
      rgba(255,255,255,.04) 6px
    );

}


/* cover edge */

.cover::after {

  content: "";

  position: absolute;

  top: 8px;
  bottom: 8px;

  right: -7px;

  width: 8px;

  background: #3a281c;

  border-radius: 0 4px 4px 0;

}


/* =========================================================
   COVER BORDER
   ========================================================= */

.cover-border {

  position: absolute;

  inset: 25px;

  border: 2px solid rgba(185,157,106,.65);

  box-shadow:

    inset 0 0 0 5px rgba(40,27,17,.25),

    inset 0 0 25px rgba(0,0,0,.2);

}


/* second decorative border */

.cover-border::before {

  content: "";

  position: absolute;

  inset: 9px;

  border: 1px solid rgba(190,164,111,.35);

}


/* =========================================================
   COVER TEXT
   ========================================================= */

.cover-center {

  position: absolute;

  inset: 100px 45px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  color: #d8c9a2;

  text-shadow:
    2px 2px 2px rgba(0,0,0,.65);

}


.small-title {

  font-family:
    "Grenze Gotisch",
    serif;

  font-size: 1.1rem;

  letter-spacing: 8px;

}


.cover-center h1 {

  margin: 15px 0;

  font-family:
    "Grenze Gotisch",
    serif;

  font-size: clamp(3rem, 7vw, 4.5rem);

  line-height: .9;

  font-weight: 500;

  letter-spacing: 2px;

}


.cover-line {

  width: 140px;

  height: 1px;

  margin: 15px 0;

  background: #b8a06c;

}


.cover-center p {

  margin: 5px;

  font-size: 1.2rem;

  letter-spacing: 3px;

}


.cover-center .middle-earth {

  font-size: .75rem;

  letter-spacing: 5px;

  color: #aaa27d;

}


/* =========================================================
   COVER SYMBOL
   ========================================================= */

.cover-symbol {

  position: absolute;

  left: 50%;

  bottom: 85px;

  transform: translateX(-50%);

  width: 65px;

  height: 65px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #b49a68;

  border-radius: 50%;

  color: #c5ae7d;

  font-size: 1.7rem;

}


/* =========================================================
   ORNAMENTS
   ========================================================= */

.cover-ornament {

  position: absolute;

  color: #b49a68;

  font-size: 2rem;

}


.cover-ornament.top {

  top: 35px;

  left: 50%;

  transform: translateX(-50%);

}


.cover-ornament.bottom {

  bottom: 30px;

  left: 50%;

  transform: translateX(-50%) rotate(180deg);

}


.cover-author {

  position: absolute;

  bottom: 38px;

  left: 50%;

  transform: translateX(-50%);

  color: #b8a16d;

  font-size: .7rem;

  letter-spacing: 5px;

}


/* =========================================================
   OPEN BUTTON
   ========================================================= */

.open-book {

  position: absolute;

  bottom: -45px;

  left: 50%;

  transform: translateX(-50%);

  padding: 9px 20px;

  border: 1px solid #8c7952;

  background: var(--leather-dark);

  color: #d8c9a2;

  font-family:
    "Cormorant Garamond",
    serif;

  letter-spacing: 2px;

  cursor: pointer;

  box-shadow: 0 5px 10px rgba(0,0,0,.35);

  transition: .2s;

}


.open-book:hover {

  background: var(--moss);

  transform:
    translateX(-50%)
    translateY(-3px);

}


/* =========================================================
   OPENING ANIMATION
   ========================================================= */

.book.opening .cover {

  transform:
    perspective(1800px)
    rotateY(-100deg);

  opacity: 0;

}


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

.open-book-container {

  display: none;

  width: min(1100px, 92vw);

}


.open-book-container.visible {

  display: block;

  animation: appear .7s ease;

}


@keyframes appear {

  from {

    opacity: 0;

    transform: scale(.96);

  }

  to {

    opacity: 1;

    transform: scale(1);

  }

}


/* =========================================================
   OPEN PAGES
   ========================================================= */

.book-pages {

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  min-height: 680px;

  padding: 18px;

  background:

    linear-gradient(
      90deg,
      var(--leather-dark),
      var(--leather),
      var(--leather-dark)
    );

  border-radius: 8px;

  box-shadow:
    0 25px 60px rgba(0,0,0,.55),
    inset 0 0 0 2px var(--leather-light);

}


/* =========================================================
   PAGES
   ========================================================= */

.page {

  position: relative;

  padding: 65px;

  background:

    radial-gradient(
      circle at 20% 15%,
      rgba(255,255,255,.3),
      transparent 30%
    ),

    radial-gradient(
      circle at 80% 90%,
      rgba(80,60,30,.12),
      transparent 35%
    ),

    var(--paper);

  box-shadow:
    inset 0 0 30px rgba(70,50,25,.2);

}


.page::after {

  content: "";

  position: absolute;

  inset: 15px;

  border: 1px solid rgba(65,52,30,.35);

  pointer-events: none;

}


.page-left {

  border-radius: 3px 0 0 3px;

}


.page-right {

  border-radius: 0 3px 3px 0;

}


/* =========================================================
   SPINE
   ========================================================= */

.book-pages::before {

  content: "";

  position: absolute;

  top: 18px;
  bottom: 18px;

  left: 50%;

  width: 24px;

  transform: translateX(-50%);

  z-index: 5;

  background:

    linear-gradient(
      90deg,
      rgba(0,0,0,.45),
      rgba(255,255,255,.12),
      rgba(0,0,0,.45)
    );

}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.page > * {

  position: relative;

  z-index: 2;

}


.page-decoration {

  text-align: center;

  font-size: 1.8rem;

  color: var(--moss);

  margin-bottom: 20px;

}


.page h2 {

  margin: 0 0 25px;

  text-align: center;

  font-family:
    "Grenze Gotisch",
    serif;

  font-size: 2.6rem;

  line-height: 1;

  font-weight: 500;

  color: var(--forest);

}


.page p {

  font-size: 1.15rem;

  line-height: 1.65;

  margin-bottom: 20px;

}


.intro {

  text-align: center;

  font-style: italic;

  color: var(--ink-soft);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.navigation {

  margin-top: 30px;

}


.navigation a {

  display: grid;

  grid-template-columns: 25px 1fr 30px;

  align-items: center;

  padding: 14px 10px;

  border-top: 1px solid rgba(70,70,40,.3);

  color: var(--forest);

  text-decoration: none;

  font-size: 1.2rem;

  transition: .2s;

}


.navigation a:last-child {

  border-bottom: 1px solid rgba(70,70,40,.3);

}


.navigation a:hover {

  background: rgba(70,80,50,.12);

  padding-left: 18px;

}


.navigation span {

  color: var(--moss);

}


.navigation small {

  text-align: right;

  color: var(--ink-soft);

}


/* =========================================================
   QUOTE
   ========================================================= */

.quote {

  margin: 30px 15px;

  padding: 20px;

  text-align: center;

  font-style: italic;

  color: var(--ink-soft);

  border-top: 1px solid var(--olive);

  border-bottom: 1px solid var(--olive);

}


.page-divider {

  text-align: center;

  color: var(--moss);

  margin: 25px;

}


/* =========================================================
   PAGE NUMBERS
   ========================================================= */

.page-number {

  position: absolute;

  bottom: 25px;

  color: var(--ink-soft);

}


.page-left .page-number {

  left: 45px;

}


.page-right .page-number {

  right: 45px;

}


/* =========================================================
   TABS
   ========================================================= */

.book-tabs {

  position: absolute;

  right: -52px;

  top: 80px;

  display: flex;

  flex-direction: column;

  gap: 8px;

  z-index: 20;

}


.book-tabs a {

  width: 50px;

  min-height: 110px;

  display: flex;

  align-items: center;

  justify-content: center;

  writing-mode: vertical-rl;

  background: var(--leather);

  color: var(--paper-light);

  text-decoration: none;

  font-family:
    "Grenze Gotisch",
    serif;

  letter-spacing: 1px;

  border-radius: 0 5px 5px 0;

  transition: .2s;

}


.book-tabs a:hover {

  background: var(--moss);

  transform: translateX(5px);

}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.close-book {

  display: block;

  margin: 18px auto;

  padding: 8px 18px;

  background: transparent;

  border: 1px solid #758060;

  color: #c3c8a5;

  cursor: pointer;

  font-family:
    "Cormorant Garamond",
    serif;

}


.close-book:hover {

  background: var(--moss);

}


/* =========================================================
   FOOTER
   ========================================================= */

footer {

  margin-top: 30px;

  color: #9ea98c;

  font-size: .9rem;

  text-align: center;

}


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

@media (max-width: 800px) {

  .site {

    padding: 35px 15px;

  }

  .book {

    height: 600px;

  }

  .book-pages {

    grid-template-columns: 1fr;

  }

  .page {

    padding: 45px 35px;

  }

  .page-right {

    display: none;

  }

  .book-pages::before {

    display: none;

  }

  .book-tabs {

    display: none;

  }

}