@font-face {
  font-family: "Explora";
  src: url("./assets/explora-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.home {
  --script-font: "Explora", "Segoe Script", "Brush Script MT", cursive;
  --folio-ivory: #fcf5e8;
  --folio-sheet: linear-gradient(#fffaf0cf, #fffaf0bf), url("./assets/stationery.webp");
}

.book-desk {
  position: relative;
  isolation: isolate;
  margin-block: 20px 30px;
  min-height: 580px;
  padding: 33px clamp(40px, 6vw, 82px) 139px;
  border: 1px solid #a9927859;
  background-color: #f5efe2;
  background-image:
    radial-gradient(ellipse at 18% 8%, #fffdf4c9, transparent 65%),
    linear-gradient(122deg, #faf8ef91, #f5eadab0),
    url("./assets/stationery.webp");
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 24px #49352a12, inset 0 0 55px #866e5422;
}
.book-desk::before, .book-desk::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  content: "";
}
.book-desk::before { inset: 11px; border: 1px solid #a38e753d; }
.book-desk::after {
  inset: auto 0 -2px;
  height: 14px;
  background:
    radial-gradient(circle at 50% 5px, #d7c8b368 1.1px, transparent 1.8px) 0 4px / 17px 10px repeat-x,
    radial-gradient(ellipse at 50% 0, #fffaf0 9px, transparent 9.8px) 0 2px / 17px 12px repeat-x;
}
.desk-heading {
  position: relative;
  z-index: 2;
  width: fit-content;
}
.desk-heading h1 {
  color: #4a3a30;
  font: 830 clamp(35px, 4.8vw, 59px)/1.12 var(--serif);
  letter-spacing: -.05em;
}
.desk-title-en {
  display: block;
  margin: 1px 0 0 3px;
  color: #785647;
  font: 400 clamp(40px, 5.1vw, 64px)/.85 var(--script-font);
  letter-spacing: 0;
}
.desk-guide {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 11px;
  color: #6c574a;
  margin-top: 10px;
  font-size: .85rem;
  letter-spacing: .08em;
}
.desk-guide-en {
  color: #785647;
  font: 400 clamp(22px, 2.6vw, 32px)/.9 var(--script-font);
  letter-spacing: .01em;
}
.desk-flourish {
  display: flex;
  gap: 9px;
  align-items: center;
  width: fit-content;
  margin: 0 0 7px 1px;
  color: #8e665d;
  font: 1.2rem/1 Georgia, serif;
}
.desk-flourish::before, .desk-flourish::after {
  content: "";
  width: 27px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #a08775);
}
.desk-flourish::after { transform: rotate(180deg); }

.desk-objects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.desk-writing {
  position: absolute;
  bottom: 14px;
  left: clamp(25px, 5.5vw, 74px);
  width: clamp(238px, 28vw, 315px);
  height: 124px;
}
.draft-sheet {
  position: absolute;
  border: 1px solid #b69c723d;
  border-radius: 1px 2px 2px 1px;
  background-color: #f8efdc;
  box-shadow: 1px 2px 3px #5f43362c, 3px 5px 10px #5135281b;
}
.draft-sheet-under {
  inset: 30px 54px 11px 8px;
  background-image: linear-gradient(135deg, #fffaf0b0, #dbcaad6b);
  transform: rotate(-9deg) skewX(-8deg);
}
.draft-sheet-top {
  inset: 27px 44px 12px 15px;
  background-image:
    linear-gradient(90deg, transparent 15%, #ba796f30 15%, #ba796f30 calc(15% + 1px), transparent calc(15% + 1px)),
    repeating-linear-gradient(0deg, transparent 0 11px, #9e8a743b 12px 13px),
    linear-gradient(135deg, #fffaf2 4%, #f1e4ca);
  transform: rotate(-3deg) skewX(-8deg);
}
.draft-sheet-top::after {
  content: "";
  position: absolute;
  top: 24%;
  left: 21%;
  width: 57%;
  height: 23%;
  opacity: .57;
  background:
    linear-gradient(96deg, #80675475 0 11%, transparent 11% 14%, #80675465 14% 31%, transparent 31% 34%, #8067546b 34% 52%, transparent 52% 57%, #8067545c 57% 84%, transparent 84%) 0 3px / 100% 2px no-repeat,
    linear-gradient(96deg, #80675466 0 17%, transparent 17% 21%, #80675461 21% 48%, transparent 48% 51%, #80675455 51% 67%, transparent 67%) 0 15px / 100% 2px no-repeat;
  transform: rotate(-.8deg);
}
.desk-object {
  position: absolute;
  width: var(--prop-size);
  aspect-ratio: 1;
  transform: rotate(var(--prop-tilt, 0deg));
  isolation: isolate;
}
.desk-object::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("./assets/rococo-desk-props.webp") var(--prop-position) / 300% 200% no-repeat;
  filter: saturate(.83) drop-shadow(2px 3px 2px #52392845);
}
.desk-ink::before, .desk-candle::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 16% 8% 29%;
  height: 13%;
  border-radius: 50%;
  background: #53382d42;
  filter: blur(5px);
  transform: translate(6%, 2px) skewX(-14deg);
}
.desk-ink {
  --prop-size: clamp(75px, 8.5vw, 103px);
  --prop-position: center top;
  right: 0;
  bottom: 12px;
}
.desk-candle {
  --prop-size: clamp(78px, 10.3vw, 128px);
  --prop-position: center bottom;
  top: 17px;
  right: 8.5%;
}
.desk-pen {
  --prop-size: clamp(126px, 14vw, 170px);
  --prop-position: left top;
  --prop-tilt: 61deg;
  bottom: -33px;
  left: 16%;
}
.desk-bow {
  --prop-size: clamp(73px, 9vw, 112px);
  --prop-position: right top;
  --prop-tilt: -17deg;
  bottom: 18px;
  left: 56%;
}
.desk-key {
  --prop-size: clamp(84px, 10.5vw, 126px);
  --prop-position: left bottom;
  --prop-tilt: 52deg;
  bottom: 7px;
  right: 9%;
}

.book-collection {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  justify-items: center;
  gap: clamp(14px, 3.4vw, 40px);
  position: relative;
  z-index: 1;
  margin-top: 39px;
  perspective: 1250px;
  perspective-origin: 50% 12%;
}
.desk-book, .opening-book {
  --cover-color: #d8bcb6;
  --cover-position: left top;
}
.desk-book {
  --tilt: 0deg;
  --drop: 0px;
  position: relative;
  isolation: isolate;
  display: block;
  width: min(100%, 211px);
  aspect-ratio: 3 / 4;
  min-width: 0;
  border-radius: 5px 10px 10px 5px;
  color: #49382e;
  text-decoration: none;
  transform: translateY(var(--drop)) rotate(var(--tilt)) rotateX(9deg);
  transition: transform .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.desk-book:hover, .desk-book:focus-visible {
  z-index: 2;
  transform: translateY(calc(var(--drop) - 7px)) rotate(calc(var(--tilt) * .65)) rotateX(5deg);
}
.desk-book:focus-visible { outline-offset: 9px; }
.desk-book.book-in-transition { visibility: hidden; }
.book-english { --tilt: -9deg; --drop: 14px; }
.book-media {
  --cover-color: #aab8a3;
  --cover-position: right top;
  --tilt: 7deg;
  --drop: -14px;
}
.book-maps {
  --cover-color: #a5b7c6;
  --cover-position: left bottom;
  --tilt: -6deg;
  --drop: 26px;
}
.book-profile {
  --cover-color: #dbcaac;
  --cover-position: right bottom;
  --tilt: 9deg;
  --drop: 1px;
}
.book-pages, .book-marker, .book-front {
  position: absolute;
}
.book-pages {
  inset: 6px -9px -8px 5px;
  border-radius: 4px 8px 8px 4px;
  border: solid color-mix(in srgb, var(--cover-color), #584332 31%);
  border-width: 1px 2px 3px 1px;
  background:
    linear-gradient(90deg, #a38a6a34 25%, transparent),
    repeating-linear-gradient(0deg, #eee4ce 0 2px, #d8cbb1 2px 3px, #fff7e4 3px 4px);
  box-shadow: 4px 10px 12px #58402d3e, 1px 2px 4px #4e372b48;
}
.book-marker {
  right: 21%;
  bottom: -17px;
  width: 11px;
  height: 27px;
  background: color-mix(in srgb, var(--cover-color), #7b5d4d 21%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 83%, 0 100%);
  transform: rotate(-5deg);
}
.book-front, .opening-front {
  border: 1px solid color-mix(in srgb, var(--cover-color), #856852 35%);
  border-radius: 4px 9px 9px 4px;
  background-color: var(--cover-color);
  background-image: url("./assets/rococo-book-covers.webp");
  background-position: var(--cover-position);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  box-shadow: inset 2px 0 5px #513a2b38, inset -1px 0 0 #f7ead7a6, 1px 2px 2px #5d433e26;
}
.book-front { inset: 0; }
.book-front::before, .opening-front::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9.5%;
  border-radius: 3px 0 0 3px;
  border-right: 1px solid #795c4b67;
  background:
    repeating-linear-gradient(3deg, #f4e9d032 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #5c443134, #f8ebd25c 29%, #94796046 72%, #442c2831);
  box-shadow: inset 1px 0 #fff3d286, 1px 0 1px #f6ebd86e;
}
.book-name, .opening-front .opening-name {
  position: absolute;
  inset: 44% 13% auto 15%;
  transform: translateY(-50%);
  text-align: center;
}
.book-title, .opening-front .opening-title {
  display: block;
  margin: 0;
  color: #4e3b33;
  white-space: nowrap;
  font: 800 clamp(15px, 1.69vw, 22px)/1.2 var(--serif);
  letter-spacing: -.02em;
  text-shadow: 0 1px #fff9e9bf;
}
.book-title-en, .opening-title-en {
  display: block;
  margin: 3px 0 0;
  color: #785647;
  font: 400 clamp(19px, 2.3vw, 28px)/.88 var(--script-font);
  text-wrap: balance;
}
.opening-name { text-align: center; }
.opening-title-en:empty { display: none; }

#book-transition {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  perspective: 1250px;
}
#book-transition[open] { display: grid; place-items: center; }
#book-transition::backdrop { background: #53423487; backdrop-filter: blur(3px); }
.opening-book {
  position: relative;
  width: min(42vw, 53dvh, 315px);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
}
.opening-pages, .opening-cover, .opening-front, .opening-inside {
  position: absolute;
  inset: 0;
}
.opening-pages, .opening-inside {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  border: 1px solid #b49c7f;
  border-radius: 4px 9px 9px 4px;
  background-color: var(--folio-ivory);
  background-image: linear-gradient(90deg, #a181564d, transparent 13%), var(--folio-sheet);
  background-size: 100% 100%, 100% 100%, cover;
  background-position: center;
  box-shadow: inset -5px 0 #b6a17e57, 0 10px 28px #462e2659;
  color: #644b3b;
}
.opening-pages::before, .opening-inside::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid #bba78a91;
  outline: 1px solid #eee1c6;
  outline-offset: -4px;
  border-radius: 3px;
}
.opening-pages .opening-title { font: 780 clamp(18px, 3vw, 30px)/1.3 var(--serif); }
.opening-ornament { color: #976e5e; font: 1.4rem/1 Georgia, serif; }
.opening-cover {
  z-index: 1;
  transform-origin: left center;
  transform-style: preserve-3d;
}
.opening-front, .opening-inside { backface-visibility: hidden; }
.opening-front .opening-title { font-size: clamp(15px, 2.6vw, 30px); }
.opening-title-en { font-size: clamp(21px, 3.3vw, 38px); }
.opening-inside { transform: rotateY(180deg); background-image: linear-gradient(270deg, #a181564d, transparent 15%), var(--folio-sheet); }
@media (orientation: portrait) {
  .opening-book { width: min(68vw, 51dvh, 350px); }
}

@media (max-width: 930px) {
  .book-desk { min-height: 510px; padding-inline: 33px; padding-bottom: 139px; }
  .book-collection { gap: clamp(12px, 3vw, 28px); margin-top: 39px; }
  .desk-candle { right: 6%; }
}
@media (max-width: 680px) {
  .book-desk { margin-top: 13px; padding: 24px 22px 122px; }
  .desk-heading h1 { font-size: clamp(31px, 6.7vw, 44px); }
  .desk-title-en { font-size: clamp(36px, 8.5vw, 51px); }
  .desk-guide { display: block; font-size: .74rem; margin-top: 8px; }
  .desk-guide-en { display: block; margin-top: 1px; font-size: clamp(22px, 5.9vw, 28px); }
  .book-collection {
    max-width: 400px;
    margin: 32px auto 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 35px 29px;
  }
  .desk-book { width: min(100% - 9px, 164px); }
  .book-title { font-size: clamp(13px, 3.25vw, 18px); }
  .book-title-en { font-size: clamp(16px, 4.45vw, 24px); }
  .book-english { --tilt: -8deg; --drop: 0px; }
  .book-media { --tilt: 7deg; --drop: -11px; }
  .book-maps { --tilt: -5deg; --drop: 4px; }
  .book-profile { --tilt: 8deg; --drop: -4px; }
  .desk-writing { left: 13px; bottom: 11px; width: min(66%, 240px); height: 103px; }
  .draft-sheet-under { inset: 28px 39px 10px 6px; }
  .draft-sheet-top { inset: 24px 33px 11px 11px; }
  .desk-ink { --prop-size: clamp(57px, 12vw, 75px); bottom: 15px; }
  .desk-candle { --prop-size: 72px; top: 9px; right: 5px; }
  .desk-pen { --prop-size: clamp(99px, 18vw, 123px); bottom: -16px; left: 12%; }
  .desk-bow { --prop-size: 71px; bottom: 44px; left: auto; right: 6%; }
  .desk-key { --prop-size: 79px; bottom: 1px; right: 4%; }
}
@media (max-width: 380px) {
  .book-desk { padding-inline: 17px; }
  .book-collection { column-gap: 19px; }
  .desk-heading h1 { font-size: 29px; }
  .book-pages { inset-inline-end: -6px; }
  .desk-candle { --prop-size: 60px; top: 14px; right: 3px; }
  .desk-writing { left: 10px; }
  .desk-bow { --prop-size: 63px; }
  .desk-key { --prop-size: 72px; }
}