/* The library for hundreds of books: one set of objects in two arrangements (shelves of books, an index of titles), found by typing.
   The room is one bookcase: fluted walnut standards, walnut shelves, and at its top a slab of white marble with gold in its veins, where the book you are in is named. */
:root { --ink: #efe3c8; --accent: #d9b56c; --deep: #170e0a; --ground: #2b1a12; --leaf: #b8862f; --stone: #171514; --lit: Literata, 'Iowan Old Style', Georgia, serif;
  --gold: linear-gradient(90deg, #6d4a12, #f1d68c 38%, #c2953a 62%, #7a5516); }
html, body { height: auto; overflow: visible; }
html { overflow-x: clip; background: #0b0705; overscroll-behavior-y: none; }
body { min-height: 100vh; overflow-x: clip; font-family: var(--sg); background: linear-gradient(#0b0705e6, #0b0705e6), url(room/walnut.webp) 0 0 / 760px; -webkit-tap-highlight-color: transparent; }
:root { --side: max(84px, calc((100vw - 2400px) / 2)); --gap: 30px; --post: clamp(22px, calc(var(--side) - var(--gap)), 150px); --flutes: 4; }
@media (min-width: 2700px) { :root { --flutes: 9; } }
/* a window wider than the case shows the wall it stands against: walnut panelling, each panel strung with a line of gold */
@media (min-width: 2761px) {
  html { position: relative; }
  html::before, html::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--side) - var(--gap) - var(--post));
    background: linear-gradient(90deg, #000c, #0000 46%, #0000 calc(100% - 46px), #000b),
      linear-gradient(90deg, #0000 24px, #c2953a 24px 25px, #5a4016 25px 26px, #0000 26px calc(100% - 26px), #5a4016 calc(100% - 26px) calc(100% - 25px), #c2953a calc(100% - 25px) calc(100% - 24px), #0000 0),
      linear-gradient(#0000 24px, #c2953a 24px 25px, #5a4016 25px 26px, #0000 26px calc(100% - 29px), #5a4016 calc(100% - 29px) calc(100% - 28px), #c2953a calc(100% - 28px) calc(100% - 27px), #0000 0) 0 0 / 100% 860px,
      linear-gradient(#0000 calc(100% - 3px), #000 0, #000 calc(100% - 2px), #ffffff1f 0, #0000) 0 0 / 100% 860px,
      linear-gradient(#170e0a4d, #170e0a4d), url(room/post.webp) 0 0 / 128px; }
  html::after { left: auto; right: 0; }
}
#bar { position: fixed; inset: 0 0 auto; z-index: 6; box-sizing: content-box; height: 92px; padding: env(safe-area-inset-top, 0px) var(--side) 0; display: grid; grid-template-columns: 1fr minmax(0, 460px) 1fr; align-items: center; gap: 20px; color: var(--ink);
  background: linear-gradient(#ffffff0d, #0000 34%, #0000 78%, #0007 78%, #0000002e 84%, #ffffff12 84%, #0000 90%, #000a 90%, #0006), linear-gradient(#170e0a66, #170e0a66), url(room/walnut.webp) 0 0 / 760px; box-shadow: 0 1px #000, 0 18px 30px -12px #000c; }   /* its foot is moulded: a cove, a bead and a fillet */
/* nothing lies on the rail and nothing pretends to be cut into it: gilt.webp is this same walnut under gold leaf, laid where the walnut lies, so every letter, line and panel shows the leaf with the wood's own grain running through it. No piece has a light of its own. */
#bar { --leaf: url(room/gilt.webp) 0 0 / 760px fixed; }
#bar h1 { margin: 0; display: flex; align-items: baseline; gap: 10px; font-weight: inherit; pointer-events: none; margin-bottom: 32px; color: #0000; background: var(--leaf); -webkit-background-clip: text; background-clip: text; }
#find, #side { margin-bottom: 18px; }   /* the rail's foot is moulded: what stands in it stands above that */
#n { font: 800 48px/.8 var(--sg); font-stretch: 50%; font-variant-numeric: tabular-nums; }
#of { font: 650 12.5px/1 var(--sg); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
#find { position: relative; display: flex; align-items: center; height: 46px; padding: 0 10px 0 20px; border-radius: 23px; } #find > * { position: relative; }
#find::before, #find::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
#find::before { background: #3d2c22; mix-blend-mode: multiply; }   /* a panel of the same wood stained to ebony: the grain stays */
#find::after { padding: 1px; background: var(--leaf); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .62; transition: opacity .2s; }   /* and a line of leaf around it */
#find:focus-within::after { opacity: 1; padding: 2px; }
#q { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: inherit; font: 500 16px/1 var(--sg); font-stretch: 100%; }
#q::placeholder { color: #cfae6c99; }
#q::-webkit-search-cancel-button { display: none; }
#find:focus-within kbd { visibility: hidden; }
#side { justify-self: end; display: flex; align-items: center; gap: 6px; }
#go:not(:popover-open) { display: flex; gap: 2px; margin: 0 8px 0 0; padding: 0; border: 0; background: none; color: inherit; position: static; }   /* on a phone these links are a menu; here they stand in the rail */
#go a { padding: 12px 12px; border-radius: 16px; color: inherit; text-decoration: none; font: 700 12px/1 var(--sg); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; color: #0000; background: var(--leaf); -webkit-background-clip: text; background-clip: text; transition: filter .15s; }
@media (hover: hover) { #go a:hover { filter: brightness(1.2); } }
#go a:active { filter: brightness(1.32); }   /* the leaf catches more light */
#add { height: 46px; padding: 0 22px 0 18px; border-radius: 23px; background: var(--leaf); color: #1e120a; display: flex; gap: 10px; align-items: center;
  font: 750 12.5px/1 var(--sg); font-stretch: 112%; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transition: scale .12s; }
#add:active { scale: .96; }
#add i { width: 12px; height: 12px; background: linear-gradient(currentColor 0 0) 50% / 100% 2px no-repeat, linear-gradient(currentColor 0 0) 50% / 2px 100% no-repeat; }
.round { display: none; flex: none; width: 46px; height: 46px; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 55%, transparent); transition: scale .12s, background .2s; }
.round:active { scale: .94; background: color-mix(in oklab, var(--ink) 12%, transparent); }
#more { box-shadow: none; background: var(--leaf); -webkit-mask: radial-gradient(circle at 15px 23px, #000 1.8px, #0000 2.4px), radial-gradient(circle at 23px 23px, #000 1.8px, #0000 2.4px), radial-gradient(circle at 31px 23px, #000 1.8px, #0000 2.4px); mask: radial-gradient(circle at 15px 23px, #000 1.8px, #0000 2.4px), radial-gradient(circle at 23px 23px, #000 1.8px, #0000 2.4px), radial-gradient(circle at 31px 23px, #000 1.8px, #0000 2.4px); }
#sort { width: 38px; height: 38px; background: linear-gradient(currentColor 0 0) 50% 13px / 16px 1.5px no-repeat, linear-gradient(currentColor 0 0) 50% 18.5px / 11px 1.5px no-repeat, linear-gradient(currentColor 0 0) 50% 24px / 6px 1.5px no-repeat; }

#page { position: relative; z-index: 2; box-sizing: border-box; min-height: 100vh; padding: calc(92px + env(safe-area-inset-top, 0px)) var(--side) 150px; color: var(--ink); }
/* the standards of the case: fluted walnut, running the whole height of the page with its shelves */
#page::before, #page::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 5; width: var(--post); left: calc(var(--side) - var(--gap) - var(--post)); pointer-events: none; transition: opacity .3s;
  background: linear-gradient(90deg, #000b, #0000 9%, #0000 91%, #000b),
    linear-gradient(90deg, #0000 0, #000000c7 14%, #00000059 42%, #ffffff14 72%, #ffffff30 86%, #0000 100%) 0 0 / calc(100% / var(--flutes)) 100% repeat-x content-box,
    linear-gradient(#170e0a59, #170e0a59), url(room/post.webp) 0 0 / 128px;
  padding: 0 calc(var(--post) * .09); box-sizing: border-box; box-shadow: 0 0 22px #000c; }
#page::after { left: auto; right: calc(var(--side) - var(--gap) - var(--post)); }
body.leaving #page::before, body.leaving #page::after { opacity: 0; }

/* ---- the book you are in: one slab of marble between the standards, lettered in dark inlay, its button and its line in gold ---- */
#hero { position: relative; display: grid; grid-template-columns: 330px minmax(0, 1fr) auto; align-items: end; margin: 0 calc(-1 * var(--gap)) 64px; border: solid #0000; border-width: 7px 6px 0; perspective: 1400px; color: var(--stone); font-family: var(--lit);
  background: var(--gold) 0 0 / 6px 100% no-repeat border-box, var(--gold) 100% 0 / 6px 100% no-repeat border-box, linear-gradient(#f6e2a4, #c79a3e 45%, #7a5516) 0 0 / 100% 7px no-repeat border-box,
    linear-gradient(#0000 calc(100% - 15px), #00000026 calc(100% - 15px), #ffffff8c calc(100% - 13px), #ffffff59 calc(100% - 4px), #fff calc(100% - 4px), #fff calc(100% - 3px), var(--leaf) calc(100% - 3px), #8a6220 calc(100% - 1px), #0005 calc(100% - 1px)) padding-box,
    linear-gradient(#ffffff40, #0000 28%, #0000 62%, #2a1a1026) padding-box, url(room/marble.webp) 50% 50% / cover padding-box #d9d5d0;
  box-shadow: 0 26px 40px -18px #000; }   /* the gold frame stands on the slab's own edges; at its foot the stone is cut as a sill, with one gold line */
#hero[hidden] { display: none; }
#hero:not(:has(.also :is(a, button))) { grid-template-columns: 330px minmax(0, 1fr); }
body.finding #hero { display: none; }
.vol { --h: min(36vh, 350px); --t: 26px; position: relative; display: block; justify-self: center; margin: 26px 0 11px; height: var(--h); width: calc(var(--h) * var(--ar, .66)); transform-style: preserve-3d; will-change: transform; -webkit-user-drag: none; }
.vol:focus-visible { outline: 2px solid var(--leaf); outline-offset: 10px; }
.face { position: absolute; inset: 0; overflow: hidden; border-radius: 2px 5px 5px 2px; background: var(--g); box-shadow: -14px 10px 22px -10px #2a1a1099, 0 3px 5px -1px #0009, inset 0 0 0 1px #ffffff1f; }
.face > img, .glass { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.glass { opacity: 0; transition: opacity .35s; pointer-events: none; }
.face::before, .cv::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, #0007, #0000 2.2%, #ffffff26 3.4%, #0000 5.2%); }   /* the hinge every bound book has */
.spine, .pages { position: absolute; top: 0; bottom: 0; width: var(--t); }
.spine { right: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); background: linear-gradient(90deg, #0008, #0000 60%), var(--g); border-radius: 2px 0 0 2px; }
.pages { left: 100%; top: 3px; bottom: 3px; transform-origin: 0 50%; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #efe9d8 0 1.5px, #c9c0a8 1.5px 3px); }
/* before the first book: its place stands open, and everything that needs books waits */
body.first :is(#find, #dock, #rail, #bar h1) { visibility: hidden; }
.vol.none { --ar: .66; cursor: pointer; }
.vol.none .face { display: grid; place-items: center; background: #1715140d; box-shadow: inset 0 0 0 1.5px #17151452; transition: background .25s, box-shadow .25s; }
.vol.none:is(:hover, :focus-visible) .face { background: #1715141a; box-shadow: inset 0 0 0 1.5px var(--leaf); }
.vol.none .face i, .disc.plus i { width: 22px; height: 22px; translate: none; clip-path: none; background: linear-gradient(currentColor 0 0) center / 100% 2.5px no-repeat, linear-gradient(currentColor 0 0) center / 2.5px 100% no-repeat; }
.vol.none .face i { width: 38px; height: 38px; opacity: .55; }
.by.how { max-width: 50ch; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.k { font: 650 12.5px/1 var(--sg); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
/* its name and author; then what a press does and how long that takes; then where you are in the whole book, over its line */
.say { min-width: 0; display: grid; justify-items: start; align-content: end; padding: 30px clamp(64px, 5.5vw, 132px) 40px 46px; text-shadow: 0 0 5px #e9e6e2, 0 0 12px #e9e6e2cc; }   /* each letter keeps a breath of clear stone round it, so a vein never runs through a word */
.name { margin: 0; font: 600 60px/1.05 var(--lit); letter-spacing: -.012em; text-wrap: balance; overflow-wrap: anywhere; } .name.long { font-size: 46px; } .name.longer { font-size: 36px; line-height: 1.1; }
.by { margin: 12px 0 0; font: 500 21px/1.3 var(--lit); }
.go { display: flex; align-items: center; gap: 18px; margin-top: 30px; } .go > div { display: grid; gap: 3px; }
.go .k { font: 700 23px/1.15 var(--lit); letter-spacing: 0; text-transform: none; color: inherit; } .go .t { font: 500 17.5px/1.3 var(--lit); font-variant-numeric: lining-nums; }
.disc { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; color: var(--stone); display: grid; place-items: center; transition: scale .15s, filter .2s; text-shadow: none;
  background: radial-gradient(circle at 34% 26%, #f7dfa0, #cfa046 46%, #9a6c1f 82%, #7a5516); box-shadow: 0 3px 0 #6d4a12, 0 7px 12px -3px #2a1a10b3, inset 0 1px 1px #fff8, inset 0 -2px 3px #6d4a1299; }   /* a gold button standing off the stone */
.disc:active { scale: .95; } @media (hover: hover) { .disc:hover { filter: brightness(1.08); } }
.disc:focus-visible { outline: 2px solid var(--stone); outline-offset: 4px; }
.disc i { width: 16px; height: 19px; background: currentColor; translate: 2px 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.where { justify-self: stretch; display: flex; justify-content: space-between; gap: 20px; margin: 30px 0 0; font: 500 16px/1.3 var(--lit); font-variant-numeric: lining-nums; }
/* the line of parts: read parts gold, the one you are in filled as far as you are; reach for a part and it shows its name, press and the book opens there */
.rl { display: none; --a: var(--leaf); --g: var(--stone); }
.say .rl { display: flex; width: 100%; height: 7px; margin-top: 10px; gap: 1px; align-items: stretch; border-radius: 3.5px; text-shadow: none; }
.rl.many { gap: 0; }
.rl .seg { height: auto; min-width: 0; cursor: pointer; } .rl .seg::before { top: 0; height: auto; border-radius: 0; background: #8d8882; transition: none; }
.rl .seg:first-child::before { border-radius: 3.5px 0 0 3.5px; } .rl .seg:last-child::before { border-radius: 0 3.5px 3.5px 0; }
.rl .seg.done::before { background: var(--leaf); }
.rl .seg.at::before { background: linear-gradient(90deg, var(--leaf) calc(var(--p, 0) * 100%), #8d8882 0); }
.rl .seg:is(:hover, :focus-visible)::before { height: auto; top: -4px; bottom: -4px; background: var(--stone); box-shadow: none; }
.rl .seg::after { color: var(--ink); }
.also { align-self: stretch; display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: 1fr auto auto; justify-content: end; align-items: end; gap: 0 3px; padding: 22px 64px 11px 0; text-shadow: 0 0 5px #e9e6e2, 0 0 12px #e9e6e2cc; }
.also .k { grid-row: 2; grid-column: 1 / -1; margin: 0 0 9px; font: 600 16px/1 var(--lit); letter-spacing: 0; text-transform: none; color: inherit; }
.also a, .also button { grid-row: 3; display: flex; flex-direction: column-reverse; align-items: center; gap: 22px; color: inherit; text-decoration: none; text-align: center; font: 500 14.5px/1.15 var(--lit); font-variant-numeric: lining-nums; }
.also :is(a, button):focus-visible { outline: 2px solid var(--stone); outline-offset: 3px; }
.also .cv { flex: none; background: none; box-shadow: -9px 5px 14px -6px #2a1a1080; transition: none; overflow: visible; } .also .cv::before { content: none; }   /* the place of a book the shelves draw: here only the shade it casts on the stone */
.also .cv img { border-radius: 2px; box-shadow: inset 0 0 0 1px #0003; }

/* ---- the field ---- */
#field { position: relative; }
.slot { position: absolute; left: 0; top: 0; scroll-margin: 120px 0 130px; }
#field.cut .slot, #field.cut .slot * { transition: none !important; }
#field.turn:not([data-view=shelf]), #field.turn[data-face] .slot, #field.turn .head { opacity: 0; transition: opacity .12s; }   /* a new arrangement: what is there steps back first. One layer for a list, never one for each of hundreds of rows */
.slot.at { z-index: 3; } @media (hover: hover) { .slot:hover { z-index: 3; } }
.slot.sel { z-index: 4; }
.bk { display: block; position: relative; color: var(--ink); text-decoration: none; outline: 0; cursor: pointer; transition: opacity .3s, scale .3s; -webkit-user-drag: none; }
.slot.out { pointer-events: none; } .slot.out .bk { opacity: 0; scale: .86; }
.cv { display: block; position: relative; width: var(--w); height: var(--h); border-radius: 2px 4px 4px 2px; overflow: hidden; background: var(--g, #2a2523); transform-origin: 50% 100%;
  box-shadow: 0 14px 34px -14px #000c, inset 0 0 0 1px #ffffff14; transition: transform .4s var(--out), box-shadow .4s, width .5s var(--out), height .5s var(--out); }
.cv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.made { position: absolute; inset: 0; display: grid; align-content: end; padding: 12% 10% 14%; font: 800 clamp(11px, calc(var(--h) / 11), 30px)/.92 var(--sg); font-stretch: 56%; text-transform: uppercase; overflow-wrap: anywhere;
  background: radial-gradient(130% 120% at 12% 0%, color-mix(in oklab, var(--ink) 22%, var(--deep)), var(--deep)); }
.edge { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: linear-gradient(90deg, var(--ink) calc(var(--p) * 100%), #000a 0); opacity: 0; }
.reading .edge { opacity: 1; }
@media (hover: hover) { .bk:hover .cv { transform: perspective(700px) translateY(-6px) scale(1.045) rotateY(calc(var(--tx, 0) * 9deg)) rotateX(calc(var(--ty, 0) * -7deg)); box-shadow: 0 30px 60px -18px #000, 0 0 70px -30px var(--a, #fff); } }
.bk:focus-visible .cv { outline: 2px solid var(--accent); outline-offset: 4px; transform: translateY(-6px) scale(1.045); }
.bk.go .cv { view-transition-name: world; }
.cap { display: grid; gap: 4px; width: var(--w); padding-top: 10px; }
.cap strong { font: 700 14px/1.15 var(--sg); font-stretch: 86%; }
.cap :is(strong, em) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }   /* a title or a name runs to a second line before it is ever cut */
.cap :is(em, .st, .t) { font: 500 11.5px/1.2 var(--sg); font-stretch: 100%; font-style: normal; letter-spacing: .02em; color: color-mix(in oklab, var(--ink) 64%, transparent); }
.cap .t { font-variant-numeric: tabular-nums; }
.reading .cap .t, .busy .cap .st { color: var(--accent); }
.new .cap strong::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--accent); }   /* not opened yet */
.cap .st, .cap .bar { display: none; }
.busy .cap .st { display: block; grid-column: 1 / -1; }
.more { position: absolute; z-index: 4; left: calc(var(--w) - 34px); top: 6px; width: 28px; height: 28px; border-radius: 50%; background: #000a; backdrop-filter: blur(8px); opacity: 0; transition: opacity .2s;
  background-image: radial-gradient(circle, #fff 1.5px, #0000 2px); background-size: 6px 6px; background-position: center; background-repeat: repeat-x; background-clip: content-box; padding: 11px 5px; }
.more:focus-visible { opacity: 1; } @media (hover: hover) { .slot:hover .more { opacity: 1; } }
.sel .more, .busy .more { display: none; }
#field[data-size="0"] .cap { display: none; }
.head { position: absolute; left: 0; right: 0; margin: 0; height: 70px; display: flex; align-items: end; gap: 12px; padding-bottom: 14px; font: 800 46px/.8 var(--sg); font-stretch: 50%; text-transform: uppercase; }
.head i { font: 650 12.5px/1 var(--sg); font-stretch: 112%; font-style: normal; letter-spacing: .1em; opacity: .6; padding-bottom: 2px; }
#none { margin: 12vh 0 0; font: 400 22px/1.4 Literata, serif; text-align: center; }

/* the wall bends away at the top and bottom of the window, so the row you are looking at is the one that is flat and bright */
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) {
  #field[data-view=wall] .slot:not(.sel) { animation: lens linear both; animation-timeline: view(); }
  @keyframes lens { 0% { transform: perspective(1100px) rotateX(-32deg) scale(.9); opacity: .28; } 17%, 83% { transform: none; opacity: 1; } 100% { transform: perspective(1100px) rotateX(28deg) scale(.9); opacity: .28; } }
} }
.intro #field .bk { animation: rise .8s var(--out) backwards; animation-delay: calc(140ms + var(--i, 0) * 22ms); }
.intro #hero > * { animation: rise .8s var(--out) backwards; } .intro #hero > .say { animation-delay: 60ms; } .intro #hero > .also { animation-delay: 120ms; }
.intro #hero { animation: none; } .intro .also .cv { animation: seen .5s .8s backwards; } @keyframes seen { from { opacity: 0; } } .intro.back #hero > .vol { animation: none; } .intro.back .face { animation: down .9s var(--out) backwards; }   /* the book you were just in is set down, not faded in */
@keyframes rise { from { opacity: 0; translate: 0 46px; } }
@keyframes down { from { scale: 1.22; translate: 6% 6%; filter: brightness(1.25); } }
/* into a book: everything but its cover steps back, and the cover comes forward to where the reader will show it */
#bar, #hero, .head, #dock, #rail, #bench { transition: opacity .3s; }
/* the room is shown whole or not at all. Until the rail, the standards, the slab, the shelves and the back of the case can all be drawn, with their wood and stone, the window stays dark; then they come up together and the books are set down */
#page, html::before, html::after { transition: opacity .3s; } .wait :is(#bar, #page, #dock, #rail), .wait::before, .wait::after { opacity: 0; transition: none; }
body.leaving :is(#bar, #hero, #none, #detail, .slot, .head, #dock, #rail, #bench) { opacity: 0; pointer-events: none; }   /* the shelves themselves stay: the book you chose comes forward out of them */
#fly { position: fixed; z-index: 20; overflow: hidden; border-radius: 2px 5px 5px 2px; background: var(--g); box-shadow: 0 44px 110px -26px #000; }
#fly > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- the index: the same books as lines of type ---- */
#field[data-view=index] .slot { width: 100%; }
#field[data-view=index] .bk { display: grid; grid-template-columns: 36px minmax(0, 2.3fr) minmax(0, 1.2fr) minmax(0, .9fr) 100px 150px; align-items: center; gap: 0 24px; height: 60px; padding: 0 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 13%, transparent); transition: background .2s, opacity .3s, scale .3s; }
#field[data-view=index] .slot:not(.sel) .cv { --w: 34px; --h: 50px; box-shadow: none; }
#field[data-view=index] .slot:not(.sel) .bk:focus-visible { background: color-mix(in oklab, var(--ink) 8%, transparent); } #field[data-view=index] .slot:not(.sel) .bk:focus-visible .cv { transform: scale(1.3); }
@media (hover: hover) { #field[data-view=index] .slot:not(.sel) .bk:hover { background: color-mix(in oklab, var(--ink) 8%, transparent); } #field[data-view=index] .slot:not(.sel) .bk:hover .cv { transform: scale(1.3); } }
#field[data-view=index] .cap { display: contents; } #field[data-view=index] .cap :is(strong, em, .st, .t) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#field[data-view=index] .cap strong { grid-column: auto; font: 800 25px/1 var(--sg); font-stretch: 60%; text-transform: uppercase; }
#field[data-view=index] .cap :is(em, .st, .t) { font-size: 13.5px; }
#field[data-view=index] .cap .st { display: block; }
#field[data-view=index] .cap .t { text-align: right; } #field[data-view=index] .done .t { visibility: hidden; }
#field[data-view=index] .cap .bar { display: block; height: 4px; border-radius: 1.5px; background: linear-gradient(90deg, var(--ink) calc(var(--p) * 100%), color-mix(in oklab, var(--ink) 20%, transparent) 0); }
#field[data-view=index] .edge { display: none; }
#field[data-view=index] .more { left: auto; right: 176px; top: 16px; }

/* ---- the shelves: the books are solids on ledges, drawn by shelf.js. What lies over them here is only what you press, and the words that name the book in your hand ---- */
.shelf { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
#field[data-view=shelf] .slot { width: var(--sw); transition: opacity .3s; }
#field[data-view=shelf] .slot.on { z-index: 3; }
#field[data-view=shelf] .slot:not(.sel) .bk { height: var(--h); border-radius: 2px; }
#field[data-view=shelf] .slot:not(.sel) .bk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#field[data-view=shelf] .slot:not(.sel) .cv { visibility: hidden; width: 100%; }
#field[data-view=shelf] .slot:not(.sel) .cap { position: absolute; left: var(--cx, 0px); top: calc(100% + 28px); width: max-content; max-width: min(300px, 78vw); padding: 0; opacity: 0; translate: 0 8px; transition: opacity .2s, translate .3s var(--out); pointer-events: none; }
#field[data-view=shelf] .slot.on:not(.sel) .cap, #field[data-face] .slot:not(.sel) .cap { opacity: 1; translate: none; }
#field[data-face] .slot:not(.sel) .cap { width: var(--sw); max-width: none; }
#field[data-view=shelf] .cap strong { font-size: 15px; } #field[data-view=shelf] .cap .st { display: block; }
#field[data-view=shelf] .slot:not(.sel) .more { display: none; }
#field[data-face] .slot:not(.sel) .more { display: block; left: auto; right: 4px; top: 8px; }
#field[data-view=shelf] .head { right: auto; width: 36px; height: var(--h); padding: 0 0 12px; flex-direction: column; justify-content: flex-end; align-items: center; gap: 7px; font-size: 30px; box-shadow: inset 1px 0 color-mix(in oklab, var(--ink) 30%, transparent); }   /* a marker standing among the books where a group begins */
#field[data-view=shelf] .head.long { display: block; writing-mode: vertical-rl; text-align: end; font-size: 22px; line-height: 36px; white-space: nowrap; }
#field[data-view=shelf] .head.long i { margin-top: 10px; }

/* ---- a book's details open in place: the book steps out of its row, the library stays where it was ---- */
.sel .cv { --h: 320px !important; --w: 213px !important; box-shadow: 0 40px 90px -24px #000, 0 0 90px -34px var(--a, #fff); }
.sel .rl { display: none !important; }
.sel .cap, .sel .bk { display: block !important; height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; } .sel .cap { display: none !important; }
#detail { position: absolute; left: -30px; right: -30px; z-index: 2; box-sizing: border-box; height: var(--dh); padding: 44px 30px 0 calc(30px + 213px + 52px); color: var(--ink); display: grid; align-content: start; gap: 16px;
  background: linear-gradient(100deg, color-mix(in oklab, var(--g, #333) 86%, #000), color-mix(in oklab, var(--g, #333) 34%, #000) 75%); box-shadow: inset 0 1px #ffffff1a, inset 0 -1px #ffffff12; }
#detail[hidden] { display: none; }
#detail h2 { margin: 0; font: 800 clamp(34px, 5vw, 70px)/.86 var(--sg); font-stretch: 50%; text-transform: uppercase; text-wrap: balance; max-width: 22ch; }
#detail .x { position: absolute; right: 26px; top: 22px; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(45deg, #0000 46%, currentColor 46% 54%, #0000 54%) 50% / 16px 16px no-repeat, linear-gradient(-45deg, #0000 46%, currentColor 46% 54%, #0000 54%) 50% / 16px 16px no-repeat, #ffffff14; }
.facts { display: flex; flex-wrap: wrap; gap: 10px 38px; margin: 2px 0 0; }
.facts dt { font: 650 11px/1 var(--sg); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 7px; }
.facts dd { margin: 0; font: 700 19px/1 var(--sg); font-stretch: 80%; font-variant-numeric: tabular-nums; }
.parts { display: flex; gap: 2px; height: 16px; max-width: 760px; }
.parts i { flex: var(--w) 1 0; min-width: 1px; background: color-mix(in oklab, var(--ink) 24%, transparent); border-bottom: 3px solid #0000; box-sizing: border-box; }
.parts i.done { background: var(--ink); } .parts i.here { background: linear-gradient(90deg, var(--ink) calc(var(--p) * 100%), color-mix(in oklab, var(--ink) 24%, transparent) 0); }
.parts i.voiced { border-bottom-color: var(--accent); }                /* narration is ready for this part */
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; }
.acts :is(a, button) { height: 44px; padding: 0 20px; border-radius: 22px; display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--ink) 40%, transparent);
  font: 700 12.5px/1 var(--sg); font-stretch: 110%; letter-spacing: .08em; text-transform: uppercase; transition: scale .12s, background .2s; }
.acts :is(a, button):active { scale: .96; }
.acts .read { background: var(--ink); color: #111; box-shadow: none; }
.acts small { font: 400 14px/1.3 Literata, serif; opacity: .75; }
.alts { display: flex; align-items: end; gap: 12px; }
.alts .k { color: inherit; opacity: .6; align-self: center; margin-right: 6px; }
.alts button { display: grid; gap: 6px; font: 500 10.5px/1 var(--sg); letter-spacing: .04em; opacity: .62; transition: opacity .2s; }
.alts button[aria-pressed=true] { opacity: 1; } @media (hover: hover) { .alts button:hover { opacity: 1; } }
.alts img { display: block; height: 76px; width: 51px; object-fit: cover; border-radius: 2px; }
.alts button[aria-pressed=true] img { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---- jump by letter ---- */
#rail { position: fixed; right: 5px; top: 50%; translate: 0 -50%; z-index: 5; display: grid; }
#rail button { width: 22px; height: 18px; font: 700 10.5px/1 var(--sg); color: var(--ink); opacity: .55; }
@media (hover: hover) { #rail button:hover { opacity: 1; color: var(--accent); } } #rail button:active { opacity: 1; color: var(--accent); }

/* ---- bottom: what is shown, in what order, in which form ---- */
#dock { position: fixed; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); translate: -50%; z-index: 6; display: flex; align-items: center; padding: 6px; border-radius: 30px; color: var(--ink); max-width: calc(100vw - 24px); overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(#170e0ad9, #170e0ad9), url(room/walnut.webp) 0 0 / 760px; box-shadow: inset 0 0 0 1px #ffffff24, 0 18px 50px -14px #000; }   /* a strip of the case's own wood: what passes under it never shows through its words */
#dock :is(#tabs, #order, #view, #size) { display: flex; } #dock :is(#order, #view, #size) { margin-left: 8px; padding-left: 8px; border-left: 1px solid #ffffff24; } #dock #size[hidden] { display: none; }
#arr:not(:popover-open) { display: contents; }   /* on a phone order and form are a menu; here they stand in the dock */
#dock button { height: 40px; min-width: 40px; padding: 0 14px; border-radius: 20px; font: 650 12px/1 var(--sg); font-stretch: 108%; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  color: color-mix(in oklab, var(--ink) 66%, transparent); transition: color .2s, background .25s, scale .12s; }
#dock button:active { scale: .95; }
@media (hover: hover) { #dock button:hover { color: var(--ink); } }
#dock button[aria-pressed=true] { background: var(--ink); color: var(--deep); }
#dock button sup { font-size: 9.5px; margin-left: 5px; opacity: .7; }
#view button { display: inline-flex; align-items: center; gap: 8px; } #view i { display: block; flex: none; width: 14px; height: 14px; margin: auto; }   /* each way of seeing the library says its name */
#view .g { background: linear-gradient(currentColor 0 0) 0 100% / 3px 100%, linear-gradient(currentColor 0 0) 5px 100% / 3px 70%, linear-gradient(currentColor 0 0) 10px 100% / 4px 100%; background-repeat: no-repeat; }   /* books on a shelf */
#view .l { background: linear-gradient(currentColor 0 0) 0 1px / 100% 2px, linear-gradient(currentColor 0 0) 0 6px / 100% 2px, linear-gradient(currentColor 0 0) 0 11px / 100% 2px; background-repeat: no-repeat; }
#size button { font-size: 18px; padding: 0 10px; }

/* ---- books on their way in ---- */
#bench { position: fixed; right: 22px; bottom: 92px; z-index: 6; width: 350px; max-width: calc(100vw - 24px); display: grid; padding: 8px; border-radius: 16px; color: var(--ink);
  background: linear-gradient(#170e0ad9, #170e0ad9), url(room/walnut.webp) 0 0 / 760px; box-shadow: inset 0 0 0 1px #ffffff24, 0 18px 50px -14px #000; }
#bench[hidden] { display: none; }
#bench h3 { margin: 0; padding: 8px 10px 6px; font: 650 11px/1 var(--sg); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
#bench p { margin: 0; padding: 6px 10px 8px; font: 400 12.5px/1.35 Literata, serif; opacity: .6; }
.job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 10px; align-items: center; }
.job b { font: 700 14px/1.1 var(--sg); font-stretch: 86%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job span { grid-column: 1; font: 500 12px/1.25 var(--sg); color: color-mix(in oklab, var(--ink) 68%, transparent); }
.job button { grid-row: 1 / span 2; grid-column: 2; height: 30px; padding: 0 12px; border-radius: 15px; box-shadow: inset 0 0 0 1px #ffffff30; font: 650 10.5px/1 var(--sg); letter-spacing: .08em; text-transform: uppercase; }
.job i { grid-column: 1 / -1; height: 3px; border-radius: 1.5px; background: linear-gradient(90deg, var(--accent) calc(var(--p, 0) * 100%), #ffffff22 0); transition: --p .4s; }
.job.bad span { color: #ff9c8a; } .job.bad i { background: #ff9c8a55; }
.job.ok i { background: var(--ink); }
#drop { position: fixed; inset: 14px; z-index: 9; border-radius: 20px; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 20px; color: var(--ink);
  background: color-mix(in oklab, var(--deep) 78%, transparent); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 2px var(--accent); }
#drop[hidden] { display: none; }
#drop b { font: 800 clamp(56px, 13vw, 200px)/.82 var(--sg); font-stretch: 50%; text-transform: uppercase; }
#drop span { font: 400 18px/1.4 Literata, serif; max-width: 44ch; opacity: .85; }

@media (max-width: 899px) {
  :root { --side: 56px; --gap: 26px; --flutes: 2; }
  /* the rail: find, add, and one button for the other rooms */
  #bar { height: 76px; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; } #bar h1, #find kbd { display: none; } #side { gap: 10px; } #find, #side { margin-bottom: 14px; }
  #add { width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; flex: none; } .round { display: block; } #go:not(:popover-open), #arr:not(:popover-open) { display: none; }
  :is(#go, #arr):popover-open { position: fixed; inset: auto; margin: 0; padding: 8px; border: 0; border-radius: 22px; color: var(--ink); display: grid; gap: 4px; overflow: visible;
    background: linear-gradient(#170e0ab3, #170e0ab3), url(room/walnut.webp) 0 0 / 760px; box-shadow: inset 0 0 0 1px #ffffff24, 0 18px 50px -12px #000; }
  #go:popover-open { top: calc(70px + env(safe-area-inset-top, 0px)); right: calc(var(--gap) + var(--post)); min-width: 190px; } #go a { padding: 15px 16px; font-size: 13px; opacity: 1; }
  #arr:popover-open { left: max(10px, calc(100vw - 400px)); right: 10px; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 60px); } #arr :is(#order, #view) { margin: 0; padding: 0; border: 0; }
  #arr button { flex: 1; height: 44px; padding: 0 6px; justify-content: center; font-size: 11px; letter-spacing: .04em; } #arr #size { display: none; }
  :is(#go, #arr)::backdrop { background: #0006; }
  #go #home { position: static; padding: 12px 16px 10px; font-size: 10px; white-space: normal; line-height: 1.4; max-width: 230px; border-top: 1px solid #ffffff1f; }
  #page { padding-top: calc(76px + env(safe-area-inset-top, 0px)); padding-bottom: 130px; }
  #hero { grid-template-columns: 236px minmax(0, 1fr) auto; } #hero:not(:has(.also :is(a, button))) { grid-template-columns: 236px minmax(0, 1fr); }
  .vol { --h: min(34vh, 290px); --t: 20px; } .say { padding: 26px 26px 34px 22px; } .also { padding-right: 30px; } .also :is(a, button):nth-of-type(n + 3) { display: none; }
  .name { font-size: 42px; } .name.long { font-size: 34px; } .name.longer { font-size: 28px; } .by { font-size: 19px; } .go { margin-top: 24px; } .go .k { font-size: 21px; } .go .t { font-size: 16px; } .where { font-size: 14.5px; margin-top: 24px; gap: 12px; white-space: nowrap; }
  /* one row at the thumb: what is shown, and one button for order and form */
  #dock { left: 10px; right: 10px; translate: none; bottom: max(10px, env(safe-area-inset-bottom)); gap: 10px; padding-right: 8px; border-radius: 26px; overflow: visible; max-width: 560px; margin: 0 auto; }
  #tabs { flex: 1 1 auto; } #tabs button { flex: 1; min-width: 0; padding: 0 3px; } #dock button { height: 38px; }
  #rail { display: none; } #bench { right: 12px; bottom: 76px; }
}
@media (max-width: 699px) {
  :root { --side: 30px; --gap: 8px; }
  /* one slab: the words first, then every book standing on the sill at its foot */
  #hero { grid-template-columns: auto minmax(0, 1fr); border-width: 6px 5px 0; margin-bottom: 44px; background-position: 0 0, 100% 0, 0 0, 0 0, 0 0, 21% 50%; background-size: 5px 100%, 5px 100%, 100% 6px, auto, auto, cover; }
  #hero:not(:has(.also :is(a, button))) { grid-template-columns: minmax(0, 1fr); }
  .say { grid-row: 1; grid-column: 1 / -1; padding: 30px 22px 34px; }
  .vol { grid-row: 2; grid-column: 1; --h: 220px; --t: 18px; justify-self: start; margin: 0 0 11px 24px; } #hero:not(:has(.also :is(a, button))) .vol { justify-self: center; margin-left: 0; }
  .also { grid-row: 2; grid-column: 2; justify-content: start; padding: 0 0 11px 8px; } .also .k { display: none; } .also a, .also button { font-size: 12.5px; gap: 20px; }
  .name { font-size: 35px; } .name.long { font-size: 30px; } .name.longer { font-size: 25px; } .by { font-size: 18px; margin-top: 8px; } .by.how { font-size: 16px; }
  .go { gap: 14px; } .disc { width: 54px; height: 54px; } .where { font-size: 15px; gap: 10px; } .say .rl { gap: 0; }
  #tabs button { font-size: 10px; letter-spacing: .02em; }
  #field[data-view=index] .bk { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 0 14px; padding: 0 4px; } #field[data-view=index] .cap :is(em, .st, .bar) { display: none; }
  #field[data-view=index] .cap strong { font-size: 21px; } #field[data-view=index] .bk { padding-right: 40px; } #field[data-view=index] .more { right: 2px; }
  .more { opacity: 1; }
  .sel .cv { --h: 210px !important; --w: 140px !important; }
  #detail { left: -8px; right: -8px; padding: 262px 14px 0; } #detail .x { top: 14px; right: 12px; } .facts { gap: 12px 24px; } .alts { flex-wrap: wrap; }
}

/* when Home was last met and what is waiting for it: the only network state shown */
#home { position: absolute; left: var(--side); top: calc(52px + env(safe-area-inset-top, 0px)); margin: 0; font: 650 10.5px/1 var(--sg); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none; color: #0000; background: var(--leaf); -webkit-background-clip: text; background-clip: text; }
#home.warn { opacity: 1; color: var(--accent); } #home[hidden] { display: none; }

/* ---- what Home answered to something asked from a book's details ---- */
#toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 9; margin: 0; max-width: min(560px, calc(100vw - 32px)); padding: 14px 20px; border-radius: 16px; background: var(--ink); color: #111; font: 500 15px/1.45 var(--sg); font-stretch: 100%; box-shadow: 0 12px 40px #0008; }
#toast a { color: inherit; font-weight: 700; }
.acts .more-link { box-shadow: none; padding: 0 6px; height: 44px; font: 400 14px/1.3 Literata, serif; text-decoration: underline; text-underline-offset: 3px; opacity: .8; letter-spacing: 0; text-transform: none; }
.acts small.warn { flex-basis: 100%; color: var(--accent); opacity: 1; }