html,
body {
  margin: 0;
  height: 100%;
  background: #050407;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

x-dc {
  display: none;
}

a {
  color: #7fb3ac;
  text-decoration: none;
}

a:hover {
  color: #a6cfc8;
}

button {
  font-family: inherit;
}

@keyframes ssGrain {
  0% {
    transform: translate(0,0);
  }
  20% {
    transform: translate(-3%,2%);
  }
  40% {
    transform: translate(2%,-3%);
  }
  60% {
    transform: translate(-2%,-1%);
  }
  80% {
    transform: translate(3%,3%);
  }
  100% {
    transform: translate(0,0);
  }
}

@keyframes ssRays {
  0%,100% {
    opacity: .7;
    transform: translateX(0) skewX(-6deg);
  }
  50% {
    opacity: 1;
    transform: translateX(2%) skewX(-4deg);
  }
}

@keyframes ssPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(95,156,150,.6);
  }
  100% {
    box-shadow: 0 0 0 16px rgba(95,156,150,0);
  }
}

@keyframes ssRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ssDot {
  0%,80%,100% {
    opacity: .25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes ssFlipF {
  from {
    transform: translateZ(3px) rotateY(0deg);
  }
  to {
    transform: translateZ(3px) rotateY(-180deg);
  }
}

@keyframes ssFlipB {
  from {
    transform: translateZ(3px) rotateY(-180deg);
  }
  to {
    transform: translateZ(3px) rotateY(0deg);
  }
}

@keyframes ssShade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes ssFloat {
  0%,100% {
    transform: translate(0,0) rotate(0deg);
  }
  33% {
    transform: translate(.15cqw,-.45cqw) rotate(.5deg);
  }
  66% {
    transform: translate(-.1cqw,-.2cqw) rotate(-.35deg);
  }
}

@keyframes ssSheen {
  0%,55% {
    background-position: 120% 0;
  }
  85%,100% {
    background-position: -20% 0;
  }
}

@keyframes ssSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ssBookFloat {
  0%,100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-16px);
  }
}

@keyframes ssBookShadow {
  0%,100% {
    transform: translateX(-50%) scale(1);
    opacity: .85;
  }
  50% {
    transform: translateX(-50%) scale(.84);
    opacity: .5;
  }
}

@keyframes ssTapHint {
  0%,100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-16px);
  }
}

@keyframes ssBreath {
  0%,100% {
    opacity: .55;
  }
  50% {
    opacity: 1;
  }
}

/* Archive layout */

.archive-app {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #050407;
  color: #efe2c6;
  font-family: Montserrat,sans-serif;
}

/* Intro */

.intro-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050407;
}

.intro-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw,177.78vh);
  height: max(56.25vw,100vh);
  transform: translate(-50%,-50%);
}

.intro-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 38%, rgba(5,4,7,.4) 60%, rgba(5,4,7,.85));
  pointer-events: none;
}

.intro-story {
  position: absolute;
  inset: auto 24px 19%;
  max-width: 760px;
  margin: 0 auto;
  font: 400 clamp(25px,3vw,44px)/1.3 'EB Garamond',serif;
  color: #f4e7ce;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 20px #050407;
  opacity: var(--ss-opacity);
  transition: opacity .6s ease;
  pointer-events: none;
}

.intro-heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 55%;
  padding: 0 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  pointer-events: none;
  transition: opacity 1.6s,filter 1.6s;
  opacity: var(--ss-opacity);
  filter: var(--ss-filter);
}

.intro-title {
  margin: 0;
  font: 500 clamp(32px,6.4vw,104px)/1 'Playfair Display',serif;
  white-space: nowrap;
  background: linear-gradient(100deg,#9a7832 0%,#e9cd85 38%,#fff6dc 50%,#e9cd85 62%,#9a7832 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ssSheen 7s ease-in-out infinite;
  transition: letter-spacing 2.6s cubic-bezier(.2,.7,.2,1);
  letter-spacing: var(--ss-letter-spacing);
}

.intro-subtitle {
  font: 600 10px/1.6 Montserrat,sans-serif;
  letter-spacing: .3em;
  color: #cdb993;
  text-wrap: balance;
}

.intro-description {
  max-width: 540px;
  margin: 0;
  font: 400 clamp(18px,1.6vw,23px)/1.45 'EB Garamond',serif;
  color: #e1d3b9;
  text-wrap: pretty;
}

.intro-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  transition: opacity 1s;
  opacity: var(--ss-opacity);
  pointer-events: var(--ss-pointer-events);
}

.intro-enter:hover {
  background: rgba(63,122,118,.45);
}

.intro-enter {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: rgba(10,8,8,.5);
  border: 1px solid rgba(95,156,150,.75);
  border-radius: 2px;
  color: #d6ebe6;
  font: 600 11px/1 Montserrat,sans-serif;
  letter-spacing: .3em;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5f9c96;
  animation: ssPulse 2s infinite;
}

.intro-skip:hover {
  background: rgba(63,122,118,.35);
  color: #e6f1ee;
}

.intro-skip {
  position: absolute;
  right: 28px;
  bottom: 26px;
  padding: 10px 16px;
  background: rgba(10,8,8,.45);
  border: 1px solid rgba(95,156,150,.55);
  color: #a6cfc8;
  font: 600 10px/1 Montserrat,sans-serif;
  letter-spacing: .24em;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .intro-heading { top: 49%; gap: 14px; }
  .intro-subtitle { max-width: 300px; font-size: 9px; letter-spacing: .2em; }
  .intro-skip { right: 16px; bottom: 16px; }
}

@media (max-height: 600px) {
  .intro-scene { overflow-y: auto; }
  .intro-heading { top: 25%; gap: 12px; }
  .intro-title { font-size: clamp(30px,5vw,52px); }
  .intro-description { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .intro-story, .intro-heading, .intro-title, .intro-actions { transition: none; }
  .intro-title, .intro-enter .pulse-dot { animation: none; }
}

/* Study shelves */

.shelf-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0d0806;
  transition: transform 2s cubic-bezier(.65,0,.3,1),filter 2s ease;
  will-change: transform;
  transform: var(--ss-transform);
  filter: var(--ss-filter);
}

.shelf-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--ss-stage-scale));
}

.shelf-zoom {
  position: absolute;
  inset: 0;
  transform-origin: 960px 715px;
  transition: transform 1.7s cubic-bezier(.65,0,.25,1),opacity 1.2s ease .4s;
  will-change: transform,opacity;
  transform: var(--ss-transform);
  opacity: var(--ss-opacity);
}

.shelf-parallax {
  position: absolute;
  inset: -24px;
  will-change: transform;
}

.shelf-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 50% 30%,#2a1a10,#160d08 70%,#0b0604);
}

.shelf-panels {
  position: absolute;
  left: 78px;
  right: 78px;
  top: 0;
  height: 962px;
  background: repeating-linear-gradient(90deg,rgba(0,0,0,.26) 0 2px,transparent 2px 148px),linear-gradient(#24160d,#1a0f08 60%,#140b06);
  box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}

.shelf-portal-glow {
  position: absolute;
  left: 960px;
  top: 255px;
  width: 1100px;
  height: 1100px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,rgba(110,120,200,.24),rgba(122,74,94,.12) 34%,transparent 60%);
  pointer-events: none;
  mix-blend-mode: screen;
}

.shelf-portal-rim {
  position: absolute;
  left: 740px;
  top: 35px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle,transparent 61%,#2a1a0c 61.5%,#8a6a2c 63%,#f0d690 65.5%,#b48a3c 68%,#5a3e18 71%,#2a180a 72%,transparent 72.5%);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}

.shelf-portal-ticks {
  position: absolute;
  left: 740px;
  top: 35px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 7deg,#f0d690 0 1.4deg,transparent 1.4deg 20deg);
  -webkit-mask: radial-gradient(circle,transparent 66.4%,#000 66.6%,#000 67.6%,transparent 67.8%);
  mask: radial-gradient(circle,transparent 66.4%,#000 66.6%,#000 67.6%,transparent 67.8%);
  opacity: .9;
}

.shelf-portal-canvas {
  position: absolute;
  left: 826px;
  top: 121px;
  width: 268px;
  height: 268px;
  border-radius: 50%;
  box-shadow: inset 0 0 40px #000;
}

.shelf-portal-glass {
  position: absolute;
  left: 826px;
  top: 121px;
  width: 268px;
  height: 268px;
  border-radius: 50%;
  background: linear-gradient(135deg,rgba(255,255,255,.1),transparent 40%),radial-gradient(circle,transparent 60%,rgba(0,0,0,.55));
  pointer-events: none;
}

.shelf-painting-frame {
  position: absolute;
  left: 150px;
  top: 30px;
  width: 360px;
  height: 224px;
  padding: 13px;
  background: linear-gradient(135deg,#6b4e22,#e3c47a 30%,#8a6a2c 55%,#f0d690 80%,#6b4e22);
  box-shadow: 0 24px 50px rgba(0,0,0,.65),inset 0 0 0 2px rgba(40,25,10,.6);
}

.shelf-painting-mat {
  width: 100%;
  height: 100%;
  padding: 3px;
  background: #2a1a0c;
  position: relative;
}

.framed-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.shelf-painting-paper {
  position: absolute;
  inset: 3px;
  background: url(../assets/paper.jpg) center/cover;
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
}

.shelf-blueprint-frame {
  position: absolute;
  left: 1430px;
  top: 34px;
  width: 370px;
  height: 210px;
  padding: 11px;
  background: linear-gradient(#3a2414,#1e120a);
  box-shadow: 0 20px 44px rgba(0,0,0,.65);
}

.shelf-light-rays {
  position: absolute;
  left: -10%;
  top: -20%;
  width: 70%;
  height: 140%;
  background: linear-gradient(112deg,transparent 6%,rgba(255,206,130,.05) 11%,rgba(255,206,130,.12) 14%,rgba(255,206,130,.05) 17%,transparent 23%,rgba(255,206,130,.04) 26%,rgba(255,206,130,.08) 28%,rgba(255,206,130,.04) 30%,transparent 35%,rgba(255,206,130,.05) 37%,rgba(255,206,130,.09) 40%,rgba(255,206,130,.05) 43%,transparent 50%);
  mix-blend-mode: screen;
  animation: ssRays 16s ease-in-out infinite;
  will-change: transform,opacity;
  pointer-events: none;
}

.shelf-light-glow {
  position: absolute;
  left: -200px;
  top: -260px;
  width: 1100px;
  height: 1100px;
  background: radial-gradient(circle,rgba(255,190,110,.2),transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.shelf-upper-board {
  position: absolute;
  left: 0;
  right: 0;
  top: 456px;
  height: 17px;
  background: linear-gradient(#6a4428,#4a2c18);
  box-shadow: inset 0 1px 0 rgba(255,210,150,.25);
}

.shelf-upper-canvas {
  position: absolute;
  left: 0;
  top: 200px;
  width: 1920px;
  height: 280px;
}

.shelf-upper-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 472px;
  height: 36px;
  background: url(../assets/wood.jpg) center/cover;
  box-shadow: inset 0 2px 0 rgba(255,210,150,.3),inset 0 -10px 16px rgba(0,0,0,.5),0 14px 26px rgba(0,0,0,.65);
}

.shelf-lower-board {
  position: absolute;
  left: 0;
  right: 0;
  top: 890px;
  height: 17px;
  background: linear-gradient(#6a4428,#4a2c18);
  box-shadow: inset 0 1px 0 rgba(255,210,150,.25);
}

.shelf-rover-canvas {
  position: absolute;
  left: 120px;
  top: 560px;
  width: 680px;
  height: 370px;
}

.shelf-probe-canvas {
  position: absolute;
  left: 1120px;
  top: 470px;
  width: 760px;
  height: 460px;
}

.shelf-rover-photo {
  position: absolute;
  left: 700px;
  top: 796px;
  width: 80px;
  padding: 5px 5px 16px;
  background: #efe3cb;
  transform: rotate(-7deg);
  box-shadow: 0 8px 14px rgba(0,0,0,.6);
}

.shelf-rover-print {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  filter: sepia(.35);
}

.shelf-planet-photo {
  position: absolute;
  left: 1120px;
  top: 808px;
  width: 72px;
  padding: 5px 5px 15px;
  background: #efe3cb;
  transform: rotate(6deg);
  box-shadow: 0 8px 14px rgba(0,0,0,.6);
}

.square-print {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  filter: sepia(.3);
}

.shelf-book-foot-shadow {
  position: absolute;
  left: 960px;
  top: 900px;
  width: 400px;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);
}

.shelf-book-glow {
  position: absolute;
  left: 960px;
  top: 715px;
  width: 640px;
  height: 640px;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,rgba(255,206,140,.38),transparent 58%);
  mix-blend-mode: screen;
  transition: opacity .6s;
  opacity: var(--ss-opacity);
  pointer-events: none;
}

.shelf-book {
  position: absolute;
  left: 830px;
  top: 498px;
  width: 266px;
  height: 380px;
  perspective: 1600px;
  cursor: pointer;
  opacity: var(--ss-opacity);
}

.shelf-book-shadow {
  position: absolute;
  left: 50%;
  top: 394px;
  width: 250px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse,rgba(0,0,0,.8),transparent 70%);
  animation: ssBookShadow 4.2s ease-in-out infinite;
  pointer-events: none;
}

.shelf-book-hint {
  position: absolute;
  left: 50%;
  top: -58px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(95,156,150,.7);
  border-radius: 2px;
  background: rgba(10,8,8,.55);
  font: 600 10px/1 Montserrat,sans-serif;
  letter-spacing: .28em;
  color: #cfe6e1;
  white-space: nowrap;
  transition: opacity .4s;
  opacity: var(--ss-opacity);
  animation: ssTapHint 4.2s ease-in-out infinite;
  pointer-events: none;
}

.pulse-dot-small {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5f9c96;
  animation: ssPulse 2s infinite;
}

.shelf-book-float {
  position: absolute;
  inset: 0;
  animation: ssBookFloat 4.2s ease-in-out infinite;
  will-change: transform;
  transform-style: preserve-3d;
}

.shelf-book-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
  transform: var(--ss-transform);
}

.shelf-book-spine {
  position: absolute;
  left: -50px;
  top: 0;
  width: 50px;
  height: 100%;
  transform-origin: 100% 50%;
  transform: rotateY(-90deg);
  background: linear-gradient(rgba(16,20,40,.84),rgba(10,10,24,.9)),url(../assets/leather.jpg) center/cover;
  box-shadow: inset 0 0 22px rgba(0,0,0,.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.shelf-spine-band {
  width: 100%;
  height: 5px;
  border-top: 1px solid #c9a24e;
  border-bottom: 1px solid #c9a24e;
}

.shelf-spine-title {
  writing-mode: vertical-rl;
  font: 500 13px/1 'Playfair Display',serif;
  letter-spacing: .3em;
  color: #d9b46a;
  white-space: nowrap;
}

.shelf-spine-star {
  width: 14px;
  height: 14px;
}

.shelf-book-cover {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,rgba(22,26,52,.86),rgba(10,10,24,.9)),radial-gradient(ellipse 70% 50% at 25% 20%,rgba(74,86,160,.5),transparent 70%),url(../assets/leather.jpg) center/cover;
  border-radius: 0 6px 6px 0;
  box-shadow: inset 10px 0 18px -8px rgba(0,0,0,.8),inset 0 0 40px rgba(0,0,0,.5),0 0 34px rgba(217,180,106,.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding-top: 26%;
}

.cover-stars {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%,rgba(255,240,210,.95) 0 .6px,transparent 1.1px) 0 0/37px 41px,radial-gradient(circle at 70% 60%,rgba(220,230,255,.75) 0 .5px,transparent 1px) 0 0/23px 29px,radial-gradient(circle at 40% 80%,rgba(255,230,190,.85) 0 .9px,transparent 1.5px) 0 0/71px 83px;
  animation: ssBreath 5s ease-in-out infinite;
  pointer-events: none;
}

.cover-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cover-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,rgba(255,210,160,.16),transparent 42%,rgba(0,0,0,.35));
  pointer-events: none;
}

.shelf-cover-border {
  position: absolute;
  inset: 12px 12px 12px 17px;
  border: 1px solid rgba(217,180,106,.5);
  pointer-events: none;
}

.shelf-cover-emblem {
  width: 80px;
  height: 80px;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.7));
}

.shelf-cover-title {
  position: relative;
  font: 500 25px/1.05 'Playfair Display',serif;
  letter-spacing: .14em;
  text-align: center;
  background: linear-gradient(100deg,#9a7832 0%,#e9cd85 38%,#fff6dc 50%,#e9cd85 62%,#9a7832 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ssSheen 6s ease-in-out infinite;
}

.shelf-cover-caption {
  position: relative;
  font: 600 8px/1 Montserrat,sans-serif;
  letter-spacing: .32em;
  color: #c9a25a;
  white-space: nowrap;
}

.cover-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  filter: drop-shadow(0 1.5px 1.5px rgba(0,0,0,.55)) saturate(.9);
}

.cover-sticker-rocket {
  position: absolute;
  left: 7%;
  top: 5%;
  width: 14%;
  transform: rotate(-16deg);
}

.cover-sticker-mars {
  position: absolute;
  right: -4%;
  top: 4%;
  width: 31%;
  transform: rotate(12deg);
}

.cover-sticker-saturn {
  position: absolute;
  right: 4%;
  bottom: 20%;
  width: 31%;
  transform: rotate(10deg);
}

.cover-sticker-moon {
  position: absolute;
  left: 5%;
  bottom: 9%;
  width: 27%;
  transform: rotate(-9deg);
}

.shelf-lower-edge {
  position: absolute;
  left: 0;
  right: 0;
  top: 906px;
  height: 56px;
  background: url(../assets/wood.jpg) center/cover;
  box-shadow: inset 0 2px 0 rgba(255,210,150,.3),inset 0 -16px 24px rgba(0,0,0,.5),0 20px 40px rgba(0,0,0,.7);
}

.shelf-base {
  position: absolute;
  left: 0;
  right: 0;
  top: 962px;
  bottom: 0;
  background: linear-gradient(#120a05,#070403);
}

.shelf-left-post {
  position: absolute;
  left: 30px;
  top: 0;
  width: 50px;
  bottom: 0;
  background: linear-gradient(90deg,#1e1109,#4a2c18 40%,#2a180c);
  box-shadow: 6px 0 20px rgba(0,0,0,.6);
}

.shelf-right-post {
  position: absolute;
  right: 30px;
  top: 0;
  width: 50px;
  bottom: 0;
  background: linear-gradient(90deg,#2a180c,#4a2c18 60%,#1e1109);
  box-shadow: -6px 0 20px rgba(0,0,0,.6);
}

.shelf-brand {
  position: absolute;
  left: 44px;
  bottom: 36px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: ssRise 1.2s .4s ease both;
  pointer-events: none;
}

.shelf-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.shelf-brand-star {
  width: 30px;
  height: 30px;
  filter: drop-shadow(0 0 10px rgba(255,200,120,.5));
}

.shelf-brand-title {
  font: 500 clamp(28px,3vw,42px)/1 'Playfair Display',serif;
  color: #f4e6c8;
  white-space: nowrap;
  text-shadow: 0 2px 20px rgba(0,0,0,.7);
}

.shelf-brand-caption {
  font: 600 10px/1 Montserrat,sans-serif;
  letter-spacing: .42em;
  color: #d9b46a;
  padding-left: 44px;
  white-space: nowrap;
}

.shelf-footer-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22vh;
  background: linear-gradient(transparent,rgba(6,4,3,.85));
  pointer-events: none;
}

.shelf-actions {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: ssRise 1.2s .9s ease both;
}

.shelf-open:hover {
  background: rgba(63,122,118,.45);
}

.shelf-open {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  background: rgba(12,9,8,.5);
  border: 1px solid rgba(95,156,150,.7);
  border-radius: 2px;
  color: #d6ebe6;
  font: 600 11px/1 Montserrat,sans-serif;
  letter-spacing: .26em;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .25s;
}

.shelf-open-hint {
  font: italic 400 15px/1 'EB Garamond',serif;
  color: #d8c5a0;
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,.9);
}

/* Desk and open book */

.desk-scene {
  position: absolute;
  inset: 0;
}

.desk-surface {
  position: absolute;
  inset: 0;
  background: url(../assets/wood.jpg) center/cover;
  transition: transform 2s cubic-bezier(.65,0,.3,1);
  will-change: transform;
  transform: var(--ss-transform);
}

.desk-light {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 60% at 10% 0%,rgba(255,180,100,.3),transparent 70%),radial-gradient(ellipse 45% 55% at 96% 4%,rgba(110,118,200,.24),transparent 70%),radial-gradient(ellipse 30% 35% at 82% 0%,rgba(150,85,115,.18),transparent 70%);
  mix-blend-mode: screen;
}

.desk-orbits {
  position: absolute;
  left: 52%;
  top: 52%;
  width: 150vmax;
  height: 150vmax;
  transform: translate(-50%,-50%) rotate(-14deg);
  pointer-events: none;
  opacity: .16;
}

.desk-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 52%,transparent 35%,rgba(6,4,3,.84) 100%);
}

.desk-armillary {
  position: absolute;
  left: -2vw;
  top: -4vh;
  width: 19vw;
  aspect-ratio: 1;
}

.desk-dish-photo {
  position: absolute;
  right: -3vw;
  bottom: -5vh;
  width: 15vw;
  padding: .8vw .8vw 2.6vw;
  background: #efe3cb;
  transform: rotate(-12deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
}

.desk-launch-photo {
  position: absolute;
  left: 36vw;
  top: -7vh;
  width: 11vw;
  padding: .6vw .6vw 2vw;
  background: #efe3cb;
  transform: rotate(5deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.6);
}

.desk-notebook {
  position: absolute;
  right: -2vw;
  top: -3vh;
  width: 14vw;
  height: 20vw;
  background: url(../assets/leather.jpg) center/cover;
  transform: rotate(8deg);
  box-shadow: 0 20px 40px rgba(0,0,0,.6),inset 0 0 0 .6vw rgba(0,0,0,.15);
}

.desk-notebook-border {
  position: absolute;
  inset: 1vw;
  border: 1px solid rgba(217,180,106,.45);
}

.book-perspective {
  position: absolute;
  inset: 0;
  perspective: 2600px;
}

.open-book {
  position: absolute;
  left: 50%;
  top: 51.5%;
  width: min(84vw,126vh);
  aspect-ratio: 1.56;
  container-type: inline-size;
  transform-style: preserve-3d;
  transition: var(--ss-transition);
  will-change: transform;
  transform: var(--ss-transform);
  filter: var(--ss-filter);
}

.open-book-tilt {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.book-left-cover {
  position: absolute;
  left: -1.3cqw;
  top: -1.6cqw;
  bottom: -1.9cqw;
  width: calc(50% + 1.3cqw);
  background: url(../assets/leather.jpg) center/cover;
  border-radius: .9cqw 0 0 .9cqw;
  box-shadow: 0 3cqw 5cqw rgba(0,0,0,.75);
  opacity: var(--ss-opacity);
  transition: opacity .35s .55s;
}

.book-right-cover {
  position: absolute;
  left: 50%;
  top: -1.6cqw;
  bottom: -1.9cqw;
  width: calc(50% + 1.3cqw);
  background: url(../assets/leather.jpg) center/cover;
  border-radius: 0 .9cqw .9cqw 0;
  box-shadow: 0 3cqw 5cqw rgba(0,0,0,.75);
}

.book-left-page {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: url(../assets/paper.jpg) center/cover;
  border-radius: .4cqw 0 0 .4cqw;
  box-shadow: -1px 1px 0 #d6c092,-2px 2px 0 #b38c3e,-3px 3px 0 #dcc89c,-4px 4px 0 #a8823a,-5px 5px 0 #d3bd8f,-6px 6px 0 #9c7834,-7px 7px 2px rgba(0,0,0,.45);
  opacity: var(--ss-opacity);
  transition: opacity .35s .6s;
  overflow: hidden;
}

.book-left-page-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(90,55,20,.2),transparent 7%,transparent 78%,rgba(70,40,15,.42));
  pointer-events: none;
}

.page-outer-border {
  position: absolute;
  inset: 1.5cqw;
  border: 1px solid rgba(110,80,45,.45);
  pointer-events: none;
}

.page-inner-border {
  position: absolute;
  inset: 1.85cqw;
  border: .5px solid rgba(110,80,45,.3);
  pointer-events: none;
}

.book-right-page {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  background: url(../assets/paper.jpg) center/cover;
  border-radius: 0 .4cqw .4cqw 0;
  box-shadow: 1px 1px 0 #d6c092,2px 2px 0 #b38c3e,3px 3px 0 #dcc89c,4px 4px 0 #a8823a,5px 5px 0 #d3bd8f,6px 6px 0 #9c7834,7px 7px 2px rgba(0,0,0,.45);
  overflow: hidden;
}

.book-right-page-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg,rgba(90,55,20,.18),transparent 7%,transparent 80%,rgba(70,40,15,.4));
  pointer-events: none;
}

/* Contents pages */

.contents-page {
  position: absolute;
  inset: 0;
  padding: 3.3cqw 3.6cqw 3cqw;
  display: flex;
  flex-direction: column;
  gap: 1cqw;
  transition: opacity .3s;
  opacity: var(--ss-opacity);
}

.page-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  font: 600 max(9px,.74cqw)/1 Montserrat,sans-serif;
  letter-spacing: .24em;
  color: #6b4e33;
  white-space: nowrap;
}

.page-kicker-rule {
  width: 4cqw;
  height: 1px;
  background: #8a6a40;
}

.contents-empty {
  margin: auto 0;
  text-align: center;
  font: 400 max(16px,1.8cqw)/1.4 'EB Garamond',serif;
  color: #5a3f28;
}

.contents-entry {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 2.2cqw;
  cursor: pointer;
  padding-left: var(--ss-padding-left);
}

.contents-photo {
  flex: none;
  width: 11.5cqw;
}

.contents-photo-float {
  animation: ssFloat var(--ss-animation-duration) ease-in-out infinite;
  animation-delay: var(--ss-animation-delay);
}

.contents-polaroid {
  padding: .6cqw .6cqw 1.9cqw;
  background: #f3e8d2;
  position: relative;
  transition: transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s;
  transform: var(--ss-transform);
  box-shadow: var(--ss-box-shadow);
}

.contents-tape {
  position: absolute;
  top: -.9cqw;
  left: 50%;
  width: 5cqw;
  height: 1.6cqw;
  background: rgba(226,208,168,.82);
  transform: translateX(-50%) rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  z-index: 1;
}

.contents-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  filter: sepia(.3) contrast(1.04);
}

.contents-entry-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8cqw;
  text-align: center;
}

.contents-chapter-label {
  display: flex;
  align-items: center;
  gap: .8cqw;
  font: 600 max(9px,.74cqw)/1 Montserrat,sans-serif;
  letter-spacing: .26em;
  color: #5a3f28;
  white-space: nowrap;
}

.contents-chapter-rule {
  width: 1.6cqw;
  height: 1px;
  background: #8a6a40;
}

.contents-title {
  font: 500 3.3cqw/1 'Playfair Display',serif;
  color: #2e2014;
  white-space: nowrap;
}

.contents-subtitle {
  font: italic 400 max(10px,1.15cqw)/1.2 'EB Garamond',serif;
  color: #5a3f28;
  white-space: nowrap;
}

.contents-divider {
  display: flex;
  align-items: center;
  gap: .6cqw;
  width: 15cqw;
}

.divider-left {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,transparent,#8a6a40);
}

.contents-divider-star {
  width: .9cqw;
  height: .9cqw;
}

.divider-right {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,#8a6a40,transparent);
}

.contents-entry-footer {
  display: flex;
  gap: 1.4cqw;
  align-items: center;
  font: 600 max(9px,.72cqw)/1 Montserrat,sans-serif;
  letter-spacing: .2em;
  color: #6b4e33;
  white-space: nowrap;
}

.contents-entry-link {
  color: #2f5f5b;
  transition: opacity .35s,transform .35s;
  opacity: var(--ss-opacity);
  transform: var(--ss-transform);
}

.contents-tape-right {
  position: absolute;
  top: -.9cqw;
  left: 50%;
  width: 5cqw;
  height: 1.6cqw;
  background: rgba(226,208,168,.82);
  transform: translateX(-50%) rotate(3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
  z-index: 1;
}

.contents-play:hover {
  background: #2f5f5b;
}

.contents-play {
  align-self: center;
  display: flex;
  align-items: center;
  gap: .7cqw;
  padding: .8cqw 1.4cqw;
  background: #3f7a76;
  border: none;
  border-radius: 2px;
  color: #f3efe4;
  font: 600 max(9px,.72cqw)/1 Montserrat,sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 .4cqw 1cqw rgba(31,53,51,.28);
  transition: background .2s;
}

.story-button-dot {
  width: .55cqw;
  height: .55cqw;
  min-width: 6px;
  min-height: 6px;
  border-radius: 50%;
  background: #cfe0d8;
  animation: ssPulse 2s infinite;
}

/* Chapter illustrations */

.chapter-illustrations {
  position: absolute;
  inset: 0;
  padding: 3cqw 3.3cqw 2.6cqw;
  display: flex;
  flex-direction: column;
  gap: .75cqw;
  transition: opacity .3s;
  opacity: var(--ss-opacity);
}

.chapter-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  font: 600 max(9px,.74cqw)/1 Montserrat,sans-serif;
  letter-spacing: .24em;
  color: #6b4e33;
  text-transform: uppercase;
  white-space: nowrap;
}

.chapter-photos {
  display: flex;
  justify-content: center;
  gap: 2.6cqw;
  padding-top: .4cqw;
}

.chapter-photo {
  width: 15cqw;
}

.chapter-photo-float {
  animation: ssFloat var(--ss-animation-duration) ease-in-out infinite;
  animation-delay: var(--ss-animation-delay);
}

.chapter-polaroid {
  padding: .55cqw .55cqw 1.8cqw;
  background: #f3e8d2;
  position: relative;
  transition: transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .8s;
  box-shadow: var(--ss-box-shadow);
  transform: rotate(var(--ss-photo-rotation)) scale(var(--ss-photo-scale));
}

.chapter-photo-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  filter: sepia(.22) contrast(1.05);
}

.chapter-photo-corner-tl {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.6cqw;
  height: 1.6cqw;
  background: linear-gradient(135deg,rgba(62,38,20,.92) 50%,transparent 50%);
}

.chapter-photo-corner-tr {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.6cqw;
  height: 1.6cqw;
  background: linear-gradient(225deg,rgba(62,38,20,.92) 50%,transparent 50%);
}

.chapter-photo-corner-bl {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1.6cqw;
  height: 1.6cqw;
  background: linear-gradient(45deg,rgba(62,38,20,.92) 50%,transparent 50%);
}

.chapter-photo-corner-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.6cqw;
  height: 1.6cqw;
  background: linear-gradient(315deg,rgba(62,38,20,.92) 50%,transparent 50%);
}

.chapter-photo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: .6cqw;
  text-align: center;
  font: 500 max(7px,.58cqw)/1 Montserrat,sans-serif;
  letter-spacing: .08em;
  color: #6b4e33;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 .4cqw;
}

.chapter-figure-heading {
  display: flex;
  align-items: center;
  gap: 1cqw;
  border-bottom: 1px solid rgba(110,80,45,.4);
  padding-bottom: .45cqw;
  margin-top: .3cqw;
}

.chapter-figure-title {
  flex: 1;
  min-width: 0;
  font: italic 400 max(11px,1.3cqw)/1.1 'Playfair Display',serif;
  color: #2e2014;
}

.chapter-figure-label {
  font: 600 max(8px,.6cqw)/1 Montserrat,sans-serif;
  letter-spacing: .22em;
  white-space: nowrap;
  transition: color .3s;
  color: var(--ss-color);
}

.chapter-diagram {
  flex: 1;
  min-height: 0;
  position: relative;
}

.chapter-diagram-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.chapter-playback {
  display: flex;
  align-items: center;
  gap: 1cqw;
}

.chapter-play-toggle:hover {
  box-shadow: 0 0 0 3px rgba(63,122,118,.2);
}

.chapter-play-toggle {
  flex: none;
  width: 2.4cqw;
  height: 2.4cqw;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid #3f7a76;
  border-radius: 50%;
  background: var(--ss-background);
  color: var(--ss-color);
  cursor: pointer;
  font: 600 max(8px,.7cqw)/1 Montserrat,sans-serif;
  transition: background .2s;
}

.chapter-steps {
  display: flex;
  gap: .45cqw;
}

.chapter-step {
  width: 1.9cqw;
  height: 1.9cqw;
  min-width: 20px;
  min-height: 20px;
  border-radius: 50%;
  border: 1px solid #3f7a76;
  background: var(--ss-background);
  color: var(--ss-color);
  font: 600 max(8px,.62cqw)/1 Montserrat,sans-serif;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .3s,color .3s;
}

.chapter-seek {
  flex: 1;
  height: 1.6cqw;
  min-height: 14px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.chapter-seek-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(110,80,45,.25);
  border-radius: 2px;
}

.chapter-seek-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: #3f7a76;
  border-radius: 2px;
}

.chapter-step-text {
  min-height: 3.3cqw;
  font: 400 max(11px,1.12cqw)/1.4 'EB Garamond',serif;
  color: #2e2014;
  text-wrap: pretty;
  animation: ssRise .6s ease both;
}

.chapter-page-number {
  text-align: center;
  font: 500 max(9px,.74cqw)/1 'Playfair Display',serif;
  color: #6b4e33;
}

/* Chapter text and narration */

.chapter-details {
  position: absolute;
  inset: 0;
  padding: 3.1cqw 3.5cqw 2.7cqw;
  display: flex;
  flex-direction: column;
  gap: .85cqw;
  transition: opacity .3s;
  opacity: var(--ss-opacity);
}

.chapter-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2cqw;
}

.chapter-titles {
  display: flex;
  flex-direction: column;
  gap: .7cqw;
}

.chapter-title {
  font: 500 4.6cqw/1 'Playfair Display',serif;
  color: #2e2014;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.chapter-subtitle {
  font: italic 400 max(12px,1.55cqw)/1.1 'Playfair Display',serif;
  color: #5a3f28;
  white-space: nowrap;
}

.chapter-badge {
  flex: none;
  width: 6.8cqw;
  height: 6.8cqw;
  position: relative;
  display: grid;
  place-items: center;
}

.chapter-badge-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: ssSpin 40s linear infinite;
}

.chapter-badge-text {
  text-align: center;
  font: 600 max(8px,.66cqw)/1.35 Montserrat,sans-serif;
  letter-spacing: .06em;
  color: rgba(110,60,35,.85);
  white-space: nowrap;
  transform: rotate(-12deg);
}

.chapter-data-heading {
  display: flex;
  align-items: center;
  gap: 1cqw;
  font: 600 max(9px,.76cqw)/1 Montserrat,sans-serif;
  letter-spacing: .28em;
  color: #5a3f28;
  white-space: nowrap;
}

.chapter-data {
  display: flex;
  flex-direction: column;
  border-top: 1.5px solid rgba(90,63,40,.7);
  border-bottom: 1.5px solid rgba(90,63,40,.7);
}

.chapter-data-row {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr);
  gap: 1.2cqw;
  padding: .5cqw .2cqw;
  border-bottom: .5px solid rgba(90,63,40,.28);
  animation: ssRise .6s ease both;
  animation-delay: var(--ss-animation-delay);
  transition: background .6s,box-shadow .6s;
  background: var(--ss-background);
  box-shadow: var(--ss-box-shadow);
}

.chapter-data-key {
  font: 400 max(9px,1cqw)/1.25 Montserrat,sans-serif;
  color: #6b4e33;
}

.chapter-data-value {
  font: 500 max(9px,1cqw)/1.25 Montserrat,sans-serif;
  color: #2e2014;
  font-variant-numeric: tabular-nums;
}

.chapter-story-heading {
  display: flex;
  align-items: center;
  gap: 1cqw;
  margin-top: .3cqw;
}

.chapter-story-label {
  font: 600 max(9px,.76cqw)/1 Montserrat,sans-serif;
  letter-spacing: .28em;
  color: #5a3f28;
  white-space: nowrap;
}

.chapter-story-toggle:hover {
  background: #2f5f5b;
}

.chapter-story-toggle {
  flex: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: .6cqw;
  padding: .75cqw 1.3cqw;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  font: 600 max(9px,.74cqw)/1 Montserrat,sans-serif;
  letter-spacing: .18em;
  color: #f3efe4;
  transition: background .25s;
  background: var(--ss-background);
  box-shadow: 0 .4cqw 1cqw rgba(31,53,51,.28);
}

.chapter-story {
  margin: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  font: 400 max(11px,1.16cqw)/1.42 'EB Garamond',serif;
  color: #2e2014;
  text-wrap: pretty;
  hyphens: auto;
}

.chapter-sentence {
  padding: .05em .1em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background .5s;
  background: var(--ss-background);
}

.chapter-word {
  transition: color .25s,box-shadow .25s;
  color: var(--ss-color);
  box-shadow: var(--ss-box-shadow);
}

.chapter-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 max(9px,.7cqw)/1 Montserrat,sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
}

.chapter-contents-link:hover {
  color: #2f5f5b;
}

.chapter-contents-link {
  cursor: pointer;
  color: #6b4e33;
  transition: color .2s;
}

.chapter-footer-number {
  font: 500 max(9px,.74cqw)/1 'Playfair Display',serif;
  letter-spacing: 0;
  color: #6b4e33;
}

.chapter-next-link:hover {
  color: #2f5f5b;
}

.chapter-next-link {
  cursor: pointer;
  color: #6b4e33;
  transition: color .2s;
  text-transform: uppercase;
}

/* Book cover and page turns */

.book-gutter {
  position: absolute;
  left: calc(50% - 2.2cqw);
  width: 4.4cqw;
  top: 0;
  bottom: 0;
  background: linear-gradient(90deg,transparent,rgba(60,32,10,.28) 42%,rgba(30,15,5,.55) 50%,rgba(60,32,10,.28) 58%,transparent);
  pointer-events: none;
  opacity: var(--ss-opacity);
  transition: opacity .35s .6s;
}

.book-opening-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70cqw;
  height: 70cqw;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle,rgba(255,236,190,.75),rgba(255,190,110,.25) 30%,transparent 62%);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 1.4s ease;
  opacity: var(--ss-opacity);
}

.book-turn-static {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.book-turn-overlay {
  position: absolute;
  left: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  pointer-events: none;
  transform-style: preserve-3d;
}

.opening-cover {
  position: absolute;
  left: 50%;
  top: -1.6cqw;
  bottom: -1.9cqw;
  width: calc(50% + 1.3cqw);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 2s cubic-bezier(.55,.05,.2,1);
  transform: var(--ss-transform);
}

.opening-cover-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  background: linear-gradient(160deg,rgba(22,26,52,.86),rgba(10,10,24,.9)),radial-gradient(ellipse 70% 50% at 25% 20%,rgba(74,86,160,.5),transparent 70%),url(../assets/leather.jpg) center/cover;
  border-radius: 0 .9cqw .9cqw 0;
  box-shadow: inset 1.4cqw 0 1.4cqw -1cqw rgba(0,0,0,.7),inset 0 0 3cqw rgba(0,0,0,.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 26%;
  gap: 1.4cqw;
  overflow: hidden;
}

.opening-cover-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,rgba(255,200,140,.2),transparent 45%,rgba(0,0,0,.35));
}

.opening-cover-border {
  position: absolute;
  inset: 2.2cqw 2.2cqw 2.2cqw 3.4cqw;
  border: 1px solid rgba(217,180,106,.55);
}

.opening-cover-inner-border {
  position: absolute;
  inset: 2.8cqw 2.8cqw 2.8cqw 4cqw;
  border: .5px solid rgba(217,180,106,.35);
}

.opening-cover-emblem {
  width: 15cqw;
  height: 15cqw;
  position: relative;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.7));
}

.opening-cover-title {
  position: relative;
  font: 500 3.4cqw/1.05 'Playfair Display',serif;
  letter-spacing: .14em;
  text-align: center;
  background: linear-gradient(100deg,#9a7832 0%,#e9cd85 38%,#fff6dc 50%,#e9cd85 62%,#9a7832 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ssSheen 5s ease-in-out infinite;
}

.opening-cover-caption {
  position: relative;
  font: 600 .8cqw/1 Montserrat,sans-serif;
  letter-spacing: .34em;
  color: #c9a25a;
  white-space: nowrap;
}

.opening-cover-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: .9cqw 0 0 .9cqw;
  background: radial-gradient(circle at 20% 30%,rgba(217,180,106,.7) 0 1px,transparent 1.5px) 0 0/3.1cqw 3.1cqw,radial-gradient(circle at 70% 60%,rgba(217,180,106,.45) 0 .8px,transparent 1.2px) 0 0/2.3cqw 2.3cqw,radial-gradient(ellipse at 30% 30%,#2a2238,#130f1a 70%);
  box-shadow: inset 0 0 0 1.3cqw #3a2014;
  display: grid;
  place-items: center;
}

.opening-bookplate {
  padding: 2cqw 3cqw;
  background: url(../assets/paper.jpg) center/cover;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: .6cqw;
  box-shadow: 0 .3cqw 1cqw rgba(0,0,0,.5);
}

.opening-bookplate-label {
  font: 600 .7cqw/1 Montserrat,sans-serif;
  letter-spacing: .3em;
  color: #6b4e33;
}

.opening-bookplate-title {
  font: italic 400 1.8cqw/1 'Playfair Display',serif;
  color: #2e2014;
  white-space: nowrap;
}

.opening-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none;
  transition: opacity 1s,transform 1.4s;
  opacity: var(--ss-opacity);
  transform: var(--ss-transform);
}

.opening-caption-label {
  font: 600 11px/1 Montserrat,sans-serif;
  letter-spacing: .42em;
  color: #e9cf96;
  white-space: nowrap;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}

.opening-caption-text {
  font: italic 400 clamp(26px,3vw,44px)/1.1 'Playfair Display',serif;
  color: #fbefd6;
  white-space: nowrap;
  text-shadow: 0 4px 30px rgba(0,0,0,.85);
}

/* Ask the Archive */

.ask-panel {
  position: absolute;
  right: 4vw;
  top: calc(50% + 28px);
  width: min(410px,38vw);
  height: min(640px,calc(86vh - 56px));
  transition: transform .75s cubic-bezier(.2,.8,.2,1),opacity .5s;
  transform: var(--ss-transform);
  opacity: var(--ss-opacity);
  pointer-events: var(--ss-pointer-events);
}

.ask-paper-back {
  position: absolute;
  inset: 0;
  background: url(../assets/paper.jpg) center/cover;
  transform: rotate(2.4deg) translate(10px,8px);
  filter: brightness(.78);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  border-radius: 3px;
}

.ask-paper-middle {
  position: absolute;
  inset: 0;
  background: url(../assets/paper.jpg) center/cover;
  transform: rotate(-1.3deg) translate(-4px,4px);
  filter: brightness(.88);
  border-radius: 3px;
}

.ask-paper-front {
  position: absolute;
  inset: 0;
  background: url(../assets/paper.jpg) center/cover;
  border-radius: 3px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 20px;
  color: #2e2014;
}

.ask-paper-border {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(110,80,45,.42);
  pointer-events: none;
}

.ask-close:hover {
  border-color: rgba(63,122,118,.6);
  color: #2f5f5b;
}

.ask-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  color: #5a3f28;
  cursor: pointer;
}

.ask-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}

.ask-title {
  font: italic 400 30px/1 'Playfair Display',serif;
  white-space: nowrap;
}

.ask-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  font: 500 10px/1 Montserrat,sans-serif;
  letter-spacing: .3em;
  color: #5a3f28;
  white-space: nowrap;
}

.ask-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 4px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(110,80,45,.4) transparent;
}

.ask-user-message {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  animation: ssRise .4s ease both;
}

.ask-user-text {
  max-width: 78%;
  padding: 10px 13px;
  background: #cfe0d8;
  border: 1px solid rgba(63,122,118,.55);
  border-radius: 3px;
  font: 400 15.5px/1.4 'EB Garamond',serif;
  color: #1f3533;
}

.ask-user-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #3f7a76;
  display: grid;
  place-items: center;
}

.ask-archive-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  animation: ssRise .4s ease both;
}

.ask-archive-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2e2014;
  display: grid;
  place-items: center;
}

.ask-archive-text {
  max-width: 82%;
  padding: 10px 13px;
  background: rgba(246,237,218,.72);
  border: 1px solid rgba(90,63,40,.28);
  border-radius: 3px;
  font: 400 15.5px/1.42 'EB Garamond',serif;
  color: #2e2014;
  white-space: pre-wrap;
}

.ask-typing {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-typing-bubble {
  display: flex;
  gap: 5px;
  padding: 12px 14px;
  background: rgba(246,237,218,.72);
  border: 1px solid rgba(90,63,40,.28);
  border-radius: 3px;
}

.ask-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3f7a76;
  animation: ssDot 1.2s infinite;
}

.ask-typing-dot-middle {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3f7a76;
  animation: ssDot 1.2s .15s infinite;
}

.ask-typing-dot-last {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3f7a76;
  animation: ssDot 1.2s .3s infinite;
}

.ask-typing-label {
  font: italic 400 13px/1 'EB Garamond',serif;
  color: #6b4e33;
  white-space: nowrap;
}

.ask-error {
  margin: 0;
  font: 400 15.5px/1.4 'EB Garamond',serif;
  color: #5a3f28;
}

.ask-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 36px;
  margin-top: 2px;
}

.ask-suggestion:hover {
  background: rgba(63,122,118,.14);
}

.ask-suggestion {
  padding: 7px 10px;
  border: 1px solid rgba(63,122,118,.6);
  background: rgba(255,250,240,.35);
  color: #2f5f5b;
  font: 500 11px/1.2 Montserrat,sans-serif;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  transition: background .2s;
}

.ask-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ask-divider-star {
  width: 11px;
  height: 11px;
}

.ask-form {
  display: flex;
  gap: 8px;
}

.ask-input:focus {
  border-color: #3f7a76;
  box-shadow: 0 0 0 3px rgba(63,122,118,.18);
}

.ask-input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 1.5px solid rgba(63,122,118,.55);
  background: rgba(255,250,240,.55);
  border-radius: 2px;
  font: 400 16px/1 'EB Garamond',serif;
  color: #2e2014;
  outline: none;
  transition: border-color .2s,box-shadow .2s;
}

.ask-send:hover {
  background: #2f5f5b;
}

.ask-send {
  flex: none;
  width: 46px;
  background: #3f7a76;
  border: none;
  border-radius: 2px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s;
}

/* Story controls and navigation */

.story-bar {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 10px 10px 18px;
  background: rgba(10,8,8,.74);
  border: 1px solid rgba(95,156,150,.45);
  border-radius: 3px;
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  animation: ssRise .5s ease both;
  z-index: 6;
}

.story-bar-heading {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.story-bar-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 9px/1 Montserrat,sans-serif;
  letter-spacing: .28em;
  color: #a6cfc8;
  white-space: nowrap;
}

.story-bar-title {
  font: italic 400 17px/1 'Playfair Display',serif;
  color: #f1e3c4;
  white-space: nowrap;
}

.story-progress {
  display: flex;
  gap: 4px;
  align-items: center;
}

.story-progress-track {
  width: 44px;
  height: 3px;
  background: rgba(205,185,147,.22);
  border-radius: 2px;
  overflow: hidden;
}

.story-progress-fill {
  height: 100%;
  background: #5f9c96;
  transition: width .35s linear;
  width: var(--ss-width);
}

.story-play:hover {
  background: #4a8a85;
}

.story-play {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: #3f7a76;
  border: none;
  border-radius: 2px;
  color: #f3efe4;
  font: 600 12px/1 Montserrat,sans-serif;
  cursor: pointer;
  transition: background .2s;
}

.story-stop:hover {
  background: rgba(63,122,118,.25);
}

.story-stop {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(95,156,150,.5);
  border-radius: 2px;
  color: #a6cfc8;
  font: 600 11px/1 Montserrat,sans-serif;
  cursor: pointer;
  transition: background .2s;
}

.ask-open:hover {
  background: #4a8a85;
}

.ask-open {
  position: absolute;
  right: 24px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px 13px 16px;
  background: #3f7a76;
  border: none;
  border-radius: 2px;
  color: #f3efe4;
  font: 600 11px/1 Montserrat,sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
  animation: ssRise .6s ease both;
  transition: background .2s;
}

.ask-open-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cfe0d8;
  animation: ssPulse 2s infinite;
}

.archive-nav {
  position: absolute;
  left: 28px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: opacity .8s ease;
  opacity: var(--ss-opacity);
}

.archive-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.archive-brand-star {
  width: 18px;
  height: 18px;
}

.archive-brand-title {
  font: 500 19px/1 'Playfair Display',serif;
  color: #efe2c6;
  white-space: nowrap;
}

.archive-return:hover {
  color: #a6cfc8;
  border-color: rgba(95,156,150,.6);
}

.archive-return {
  font: 600 10px/1 Montserrat,sans-serif;
  letter-spacing: .2em;
  white-space: nowrap;
  color: #cdb993;
  cursor: pointer;
  padding: 8px 10px;
  border: 1px solid rgba(205,185,147,.25);
  border-radius: 2px;
  transition: color .2s,border-color .2s;
}

/* Atmosphere and screen picker */

.archive-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.archive-grain {
  position: absolute;
  inset: -10%;
  background: url(../assets/grain.png);
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: ssGrain 1.2s steps(6) infinite;
  will-change: transform;
  opacity: var(--ss-opacity);
}

.archive-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 18vmax rgba(0,0,0,.55);
}

.screen-picker {
  position: absolute;
  right: 24px;
  top: 22px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: rgba(10,7,6,.62);
  border: 1px solid rgba(217,180,106,.2);
  border-radius: 3px;
  backdrop-filter: blur(8px);
}

.screen-picker-label {
  font: 600 9px/1 Montserrat,sans-serif;
  letter-spacing: .24em;
  white-space: nowrap;
  color: #8f7b5c;
  padding: 0 10px 0 8px;
}

.screen-picker-button:hover {
  color: #cfe0d8;
}

.screen-picker-button {
  display: flex;
  gap: 6px;
  align-items: baseline;
  white-space: nowrap;
  padding: 7px 10px;
  background: var(--ss-background);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  color: var(--ss-color);
  font: 500 10.5px/1 Montserrat,sans-serif;
  letter-spacing: .06em;
  transition: background .2s,color .2s;
}

.screen-picker-number {
  font-weight: 600;
  opacity: .7;
}

.archive-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: #050407;
  transition: opacity .7s ease;
  opacity: var(--ss-opacity);
}