@import url('assets/fonts/fonts.css');
:root {
  --cream:#f7f3ea;
  --ink:#322f25;
  --muted:#797769;
  --wine:#6b2535;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'DM Sans','Manrope',Arial,sans-serif;
  --ease:cubic-bezier(.22,.8,.2,1)
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased
}

button,a {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit
}

a {
  color:inherit;
  text-decoration:none
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--wine);
  outline-offset:7px
}

::selection {
  background:#dcc2c1
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.skip {
  position:fixed;
  left:20px;
  top:-80px;
  z-index:100;
  background:var(--cream);
  padding:15px
}

.skip:focus {
  top:15px
}

.collection-header {
  height:110px;
  max-width:1600px;
  margin:auto;
  padding:0 5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #403b2820
}

.collection-logo {
  font-size:23px;
  line-height:.78;
  font-weight:600;
  letter-spacing:-1.3px
}

.collection-logo span {
  display:block
}

.collection-logo i {
  font-family:var(--serif);
  font-size:29px;
  font-weight:500;
  letter-spacing:-1px
}

.collection-nav {
  display:flex;
  gap:33px;
  font-size:12px
}

.collection-nav a {
  padding:10px 0
}

.collection-nav a:hover {
  color:var(--wine)
}

.collection-nav .shop-link {
  border-bottom:1px solid #817862;
  padding-bottom:6px
}

.collection-nav .nav-all {
  color:var(--muted)
}

.collection-intro {
  max-width:1450px;
  margin:0 auto;
  padding:48px 5% 0;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px
}

.eyebrow {
  font-size:9px;
  letter-spacing:.19em;
  font-weight:500;
  margin:0 0 18px;
  text-transform:uppercase
}

.collection-intro h1 {
  font:500 clamp(44px,5.8vw,82px)/.97 var(--serif);
  letter-spacing:-.035em;
  margin:0
}

.collection-intro h1 i {
  color:var(--wine);
  font-weight:400
}

.intro-aside {
  max-width:260px;
  margin-bottom:3px
}

.intro-aside p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:0 0 17px
}

.interaction-note {
  font:italic 21px var(--serif);
  color:var(--wine);
  display:flex;
  align-items:center;
  gap:12px
}

.interaction-note span {
  font-style:normal;
  font-size:25px
}

.collection-stage {
  position:relative;
  max-width:1400px;
  min-height:475px;
  margin:16px auto 0
}

.scene-objects {
  position:relative
}

.shelf-stage {
  padding:32px 80px 35px;
  perspective:1500px
}

.shelf-stage:before {
  content:'';
  position:absolute;
  inset:30px 8% 70px;
  background:radial-gradient(ellipse at 45% 80%,#c4b8a850,transparent 69%);
  pointer-events:none
}

.library-row {
  position:relative;
  margin:auto;
  max-width:1110px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:34px;
  padding:0 28px;
  height:347px;
  z-index:2
}

.side-books,.slim-books {
  display:flex;
  align-items:flex-end;
  gap:3px;
  padding-bottom:6px
}

.side-books {
  padding-right:8px
}

.end-books {
  padding-left:10px
}

.shelf-filler {
  height:var(--fh);
  width:var(--fw);
  flex-shrink:0;
  background:linear-gradient(90deg,#0004,transparent 16%,#fff2 24%,transparent 60%,#0003),var(--filler-color);
  border-radius:3px 3px 0 0;
  box-shadow:3px 0 4px #0003,inset 0 0 0 1px #0001;
  transform:rotate(var(--lean));
  transform-origin:bottom;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 0;
  color:#f6ead2;
  position:relative;
  writing-mode:vertical-rl
}

.shelf-filler:before {
  content:'';
  position:absolute;
  inset:30px 4px;
  border-block:1px solid #ede0bb44
}

.shelf-filler>span {
  font:500 13px var(--serif);
  letter-spacing:.7px
}

.shelf-filler>small {
  font-size:7px;
  letter-spacing:2px
}

.slim-books {
  gap:4px;
  margin:0 -8px
}

.oak-shelf {
  height:22px;
  max-width:1200px;
  position:relative;
  margin:0 auto;
  background:repeating-linear-gradient(2deg,#3d200912 0px,#71462120 1px,transparent 2px,transparent 5px),linear-gradient(#a2825f,#8f6946 24%,#725038 89%,#4d3425);
  border-radius:1px 1px 3px 3px;
  box-shadow:0 3px 4px #3c211344,0 20px 20px -6px #47341e33,0 38px 40px -15px #48341922
}

.oak-shelf:before {
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-9px;
  height:9px;
  background:linear-gradient(#b69871,#c7a980);
  transform:perspective(80px) rotateX(10deg);
  transform-origin:bottom
}

.shelf-label {
  display:flex;
  justify-content:space-between;
  margin:26px auto 0;
  max-width:1140px;
  font-size:8px;
  letter-spacing:.15em;
  color:#8a8071
}

.book-pick {
  --bw:215px;
  --bh:300px;
  position:relative;
  display:block;
  width:var(--bw);
  height:var(--bh);
  flex-shrink:0;
  border:0;
  padding:0;
  background:none;
  text-align:left;
  color:inherit;
  perspective:1200px;
  z-index:3
}

.book-pick.journal {
  --book-bg:#d7a7a8;
  --book-ink:#692331
}

.book-pick.objects {
  --book-bg:#244b3e;
  --book-ink:#e7d6a3
}

.volume {
  --book-bg:#d7a7a8;
  --book-ink:#692331;
  position:relative;
  display:block;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .65s var(--ease);
  color:var(--book-ink);
  font-family:var(--serif)
}

.volume.objects {
  --book-bg:#244b3e;
  --book-ink:#e7d6a3
}

.shelf-stage .volume {
  transform:rotateY(-25deg) rotateZ(-2deg)
}

.shelf-stage .objects .volume {
  transform:rotateY(-20deg) rotateZ(2deg)
}

.shelf-stage .book-pick:hover .volume,.shelf-stage .book-pick:focus-visible .volume {
  transform:translateY(-15px) translateZ(35px) rotateY(-8deg) rotateZ(0deg)
}

.volume:after {
  content:'';
  position:absolute;
  inset:12px 6px 1px 10px;
  background:#33211466;
  filter:blur(12px);
  transform:translateZ(-17px) translate(11px,12px);
  pointer-events:none
}

.volume-front,.volume-back {
  position:absolute;
  inset:0;
  border-radius:1px 4px 4px 1px;
  background:var(--book-bg);
  transform-style:preserve-3d
}

.volume-front {
  transform:translateZ(14px);
  transform-origin:left center;
  box-shadow:inset 1px 0 #fff4,inset 10px 0 9px -6px #0006,inset -1px 0 #fff2,1px 0 1px #0003
}

.volume-back {
  transform:translateZ(-14px);
  box-shadow:0 1px 2px #0004
}

.cover-out,.cover-in {
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  border-radius:inherit
}

.cover-out {
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12% 9%;
  text-align:center;
  overflow:hidden;
  background:repeating-linear-gradient(0deg,#ffffff04 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#00000005 0 1px,transparent 1px 3px);
  border:1px solid #0001
}

.cover-out:before {
  content:'';
  position:absolute;
  inset:9px;
  border:1px solid currentColor;
  opacity:.27;
  pointer-events:none
}

.cover-out:after {
  content:'';
  position:absolute;
  inset:0;
  background: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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.17' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
  opacity:.25;
  pointer-events:none
}

.cover-in {
  transform:rotateY(180deg);
  background:repeating-linear-gradient(45deg,#a3ac9120 0 1px,transparent 1px 12px),#e9e4d5;
  display:grid;
  place-items:center;
  color:#9c9b80;
  box-shadow:inset -12px 0 20px -10px #0005
}

.cover-in svg {
  width:60px
}

.cover-kicker {
  font-family:var(--sans);
  font-size:7px;
  letter-spacing:.15em;
  line-height:1.6
}

.cover-name {
  font-size:43px;
  line-height:.9;
  letter-spacing:-1.8px;
  margin-top:28px;
  font-weight:500
}

.cover-name i {
  font-weight:400
}

.cover-art {
  width:69px;
  margin:auto
}

.cover-art svg {
  width:100%
}

.cover-foot {
  font:7px/1.6 var(--sans);
  letter-spacing:.18em;
  margin-top:auto
}

.cover-oval {
  border:1px solid #bda97790;
  border-radius:50%;
  width:53px;
  height:69px;
  display:grid;
  place-items:center;
  margin:auto;
  transform:rotate(-15deg)
}

.cover-oval i {
  font-size:51px;
  line-height:1;
  transform:rotate(15deg)
}

.objects .cover-name {
  font-size:40px
}

.volume-paper {
  position:absolute;
  inset:3px 4px 3px 5px;
  background:#ede7d5;
  transform:translateZ(11px);
  border-radius:0 3px 3px 0
}

.volume-edge {
  position:absolute;
  right:2px;
  top:4px;
  bottom:4px;
  width:25px;
  background:repeating-linear-gradient(90deg,#d5ccbb 0 1px,#f6eedc 1px 3px);
  transform-origin:right;
  transform:rotateY(90deg) translateX(50%);
  border-radius:2px
}

.volume-spine {
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:28px;
  transform-origin:left;
  transform:rotateY(-90deg) translateX(-50%);
  background:linear-gradient(90deg,#0005,#fff1 35%,#0003),var(--book-bg);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  writing-mode:vertical-rl;
  border-radius:3px;
  color:var(--book-ink);
  backface-visibility:hidden
}

.volume-spine b {
  font-size:16px;
  font-weight:500;
  letter-spacing:.06em
}

.volume-spine small {
  font:7px var(--sans)
}

.volume-top,.volume-bottom {
  position:absolute;
  left:4px;
  right:4px;
  height:25px;
  background:repeating-linear-gradient(0deg,#d6cbb9 0 1px,#f6eedc 1px 3px)
}

.volume-top {
  top:3px;
  transform-origin:top;
  transform:rotateX(90deg) translateY(-50%)
}

.volume-bottom {
  bottom:3px;
  transform-origin:bottom;
  transform:rotateX(-90deg) translateY(50%)
}

.pick-caption {
  position:absolute;
  top:calc(100% + 60px);
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  font-size:8px;
  letter-spacing:.1em;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity .4s,transform .4s;
  color:var(--wine)
}

.book-pick:hover .pick-caption,.book-pick:focus-visible .pick-caption {
  opacity:1;
  transform:translateY(0)
}

.book-pick.is-away .volume {
  visibility:hidden
}

.book-pick.is-away .pick-caption {
  opacity:0
}

.collection-footer {
  max-width:1400px;
  margin:0 auto;
  padding:24px 5% 32px;
  border-top:1px solid #403b2820;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.variant-switch {
  display:flex;
  gap:6px
}

.variant-switch a {
  border:1px solid transparent;
  border-radius:30px;
  padding:11px 16px;
  font-size:10px;
  color:var(--muted);
  transition:background .2s
}

.variant-switch a span {
  margin-right:8px;
  font-size:8px;
  opacity:.6
}

.variant-switch a[aria-current=page] {
  border-color:#b8b09f;
  color:var(--ink)
}

.variant-switch a:hover {
  background:#eae4d7
}

.footer-note {
  font:italic 18px var(--serif);
  color:#85806e
}

.footer-index {
  font-size:9px;
  letter-spacing:.15em;
  color:var(--muted)
}

body[data-collection=table] {
  --cream:#f1ede3;
  --ink:#383a2b;
  --wine:#4b5a38
}

.table-stage {
  min-height:495px;
  padding-top:14px;
  overflow:hidden
}

.table-stage .scene-objects {
  height:445px;
  max-width:1120px;
  margin:auto
}

.table-cloth {
  position:absolute;
  inset:0 -50% -60px;
  background:repeating-linear-gradient(90deg,#73552e05 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,#73552e04 0 1px,transparent 1px 4px),radial-gradient(ellipse at 45% 30%,#cbbd9b33,transparent 70%);
  transform:rotate(-3deg)
}

.table-cloth:after {
  content:'';
  position:absolute;
  top:-130px;
  left:10%;
  width:80%;
  height:90%;
  background:linear-gradient(100deg,transparent 30%,#b6a78718 30%,#b6a78718 47%,transparent 47%,transparent 70%,#b6a78715 70%,#b6a78715 85%,transparent 85%);
  filter:blur(3px);
  transform:skewY(12deg)
}

.table-books {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:60px
}

.table-books .book-pick {
  --bw:235px;
  --bh:326px;
  margin-top:0
}

.table-books .journal .volume {
  transform:rotateX(23deg) rotateZ(-13deg) rotateY(-8deg)
}

.table-books .objects .volume {
  transform:rotateX(22deg) rotateZ(11deg) rotateY(-8deg);
  margin-top:22px
}

.table-books .book-pick:hover .volume,.table-books .book-pick:focus-visible .volume {
  transform:translateY(-17px) rotateX(10deg) rotateZ(-4deg) rotateY(-5deg)
}

.table-books .objects:hover .volume,.table-books .objects:focus-visible .volume {
  transform:translateY(-17px) rotateX(10deg) rotateZ(4deg) rotateY(-5deg)
}

.table-books .cover-name {
  font-size:47px
}

.table-books .objects .cover-name {
  font-size:43px
}

.table-books .pick-caption {
  top:calc(100% + 36px)
}

.coffee-still {
  position:absolute;
  right:0;
  top:3px;
  width:158px;
  transform:rotate(12deg)
}

.saucer {
  width:136px;
  height:136px;
  border-radius:50%;
  background:radial-gradient(circle at 43% 40%,#fff 0 55%,#e3ded2 62%,#f7f2e8 65%,#d6caba 75%);
  box-shadow:10px 15px 20px #60533828,3px 4px 4px #6c614e20;
  display:grid;
  place-items:center
}

.coffee {
  width:84px;
  height:84px;
  border:7px solid #f9f4e9;
  border-radius:50%;
  background:radial-gradient(ellipse at 43% 40%,#372214 0 48%,#98683c 55%,#c6a173 60%,#513015 65%);
  box-shadow:5px 6px 8px #44311f55,inset 3px 3px 8px #0007;
  position:relative
}

.coffee:after {
  content:'';
  position:absolute;
  right:-25px;
  top:25px;
  width:21px;
  height:15px;
  border:6px solid #eee9df;
  border-radius:3px 10px 10px 3px;
  box-shadow:3px 3px 3px #0002
}

.coffee i {
  position:absolute;
  top:10px;
  left:17px;
  width:28px;
  height:7px;
  border-radius:50%;
  background:#d9c7a244;
  filter:blur(2px)
}

.coffee-still>span {
  display:block;
  margin-top:18px;
  font:italic 19px var(--serif);
  color:#827d68;
  text-align:center
}

.table-note {
  position:absolute;
  left:0;
  bottom:47px;
  width:170px;
  padding:22px 14px 21px;
  background:#f9f5df;
  transform:rotate(-10deg);
  box-shadow:0 2px 3px #574a1b22,5px 9px 12px #574a1b12;
  text-align:center
}

.table-note>span {
  font:italic 16px var(--serif);
  color:#9c7a5d
}

.table-note p {
  font:24px/1.1 var(--serif)
}

.table-note>small {
  font-size:6px;
  letter-spacing:.14em
}

.pencil {
  width:4px;
  height:189px;
  position:absolute;
  left:190px;
  bottom:30px;
  transform:rotate(12deg);
  background:linear-gradient(90deg,#4c3221,#9b5b36 50%,#35251b);
  box-shadow:2px 4px 3px #392a222c
}

.pencil:before {
  content:'';
  position:absolute;
  top:-15px;
  width:4px;
  height:15px;
  background:linear-gradient(#2e241c 0 3px,#c9ae7a 3px);
  clip-path:polygon(50% 0,100% 100%,0 100%)
}

/* A modal keeps background controls out of keyboard and screen-reader navigation. */
.has-reader {
  overflow:hidden
}

.reader-dialog {
  max-width:none;
  max-height:none;
  width:100%;
  height:100%;
  margin:0;
  border:0;
  padding:0;
  overflow:auto;
  color:var(--ink);
  background:transparent
}

.reader-dialog::backdrop {
  background:#26261ed9;
  backdrop-filter:blur(9px)
}

.reader-layout {
  min-height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:80px 44px 45px;
  pointer-events:none
}

.reader-top {
  position:absolute;
  top:27px;
  left:5%;
  right:5%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:auto;
  color:#eee8d9
}

.reader-title-label {
  font:italic 23px var(--serif)
}

.reader-close {
  border:1px solid #f1ecd139;
  color:inherit;
  background:transparent;
  padding:12px 17px;
  border-radius:30px;
  font-size:11px
}

.reader-close span {
  margin-left:14px;
  font-size:17px
}

.reading-spread {
  position:relative;
  width:min(940px,calc(100vw - 100px));
  height:min(580px,calc(100dvh - 190px));
  min-height:370px;
  display:grid;
  grid-template-columns:1fr 1fr;
  perspective:2000px;
  transform-style:preserve-3d;
  pointer-events:auto;
  isolation:isolate;
  border-radius:3px;
  box-shadow:0 0 0 5px #533331,0 6px 0 5px #c2b69d,0 9px 0 5px #653e37,0 24px 45px #090c0866
}

.reader-dialog[data-kind=objects] .reading-spread {
  box-shadow:0 0 0 5px #284334,0 6px 0 5px #c2b69d,0 9px 0 5px #264633,0 24px 45px #090c0866
}

.paper-page {
  position:relative;
  min-width:0;
  background:#f8f3e8;
  overflow:hidden
}

.paper-left {
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,#f8f3e8 85%,#e2dbc9 98%,#b2a893)
}

.paper-right {
  border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,#b4aa95,#e9e0cf 3%,#f8f3e8 13%)
}

.paper-page:after {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  box-shadow:inset 0 0 30px #7d70460b
}

.printed-page {
  position:absolute;
  inset:0;
  padding:9% 11% 12%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:#363c2e;
  font-family:var(--sans)
}

.page-eyebrow {
  font:8px/1.5 var(--sans);
  letter-spacing:.16em;
  margin:0 0 28px;
  color:#8a7e68
}

.printed-page h2 {
  font:500 clamp(35px,4.5vw,61px)/.99 var(--serif);
  letter-spacing:-.045em;
  margin:0 0 18px
}

.printed-page h2 i {
  font-weight:400;
  color:#763b44
}

.printed-page p:not(.page-eyebrow) {
  font-size:12px;
  line-height:1.75;
  margin:0 0 14px
}

.page-book-icon {
  width:55px;
  margin:12px 0 25px;
  color:#776f56
}

.page-book-icon svg {
  display:block;
  width:100%
}

.page-signature {
  font:italic 24px var(--serif);
  color:#82745e;
  margin-top:auto
}

.folio {
  position:absolute;
  bottom:4.5%;
  left:0;
  width:100%;
  text-align:center;
  font:9px var(--sans);
  color:#998d78
}

.page-photo {
  display:block;
  width:100%;
  height:53%;
  min-height:0;
  object-fit:cover;
  margin-bottom:23px
}

.page-bottom {
  display:flex;
  flex-direction:column;
  flex:1
}

.printed-page h3 {
  font:500 29px/1 var(--serif);
  letter-spacing:-.025em;
  margin:0 0 10px
}

.printed-page .page-link {
  display:flex;
  justify-content:space-between;
  font:10px var(--sans);
  border-bottom:1px solid #9b8d6e60;
  padding:8px 0;
  margin-top:auto;
  width:fit-content;
  min-width:155px;
  gap:15px;
  color:#753745
}

.page-link:hover {
  color:#ad5463
}

.text-page h3 {
  font-size:48px;
  margin:20px 0 30px
}

.printed-page .live-excerpt {
  font-family:var(--serif);
  font-size:20px;
  line-height:1.5;
  white-space:pre-line;
  overflow:auto
}

.reader-bottom {
  width:min(940px,calc(100vw - 100px));
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:29px;
  pointer-events:auto;
  color:#ede8dc
}

.page-nav {
  display:flex;
  align-items:center;
  gap:22px
}

.reader-bottom button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid #efe8d353;
  background:none;
  color:inherit;
  font-size:20px;
  transition:background .2s
}

.reader-bottom button:hover:not(:disabled) {
  background:#ebe4d620
}

.reader-bottom button:disabled {
  opacity:.25
}

.reader-status {
  font-size:10px;
  min-width:92px;
  text-align:center;
  letter-spacing:.06em
}

.reader-help {
  font:italic 18px var(--serif);
  color:#e5decca0
}

.reader-dialog :focus-visible {
  outline-color:#caa7a0
}

.book-flight {
  position:fixed;
  top:0;
  left:0;
  z-index:10;
  transform-origin:0 0;
  pointer-events:none;
  perspective:1600px
}

.book-flight .volume {
  width:100%;
  height:100%;
  transition:none;
  transform:none
}

.book-flight .cover-name {
  font-size:clamp(45px,5vw,76px);
  margin-top:15%
}

.book-flight .cover-kicker,.book-flight .cover-foot {
  font-size:9px
}

.book-flight .cover-art {
  width:95px
}

.book-flight .cover-oval {
  width:75px;
  height:100px
}

.book-flight .cover-oval i {
  font-size:76px
}

.reader-dialog[data-phase=arriving] .reading-spread,.reader-dialog[data-phase=departing] .reading-spread {
  opacity:0
}

.reader-dialog[data-phase=opening] .reading-spread,.reader-dialog[data-phase=closing] .reading-spread {
  opacity:1
}

.reader-dialog:not([data-phase=reading]) .reader-bottom {
  opacity:0
}

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

.turn-band {
  position:absolute;
  left:0;
  top:0;
  height:100%;
  transform-origin:left center;
  transform-style:preserve-3d
}

.band-face {
  position:absolute;
  inset:0;
  overflow:hidden;
  backface-visibility:hidden;
  background:#f8f3e8
}

.band-face>div {
  position:absolute;
  top:0
}

.band-back {
  transform:rotateY(180deg)
}

.band-light {
  position:absolute;
  inset:0;
  background:#69563d;
  pointer-events:none;
  transform:translateZ(.1px);
  backface-visibility:hidden
}

.end-page {
  justify-content:center;
  align-items:center
}

.end-page .page-signature {
  margin:0
}

@media(min-width:1600px) {
  .collection-intro {
    padding-top:65px
  }

  .collection-stage {
    margin-top:40px;
    min-height:520px
  }

  .shelf-stage {
    padding-top:45px
  }

  .table-stage .scene-objects {
    height:475px
  }

}

@media(max-width:1150px) {
  .shelf-stage {
    padding-left:35px;
    padding-right:35px
  }

  .library-row {
    gap:26px
  }

  .side-books .shelf-filler:last-child {
    display:none
  }

  .book-pick {
    --bw:200px;
    --bh:280px
  }

  .cover-name {
    font-size:40px
  }

  .objects .cover-name {
    font-size:36px
  }

  .table-stage .scene-objects {
    max-width:950px
  }

  .coffee-still {
    right:0;
    transform:scale(.8) rotate(12deg);
    transform-origin:top right
  }

  .table-note {
    left:15px;
    transform:scale(.8) rotate(-10deg);
    transform-origin:bottom left
  }

  .pencil {
    left:150px
  }

  .table-books {
    gap:35px
  }

  .table-books .book-pick {
    --bw:210px;
    --bh:298px
  }

}

@media(max-width:900px) {
  .collection-header {
    height:90px
  }

  .collection-intro {
    padding-top:35px;
    gap:25px
  }

  .collection-intro h1 {
    font-size:58px
  }

  .intro-aside {
    max-width:210px
  }

  .collection-stage {
    min-height:450px
  }

  .shelf-stage {
    padding-inline:25px
  }

  .library-row {
    gap:26px
  }

  .end-books {
    display:none
  }

  .slim-books .shelf-filler:last-child {
    display:none
  }

  .book-pick {
    --bw:200px;
    --bh:280px
  }

  .side-books .shelf-filler {
    --fh:220px!important
  }

  .table-stage .scene-objects {
    height:430px
  }

  .table-note {
    width:135px;
    left:5px;
    bottom:15px;
    transform:scale(.8) rotate(-10deg)
  }

  .table-note p {
    font-size:21px
  }

  .pencil {
    display:none
  }

  .coffee-still {
    top:0;
    right:0;
    transform:scale(.6) rotate(12deg)
  }

  .table-books {
    gap:38px
  }

  .table-books .book-pick {
    --bw:210px;
    --bh:290px
  }

  .footer-note {
    display:none
  }

  .page-photo {
    height:47%;
    margin-bottom:17px
  }

  .printed-page h3 {
    font-size:25px
  }

  .printed-page {
    padding:8% 9% 12%
  }

  .page-eyebrow {
    margin-bottom:21px
  }

  .printed-page h2 {
    font-size:45px
  }

}

@media(max-width:680px) {
  .collection-header {
    height:80px;
    padding-inline:24px
  }

  .collection-logo {
    font-size:18px
  }

  .collection-logo i {
    font-size:23px
  }

  .collection-nav {
    gap:19px;
    font-size:10px
  }

  .nav-all {
    display:none
  }

  .collection-intro {
    display:block;
    padding:33px 24px 0
  }

  .collection-intro .eyebrow {
    font-size:8px;
    margin-bottom:15px
  }

  .collection-intro h1 {
    font-size:52px;
    letter-spacing:-.04em
  }

  .intro-aside {
    max-width:none;
    margin-top:20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px
  }

  .intro-aside p {
    font-size:10px;
    line-height:1.6;
    max-width:190px;
    margin:0
  }

  .interaction-note {
    font-size:17px;
    white-space:nowrap
  }

  .interaction-note span {
    display:none
  }

  .collection-stage {
    margin-top:17px;
    min-height:345px
  }

  .shelf-stage {
    padding:3px 20px 20px;
    overflow:hidden
  }

  .library-row {
    height:268px;
    gap:28px;
    padding:0 10px
  }

  .side-books,.slim-books {
    display:none
  }

  .book-pick {
    --bw:140px;
    --bh:204px
  }

  .shelf-stage .volume {
    transform:rotateY(-19deg) rotateZ(-3deg)
  }

  .shelf-stage .objects .volume {
    transform:rotateY(-16deg) rotateZ(2deg)
  }

  .cover-kicker {
    font-size:4.8px
  }

  .cover-name {
    font-size:29px;
    margin-top:23px;
    letter-spacing:-1.2px
  }

  .objects .cover-name {
    font-size:27px
  }

  .cover-foot {
    font-size:4.8px
  }

  .cover-art {
    width:45px
  }

  .cover-oval {
    width:38px;
    height:50px
  }

  .cover-oval i {
    font-size:37px
  }

  .volume-spine b {
    font-size:12px
  }

  .volume-spine small {
    font-size:5px
  }

  .oak-shelf {
    height:16px
  }

  .oak-shelf:before {
    height:6px;
    top:-6px
  }

  .shelf-label {
    margin-top:21px;
    font-size:6px;
    letter-spacing:.11em
  }

  .shelf-label span:last-child {
    max-width:120px;
    text-align:right
  }

  .pick-caption {
    display:none
  }

  .collection-footer {
    padding:17px 19px 25px;
    gap:8px
  }

  .variant-switch {
    gap:1px
  }

  .variant-switch a {
    padding:10px 12px;
    font-size:9px
  }

  .variant-switch a span {
    margin-right:4px;
    font-size:7px
  }

  .footer-index {
    font-size:7px
  }

  .table-stage {
    margin-top:5px;
    min-height:350px
  }

  .table-stage .scene-objects {
    height:345px
  }

  .table-books {
    gap:25px;
    padding-right:4px
  }

  .table-books .book-pick {
    --bw:142px;
    --bh:208px;
    margin-top:15px
  }

  .table-books .cover-name {
    font-size:30px
  }

  .table-books .objects .cover-name {
    font-size:27px
  }

  .table-books .journal .volume {
    transform:rotateX(22deg) rotateZ(-11deg) rotateY(-7deg)
  }

  .table-books .objects .volume {
    transform:rotateX(22deg) rotateZ(9deg) rotateY(-6deg);
    margin-top:35px
  }

  .coffee-still {
    right:6px;
    top:-1px;
    transform:scale(.42) rotate(12deg)
  }

  .coffee-still>span {
    display:none
  }

  .table-note {
    display:none
  }

  .reader-layout {
    padding:80px 20px 32px;
    justify-content:flex-start;
    min-height:100dvh
  }

  .reader-top {
    top:20px;
    left:22px;
    right:22px
  }

  .reader-title-label {
    font-size:20px
  }

  .reader-close {
    font-size:10px;
    padding:9px 12px
  }

  .reading-spread {
    width:min(440px,calc(100vw - 44px));
    height:calc(100dvh - 184px);
    min-height:380px;
    max-height:650px;
    grid-template-columns:1fr;
    box-shadow:0 0 0 4px #533331,0 5px 0 4px #b9ae98,0 8px 0 4px #653e37,0 18px 28px #090c0866;
    overflow:hidden;
    touch-action:pan-y
  }

  .paper-left {
    display:none
  }

  .paper-right {
    border-radius:2px;
    background:linear-gradient(90deg,#dad0be,#f8f3e8 8%)
  }

  .printed-page {
    padding:10% 11% 13%
  }

  .printed-page h2 {
    font-size:clamp(40px,11vw,59px)
  }

  .printed-page h3 {
    font-size:30px
  }

  .printed-page p:not(.page-eyebrow) {
    font-size:12px
  }

  .page-photo {
    height:51%;
    margin-bottom:22px
  }

  .page-eyebrow {
    font-size:7px
  }

  .reader-bottom {
    width:min(440px,calc(100vw - 44px));
    margin-top:22px;
    justify-content:center
  }

  .reader-help {
    display:none
  }

  .reader-bottom button {
    width:38px;
    height:38px
  }

  .page-nav {
    width:100%;
    justify-content:space-between
  }

  .book-flight .cover-name {
    font-size:55px
  }

  .book-flight .cover-kicker,.book-flight .cover-foot {
    font-size:8px
  }

  .book-flight .volume-front {
    transform-origin:left
  }

  .printed-page .live-excerpt {
    font-size:20px
  }

}

@media(max-height:760px) and (min-width:681px) {
  .collection-header {
    height:85px
  }

  .collection-intro {
    padding-top:30px
  }

  .collection-intro h1 {
    font-size:58px
  }

  .collection-stage {
    margin-top:0;
    min-height:405px
  }

  .shelf-stage {
    padding-top:15px
  }

  .library-row {
    height:310px
  }

  .collection-footer {
    padding-block:16px
  }

  .table-stage .scene-objects {
    height:385px
  }

  .table-stage {
    min-height:405px
  }

  .reading-spread {
    min-height:320px
  }

  .printed-page h2 {
    font-size:42px
  }

  .page-book-icon {
    margin:4px 0 14px;
    width:42px
  }

  .page-photo {
    height:45%;
    margin-bottom:15px
  }

  .printed-page h3 {
    font-size:25px
  }

  .printed-page p:not(.page-eyebrow) {
    font-size:11px
  }

  .page-eyebrow {
    margin-bottom:16px
  }

  .page-signature {
    font-size:20px
  }

}

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

  .book-pick:hover .volume,.book-pick:focus-visible .volume {
    transform:none
  }

  .reader-dialog::backdrop {
    backdrop-filter:none
  }

}