/* One rigid folio, with two sides of the same hinged cover. The photograph is
   cropped to its centre as a material, never layered as a second whole book. */
.opening { height: 300svh; }
.folio-rig {
  position: absolute;
  inset: 0;
  perspective: 1900px;
  perspective-origin: 50% 46%;
  z-index: 2;
  pointer-events: none;
}
.folio-book {
  position: absolute;
  left: var(--book-x, 53vw);
  top: var(--book-y, 56svh);
  width: var(--book-width, min(40vw, 57svh));
  aspect-ratio: 3 / 4;
  transform: translateY(-50%) rotateZ(-16deg) rotateY(-35deg) rotateX(29deg);
  transform-style: preserve-3d;
  will-change: transform;
  --leather: url('../assets/images/closed-folio.webp');
  --paper-depth: clamp(22px, 2.9vw, 42px);
  --paper-inset: 9px;
  --cover-half-depth: 3px;
}
.folio-backboard, .folio-cover-side {
  position: absolute;
  inset: 0;
  border-radius: 16px 24px 24px 16px;
  background-color: #ad5428;
  background-image: var(--leather);
  background-size: 205% auto;
  background-position: 52% 49%;
  border: 1px solid #874622;
}
.folio-backboard {
  box-shadow: inset 0 1px 1px #ffd2a557, 0 2px 0 #9b613c, 0 4px 0 #653b27,
    3px 7px 10px #3e261525, 14px 22px 35px #4226082b;
  transform: translateZ(calc(-4px - var(--paper-depth)));
}
.folio-paper-block {
  position: absolute;
  inset: var(--paper-inset);
  transform: translateZ(-3px);
  transform-style: preserve-3d;
  border-radius: 2px 9px 9px 2px;
  background: #f3e5ce;
  box-shadow: inset 0 0 0 1px #c9ad87;
}
.folio-paper-block::before,
.folio-paper-block::after {
  content: '';
  position: absolute;
  background-color: #e9d9bc;
  border: 1px solid #bca481;
}
.folio-paper-block::before {
  inset: 0 auto 0 100%;
  width: var(--paper-depth);
  transform-origin: left center;
  transform: rotateY(90deg);
  background-image: linear-gradient(90deg, #49281852, transparent 24%, #fff7e67a 58%, #87623d36),
    repeating-linear-gradient(90deg, #c7af8c 0 1px, #f4e7cf 1px 3px, #e1cba8 3px 4px);
}
.folio-paper-block::after {
  inset: 100% 0 auto;
  height: var(--paper-depth);
  transform-origin: center top;
  transform: rotateX(-90deg);
  background-image: linear-gradient(#52301e66, transparent 36%, #fff3db42 68%, #8d613c55),
    repeating-linear-gradient(#c5ad89 0 1px, #f1dfc0 1px 3px, #dec5a2 3px 4px);
}
.folio-spine {
  position: absolute;
  inset: 3px 100% 3px auto;
  width: calc(var(--paper-depth) + 9px);
  transform-origin: right center;
  transform: translateZ(5px) rotateY(-90deg);
  border: 1px solid #754324;
  border-radius: 9px 12px 12px 9px;
  background: linear-gradient(90deg, #512f1bc7, #6c381539 44%, #dfa3755e 77%, #6f3c2199),
    var(--leather) 52% 49% / 700% auto;
}
.folio-backboard::after, .folio-cover-side::after {
  content: '';
  position: absolute;
  inset: 11px;
  border: 1.25px dashed #dfc39a;
  border-radius: 9px 17px 17px 9px;
  box-shadow: 0 1px 1px #57321b70, inset 0 1px 1px #f7ce9e32, 0 0 0 3px #6d371012;
  pointer-events: none;
}
.folio-backboard::before {
  content: '';
  position: absolute;
  right: -13px;
  top: 48%;
  width: 20px;
  height: 45px;
  border: 1px solid #c3af8e;
  border-radius: 0 7px 7px 0;
  background: repeating-linear-gradient(90deg, #e8d9bd 0 1px, #d7c5a4 1px 2px);
}
.folio-page {
  position: absolute;
  inset: 26px 25px 26px 23px;
  overflow: hidden;
  background: #fff8e9;
  background-image: radial-gradient(ellipse at 72% 29%, #fffdf1 0%, transparent 70%),
    repeating-linear-gradient(0deg, #d9cbb412 0 1px, transparent 1px 4px);
  border: 1px solid #d5c4a7;
  border-radius: 2px 6px 6px 2px;
  color: var(--ink);
}
.folio-right-page {
  transform: translateZ(-2px);
  box-shadow: -4px 0 0 #dbcbb0, -7px 0 0 #f9edda, 0 4px 3px #41230933, inset 12px 0 20px #6c422719;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 8%;
  text-align: center;
  pointer-events: auto;
}
.folio-right-page::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #55321585, #66401d3d 55%, transparent);
  transform: scaleX(var(--folio-shadow-width, 0));
  transform-origin: left center;
  opacity: var(--folio-shadow-opacity, 0);
  pointer-events: none;
}
.folio-right-page > p { font-size: clamp(13px, 1.1vw, 17px); max-width: 25ch; line-height: 1.5; }
.folio-right-page h2 { font-size: clamp(38px, 4.3vw, 67px); line-height: 1.08; font-weight: 500; margin: 22px 0 28px; }
.folio-right-page > a { font-size: clamp(21px, 2.1vw, 32px); color: var(--ink); line-height: 1.15; }
.folio-right-page > a:hover { color: var(--orange); }
.folio-right-page > .folio-catalogue-link { display: none; }
.folio-right-page svg { position: absolute; width: 45px; height: 45px; top: 8%; right: 12%; color: var(--orange); transform: rotate(-10deg); }
.folio-hinge {
  position: absolute;
  inset: 0;
  transform-origin: 0 50%;
  transform: translateZ(5px) rotateY(var(--cover-angle, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
}
.folio-hinge::before,
.folio-hinge::after {
  content: '';
  position: absolute;
  border-radius: 2px;
  background: linear-gradient(var(--edge-light-angle), #542c19, #8c4b29 38%, #c48855 72%, #643820);
  pointer-events: none;
}
.folio-hinge::before {
  inset: 0 24px auto 16px;
  height: calc(var(--cover-half-depth) * 2);
  transform: translateZ(calc(-1 * var(--cover-half-depth))) rotateX(90deg);
  transform-origin: top center;
  --edge-light-angle: 180deg;
}
.folio-hinge::after {
  inset: 24px auto 24px 100%;
  width: calc(var(--cover-half-depth) * 2);
  transform: translateZ(calc(-1 * var(--cover-half-depth))) rotateY(-90deg);
  transform-origin: left center;
  --edge-light-angle: 90deg;
}
.folio-cover-side { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.folio-cover-outside {
  transform: translateZ(var(--cover-half-depth));
  background-image: linear-gradient(153deg, #ffdcad2d, transparent 48%, #46251129), var(--leather);
  background-size: 100% 100%, 205% auto;
  box-shadow: inset 9px 0 11px #5a2e2930, inset 0 1px 2px #ffd6b074, inset -1px -2px 3px #5d2f224a;
}
.folio-cover-outside::before {
  content: '';
  position: absolute;
  inset: 2px auto 2px 3px;
  width: 15px;
  border-radius: 12px 0 0 12px;
  border-left: 1px solid #f0bf8d4d;
  box-shadow: 2px 0 4px #5b2c191a, inset 4px 0 4px #51281524;
  pointer-events: none;
}
.folio-cover-inside {
  transform: rotateY(180deg) translateZ(var(--cover-half-depth));
  box-shadow: inset -12px 0 20px #5c2b2428, inset 0 1px 2px #ffd6b066, 0 3px 5px #7543254d;
}
.folio-cover-inside > .folio-page {
  inset: 26px 23px 26px 25px;
  box-shadow: inset -16px 0 24px #6c422727, 2px 2px 3px #62371645;
}
.folio-cover-button {
  position: absolute;
  inset: 0;
  border: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  padding: 0;
  text-align: left;
  pointer-events: auto;
}
.folio-cover-label {
  position: absolute;
  top: 28%;
  left: 15%;
  right: 15%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 0 0 0 5px var(--paper), 1px 5px 8px #4325111c;
  border-radius: 9px;
  transform: rotate(-2deg);
  font-family: var(--title);
  font-weight: 450;
  overflow: hidden;
}
.folio-cover-label > small { display: block; font-size: clamp(16px, 1.4vw, 22px); padding: 17px 20px 0; }
.folio-cover-label > strong { display: block; font-family: Caveat,cursive; font-size: clamp(45px, 4.6vw, 76px); font-weight: 500; line-height: 1.25; padding: 0 20px 18px; }
.folio-label-bottom { display: flex; border-top: 1.5px solid var(--ink); }
.folio-label-bottom > span { width: 50%; padding: 11px 15px; font-size: clamp(12px, 1vw, 16px); line-height: 1.35; }
.folio-label-bottom > span + span { border-left: 1.5px solid var(--ink); }
.folio-left-page .folio-left-note { position: absolute; top: 11%; left: 7%; right: 7%; text-align: center; font-size: clamp(23px, 2.4vw, 36px); transform: rotate(-4deg); }
.folio-pick { position: absolute; padding: 0; border: 0; pointer-events: auto; }
.folio-pick img { width: 100%; height: 100%; object-fit: contain; transition: transform .25s; }
.folio-pick:hover img { transform: translateY(-5px) rotate(3deg); }
.folio-pick-bag { left: 0; top: 31%; width: 76%; height: 48%; transform: rotate(-7deg); }
.folio-pick-case { right: 1%; top: 35%; width: 37%; height: 29%; transform: rotate(9deg); }
.folio-pick-wallet { right: 7%; bottom: 10%; width: 37%; height: 24%; transform: rotate(7deg); }
.folio-rig[data-ready='false'] .folio-right-page,
.folio-rig[data-ready='false'] .folio-left-page { pointer-events: none; }
.folio-page-content { opacity: var(--page-copy, 0); }
@media (max-width: 760px) {
  .opening { height: 285svh; }
  .folio-rig { perspective: 1300px; perspective-origin: 50% 50%; }
  .folio-book { --paper-inset: 6px; }
  .folio-page { inset: 17px 15px 17px 17px; }
  .folio-cover-inside > .folio-page { inset: 17px 17px 17px 15px; }
  .folio-backboard, .folio-cover-side { border-radius: 10px 17px 17px 10px; }
  .folio-hinge::before { inset-inline: 10px 17px; }
  .folio-hinge::after { inset-block: 17px; }
  .folio-backboard::after, .folio-cover-side::after { inset: 7px; border-width: 1px; border-radius: 6px 12px 12px 6px; }
  .folio-cover-label { left: 14%; right: 14%; }
  .folio-cover-label > small { font-size: 15px; padding: 10px 13px 0; }
  .folio-cover-label > strong { font-size: 45px; padding: 0 13px 12px; }
  .folio-label-bottom > span { padding: 8px 10px; font-size: 11px; }
  .folio-right-page { padding: 25px 9%; }
  .folio-right-page > p { font-size: 13px; }
  .folio-right-page h2 { font-size: clamp(36px, 10vw, 45px); line-height: 1.1; margin: 21px 0 25px; }
  .folio-right-page > a { font-size: 23px; }
  .folio-right-page svg { width: 30px; height: 30px; top: 5%; right: 8%; }
  .folio-left-page .folio-left-note, .folio-pick { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .opening { height: 125svh; }
  .folio-book, .folio-hinge { will-change: auto; }
  .folio-right-page > .folio-catalogue-link {
    display: inline-block;
    margin-top: 12px;
    font: 500 14px/1.3 var(--body, Arial, sans-serif);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}