/* One continuous walnut shelf, with real clothbound books standing together. */
body.shelf-page { height: auto; min-height: 100%; overflow: visible; background: #91633b; }
body.shelf-page .room-photograph {
  inset: 0; transform: none; transition: none;
}
body.shelf-page .room::after { background: linear-gradient(180deg, #27160924, #27160910 45%, #27160954); }
.shelf {
  position: relative; z-index: 2; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  padding: 88px 30px 38px; color: #fff2d9; text-shadow: 0 2px 8px #30201280;
}
.shelf .masthead { position: absolute; color: #fff2d9; }
.shelf .masthead small { color: #f1dfbf; }
.shelf .masthead-mark { border-color: #f3ddae80; }
.shelf .masthead-home:hover .masthead-mark, .shelf .masthead-home:focus-visible .masthead-mark { background: #fff8e829; border-color: #ffe7b6; }
.shelf .masthead-home:focus-visible { outline-color: #fff0cd; }
.shelf-intro { text-align: center; max-width: 580px; }
.shelf-intro .welcome-preface { margin: 0 0 7px; color: #f3dfbb; font-size: 19px; }
.shelf-intro h1 { font: 500 clamp(38px, 4vw, 52px)/1.15 var(--font-latin); letter-spacing: .02em; margin: 0 0 10px; color: #fff3dd; }
.shelf-intro p:last-child { margin: 0; font-size: 15px; line-height: 1.85; color: #fff0d5; }

/* All books share these five timber surfaces. Nothing divides the opening. */
.shelf-cabinet {
  --wood-image: url('../assets/scene/walnut-grain.jpg');
  --wood-face: linear-gradient(100deg, #fff3ce1f, #160b072f), var(--wood-image);
  --wood-base: #69412a; --cw: min(650px, calc(100vw - 76px)); --ch: 302px; --cd: 215px; --t: 21px;
  --cover-max-width: 248px; --cover-max-height: 270px;
  --pw: 190px; --ph: 270px; --bt: 62px; --fs: 9.1px; --roof-height: 104px;
  position: relative; flex-shrink: 0; width: var(--cw); height: calc(var(--ch) + 47px); margin: calc(var(--roof-height) + 8px) 0 8px;
  perspective: 1400px; perspective-origin: 50% -15%; transform-style: preserve-3d;
  border: 1px solid #43291b; border-radius: 2px;
  box-shadow: 19px 29px 40px -15px #3025166b, 5px 6px 11px #3929183b, inset 2px 0 2px #f0c89250, inset -3px 0 4px #28170d80;
}
/* The little attic makes the cabinet a home, built from the same timber. */
.shelf-house { position: absolute; left: -1px; right: -1px; bottom: 100%; height: var(--roof-height); transform: translateZ(0); pointer-events: none; }
.house-attic { position: absolute; inset: 0; background: linear-gradient(180deg, #25140973, #25140910), var(--wood-image) center 30% / 750px auto #69412a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.house-roof { position: absolute; z-index: 2; top: -6px; width: 53%; height: 15px; border-radius: 2px; background: linear-gradient(180deg, #e0b27b55, #321b1177), var(--wood-image) 50% 20% / 750px auto #69412a; box-shadow: 0 4px 5px #1e10085c, inset 0 1px 1px #f1c8967a; }
.roof-left { right: 50%; transform-origin: 100% 50%; transform: rotate(-18deg); }
.roof-right { left: 50%; transform-origin: 0 50%; transform: rotate(18deg); }
.house-chimney { position: absolute; right: 20%; top: 20%; width: 25px; height: 57%; background: linear-gradient(90deg, #27170e55, transparent 60%), var(--wood-image) 25% 40% / auto 450px #69412a; border-top: 5px solid #956440; box-shadow: 3px 2px 4px #2d1b1266; }
.house-window { position: absolute; left: 50%; bottom: 35px; width: 37px; height: 37px; transform: translateX(-50%); border: 5px solid #422919; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe3a1, #ce9b56); box-shadow: 0 0 16px #ffe0a32b, inset 1px 2px 4px #70471c8c, 0 1px 1px #e4b98566; }
.house-window::before, .house-window::after { content: ''; position: absolute; background: #654227; }
.house-window::before { left: calc(50% - 2px); top: 0; bottom: 0; width: 4px; }
.house-window::after { top: calc(50% - 2px); left: 0; right: 0; height: 4px; }
.house-name { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; color: #f2d7a6; font: italic 17px var(--font-latin); letter-spacing: .04em; text-shadow: 0 1px 1px #26150b; }
.shelf-cabinet::before, .shelf-cabinet::after {
  content: ''; position: absolute; z-index: 4; pointer-events: none; left: -9px; right: -9px;
  background-color: var(--wood-base); background-image: var(--wood-face); background-size: auto, 840px auto; border: 1px solid #513221;
}
.shelf-cabinet::before {
  top: -10px; height: 25px; border-radius: 3px 3px 1px 1px; background-position: center, center 14%;
  box-shadow: inset 0 2px 1px #edc0936b, inset 0 5px 3px #b7815540, inset 0 -3px 1px #301a10a6, 0 4px 1px #bd8d5e55, 0 8px 8px #1c0c0759;
}
.shelf-cabinet::after {
  bottom: -8px; height: 35px; border-radius: 1px 1px 3px 3px; background-position: center, center 82%;
  box-shadow: inset 0 2px 0 #edc09369, inset 0 5px 1px #29170d8c, inset 0 7px 1px #c5905e70, inset 0 -3px 2px #29170d96, 4px 7px 8px #38251936;
}
.shelf-interior, .shelf-books { position: absolute; left: var(--t); right: var(--t); top: 20px; height: var(--ch); transform-style: preserve-3d; }
.shelf-interior { pointer-events: none; }
.shelf-interior i { position: absolute; display: block; backface-visibility: hidden; background-color: var(--wood-base); }
.shelf-back {
  inset: 0; transform: translateZ(calc(var(--cd) * -1));
  background-image: linear-gradient(110deg, #170c0663, #2c170a42 50%, #10090480), var(--wood-image);
  background-size: auto, 820px auto; background-position: center, center 48%;
  box-shadow: inset 0 25px 28px #1e100ea6, inset 17px 0 22px #1d10096b, inset -7px -4px 13px #2816097a;
}
.shelf-back::after {
  content: ''; position: absolute; left: 35%; bottom: -4px; width: 34%; height: 83%;
  background: #140b0652; border-radius: 14% 23% 0 0; box-shadow: 15px 0 28px 15px #140b0642;
}
.shelf-floor {
  left: 0; right: 0; bottom: 0; height: var(--cd); transform-origin: 50% 100%; transform: rotateX(90deg);
  background-image: linear-gradient(180deg, #1a0e0778, #efc79524), var(--wood-image); background-size: auto, 730px auto; background-position: center, center 76%;
  box-shadow: inset 6px 0 7px #160a0954, inset -6px 0 7px #160a0954;
}
.shelf-ceiling {
  left: 0; right: 0; top: 0; height: var(--cd); transform-origin: 50% 0; transform: rotateX(-90deg);
  background-image: linear-gradient(180deg, #150b0959, #0e0907ba), var(--wood-image); background-size: auto, 720px auto;
}
.shelf-left {
  left: 0; top: 0; bottom: 0; width: var(--cd); transform-origin: 0 50%; transform: rotateY(90deg);
  background-image: linear-gradient(90deg, #2b170b1a, #130a07a3), var(--wood-image); background-size: auto, auto 580px; background-position: center, 17% center;
}
.shelf-right {
  right: 0; top: 0; bottom: 0; width: var(--cd); transform-origin: 100% 50%; transform: rotateY(-90deg);
  background-image: linear-gradient(270deg, #f0b5681f, #26120c96), var(--wood-image); background-size: auto, auto 580px; background-position: center, 76% center;
}
.cabinet-stiles { position: absolute; inset: 0; pointer-events: none; }
.cabinet-stiles i {
  position: absolute; top: 15px; width: calc(var(--ch) + 10px); height: var(--t); transform: rotate(90deg); transform-origin: 0 0;
  background: linear-gradient(180deg, #2a150d47, #f7d3a00a 22%, #f7d3a01f 90%, #f7d3a05c), var(--wood-image) 42% 50% / 780px auto #69412a;
  box-shadow: inset 0 1px 1px #26140d77, inset 0 -1px 1px #d8ad725e;
}
.cabinet-stiles i:first-child { left: var(--t); }
.cabinet-stiles i:last-child { left: 100%; }

/* The row stays together at every width. Each slot is a physical book, with the
   neighbouring board largely concealing its cover as it would on a family shelf. */
.shelf-books { display: flex; align-items: flex-end; justify-content: center; list-style: none; margin: 0; padding: 0; }
.shelf-item { position: relative; flex: 0 0 77px; height: var(--ph); transform-style: preserve-3d; }
.shelf-item.is-selected { flex-basis: calc(var(--pw) + 12px); z-index: 3; }
.shelf-book { position: absolute; inset: 0; display: block; color: inherit; text-decoration: none; text-shadow: none; transform-style: preserve-3d; font-size: var(--fs); -webkit-tap-highlight-color: transparent; }
.shelf-book .book {
  --turn: 87deg; --lean: -1deg;
  position: absolute; left: 0; bottom: 0; width: var(--pw); height: var(--ph); scale: 1;
  transform-style: preserve-3d; transform-origin: 0 100%; transform: translateX(var(--bt)) translateZ(-6px) rotateZ(var(--lean)) rotateY(var(--turn));
  transition: transform .48s cubic-bezier(.22,.75,.2,1), scale .2s ease;
}
.shelf-item:last-child .book { --turn: 82deg; --lean: 1deg; }
.shelf-item.is-selected .book { transform: translateX(5px) translateZ(22px) rotateZ(0) rotateY(0); }
.shelf-book:focus-visible { outline: none; }
.shelf-book:focus-visible .block-spine { outline: 3px solid #fff1c9; outline-offset: 5px; }
.shelf-item.is-selected .shelf-book:focus-visible .face.front { outline: 3px solid #fff1c9; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .shelf-item:not(.is-selected) .shelf-book:hover .book { scale: 1.035; }
}
.shelf-book .sheets { position: absolute; inset: 0; transform-style: preserve-3d; }
.shelf-book .sheet {
  --pw: var(--cover-pw); --ph: var(--cover-ph); --fs: var(--cover-fs);
  left: 0; top: 0; width: calc(var(--pw) * 1.018); height: calc(var(--ph) * 1.024);
  font-size: var(--fs); transform: scale(var(--cover-scale)); transform-origin: 0 0; will-change: auto;
}
.shelf-book .face { pointer-events: none; }
.shelf-book .sheet-thickness { display: none; }
.book-block { position: absolute; inset: 0; transform-style: preserve-3d; }
.book-block::before { content: ''; position: absolute; inset: 0; transform: translateZ(calc(var(--bt) * -1)); background: var(--cloth-dark); border-radius: 2px 5px 5px 2px; box-shadow: 1px 0 0 var(--cloth-light); }
.book-block > i, .block-spine { position: absolute; display: block; backface-visibility: hidden; }
.block-spine {
  left: calc(var(--bt) * -1); top: 0; bottom: 0; width: var(--bt); transform-origin: 100% 50%; transform: rotateY(-90deg);
  border-radius: 5px 0 0 5px; box-sizing: border-box; color: var(--gold); text-align: center; text-shadow: 0 1px 0 var(--cover-shadow);
  background: repeating-linear-gradient(0deg, #00000017 0 .6px, #ffffff0b .6px 1.3px, transparent 1.3px 3px), linear-gradient(90deg, var(--binding-a), var(--binding-b) 26%, var(--binding-b) 57%, var(--binding-c) 96%);
  box-shadow: inset -2px 0 1px var(--binding-glow), inset 3px 0 4px #00000066, inset 0 2px 1px #eedcb44a, 2px 0 3px #140b0759;
}
.block-spine::before, .block-spine::after { content: ''; position: absolute; left: 5px; right: 5px; height: 4px; border-top: 1px solid var(--cover-frame); border-bottom: 1px solid var(--cover-frame); }
.block-spine::before { top: 23px; }
.block-spine::after { bottom: 25px; }
.spine-person { position: absolute; top: 34px; left: 0; right: 0; font: 500 17px var(--font-latin); letter-spacing: .01em; color: #fff0c9; }
.spine-title { position: absolute; top: 65px; left: 50%; transform: translateX(-50%); writing-mode: vertical-rl; font: 400 25px/1.2 var(--font-zh); letter-spacing: .09em; white-space: nowrap; color: #fff0cb; text-shadow: 0 1px 2px #142118; }
.spine-by { position: absolute; bottom: 34px; left: 2px; right: 2px; font: 500 13px/1.25 var(--font-ui); color: #fff0cb; }
.block-pages {
  left: 100%; top: 3px; bottom: 3px; width: calc(var(--bt) - 2px); transform-origin: 0 50%; transform: rotateY(90deg) translateX(1px);
  border-left: 2px solid var(--cloth-dark); border-right: 2px solid var(--cloth-dark);
  background: linear-gradient(180deg, #f4edda47, #80734b38), repeating-linear-gradient(90deg, #b4a788 0 .6px, #e7deca .6px 1.6px, #cfc3a6 1.6px 2px);
}
.block-top {
  left: 2px; right: 2px; top: calc(var(--bt) * -1); height: var(--bt); transform-origin: 50% 100%; transform: rotateX(90deg);
  background: repeating-linear-gradient(0deg, #b7a78a 0 .7px, #e7dec6 .7px 1.7px); border-top: 2px solid var(--cloth-dark); border-bottom: 2px solid var(--cloth-light);
}
body.shelf-page .shelf-book .book .book-shadow {
  top: 100%; bottom: auto; left: -3%; right: -5%; height: calc(var(--bt) + 18px); border-radius: 10%;
  transform-origin: 50% 0; transform: rotateX(-90deg);
  background: #170c0ac2; box-shadow: 4px 0 12px 8px #170c0a66; filter: none; opacity: 1; transition: none;
}
/* A quiet iron bookend is furniture, not an extra book or a false destination. */
.shelf-books::before {
  content: ''; position: absolute; left: 24px; bottom: 0; width: 11px; height: calc(var(--ph) * .43);
  transform: translateZ(-8px) skewY(-8deg); border-radius: 8px 3px 0 0;
  background: linear-gradient(90deg, #24231f, #6e695b 38%, #36342c 58%, #1c1c18);
  box-shadow: 5px 1px 4px #100a0777, inset 1px 0 1px #dad5bd66;
}
/* Phones paint the cabinet as one flat wooden opening. A pick crossfades the
   binding into the cover; unused page edges, grain and shadows are never built. */
body.shelf-flat .shelf-cabinet { perspective: none; transform-style: flat; }
body.shelf-flat .shelf-house { transform: none; }
body.shelf-flat .shelf-interior, body.shelf-flat .shelf-books,
body.shelf-flat .shelf-item, body.shelf-flat .shelf-book,
body.shelf-flat .shelf-book .book, body.shelf-flat .book-block,
body.shelf-flat .shelf-book .sheets, body.shelf-flat .shelf-book .sheet { transform-style: flat; perspective: none; }
body.shelf-flat .shelf-back { transform: none; box-shadow: inset 0 12px 20px #1e100e8c, inset 0 -6px 8px #140b0680; }
body.shelf-flat .shelf-back::after, body.shelf-flat .shelf-books::before,
body.shelf-flat .book-block::before { content: none; }
body.shelf-flat .shelf-floor, body.shelf-flat .shelf-ceiling,
body.shelf-flat .shelf-left, body.shelf-flat .shelf-right { display: none; }
body.shelf-flat .shelf-book .book { width: var(--bt); transform: none; transition: scale .2s ease; }
body.shelf-flat .shelf-item.is-selected .book { width: var(--pw); }
body.shelf-flat .block-spine { left: 0; transform: none; }
body.shelf-flat .book-block { opacity: 1; transition: opacity .2s ease; }
body.shelf-flat .shelf-book .sheets {
  width: var(--pw); opacity: 0; visibility: hidden; transform: scaleX(.3); transform-origin: 0 50%;
  transition: transform .48s cubic-bezier(.22,.75,.2,1), opacity .24s ease, visibility 0s .48s;
}
body.shelf-flat .shelf-item.is-selected .book-block { opacity: 0; }
body.shelf-flat .shelf-item.is-selected .sheets { opacity: 1; visibility: visible; transform: scaleX(1); transition-delay: 0s; }
.shelf-selection { min-height: 92px; text-align: center; }
.shelf-hint { margin: 10px 0 0; font-size: 16px; color: #fff1d6; }
.shelf-hint small { display: block; margin-top: 5px; font: italic 18px var(--font-latin); color: #f0d8b2; }
.shelf-chosen { margin: 0 0 9px; display: flex; gap: 12px; align-items: baseline; justify-content: center; }
.shelf-chosen strong { font: 400 20px var(--font-zh); }
.shelf-chosen span { font: 13px var(--font-ui); color: #ffe9c7; }
.shelf-actions { display: flex; align-items: stretch; justify-content: center; gap: 12px; }
.shelf-actions a, .shelf-actions button { display: block; min-height: 44px; padding: 8px 17px; border: 1px solid #eed4a777; border-radius: 4px; cursor: pointer; font: 15px/1.3 var(--font-zh); text-decoration: none; text-shadow: none; }
.shelf-actions .shelf-read { background: #f4e5c7; color: #493521; box-shadow: 0 3px 8px #24180d33; }
.shelf-actions button { background: #38241570; color: #ffedce; }
.shelf-actions small { display: block; margin-top: 3px; font: 11px var(--font-ui); }
.shelf-actions a:hover { background: #fff2d7; }
.shelf-actions button:hover { background: #382415a6; }
.shelf-actions :focus-visible { outline: 2px solid #fff1c9; outline-offset: 4px; }
.shelf-hint[hidden], .shelf-details[hidden] { display: none; }
.shelf-invite { margin: 0; text-align: center; }
.shelf-invite a { display: inline-block; color: #fff0d4; text-decoration: none; border-bottom: 1px solid #f2dfb961; padding: 4px 0 7px; font-size: 14px; line-height: 1.5; }
.shelf-invite a small { display: block; margin-top: 4px; font: 11px/1.5 var(--font-ui); color: #f4dfbd; }
.shelf-invite a:hover, .shelf-invite a:focus-visible { color: #fff9ec; border-color: #fff2d9; }
.shelf-invite a:focus-visible { outline: 2px solid #fff1c9; outline-offset: 5px; }
@media (max-width: 719px), (max-height: 559px) {
  .shelf { height: 100vh; height: 100dvh; padding: calc(76px + env(safe-area-inset-top)) 18px max(12px, env(safe-area-inset-bottom)); gap: clamp(6px, 1.4dvh, 12px); }
  .shelf > :not(.shelf-cabinet) { flex-shrink: 0; }
  .shelf-intro h1 { font-size: 34px; margin-bottom: 6px; }
  .shelf-intro .welcome-preface { font-size: 16px; margin-bottom: 4px; }
  .shelf-intro p:last-child { max-width: 290px; font-size: 14px; line-height: 1.6; }
  .shelf-cabinet { --cw: calc(100vw - 52px); --ch: 275px; --t: 14px; --cd: 185px; --cover-max-width: 184px; --cover-max-height: 246px; --bt: 51px; --fs: 8px; --roof-height: 85px; height: calc(var(--ch) + 37px); perspective: 1100px; }
  /* The cabinet gives up height first, keeping the introduction and actions on screen. */
  .shelf-cabinet { flex-shrink: 1; min-height: 140px; }
  .shelf-selection { min-height: 86px; }
  .shelf-item { flex-basis: 61px; }
  .shelf-item.is-selected { flex-basis: var(--pw); }
  .house-roof { width: 56%; height: 13px; }
  .roof-left { transform: rotate(-28deg); }
  .roof-right { transform: rotate(28deg); }
  .house-chimney { width: 20px; }
  .house-window { width: 28px; height: 28px; bottom: 32px; border-width: 4px; }
  .house-name { font-size: 15px; bottom: 10px; }
  .shelf-interior, .shelf-books { top: 16px; height: calc(100% - 37px); }
  .shelf-cabinet::before { height: 22px; }
  .shelf-cabinet::after { height: 29px; }
  .cabinet-stiles i { top: 13px; width: var(--t); height: calc(100% - 27px); transform: none; }
  .cabinet-stiles i:first-child { left: 0; }
  .cabinet-stiles i:last-child { left: auto; right: 0; }
  .spine-person { top: 11%; font-size: min(16px, calc(var(--ph) * .07)); }
  .spine-title { top: 24%; font-size: min(22px, calc(var(--ph) * .085)); }
  .spine-by { bottom: 11%; font-size: min(11px, calc(var(--ph) * .055)); }
  .block-spine::before { top: 21px; }
  .block-spine::after { bottom: 21px; }
}
@media (min-width: 720px) and (max-height: 780px) {
  .shelf { padding-top: 78px; padding-bottom: 26px; gap: 15px; }
  .shelf-intro h1 { font-size: 40px; margin-bottom: 8px; }
  .shelf-intro .welcome-preface { margin-bottom: 5px; }
}
@media (max-height: 559px) {
  .spine-person { top: 13%; font-size: 10px; }
  .spine-title { top: 50%; transform: translate(-50%, -50%); font-size: 10px; writing-mode: horizontal-tb; letter-spacing: 0; }
  .spine-by { bottom: 13%; font-size: 8px; }
  .block-spine::before { top: 3px; }
  .block-spine::after { bottom: 3px; }
}
@media (min-width: 560px) and (max-height: 559px) {
  .shelf {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto;
    align-content: center; justify-items: center; column-gap: 16px;
    padding-top: calc(66px + env(safe-area-inset-top));
  }
  .shelf-cabinet { --cw: min(380px, calc(50vw - 40px)); --cover-max-width: 150px; grid-column: 1; grid-row: 1 / 4; height: calc(100dvh - 160px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); min-height: 0; }
  .shelf-intro, .shelf-selection, .shelf-invite { grid-column: 2; }
}
@media (max-width: 719px) and (max-height: 740px), (max-height: 559px) {
  .shelf-intro .welcome-preface { display: none; }
  .shelf-intro h1 { font-size: 30px; }
  .shelf-cabinet { --roof-height: 60px; }
  .roof-left { transform: rotate(-20deg); }
  .roof-right { transform: rotate(20deg); }
  .house-window { bottom: 24px; }
  .house-name { bottom: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .shelf-item, .shelf-book .book, body.shelf-flat .shelf-book .book, body.shelf-flat .book-block, body.shelf-flat .shelf-book .sheets { transition: none; }
}