@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:ital@0;1&family=Nothing+You+Could+Do&family=Playfair+Display:ital,wght@0,400;1,400&display=swap');

:root {
  --paper: #f2eee4;
  --paper-deep: #dfd6c6;
  --ink: #211f1a;
  --muted: #777065;
  --line: rgba(33, 31, 26, .24);
  --shelf: #4a3428;
  --shelf-dark: #291b15;
  --red: #a93a2b;
  --blue: #315d7e;
  --yellow: #c99428;
  --mono: "DM Mono", ui-monospace, monospace;
  --serif: "Libre Baskerville", Georgia, serif;
  --display: "Playfair Display", Georgia, serif;
  --hand: "Nothing You Could Do", "Bradley Hand", cursive;
  --paper-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
body {
  overflow: hidden;
  background: #c9bfae;
  color: var(--ink);
  font-family: var(--mono);
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: var(--paper-noise);
}

.library {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  width: min(1440px, calc(100% - 36px));
  min-height: calc(100vh - 36px);
  margin: 18px auto;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 28px 62px rgba(45, 31, 18, .25), inset 0 1px rgba(255, 255, 255, .7);
}
.library::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .34;
  background-image: var(--paper-noise);
}

.library-header,
.library-footer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25px 30px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .14em;
}
.wordmark {
  color: var(--ink);
  text-decoration: none;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .27em;
}
.about-trigger {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 3px 0;
  background: none;
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .15em;
  cursor: pointer;
}
.about-trigger:hover,
.about-trigger:focus-visible { color: var(--red); }

.shelf-scene {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 540px;
  padding: 40px 8% 76px;
  perspective: 1500px;
}
.bookshelf {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(9px, 1.25vw, 20px);
  width: 100%;
  min-height: 420px;
}

.shelf-book {
  --cover: var(--red);
  --book-width: clamp(112px, 13vw, 182px);
  --book-height: clamp(270px, 43vh, 420px);
  position: relative;
  flex: 0 0 var(--book-width);
  width: var(--book-width);
  height: var(--book-height);
  padding: 0;
  border: 0;
  background: none;
  color: #f4edda;
  cursor: pointer;
  transform: translateY(0) rotateZ(0);
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transition: transform .5s cubic-bezier(.18,.74,.16,1), filter .35s ease;
}
.shelf-book::before {
  content: "";
  position: absolute;
  inset: 2px -8px 2px 8px;
  z-index: -2;
  border-radius: 1px 5px 5px 1px;
  background: var(--cover);
  filter: brightness(.68);
  transform: translateZ(-7px);
}
.book-spine {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 11px;
  overflow: hidden;
  border: 1px solid rgba(30, 21, 15, .58);
  border-radius: 2px 4px 3px 2px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.23), transparent 13%, transparent 81%, rgba(0,0,0,.23)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    var(--cover);
  box-shadow:
    7px 11px 15px rgba(45, 28, 16, .2),
    inset 2px 0 rgba(255,255,255,.2),
    inset -2px 0 rgba(0,0,0,.12);
}
.book-spine::before,
.book-spine::after {
  content: "";
  position: absolute;
  right: 10px;
  left: 10px;
  height: 1px;
  background: rgba(246, 235, 213, .52);
  box-shadow: 0 2px rgba(41, 25, 16, .16);
}
.book-spine::before { top: 37px; }
.book-spine::after { bottom: 37px; }
.spine-number {
  align-self: flex-end;
  font-size: 8px;
  letter-spacing: .12em;
}
.spine-title {
  flex: 1;
  display: grid;
  place-items: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 400 clamp(18px, 2vw, 27px)/1 var(--display);
  letter-spacing: -.04em;
}
.book-page-edge {
  position: absolute;
  z-index: 1;
  top: 7px;
  right: -7px;
  bottom: 7px;
  width: 12px;
  border-radius: 0 3px 3px 0;
  background:
    repeating-linear-gradient(180deg, rgba(82, 66, 45, .3) 0 1px, transparent 1px 4px),
    #e6dbc3;
  box-shadow: 3px 2px 5px rgba(52, 34, 20, .16);
  transform: skewY(-29deg);
  transform-origin: left bottom;
}
.book-travel { --cover: var(--red); --book-width: clamp(120px, 14vw, 192px); --book-height: clamp(292px, 46vh, 446px); transform: rotateZ(-1.2deg); }
.book-portrait { --cover: var(--blue); --book-width: clamp(98px, 11.5vw, 158px); --book-height: clamp(254px, 40vh, 390px); transform: rotateZ(.6deg); }
.book-fluid { --cover: var(--yellow); --book-width: clamp(130px, 15vw, 205px); --book-height: clamp(310px, 49vh, 468px); transform: rotateZ(1.1deg); }
.shelf-book:hover,
.shelf-book:focus-visible {
  z-index: 6;
  filter: saturate(1.08);
  transform: translateY(-25px) rotateZ(-1deg) rotateY(-5deg);
}
.shelf-book:focus-visible {
  outline: 1px dashed var(--ink);
  outline-offset: 8px;
}

.shelf-board {
  position: absolute;
  z-index: 2;
  right: 6%;
  bottom: 56px;
  left: 6%;
  height: 29px;
  border: 1px solid rgba(38, 24, 15, .7);
  background:
    repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.045) 6px 7px),
    linear-gradient(180deg, #745039, var(--shelf));
  box-shadow: 0 12px 0 var(--shelf-dark), 0 20px 25px rgba(46, 29, 17, .27);
}
.shelf-board span {
  position: absolute;
  right: 8%;
  bottom: -18px;
  left: 8%;
  height: 9px;
  background: #34231b;
}
.library-footer { padding-top: 15px; }

.book-reader {
  --book-color: var(--red);
  width: min(1080px, calc(100vw - 28px));
  max-width: none;
  margin: auto;
  padding: 42px 32px 30px;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--ink);
}
.book-reader::backdrop {
  background: rgba(43, 35, 26, .78);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.book-reader[open] {
  display: grid;
  justify-items: center;
  animation: reader-in .28s ease both;
}
@keyframes reader-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reader-close {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 20;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(245, 240, 229, .45);
  border-radius: 50%;
  background: rgba(31, 27, 22, .18);
  color: #f6f1e7;
  font: 23px/1 var(--mono);
  cursor: pointer;
}
.reader-index {
  width: min(840px, 82vw);
  margin: 0 0 14px;
  color: rgba(247,242,232,.72);
  font-size: 9px;
  letter-spacing: .16em;
}

.bound-book {
  position: relative;
  width: min(840px, 82vw);
  aspect-ratio: 1.54 / 1;
  perspective: 2200px;
  transform-style: preserve-3d;
}
.book-underlay {
  position: absolute;
  inset: -8px -10px -10px;
  z-index: 0;
  border: 1px solid rgba(32, 24, 17, .7);
  border-radius: 5px 8px 9px 5px;
  background: var(--book-color);
  box-shadow: 0 32px 50px rgba(20, 13, 8, .43);
}
.paper-stack {
  position: absolute;
  inset: 2px;
  z-index: 3;
  transform-style: preserve-3d;
  filter: drop-shadow(0 7px 4px rgba(43, 29, 17, .18));
}
.paper-stack::before,
.paper-stack::after {
  content: "";
  position: absolute;
  inset: 5px 1px -5px;
  z-index: -1;
  background: #d9cfbd;
  clip-path: polygon(0 .4%, 48% 0, 50% .5%, 52% 0, 100% .6%, 99.6% 99%, 51% 99.6%, 49% 99.2%, .5% 100%);
  box-shadow: 0 1px rgba(91, 72, 49, .42);
}
.paper-stack::after {
  inset: 9px 3px -9px;
  z-index: -2;
  background: #cfc3ae;
}

.paper-page,
.page-face {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(103, 83, 56, .08)),
    var(--paper-noise),
    #f1eadc;
  color: #2c2922;
}
.paper-page::after,
.page-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: var(--paper-noise);
}
.page-left {
  left: 0;
  padding: 8% 8% 6%;
  clip-path: polygon(.4% .4%, 99.7% 0, 100% 100%, .3% 99.5%);
  box-shadow: inset -25px 0 27px -31px rgba(39, 28, 18, .7);
}
.page-right {
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8% 8% 6%;
  clip-path: polygon(0 0, 99.5% .5%, 100% 99.6%, 0 100%);
  box-shadow: inset 25px 0 27px -31px rgba(39, 28, 18, .7);
}
.page-left::before,
.page-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
}
.page-left::before {
  right: -2px;
  background: linear-gradient(90deg, transparent, rgba(57, 43, 28, .2));
}
.page-right::before {
  left: -2px;
  background: linear-gradient(90deg, rgba(57, 43, 28, .2), transparent);
}
.page-left > p,
.page-mark {
  margin: 0;
  color: #777064;
  font-size: clamp(7px, .75vw, 10px);
  letter-spacing: .14em;
}
.page-left > h2 {
  margin: 14% 0 0;
  font: 400 clamp(30px, 5vw, 68px)/.88 var(--display);
  letter-spacing: -.075em;
}
.page-folio {
  position: absolute;
  right: 8%;
  bottom: 6%;
  color: #81786b;
  font-size: 9px;
}
.page-left .page-folio { right: auto; left: 8%; }

.enter-volume {
  align-self: flex-end;
  color: var(--ink);
  text-decoration: none;
  font: 400 clamp(20px, 3.1vw, 43px)/.9 var(--display);
  letter-spacing: -.05em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease .48s, transform .35s ease .48s;
}
.enter-volume span { color: var(--book-color); font-family: var(--mono); font-size: .62em; }
.bound-book.is-page-turned .enter-volume { opacity: 1; transform: translateY(0); }

.turning-page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  width: 50%;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.2,.72,.12,1);
}
.bound-book.is-page-turned .turning-page {
  transform: rotateY(-178deg);
  z-index: 5;
}
.page-face {
  inset: 0;
  width: 100%;
  padding: 8% 8% 6%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.page-front {
  box-shadow: inset 24px 0 27px -31px rgba(39, 28, 18, .72), 2px 0 2px rgba(63,45,28,.14);
  clip-path: polygon(0 0, 99.6% .5%, 100% 99.3%, 0 100%);
}
.page-front h2 {
  max-width: 8ch;
  margin: 15% 0 0;
  font: 400 clamp(26px, 4.1vw, 57px)/.89 var(--display);
  letter-spacing: -.07em;
}
.reader-note {
  max-width: 22ch;
  margin: 10% 0 0;
  color: #6b6357;
  font: italic clamp(9px, 1vw, 13px)/1.65 var(--serif);
}
.page-corner {
  position: absolute;
  right: 7%;
  bottom: 6%;
  color: #766d61;
  font-size: 8px;
  letter-spacing: .12em;
}
.page-back {
  transform: rotateY(180deg);
  box-shadow: inset -24px 0 27px -31px rgba(39, 28, 18, .72);
  clip-path: polygon(.4% .4%, 100% 0, 100% 100%, .2% 99.5%);
}
.back-note {
  position: absolute;
  right: 9%;
  bottom: 8%;
  margin: 0;
  color: #6f675c;
  font: italic clamp(9px, 1vw, 13px)/1.55 var(--serif);
  text-align: right;
}
.pencil-arc {
  position: absolute;
  top: 25%;
  left: 19%;
  width: 58%;
  height: 37%;
  border: 1px solid rgba(69, 64, 57, .38);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-22deg);
}

.front-cover {
  position: absolute;
  top: -8px;
  right: -10px;
  bottom: -10px;
  z-index: 12;
  width: calc(50% + 12px);
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1.08s cubic-bezier(.17,.78,.12,1), z-index 0s linear .58s;
}
.bound-book.is-open .front-cover {
  z-index: 1;
  transform: rotateY(-179deg);
}
.cover-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 8% 9%;
  overflow: hidden;
  border: 1px solid rgba(35, 23, 15, .65);
  border-radius: 1px 7px 8px 1px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cover-outside {
  justify-content: space-between;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 16%, transparent 85%, rgba(0,0,0,.15)),
    var(--book-color);
  color: #f4eddd;
  box-shadow: inset 7px 0 13px rgba(255,255,255,.08);
}
.cover-outside h2 {
  margin: auto 0;
  font: 400 clamp(34px, 5.5vw, 76px)/.86 var(--display);
  letter-spacing: -.08em;
}
.cover-outside span,
.cover-outside small {
  font-size: clamp(7px, .8vw, 10px);
  letter-spacing: .16em;
}
.cover-inside {
  align-items: flex-end;
  background: var(--paper-noise), #dfd3bf;
  color: #7c7265;
  transform: rotateY(180deg);
  box-shadow: inset -18px 0 25px -25px rgba(45, 31, 18, .68);
  font-size: 8px;
  letter-spacing: .15em;
}

.turn-page {
  margin-top: 20px;
  border: 0;
  border-bottom: 1px solid rgba(246,241,231,.58);
  padding: 4px 0;
  background: none;
  color: #f6f1e7;
  font-size: 9px;
  letter-spacing: .15em;
  cursor: pointer;
}
.turn-page span { color: var(--book-color); font-size: 14px; }

.about-sheet {
  position: fixed;
  z-index: 110;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(440px, 46vw);
  padding: clamp(38px, 5vw, 66px);
  overflow: hidden;
  background: var(--paper);
  box-shadow: -16px 0 42px rgba(45, 31, 18, .22);
  transform: translateX(104%);
  transition: transform .52s cubic-bezier(.2,.78,.16,1);
}
.about-sheet.open { transform: translateX(0); }
.about-sheet::after {
  content: "";
  position: absolute;
  right: -100px;
  bottom: -105px;
  width: 260px;
  height: 260px;
  background: var(--red);
  transform: rotate(18deg);
}
.fold-line {
  position: absolute;
  top: 20px;
  right: 0;
  left: 0;
  border-top: 1px dashed var(--line);
}
.close-about {
  position: absolute;
  top: 27px;
  right: 28px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 25px/1 var(--mono);
  cursor: pointer;
}
.about-sheet > p:first-of-type {
  margin: 0;
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .14em;
}
.about-sheet h2 {
  margin: 36px 0 0;
  font: 400 clamp(44px, 6vw, 72px)/.82 var(--display);
  letter-spacing: -.085em;
}
.about-sheet h2 em { color: var(--red); font-weight: 400; }
.about-text {
  max-width: 290px;
  margin-top: 34px;
  font: italic 13px/1.7 var(--serif);
}
.about-meta {
  position: absolute;
  bottom: 34px;
  left: clamp(38px, 5vw, 66px);
  margin: 0;
  color: var(--muted);
  font-size: 9px;
}

@media (max-width: 760px) {
  .library {
    width: calc(100% - 18px);
    min-height: calc(100vh - 18px);
    margin: 9px auto;
  }
  .library-header,
  .library-footer { padding: 20px 18px; font-size: 8px; }
  .library-header > span { display: none; }
  .shelf-scene { min-height: 500px; padding: 34px 0 66px; }
  .bookshelf {
    justify-content: flex-start;
    min-height: 390px;
    padding: 0 30px 2px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .bookshelf::-webkit-scrollbar { display: none; }
  .shelf-book { flex-shrink: 0; }
  .book-travel { --book-width: 126px; --book-height: 318px; }
  .book-portrait { --book-width: 105px; --book-height: 278px; }
  .book-fluid { --book-width: 137px; --book-height: 338px; }
  .shelf-board { right: 0; left: 0; }
  .book-reader { width: 100vw; padding: 54px 10px 24px; }
  .reader-index,
  .bound-book { width: min(94vw, 690px); }
  .bound-book { aspect-ratio: 1.34 / 1; }
  .cover-outside h2 { font-size: clamp(28px, 8vw, 48px); }
  .page-front h2 { font-size: clamp(22px, 6.5vw, 40px); }
  .reader-note { margin-top: 8%; line-height: 1.4; }
  .page-left > h2 { font-size: clamp(27px, 8vw, 48px); }
  .enter-volume { font-size: clamp(20px, 6vw, 36px); }
  .reader-close { top: 16px; right: 16px; }
  .about-sheet { width: min(92vw, 440px); padding: 50px 32px; }
  .about-meta { left: 32px; }
}

/* Clickable notes volume and a small, letterpressed cat edition. */
.book-notes {
  --cover: #68715d;
  --cover-ink: #f3ecdd;
  --book-width: clamp(154px, 14vw, 214px);
  --book-height: clamp(330px, 46vh, 460px);
}

.book-notes .book-spine {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(28,36,24,.035) 0 1px, transparent 1px 5px),
    #68715d;
}

.book-notes .book-spine::before {
  height: 24%;
  background: rgba(226, 215, 191, .22);
}

.book-notes .book-spine::after {
  top: 16%;
  right: -12px;
  left: auto;
  width: 55px;
  height: 112px;
  background: rgba(172, 154, 120, .38);
  transform: rotate(-2deg);
}

.book-cat {
  --cover: #a47a2b;
  --cover-ink: #362815;
  --book-width: clamp(58px, 5vw, 76px);
  --book-height: clamp(182px, 25vh, 245px);
  margin-left: clamp(24px, 4vw, 58px);
}

.book-cat .book-spine {
  background:
    repeating-linear-gradient(90deg, rgba(56,39,17,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    #a47a2b;
}

.book-cat .book-spine::before,
.book-cat .book-spine::after {
  display: none;
}

.cat-imprint {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(49, 35, 17, .78);
  mix-blend-mode: multiply;
}

.cat-emoji {
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1;
  filter: grayscale(1) contrast(.85);
  opacity: .78;
  text-shadow: 0 1px rgba(255,244,213,.45), 0 -1px rgba(55,35,11,.38);
}

@media (max-width: 760px) {
  .book-notes {
    --book-width: 150px;
    --book-height: 360px;
  }

  .book-cat {
    --book-width: 62px;
    --book-height: 205px;
    margin-left: 24px;
    margin-right: 44px;
  }

}

/* Casey — a quiet fifth volume. */
.casey-page {
  min-height: 100vh;
  overflow: auto;
  background: #a47a2b;
}

.casey-page::after {
  opacity: .2;
}

.casey-header {
  position: fixed;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 24px 28px;
  color: rgba(45, 33, 17, .72);
  font: 500 8px/1 var(--mono);
  letter-spacing: .14em;
}

.casey-header a {
  color: inherit;
  text-decoration: none;
}

.casey-sheet {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 80px 24px 46px;
}

.casey-portrait {
  position: relative;
  width: min(230px, 58vw);
  margin: 0;
  text-align: center;
}

.casey-portrait::before {
  content: "";
  position: absolute;
  inset: -22px -20px 35px;
  z-index: -1;
  background: rgba(232, 218, 187, .16);
  transform: rotate(-1.2deg);
}

.casey-portrait img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .82;
  filter: grayscale(1) sepia(.18) contrast(.92);
  mix-blend-mode: multiply;
}

.casey-portrait figcaption {
  margin-top: 25px;
  color: rgba(47, 34, 17, .78);
  font: 500 9px/1 var(--mono);
  letter-spacing: .2em;
  text-shadow: 0 1px rgba(246,226,184,.42), 0 -1px rgba(55,35,11,.36);
  text-transform: uppercase;
}

@media (max-width: 430px) {
  .library-footer span:first-child { display: none; }
  .library-footer { justify-content: flex-end; }
  .bound-book { width: 96vw; aspect-ratio: 1.18 / 1; }
  .reader-index { width: 96vw; }
  .paper-page,
  .page-face { font-size: 8px; }
  .reader-note { font-size: 8px; }
  .cover-outside h2 { font-size: 27px; }
  .page-front h2 { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Paperbound archive arrangement */
body {
  background: #f3eee2;
}

.library {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  background: #f5f0e5;
  box-shadow: none;
}

.library::before,
.library::after {
  content: "";
  position: absolute;
  z-index: 4;
  width: 31px;
  height: 31px;
  pointer-events: none;
  opacity: .48;
  background:
    linear-gradient(90deg, transparent 0 14px, #777269 14px 15px, transparent 15px),
    linear-gradient(0deg, transparent 0 14px, #777269 14px 15px, transparent 15px);
}

.library::before {
  top: 26px;
  left: 18px;
}

.library::after {
  right: 18px;
  bottom: 21px;
}

.library-header {
  position: absolute;
  top: 25px;
  right: 68px;
  left: 68px;
  padding: 0;
  color: #858076;
  font-size: 8px;
}

.wordmark {
  color: #57534c;
  font-size: 9px;
  letter-spacing: .24em;
}

.shelf-scene {
  min-height: 100vh;
  padding: 18vh 7vw 8vh;
  place-items: end center;
}

.bookshelf {
  align-items: flex-end;
  gap: clamp(12px, 1.55vw, 28px);
  min-height: 63vh;
  padding: 0 3vw;
}

.shelf-book,
.book-travel,
.book-portrait,
.book-fluid,
.book-about {
  transform: none;
}

.shelf-book {
  --cover: #e2dac9;
  --cover-ink: #2c2923;
  --book-width: 180px;
  --book-height: 430px;
  flex-basis: var(--book-width);
  width: var(--book-width);
  height: var(--book-height);
  color: var(--cover-ink);
  filter: drop-shadow(5px 5px 2px rgba(56, 43, 27, .12));
}

.shelf-book::before {
  inset: 2px -5px 1px 5px;
  border: 0;
  border-radius: 0;
  background: #b9ae9a;
  filter: none;
  transform: translateZ(-3px);
}

.book-spine {
  padding: 23px 16px 18px;
  border: 0;
  border-radius: 0;
  color: var(--cover-ink);
  background:
    linear-gradient(90deg, rgba(255,255,255,.19), transparent 21%, rgba(70,57,38,.045) 72%, rgba(54,43,29,.1)),
    var(--paper-noise),
    var(--cover);
  box-shadow:
    inset 1px 0 rgba(255,255,255,.55),
    inset -2px 0 rgba(72,57,38,.14),
    2px 1px 0 rgba(65,51,34,.12);
  clip-path: polygon(
    0 .8%, 8% .35%, 17% .65%, 29% .2%, 40% .55%, 51% .15%, 63% .48%, 75% .25%, 88% .62%, 100% .3%,
    99.5% 99.3%, 89% 99.7%, 77% 99.35%, 65% 99.75%, 53% 99.4%, 40% 99.7%, 27% 99.38%, 14% 99.72%, .4% 99.35%
  );
}

.book-spine::before,
.book-spine::after {
  z-index: 0;
  right: auto;
  left: auto;
  height: auto;
  background: none;
  box-shadow: none;
}

.book-spine::before {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30%;
  background: rgba(84, 105, 119, .28);
}

.book-spine::after {
  top: 13%;
  left: -9px;
  width: 48px;
  height: 93px;
  background:
    repeating-linear-gradient(0deg, rgba(83,70,51,.08) 0 1px, transparent 1px 4px),
    rgba(163, 150, 123, .54);
  transform: rotate(3deg);
  mix-blend-mode: multiply;
}

.spine-number,
.spine-title {
  position: relative;
  z-index: 2;
}

.spine-number {
  align-self: center;
  font-size: 9px;
  color: var(--cover-ink);
}

.spine-title {
  color: var(--cover-ink);
  font: 500 clamp(13px, 1.25vw, 19px)/1 var(--mono);
  letter-spacing: .13em;
}

.book-page-edge {
  top: 4px;
  right: -5px;
  bottom: 4px;
  width: 7px;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, rgba(98,79,52,.23) 0 1px, transparent 1px 5px),
    #d5cab7;
  box-shadow: 2px 0 1px rgba(54,41,27,.12);
  transform: none;
}

.book-travel {
  --cover: #e3dccd;
  --cover-ink: #2f2d27;
  --book-width: clamp(166px, 16vw, 245px);
  --book-height: clamp(350px, 49vh, 490px);
}

.book-portrait {
  --cover: #b6402f;
  --cover-ink: #242019;
  --book-width: clamp(102px, 10vw, 148px);
  --book-height: clamp(370px, 52vh, 520px);
}

.book-portrait .book-spine::before {
  height: 19%;
  background: rgba(225, 198, 188, .8);
}

.book-portrait .book-spine::after {
  top: 19%;
  right: -8px;
  left: auto;
  width: 35px;
  height: 54px;
  background: rgba(208, 191, 158, .63);
  transform: rotate(-2deg);
}

.book-fluid {
  --cover: #14243b;
  --cover-ink: #eee6d4;
  --book-width: clamp(235px, 23vw, 350px);
  --book-height: clamp(430px, 61vh, 610px);
}

.book-fluid .book-spine {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 5px),
    #14243b;
}

.book-fluid .book-spine::before {
  top: 0;
  right: 9%;
  bottom: auto;
  left: auto;
  width: 13%;
  height: 8%;
  background: rgba(34, 64, 120, .7);
}

.book-fluid .book-spine::after {
  top: 22%;
  left: -8px;
  width: 58px;
  height: 49px;
  background: rgba(155, 146, 118, .62);
  transform: rotate(-4deg);
}

.book-about {
  --cover: #a47a2b;
  --cover-ink: #241e15;
  --book-width: clamp(68px, 6vw, 91px);
  --book-height: clamp(210px, 29vh, 290px);
  margin-left: clamp(38px, 6vw, 96px);
}

.book-about .book-spine {
  background:
    repeating-linear-gradient(90deg, rgba(56,39,17,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    #a47a2b;
}

.book-about .book-spine::before {
  height: 0;
}

.book-about .book-spine::after {
  top: auto;
  right: -5px;
  bottom: 15%;
  left: auto;
  width: 43px;
  height: 42px;
  background: rgba(120, 101, 64, .46);
  transform: rotate(2deg);
}

.shelf-book:hover,
.shelf-book:focus-visible {
  z-index: 6;
  filter: drop-shadow(9px 10px 4px rgba(56,43,27,.16));
  transform: translateY(-18px) rotate(-.45deg);
}

.shelf-board {
  right: 2vw;
  bottom: calc(8vh - 1px);
  left: 2vw;
  height: 1px;
  border: 0;
  background: rgba(67, 64, 58, .56);
  box-shadow: none;
}

.book-reader {
  --book-ink: #f4eddd;
}

.cover-outside {
  color: var(--book-ink);
}

@media (max-width: 760px) {
  .library {
    width: 100%;
    min-height: 100vh;
    margin: 0;
  }

  .library::before {
    top: 18px;
    left: 12px;
  }

  .library::after {
    right: 12px;
    bottom: 13px;
  }

  .library-header {
    top: 20px;
    right: 54px;
    left: 54px;
  }

  .shelf-scene {
    min-height: 100vh;
    padding: 16vh 0 8vh;
  }

  .bookshelf {
    justify-content: flex-start;
    min-height: 66vh;
    padding: 0 42px 0 46px;
    gap: 14px;
  }

  .book-travel {
    --book-width: 164px;
    --book-height: 390px;
  }

  .book-portrait {
    --book-width: 106px;
    --book-height: 414px;
  }

  .book-fluid {
    --book-width: 228px;
    --book-height: 480px;
  }

  .book-about {
    --book-width: 72px;
    --book-height: 238px;
    margin-left: 32px;
    margin-right: 44px;
  }

  .shelf-board {
    right: 0;
    bottom: 8vh;
    left: 0;
  }
}

@media (max-height: 650px) and (min-width: 761px) {
  .bookshelf {
    min-height: 75vh;
  }

  .book-travel {
    --book-height: 330px;
  }

  .book-portrait {
    --book-height: 350px;
  }

  .book-fluid {
    --book-height: 400px;
  }

  .book-about {
    --book-height: 200px;
  }
}

/* Five-volume shelf + lifted title page */
.library::before {
  display: none;
}

.library-header {
  justify-content: flex-start;
}

.index-link {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
  transition: color .18s ease;
}

.index-link:hover,
.index-link:focus-visible {
  color: var(--ink);
}

.plus-trigger {
  position: fixed;
  z-index: 120;
  top: 24px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 0;
  padding: 0;
  color: #706b63;
  font: 300 25px/1 Arial, sans-serif;
  letter-spacing: 0;
  opacity: .58;
}

.plus-trigger::before,
.plus-trigger::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.plus-trigger::before {
  width: 29px;
  height: 1px;
}

.plus-trigger::after {
  width: 1px;
  height: 29px;
}

.plus-trigger {
  font-size: 0;
}

.wordmark {
  margin-left: 2px;
}

.book-cat {
  --cover: #ded6c8;
  --cover-ink: #2d2a24;
  --book-width: clamp(154px, 14vw, 214px);
  --book-height: clamp(330px, 46vh, 460px);
}

.book-cat .book-spine::before {
  height: 27%;
  background: rgba(198, 164, 153, .28);
}

.book-cat .book-spine::after {
  top: 16%;
  right: -12px;
  left: auto;
  width: 55px;
  height: 112px;
  background: rgba(166, 153, 128, .46);
  transform: rotate(-4deg);
}

.spine-emoji {
  position: absolute;
  z-index: 3;
  top: 13%;
  right: 16%;
  font-size: clamp(19px, 2vw, 28px);
  filter: grayscale(1);
  transform: rotate(3deg);
}

.book-index {
  --cover: #a47a2b;
  --cover-ink: #241e15;
  --book-width: clamp(62px, 5.6vw, 84px);
  --book-height: clamp(196px, 27vh, 270px);
  margin-left: clamp(25px, 4vw, 64px);
}

.book-index .book-spine {
  background:
    repeating-linear-gradient(90deg, rgba(56,39,17,.13) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px),
    #a47a2b;
}

.book-index .book-spine::before {
  height: 0;
}

.book-index .book-spine::after {
  top: auto;
  right: -7px;
  bottom: 13%;
  left: auto;
  width: 42px;
  height: 39px;
  background: rgba(118, 98, 62, .44);
  transform: rotate(2deg);
}

.decorative-book {
  cursor: default;
}

.decorative-book:hover {
  z-index: 3;
  filter: drop-shadow(5px 5px 2px rgba(56, 43, 27, .12));
  transform: none;
}

.bound-book.is-open:not(.is-page-turned) .turning-page {
  z-index: 8;
  transform: rotateY(-14deg) translateZ(8px);
  filter: drop-shadow(9px 4px 7px rgba(42, 29, 18, .2));
}

.bound-book.is-open:not(.is-page-turned) .page-front {
  box-shadow:
    inset 24px 0 27px -31px rgba(39, 28, 18, .72),
    10px 2px 14px rgba(54, 38, 23, .16);
}

.about-sheet {
  top: 65px;
  right: auto;
  bottom: auto;
  left: 20px;
  width: min(292px, calc(100vw - 40px));
  min-height: 0;
  padding: 22px 24px 20px;
  border: 1px solid rgba(92, 83, 70, .2);
  background: rgba(245, 240, 229, .72);
  box-shadow: 7px 10px 24px rgba(49, 38, 25, .1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) rotate(-1deg) scale(.97);
  transform-origin: top left;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2,.78,.16,1);
}

.about-sheet.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) rotate(-1deg) scale(1);
}

.about-sheet::after,
.fold-line {
  display: none;
}

.close-about {
  top: 10px;
  right: 12px;
  font-size: 18px;
}

.about-sheet > p:first-of-type {
  font-size: 7px;
}

.about-sheet h2 {
  margin: 18px 0 0;
  font: 400 20px/1.05 var(--display);
  letter-spacing: -.045em;
}

.about-text {
  max-width: 230px;
  margin: 14px 0 0;
  font: italic 10px/1.65 var(--serif);
}

.about-meta {
  position: static;
  margin: 16px 0 0;
  font-size: 7px;
}

@media (max-width: 760px) {
  .plus-trigger {
    top: 16px;
    left: 12px;
  }

  .wordmark {
    margin-left: 32px;
  }

  .book-cat {
    --book-width: 150px;
    --book-height: 360px;
  }

  .book-index {
    --book-width: 66px;
    --book-height: 220px;
    margin-left: 24px;
    margin-right: 44px;
  }

  .about-sheet {
    top: 57px;
    left: 13px;
    width: min(280px, calc(100vw - 26px));
    padding: 20px 22px 18px;
  }
}

/* Final sizing for the fifth, cat-only miniature volume. */
.book-cat {
  --cover: #a47a2b;
  --cover-ink: #362815;
  --book-width: clamp(58px, 5vw, 76px);
  --book-height: clamp(182px, 25vh, 245px);
  margin-left: clamp(24px, 4vw, 58px);
}

.book-cat .book-spine::before,
.book-cat .book-spine::after {
  display: none;
}

@media (max-width: 760px) {
  .book-cat {
    --book-width: 62px;
    --book-height: 205px;
    margin-left: 24px;
    margin-right: 44px;
  }
}

/* Responsive shelf: one composed scene on phones, a balanced shelf on tablets. */
html {
  min-height: 100%;
  min-height: 100dvh;
}

button,
a {
  touch-action: manipulation;
}

.library,
.shelf-scene {
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .library-header {
    top: calc(24px + env(safe-area-inset-top));
    right: calc(58px + env(safe-area-inset-right));
    left: calc(58px + env(safe-area-inset-left));
  }

  .plus-trigger {
    top: calc(19px + env(safe-area-inset-top));
    left: calc(17px + env(safe-area-inset-left));
  }

  .shelf-scene {
    padding: 15vh 2.5vw 7vh;
  }

  .bookshelf {
    gap: clamp(8px, 1.15vw, 13px);
    min-height: 68vh;
    padding: 0 1.5vw;
  }

  .book-travel {
    --book-width: clamp(146px, 19vw, 194px);
    --book-height: clamp(380px, 48vh, 490px);
  }

  .book-portrait {
    --book-width: clamp(92px, 12vw, 123px);
    --book-height: clamp(400px, 51vh, 520px);
  }

  .book-fluid {
    --book-width: clamp(205px, 26vw, 276px);
    --book-height: clamp(460px, 59vh, 600px);
  }

  .book-cat {
    --book-width: clamp(54px, 6.8vw, 70px);
    --book-height: clamp(185px, 24vh, 235px);
    margin-left: clamp(12px, 2vw, 22px);
  }

  .shelf-board {
    bottom: 7vh;
  }
}

@media (max-width: 760px) {
  body {
    min-height: 100dvh;
  }

  .library-header {
    top: calc(17px + env(safe-area-inset-top));
    right: calc(18px + env(safe-area-inset-right));
    left: calc(18px + env(safe-area-inset-left));
  }

  .library-header .index-link {
    font-size: 7px;
    letter-spacing: .08em;
  }

  .plus-trigger {
    top: calc(11px + env(safe-area-inset-top));
    left: calc(9px + env(safe-area-inset-left));
  }

  .shelf-scene {
    min-height: 100dvh;
    padding: calc(86px + env(safe-area-inset-top)) 8px calc(7vh + env(safe-area-inset-bottom));
  }

  .bookshelf {
    justify-content: center;
    gap: clamp(4px, 1.45vw, 7px);
    min-height: 68dvh;
    padding: 0 4px;
    overflow: visible;
  }

  .book-spine {
    padding: 17px 6px 14px;
  }

  .spine-title {
    font-size: clamp(10px, 3.25vw, 13px);
  }

  .book-travel {
    --book-width: clamp(67px, 21.5vw, 92px);
    --book-height: clamp(270px, 47dvh, 365px);
  }

  .book-portrait {
    --book-width: clamp(42px, 13vw, 56px);
    --book-height: clamp(284px, 50dvh, 388px);
  }

  .book-fluid {
    --book-width: clamp(84px, 27vw, 116px);
    --book-height: clamp(315px, 56dvh, 435px);
  }

  .book-cat {
    --book-width: clamp(33px, 10.5vw, 45px);
    --book-height: clamp(132px, 22dvh, 174px);
    margin-right: 0;
    margin-left: 3px;
  }

  .shelf-board {
    bottom: calc(7vh + env(safe-area-inset-bottom));
  }

  .about-sheet {
    top: calc(53px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    width: min(280px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .book-reader {
    max-height: 100dvh;
    padding-top: calc(54px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .bound-book {
    width: min(94vw, 610px);
    aspect-ratio: 1.16 / 1;
  }

  .reader-close {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    width: 42px;
    height: 42px;
  }
}

@media (hover: none) {
  .shelf-book:hover {
    filter: drop-shadow(5px 5px 2px rgba(56,43,27,.12));
    transform: none;
  }

  .shelf-book:active {
    transform: translateY(-6px);
  }
}

/* Volume 01 reads like handwriting across every physical page and cover. */
.book-reader[data-volume="01"] .reader-index,
.book-reader[data-volume="01"] .bound-book,
.book-reader[data-volume="01"] .bound-book * {
  font-family: var(--hand);
}

.book-reader[data-volume="01"] .page-mark,
.book-reader[data-volume="01"] .page-folio,
.book-reader[data-volume="01"] .page-corner,
.book-reader[data-volume="01"] .cover-outside > span,
.book-reader[data-volume="01"] .cover-outside > small {
  letter-spacing: .08em;
}

/* Travel opens as a large, self-contained atlas inside the physical book. */
.travel-volume {
  display: none;
}

.book-reader[data-volume="01"] {
  width: min(1240px, calc(100vw - 20px));
  padding-right: 18px;
  padding-left: 18px;
}

.book-reader[data-volume="01"] .reader-index {
  width: min(1160px, 94vw, calc((100dvh - 120px) * 1.62));
}

.book-reader[data-volume="01"] .bound-book {
  width: min(1160px, 94vw, calc((100dvh - 120px) * 1.62));
  aspect-ratio: 1.62 / 1;
}

.book-reader[data-volume="01"] .paper-page,
.book-reader[data-volume="01"] .paper-stack > .turning-page {
  display: none;
}

.travel-opening-blank { display: none; }

.book-reader[data-volume="01"] .travel-opening-blank {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.travel-opening-blank span {
  display: block;
  background: var(--paper-noise), #f1eadc;
}

.travel-opening-blank span:first-child {
  clip-path: polygon(.4% .4%, 99.7% 0, 100% 100%, .3% 99.5%);
  box-shadow: inset -25px 0 27px -31px rgba(39, 28, 18, .72);
}

.travel-opening-blank span:last-child {
  clip-path: polygon(0 0, 99.5% .5%, 100% 99.6%, 0 100%);
  box-shadow: inset 25px 0 27px -31px rgba(39, 28, 18, .72);
}

.book-reader[data-volume="01"] .travel-volume {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
  isolation: isolate;
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.book-reader[data-volume="01"] .bound-book.is-travel-ready .travel-volume {
  visibility: visible;
  opacity: 1;
}

.travel-globe-page,
.travel-entry-page,
.travel-sheet-face {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(103, 83, 56, .08)),
    var(--paper-noise),
    #f1eadc;
  color: #2c2922;
}

.travel-globe-page::after,
.travel-entry-page::after,
.travel-sheet-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: var(--paper-noise);
}

.travel-globe-page {
  left: 0;
  z-index: 10;
  padding: 6% 6.5% 5.5%;
  clip-path: polygon(.4% .4%, 99.7% 0, 100% 100%, .3% 99.5%);
  box-shadow: inset -25px 0 27px -31px rgba(39, 28, 18, .72);
}

.travel-globe-page::before,
.travel-sheet-back::before {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  right: -2px;
  bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, transparent, rgba(57, 43, 28, .2));
  pointer-events: none;
}

.travel-volume-kicker {
  position: relative;
  z-index: 3;
  margin: 0;
  color: #777064;
  font-size: clamp(7px, .72vw, 10px);
  letter-spacing: .1em;
}

.book-globe-wrap {
  position: absolute;
  z-index: 6;
  top: 8%;
  right: 2.5%;
  bottom: 7%;
  left: 2.5%;
}

#book-globe {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}

#book-globe.grabbing { cursor: grabbing !important; }

.book-globe-tip {
  position: absolute;
  z-index: 8;
  padding: 5px 8px;
  border: 1px solid rgba(55, 49, 40, .2);
  background: rgba(244, 238, 225, .9);
  box-shadow: 2px 2px 0 rgba(55, 42, 28, .09);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px)) rotate(-2deg);
  transition: opacity .14s ease;
  white-space: nowrap;
  color: #2d2a24;
  font-size: 9px;
}

.book-globe-tip.show { opacity: 1; }

.book-globe-note {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 5.5%;
  margin: 0;
  color: #6f675c;
  font-size: clamp(10px, 1.3vw, 16px);
  transform: rotate(-2deg);
}

.travel-folio {
  position: absolute;
  z-index: 3;
  bottom: 5.5%;
  left: 6.5%;
  color: #81786b;
  font-size: 8px;
}

.travel-entry-page {
  right: 0;
  display: grid;
  place-items: center;
  padding: 7% 8% 8%;
  clip-path: polygon(0 0, 99.5% .5%, 100% 99.6%, 0 100%);
  box-shadow: inset 25px 0 27px -31px rgba(39, 28, 18, .72);
}

.travel-entry-gallery {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  width: 84%;
  max-height: 77%;
  transform: rotate(1.4deg);
}

.travel-entry-gallery figure {
  position: relative;
  min-width: 0;
  margin: 0;
}

.travel-entry-gallery figure:only-child {
  grid-column: 1 / -1;
  width: 82%;
  margin: auto;
}

.travel-entry-gallery img {
  display: block;
  width: 100%;
  height: clamp(110px, 17vw, 250px);
  object-fit: cover;
  box-shadow: 5px 7px 0 rgba(47, 37, 25, .15);
}

.travel-photo-mount {
  position: relative;
  isolation: isolate;
}

.travel-photo-mount > img { position: relative; z-index: 1; }

.travel-sticker {
  position: absolute;
  z-index: 2;
  top: var(--sticker-top);
  left: var(--sticker-left);
  width: var(--sticker-width);
  height: var(--sticker-height);
  pointer-events: none;
  transform: rotate(var(--sticker-rotate));
  transform-origin: center;
}

.sticker-washi {
  opacity: .78;
  background:
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.13) 8px 9px),
    var(--paper-noise),
    var(--sticker-color);
  clip-path: polygon(1% 5%, 98% 0, 100% 88%, 97% 100%, 2% 94%, 0 14%);
  box-shadow: 1px 2px 2px rgba(40, 31, 24, .1);
}

.sticker-vellum {
  opacity: .56;
  border: 1px solid color-mix(in srgb, var(--sticker-accent), transparent 66%);
  background:
    linear-gradient(105deg, rgba(255,255,255,.2), transparent 55%),
    color-mix(in srgb, var(--sticker-color), transparent 25%);
  box-shadow: inset 0 0 7px rgba(255,255,255,.24), 2px 3px 3px rgba(41, 31, 22, .07);
  clip-path: polygon(0 4%, 96% 1%, 100% 94%, 5% 100%);
}

.sticker-fiber {
  opacity: .9;
  background:
    repeating-linear-gradient(8deg, rgba(255,255,255,.12) 0 1px, transparent 1px 5px),
    var(--paper-noise),
    var(--sticker-color);
  clip-path: polygon(2% 0, 99% 5%, 96% 96%, 88% 100%, 1% 94%, 0 8%);
  box-shadow: 2px 3px 2px rgba(38, 29, 21, .13);
}

.sticker-cellophane {
  opacity: .54;
  border: 1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(112deg, rgba(255,255,255,.36), transparent 23% 67%, rgba(255,255,255,.14)),
    color-mix(in srgb, var(--sticker-color), transparent 32%);
  box-shadow: inset 1px 0 rgba(255,255,255,.24), 2px 3px 3px rgba(24, 41, 52, .08);
  mix-blend-mode: multiply;
}

.sticker-film {
  opacity: .7;
  border: 1px solid color-mix(in srgb, var(--sticker-accent), #2c2119 34%);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 3px, transparent 3px 9px),
    color-mix(in srgb, var(--sticker-color), transparent 18%);
  box-shadow: 2px 3px 2px rgba(34, 25, 18, .16);
}

.travel-entry-gallery figure:only-child img {
  height: auto;
  max-height: min(52vh, 490px);
  object-fit: contain;
}

.travel-entry-gallery figcaption {
  margin-top: 9px;
  color: #756c5f;
  font-size: clamp(7px, .7vw, 9px);
  letter-spacing: .09em;
}

.travel-entry-gallery figcaption time {
  display: block;
  margin-top: 3px;
  color: rgba(74, 68, 59, .66);
  font-size: .88em;
  letter-spacing: .08em;
}

.travel-entry-gallery img[role="button"] {
  cursor: zoom-in;
}

.travel-entry-gallery img[role="button"]:focus-visible {
  outline: 1px solid #2440d8;
  outline-offset: 4px;
}

.travel-lightbox {
  width: min(94vw, 1120px);
  max-width: 94vw;
  max-height: 94dvh;
  padding: 18px;
  border: 0;
  background:
    var(--paper-noise),
    #f3eddf;
  box-shadow: 0 22px 80px rgba(22, 19, 15, .48);
}

.travel-lightbox::backdrop {
  background: rgba(31, 28, 24, .82);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.travel-lightbox figure { margin: 0; }

.travel-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(94dvh - 70px);
  margin: auto;
  object-fit: contain;
}

.travel-lightbox figcaption {
  margin-top: 9px;
  color: #5d574d;
  font-family: var(--hand);
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
}

.travel-lightbox .lightbox-close {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: rgba(243, 237, 223, .88);
  color: #292720;
  font: 25px/1 var(--mono);
  cursor: pointer;
}

.travel-entry-gallery.is-empty {
  width: 76%;
  height: 68%;
  border: 1px solid rgba(79, 70, 57, .16);
  background:
    repeating-linear-gradient(to bottom, transparent 0 30px, rgba(69, 102, 126, .1) 30px 31px),
    rgba(247, 242, 231, .34);
  transform: rotate(.6deg);
}

.travel-image-empty {
  align-self: end;
  grid-column: 1 / -1;
  margin: 0 10% 9%;
  color: #888074;
  font-size: clamp(7px, .72vw, 9px);
  letter-spacing: .08em;
}

.travel-entry-aside {
  position: absolute;
  z-index: 3;
  right: 6%;
  bottom: 7%;
  max-width: 42%;
  margin: 0;
  color: #2440b8;
  text-align: right;
  font-size: clamp(10px, 1.15vw, 15px);
  transform: rotate(-4deg);
}

.travel-entry-page .travel-folio { right: 6.5%; left: auto; }

.travel-index-sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 12;
  width: 50%;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform 1.05s cubic-bezier(.2, .72, .12, 1), z-index 0s linear .55s;
}

.bound-book.is-travel-entry .travel-index-sheet {
  z-index: 11;
  transform: rotateY(-178deg);
}

.bound-book.is-travel-entry .travel-globe-page { z-index: 1; }

.travel-leaf {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 16;
  display: none;
  width: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: left center;
}

.travel-leaf.is-turning-forward,
.travel-leaf.is-turning-backward {
  display: block;
}

.travel-leaf.is-turning-forward {
  animation: travel-leaf-forward .82s cubic-bezier(.2, .72, .12, 1) both;
}

.travel-leaf.is-turning-backward {
  animation: travel-leaf-backward .82s cubic-bezier(.2, .72, .12, 1) both;
}

.travel-leaf-face {
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(69, 54, 37, .08);
  background:
    linear-gradient(90deg, rgba(83, 63, 41, .1), transparent 7%, transparent 95%, rgba(89, 68, 44, .06)),
    var(--paper-noise),
    #f1eadc;
  box-shadow: 8px 4px 18px rgba(44, 31, 20, .16);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.travel-leaf-back {
  transform: rotateY(180deg);
  box-shadow: -8px 4px 18px rgba(44, 31, 20, .16);
}

@keyframes travel-leaf-forward {
  from { transform: rotateY(0deg) translateZ(7px); }
  to { transform: rotateY(-178deg) translateZ(7px); }
}

@keyframes travel-leaf-backward {
  from { transform: rotateY(-178deg) translateZ(7px); }
  to { transform: rotateY(0deg) translateZ(7px); }
}

.travel-page-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 19;
  display: none;
  grid-template-columns: 1fr 1fr;
  height: 12%;
  pointer-events: none;
  transform: translateZ(120px);
}

.book-reader[data-volume="01"] .travel-page-footer { display: grid; }

.book-reader[data-volume="01"] .bound-book:not(.is-open) .travel-page-footer {
  visibility: hidden;
  opacity: 0;
}

.book-reader[data-volume="01"] .bound-book.is-open .travel-page-footer {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease .75s;
}

.book-reader[data-volume="01"] .bound-book:not(.is-travel-ready) .travel-page-footer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.book-reader[data-volume="01"] .bound-book.is-open .front-cover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .82s cubic-bezier(.17, .78, .12, 1),
    opacity .01s linear .82s,
    visibility 0s linear .82s;
}

.book-reader[data-volume="01"] .cover-outside {
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  transform: translateZ(1px);
}

.book-reader[data-volume="01"] .cover-inside > * { visibility: hidden; }

.book-reader[data-volume="01"] .bound-book.is-open .cover-outside {
  animation: travel-cover-ink-hide .82s linear both;
}

@keyframes travel-cover-ink-hide {
  0%, 44% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.book-reader[data-volume="01"] .bound-book:not(.is-open) .travel-page-footer button {
  pointer-events: none;
}

.travel-page-footer button {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 0 7% 3.5%;
  border: 0;
  background: transparent;
  color: #70685d;
  cursor: pointer;
  pointer-events: auto;
  font: inherit;
  font-family: Arial, sans-serif !important;
  font-size: clamp(15px, 1.55vw, 22px);
  font-weight: 300;
  letter-spacing: 0;
  opacity: .72;
  transition: color .18s ease, opacity .18s ease;
}

.travel-page-footer button:first-child { justify-content: flex-start; }
.travel-page-footer button:last-child { justify-content: flex-end; }
.travel-page-footer button:hover,
.travel-page-footer button:focus-visible { color: #2440b8; opacity: 1; outline: 0; }
.travel-page-footer button:disabled { cursor: default; opacity: .16; }

.travel-sheet-face {
  inset: 0;
  width: 100%;
  padding: 8% 8% 6%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.travel-sheet-front {
  box-shadow: inset 24px 0 27px -31px rgba(39, 28, 18, .72), 2px 0 2px rgba(63, 45, 28, .14);
  clip-path: polygon(0 0, 99.6% .5%, 100% 99.3%, 0 100%);
}

.travel-sheet-front h2 {
  margin: 10% 0 0;
  font-size: clamp(27px, 3.4vw, 50px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.045em;
}

.travel-sheet-front h2 em { color: #b73b31; font-weight: 400; }

.travel-book-list {
  display: grid;
  margin-top: 13%;
  border-top: 1px solid rgba(55, 49, 40, .23);
  border-bottom: 1px solid rgba(55, 49, 40, .23);
}

.travel-book-list button {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  min-height: clamp(34px, 4.3vw, 52px);
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(55, 49, 40, .1);
  background: transparent;
  color: #302d27;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: clamp(9px, 1.05vw, 14px);
  transition: padding .18s ease, color .18s ease;
}

.travel-book-list button:last-child { border-bottom: 0; }
.travel-book-list button span { color: #807769; font-size: .75em; }
.travel-book-list button:hover,
.travel-book-list button:focus-visible,
.travel-book-list button.is-hovered,
.travel-book-list button.is-active {
  padding-left: 6px;
  color: #2440b8;
  outline: 0;
}

.travel-sheet-hint {
  position: absolute;
  right: 8%;
  bottom: 12%;
  margin: 0;
  color: #756d62;
  font-size: clamp(8px, .85vw, 11px);
  transform: rotate(-2deg);
}

.travel-sheet-back {
  transform: rotateY(180deg);
  clip-path: polygon(.4% .4%, 100% 0, 100% 100%, .2% 99.5%);
  box-shadow: inset -24px 0 27px -31px rgba(39, 28, 18, .72);
}

.travel-sheet-back h2 {
  max-width: 9ch;
  margin: 13% 0 0;
  font-size: clamp(28px, 3.7vw, 55px);
  font-weight: 400;
  line-height: .88;
  letter-spacing: -.05em;
}

.travel-entry-copy {
  max-width: 29ch;
  margin: 10% 0 0;
  color: #514c43;
  font-size: clamp(10px, 1.18vw, 16px);
  line-height: 1.55;
}

.travel-pencil-line {
  display: block;
  width: 58px;
  margin-top: 7%;
  border-top: 1px solid #7a7267;
}

.travel-entry-hand {
  position: absolute;
  right: 8%;
  bottom: 12%;
  max-width: 56%;
  margin: 0;
  color: #2440b8;
  text-align: right;
  font-size: clamp(10px, 1.1vw, 15px);
  transform: rotate(-4deg);
}

.travel-sheet-back .travel-folio { right: auto; left: 8%; }

.book-reader[data-volume="01"] .turn-page[hidden] { display: none; }

/* Volume 02 opens as a restrained film programme rather than a generic contents page. */
.portrait-volume { display: none; }

.book-reader[data-volume="02"] {
  width: min(1120px, calc(100vw - 24px));
}

.book-reader[data-volume="02"] .reader-index,
.book-reader[data-volume="02"] .bound-book {
  width: min(980px, 90vw, calc((100dvh - 120px) * 1.54));
}

.book-reader[data-volume="02"] .paper-page,
.book-reader[data-volume="02"] .paper-stack > .turning-page {
  display: none;
}

.book-reader[data-volume="02"] .portrait-volume {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.book-reader[data-volume="02"] .bound-book.is-portrait-ready .portrait-volume {
  visibility: visible;
  opacity: 1;
}

.book-reader[data-volume="02"] .bound-book.is-open .front-cover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .82s cubic-bezier(.17, .78, .12, 1),
    opacity .01s linear .82s,
    visibility 0s linear .82s;
}

.book-reader[data-volume="02"] .cover-outside {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(1px);
}

.book-reader[data-volume="02"] .cover-inside > * { visibility: hidden; }

.book-reader[data-volume="02"] .bound-book.is-open .cover-outside {
  animation: travel-cover-ink-hide .82s linear both;
}

.portrait-spread {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.portrait-spread.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.portrait-page {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 7.5% 7.5% 6%;
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(103, 83, 56, .07)),
    var(--paper-noise),
    #f2ecdf;
  color: #25231f;
}

.portrait-page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  background-image: var(--paper-noise);
  mix-blend-mode: multiply;
}

.portrait-page-left {
  clip-path: polygon(.4% .4%, 99.7% 0, 100% 100%, .3% 99.5%);
  box-shadow: inset -25px 0 27px -31px rgba(39, 28, 18, .72);
}

.portrait-page-right {
  clip-path: polygon(0 0, 99.5% .5%, 100% 99.6%, 0 100%);
  box-shadow: inset 25px 0 27px -31px rgba(39, 28, 18, .72);
}

.portrait-page-left::before,
.portrait-page-right::before {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
}

.portrait-page-left::before {
  right: -2px;
  background: linear-gradient(90deg, transparent, rgba(30, 22, 17, .2));
}

.portrait-page-right::before {
  left: -2px;
  background: linear-gradient(90deg, rgba(30, 22, 17, .2), transparent);
}

.portrait-title-page {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.024) 0 1px, transparent 1px 5px),
    linear-gradient(115deg, #17191b, #26272a 72%, #151719);
  color: #eee7d8;
}

.portrait-kicker {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #81786d;
  font: 500 clamp(8px, .78vw, 11px)/1.4 var(--mono);
  letter-spacing: .14em;
}

.portrait-title-page .portrait-kicker { color: rgba(238,231,216,.58); }

.portrait-title-lockup {
  position: relative;
  z-index: 2;
  margin-top: 18%;
}

.portrait-title-lockup > span {
  display: block;
  margin-bottom: 9%;
  color: #b6402f;
  font: 500 clamp(8px, .8vw, 11px)/1 var(--mono);
  letter-spacing: .17em;
}

.portrait-title-lockup h2 {
  margin: 0;
  font: 400 clamp(35px, 4.9vw, 68px)/.82 var(--display);
  letter-spacing: -.07em;
}

.portrait-title-lockup h2 em {
  color: #b6402f;
  font-weight: 400;
}

.portrait-title-lockup p {
  margin: 8% 0 0;
  font: 400 clamp(13px, 1.4vw, 19px)/1.4 var(--serif);
  letter-spacing: .18em;
}

.portrait-frame-mark {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 9%;
  width: 34%;
  height: 1px;
  background: #b6402f;
}

.portrait-folio {
  position: absolute;
  z-index: 3;
  right: 7.5%;
  bottom: 5%;
  color: #80776b;
  font: 500 10px/1 var(--mono);
  letter-spacing: .12em;
}

.portrait-title-page .portrait-folio { color: rgba(238,231,216,.48); }
.portrait-page-left .portrait-folio { right: auto; left: 7.5%; }

.portrait-page h3 {
  position: relative;
  z-index: 2;
  margin: 12% 0 0;
  font: 400 clamp(28px, 3.4vw, 48px)/.88 var(--display);
  letter-spacing: -.055em;
}

.portrait-page h3 span {
  display: inline-block;
  margin-top: .35em;
  color: #b6402f;
  font: 400 .42em/1.2 var(--serif);
  letter-spacing: .08em;
}

.portrait-intro-page > p:not(.portrait-kicker),
.portrait-exhibition-page > p:not(.portrait-kicker),
.portrait-end-page > p:not(.portrait-kicker) {
  position: relative;
  z-index: 2;
  max-width: 35ch;
  margin: 6% 0 0;
  font: 400 clamp(12px, 1.15vw, 16px)/1.62 var(--serif);
}

.portrait-intro-page > p[lang="en"],
.portrait-exhibition-page > p[lang="en"],
.portrait-end-page > p[lang="en"] {
  color: #686157;
  font-style: italic;
}

.portrait-credits {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 10%;
  left: 8%;
  margin: 0;
  border-top: 1px solid rgba(51, 46, 40, .3);
}

.portrait-credits div {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  padding: 5px 0;
  border-bottom: 1px solid rgba(51, 46, 40, .13);
}

.portrait-credits dt,
.portrait-credits dd {
  margin: 0;
  font: 500 clamp(8px, .75vw, 10px)/1.2 var(--mono);
  letter-spacing: .08em;
}

.portrait-credits dd { color: #6f675c; }

.portrait-room-page {
  isolation: isolate;
}

.portrait-room-dark {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, #252426, #171819);
  color: #eee7d8;
}

.portrait-room-dark .portrait-kicker,
.portrait-room-dark .portrait-folio { color: rgba(238,231,216,.52); }

.portrait-room-number {
  position: absolute;
  z-index: 0;
  top: 8%;
  right: 4%;
  color: rgba(182,64,47,.13);
  font: 400 clamp(105px, 15vw, 210px)/.8 var(--display);
  letter-spacing: -.09em;
}

.portrait-room-dark .portrait-room-number { color: rgba(238,231,216,.07); }

.portrait-room-page h3 {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 19%;
  left: 8%;
  margin: 0;
}

.portrait-room-page h3 span { color: #b6402f; }

.portrait-room-copy {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 34%;
  left: 8%;
  margin: 0;
  color: #676057;
  font: 400 clamp(12px, 1.1vw, 15px)/1.6 var(--serif);
}

.portrait-room-tags {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 10%;
  left: 8%;
  margin: 0;
  color: #8a8175;
  font: 500 clamp(8px, .78vw, 11px)/1.3 var(--mono);
  letter-spacing: .13em;
}

.portrait-room-dark .portrait-room-tags { color: rgba(238,231,216,.43); }

.portrait-exhibition-line {
  position: absolute;
  z-index: 2;
  right: 9%;
  bottom: 12%;
  width: 34%;
  height: 1px;
  background: #b6402f;
}

.portrait-end-page a {
  position: absolute;
  z-index: 2;
  right: 8%;
  bottom: 15%;
  border-bottom: 1px solid #27241f;
  padding-bottom: 4px;
  color: #27241f;
  text-decoration: none;
  font: 500 clamp(10px, 1vw, 14px)/1 var(--mono);
  letter-spacing: .12em;
}

.portrait-end-page a span { color: #b6402f; font-size: 1.35em; }

.portrait-leaf {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 16;
  display: none;
  width: 50%;
  pointer-events: none;
  transform-style: preserve-3d;
  transform-origin: left center;
}

.portrait-leaf.is-turning-forward,
.portrait-leaf.is-turning-backward { display: block; }

.portrait-leaf.is-turning-forward {
  animation: travel-leaf-forward .82s cubic-bezier(.2, .72, .12, 1) both;
}

.portrait-leaf.is-turning-backward {
  animation: travel-leaf-backward .82s cubic-bezier(.2, .72, .12, 1) both;
}

.portrait-leaf-face {
  position: absolute;
  inset: 0;
  border-left: 1px solid rgba(69, 54, 37, .08);
  background:
    linear-gradient(90deg, rgba(83,63,41,.1), transparent 7%, transparent 95%, rgba(89,68,44,.06)),
    var(--paper-noise),
    #f2ecdf;
  box-shadow: 8px 4px 18px rgba(44, 31, 20, .16);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.portrait-leaf-back {
  transform: rotateY(180deg);
  box-shadow: -8px 4px 18px rgba(44, 31, 20, .16);
}

.portrait-page-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 19;
  display: none;
  grid-template-columns: 1fr 1fr;
  height: 12%;
  pointer-events: none;
  transform: translateZ(120px);
}

.book-reader[data-volume="02"] .portrait-page-footer { display: grid; }

.book-reader[data-volume="02"] .bound-book:not(.is-portrait-ready) .portrait-page-footer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.book-reader[data-volume="02"] .bound-book.is-portrait-ready .portrait-page-footer {
  visibility: visible;
  opacity: 1;
  transition: opacity .2s ease;
}

.portrait-page-footer button {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  padding: 0 7% 3.5%;
  border: 0;
  background: transparent;
  color: #70685d;
  cursor: pointer;
  pointer-events: auto;
  font: 300 clamp(15px, 1.55vw, 22px)/1 Arial, sans-serif;
  opacity: .72;
  transition: color .18s ease, opacity .18s ease;
}

.portrait-page-footer button:first-child { justify-content: flex-start; }
.portrait-page-footer button:last-child { justify-content: flex-end; }
.portrait-page-footer button:hover,
.portrait-page-footer button:focus-visible { color: #b6402f; opacity: 1; outline: 0; }
.portrait-page-footer button:disabled { cursor: default; opacity: .14; }

.book-reader[data-volume="02"] .turn-page[hidden] { display: none; }

/* Volume 03: black paper, wet pigment, then a direct transition into the simulation. */
.fluid-transition-volume { display: none; }

.book-reader[data-volume="03"] {
  width: min(1120px, calc(100vw - 24px));
}

.book-reader[data-volume="03"] .reader-index,
.book-reader[data-volume="03"] .bound-book {
  width: min(980px, 90vw, calc((100dvh - 120px) * 1.54));
}

.book-reader[data-volume="03"] .paper-page,
.book-reader[data-volume="03"] .paper-stack > .turning-page {
  display: none;
}

.book-reader[data-volume="03"] .fluid-transition-volume {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  grid-template-columns: 1fr 1fr;
  visibility: hidden;
  overflow: hidden;
  opacity: 0;
  transform: scale(.995);
  transition: opacity .2s ease, transform .42s ease, filter .42s ease;
}

.book-reader[data-volume="03"] .bound-book.is-fluid-ready .fluid-transition-volume {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.book-reader[data-volume="03"] .bound-book.is-open .front-cover {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition:
    transform .74s cubic-bezier(.17, .78, .12, 1),
    opacity .01s linear .74s,
    visibility 0s linear .74s;
}

.book-reader[data-volume="03"] .cover-outside {
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: translateZ(1px);
}

.book-reader[data-volume="03"] .cover-inside > * { visibility: hidden; }

.book-reader[data-volume="03"] .bound-book.is-open .cover-outside {
  animation: travel-cover-ink-hide .74s linear both;
}

.fluid-transition-page {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 55% 46%, rgba(70,75,85,.16), transparent 38%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    var(--paper-noise),
    #0e1012;
  color: #e7e3da;
}

.fluid-transition-page::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .25;
  background-image: var(--paper-noise);
  mix-blend-mode: screen;
}

.fluid-transition-left {
  clip-path: polygon(.4% .4%, 99.7% 0, 100% 100%, .3% 99.5%);
  box-shadow: inset -32px 0 34px -33px rgba(0, 0, 0, .9);
}

.fluid-transition-right {
  clip-path: polygon(0 0, 99.5% .5%, 100% 99.6%, 0 100%);
  box-shadow: inset 32px 0 34px -33px rgba(0, 0, 0, .9);
}

.fluid-transition-index,
.fluid-transition-folio {
  position: absolute;
  z-index: 10;
  margin: 0;
  color: rgba(231,227,218,.48);
  font: 500 clamp(8px, .78vw, 11px)/1 var(--mono);
  letter-spacing: .15em;
}

.fluid-transition-index { top: 7%; left: 7%; }
.fluid-transition-folio { bottom: 7%; left: 7%; }
.fluid-transition-right .fluid-transition-folio { right: 7%; left: auto; }

.fluid-spine-mark {
  position: absolute;
  z-index: 7;
  top: 6%;
  right: 0;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(transparent, rgba(176,184,197,.3) 30%, rgba(176,184,197,.3) 70%, transparent);
}

.fluid-transition-title {
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 9%;
  width: 78%;
  opacity: 0;
  transform: translateY(-42%);
}

.is-fluid-ready .fluid-transition-title {
  animation: fluid-title-arrive 1.65s cubic-bezier(.22,.76,.18,1) .5s both;
}

.fluid-transition-title p {
  margin: 0 0 8%;
  color: rgba(231,227,218,.48);
  font: 500 clamp(8px, .8vw, 11px)/1 var(--mono);
  letter-spacing: .16em;
}

.fluid-transition-title h2 {
  margin: 0;
  font: 400 clamp(34px, 4.7vw, 66px)/.82 var(--display);
  letter-spacing: -.07em;
}

.fluid-transition-title h2 em {
  color: #7789a8;
  font-weight: 400;
}

.fluid-transition-title > span {
  display: block;
  margin-top: 8%;
  color: rgba(231,227,218,.64);
  font: 400 clamp(11px, 1.12vw, 15px)/1.5 var(--serif);
  letter-spacing: .08em;
}

.fluid-enter {
  position: absolute;
  z-index: 10;
  right: 7%;
  bottom: 7%;
  border-bottom: 1px solid rgba(231,227,218,.48);
  padding: 5px 0;
  color: rgba(231,227,218,.76);
  text-decoration: none;
  font: 500 clamp(10px, 1vw, 14px)/1 var(--mono);
  letter-spacing: .16em;
  opacity: 0;
  transform: translateY(8px);
}

.fluid-enter span { color: #7789a8; font-size: 1.25em; }

.is-fluid-ready .fluid-enter {
  animation: fluid-enter-arrive .8s ease 1.65s both;
}

.fluid-enter:hover,
.fluid-enter:focus-visible {
  color: #fff;
  border-bottom-color: #7789a8;
  outline: 0;
}

.fluid-ink {
  position: absolute;
  z-index: 3;
  display: block;
  opacity: 0;
  border-radius: 44% 56% 63% 37% / 58% 42% 58% 42%;
  background:
    radial-gradient(circle at 46% 48%, rgba(146,158,177,.3) 0 7%, rgba(69,79,96,.24) 28%, rgba(25,29,35,.08) 58%, transparent 73%);
  filter: blur(13px);
  mix-blend-mode: screen;
  transform: scale(.12) rotate(-8deg);
  transform-origin: center;
}

.fluid-ink::before,
.fluid-ink::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(112,124,143,.2), transparent 70%);
}

.fluid-ink::before { inset: 18% -12% -9% 26%; }
.fluid-ink::after { inset: -8% 32% 34% -18%; }

.fluid-ink-one { top: 8%; right: -20%; width: 78%; aspect-ratio: 1; }
.fluid-ink-two { bottom: -24%; left: 4%; width: 92%; aspect-ratio: 1; }
.fluid-ink-three { top: -28%; left: -22%; width: 96%; aspect-ratio: 1; }
.fluid-ink-four { right: -18%; bottom: 0; width: 72%; aspect-ratio: 1; }

.is-fluid-ready .fluid-ink-one { animation: fluid-ink-bloom 2.35s cubic-bezier(.16,.7,.18,1) .08s both; }
.is-fluid-ready .fluid-ink-two { animation: fluid-ink-bloom 2.7s cubic-bezier(.16,.7,.18,1) .36s both; }
.is-fluid-ready .fluid-ink-three { animation: fluid-ink-bloom 2.5s cubic-bezier(.16,.7,.18,1) .2s both; }
.is-fluid-ready .fluid-ink-four { animation: fluid-ink-bloom 2.4s cubic-bezier(.16,.7,.18,1) .54s both; }

@keyframes fluid-ink-bloom {
  0% { opacity: 0; border-radius: 48% 52% 57% 43% / 55% 45% 58% 42%; transform: scale(.12) rotate(-8deg); filter: blur(18px); }
  42% { opacity: .62; border-radius: 61% 39% 46% 54% / 36% 59% 41% 64%; }
  100% { opacity: .34; border-radius: 38% 62% 66% 34% / 63% 34% 66% 37%; transform: scale(1.25) rotate(7deg); filter: blur(9px); }
}

@keyframes fluid-title-arrive {
  from { opacity: 0; transform: translateY(-36%); filter: blur(5px); }
  to { opacity: 1; transform: translateY(-50%); filter: blur(0); }
}

@keyframes fluid-enter-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.book-reader[data-volume="03"] .turn-page[hidden] { display: none; }

@media (max-width: 760px) {
  .book-reader[data-volume="01"] {
    padding-top: calc(60px + env(safe-area-inset-top));
    padding-right: 6px;
    padding-left: 6px;
  }

  .book-reader[data-volume="01"] .reader-index,
  .book-reader[data-volume="01"] .bound-book {
    width: min(96vw, 660px, calc((100dvh - 130px) * 1.2));
  }

  .book-reader[data-volume="01"] .bound-book {
    aspect-ratio: 1.2 / 1;
  }

  .travel-globe-page { padding: 7% 6% 6%; }
  .book-globe-wrap { top: 12%; right: 1%; bottom: 13%; left: 1%; }
  .book-globe-note { right: 5%; bottom: 8%; max-width: 66%; font-size: 9px; }
  .travel-volume-kicker { font-size: 6px; }
  .travel-sheet-face { padding: 8% 7% 6%; }
  .travel-sheet-front h2 { margin-top: 10%; font-size: clamp(21px, 6vw, 34px); }
  .travel-book-list { margin-top: 12%; }
  .travel-book-list button { grid-template-columns: 20px 1fr; min-height: 29px; font-size: clamp(7px, 2vw, 11px); }
  .travel-sheet-hint { max-width: 80%; font-size: 7px; text-align: right; }
  .travel-sheet-back h2 { margin-top: 10%; font-size: clamp(21px, 6.2vw, 36px); }
  .travel-entry-copy { margin-top: 9%; font-size: clamp(8px, 2.2vw, 12px); line-height: 1.4; }
  .travel-entry-hand { bottom: 9%; font-size: 8px; }
  .travel-entry-gallery { width: 88%; gap: 6px; }
  .travel-entry-gallery img { height: 18vw; }
  .travel-entry-gallery figure:only-child img { max-height: 56vw; }
  .travel-entry-gallery figcaption { margin-top: 5px; font-size: 6px; }
  .travel-entry-gallery figcaption time { margin-top: 2px; font-size: 6px; }
  .travel-entry-gallery.is-empty { width: 78%; height: 65%; }
  .travel-entry-aside { bottom: 7%; font-size: 8px; }
  .travel-folio { font-size: 6px; }
  .book-globe-tip { padding: 3px 5px; font-size: 7px; }
  .travel-page-footer { height: 14%; }
  .travel-page-footer button { padding-right: 6%; padding-bottom: 5%; padding-left: 6%; font-size: 18px; }
  .travel-lightbox { width: calc(100vw - 12px); max-width: calc(100vw - 12px); padding: 7px; }
  .travel-lightbox img { max-height: calc(100dvh - 54px); }
  .travel-lightbox .lightbox-close { top: 10px; right: 10px; width: 42px; height: 42px; }

  .book-reader[data-volume="02"] {
    padding-top: calc(58px + env(safe-area-inset-top));
    padding-right: 6px;
    padding-left: 6px;
  }

  .book-reader[data-volume="02"] .reader-index,
  .book-reader[data-volume="02"] .bound-book {
    width: min(96vw, 620px, calc((100dvh - 128px) * .98));
  }

  .book-reader[data-volume="02"] .bound-book { aspect-ratio: .98 / 1; }
  .portrait-page { padding: 8% 7% 7%; }
  .portrait-kicker { font-size: 7px; }
  .portrait-title-lockup { margin-top: 28%; }
  .portrait-title-lockup > span { font-size: 7px; line-height: 1.35; }
  .portrait-title-lockup h2 { font-size: clamp(25px, 8vw, 37px); }
  .portrait-title-lockup p { font-size: 11px; }
  .portrait-page h3 { margin-top: 15%; font-size: clamp(20px, 6vw, 29px); }
  .portrait-intro-page > p:not(.portrait-kicker),
  .portrait-exhibition-page > p:not(.portrait-kicker),
  .portrait-end-page > p:not(.portrait-kicker) { margin-top: 8%; font-size: clamp(10px, 2.65vw, 12px); line-height: 1.45; }
  .portrait-credits { bottom: 9%; }
  .portrait-credits div { grid-template-columns: 1fr; gap: 2px; padding: 4px 0; }
  .portrait-credits dt,
  .portrait-credits dd { font-size: 7px; }
  .portrait-room-number { top: 12%; font-size: clamp(78px, 29vw, 118px); }
  .portrait-room-page h3 { bottom: 21%; margin: 0; font-size: clamp(20px, 6vw, 29px); }
  .portrait-room-copy { bottom: 39%; font-size: 10px; line-height: 1.45; }
  .portrait-room-tags { bottom: 11%; font-size: 6px; }
  .portrait-end-page a { bottom: 15%; font-size: 8px; }
  .portrait-page-footer { height: 13%; }
  .portrait-page-footer button { padding-right: 6%; padding-bottom: 5%; padding-left: 6%; font-size: 18px; }

  .book-reader[data-volume="03"] {
    padding-top: calc(58px + env(safe-area-inset-top));
    padding-right: 6px;
    padding-left: 6px;
  }

  .book-reader[data-volume="03"] .reader-index,
  .book-reader[data-volume="03"] .bound-book {
    width: min(96vw, 620px, calc((100dvh - 128px) * 1.18));
  }

  .book-reader[data-volume="03"] .bound-book { aspect-ratio: 1.18 / 1; }
  .fluid-transition-title { left: 8%; width: 84%; }
  .fluid-transition-title p { font-size: 6px; line-height: 1.35; }
  .fluid-transition-title h2 { font-size: clamp(23px, 7.2vw, 35px); }
  .fluid-transition-title > span { font-size: 9px; }
  .fluid-transition-index,
  .fluid-transition-folio { font-size: 6px; }
  .fluid-enter { font-size: 8px; }
  .fluid-ink { filter: blur(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .travel-index-sheet { transition-duration: .01ms; }
  .travel-leaf.is-turning-forward,
  .travel-leaf.is-turning-backward,
  .portrait-leaf.is-turning-forward,
  .portrait-leaf.is-turning-backward { animation-duration: .01ms; }

  .is-fluid-ready .fluid-ink,
  .is-fluid-ready .fluid-transition-title,
  .is-fluid-ready .fluid-enter { animation-duration: .01ms; animation-iteration-count: 1; }
}