/*
  Card Catalogue (v14)
  Oak, brass and typewritten cards. Each chapter is a book on the reading desk.
*/

:root {
  --room: #17100b;
  --oak: #8b5a2b;
  --oak-d: #5a3618;
  --oak-l: #a9763f;
  --brass-1: #f0d89b;
  --brass-2: #c39a55;
  --brass-3: #7c5b28;
  --card: #f7f0dc;
  --rule-red: #cf6a52;
  --rule-blue: #a9c6d8;
  --type: #2b2622;
  --serif: "EB Garamond", Garamond, "Times New Roman", serif;
  --typewriter: "Special Elite", "Courier New", Courier, monospace;
  --marker: "Permanent Marker", "Marker Felt", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--room); }
body { margin: 0; min-height: 100vh; background: var(--room); color: #efe4cc; font-family: var(--serif); overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--brass-1); outline-offset: 3px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.oak {
  background:
    repeating-linear-gradient(91deg, rgba(40, 20, 6, .14) 0 1px, transparent 1px 7px, rgba(255, 230, 190, .05) 7px 8px, transparent 8px 15px),
    linear-gradient(90deg, var(--oak-d), var(--oak) 18%, var(--oak-l) 46%, var(--oak) 70%, var(--oak-d));
}
.brass { background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 45%, var(--brass-3) 56%, var(--brass-2) 80%, var(--brass-1)); }

/* ============ Home: the drawer ============ */

.room { position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; overflow: clip;
  background: radial-gradient(ellipse 70% 60% at 50% 40%, #3a2717, var(--room) 75%);
}
.cabinet {
  position: absolute; inset: -4% -10% 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 100px; gap: 10px;
  padding: 10px; opacity: .32; filter: blur(1.5px); pointer-events: none;
}
.cabinet i { display: block; border-radius: 3px; position: relative; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .12); }
.cabinet i::before { content: ""; position: absolute; left: 50%; top: 22%; width: 54px; height: 22px; margin-left: -27px; border-radius: 2px; background: linear-gradient(180deg, var(--brass-1), var(--brass-3)); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .25), inset 0 0 0 7px #e9e0c8; }
.cabinet i::after { content: ""; position: absolute; left: 50%; top: 58%; width: 40px; height: 16px; margin-left: -20px; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, var(--brass-1), var(--brass-3)); }

.nameplate {
  position: absolute; z-index: 5; top: clamp(14px, 3.4vh, 36px); left: 50%; transform: translateX(-50%);
  width: min(600px, calc(100% - 32px)); padding: 14px 20px 12px; text-align: center; border-radius: 4px;
  color: #2b200f; box-shadow: 0 10px 24px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.nameplate h1 { margin: 0; font-family: var(--serif); font-weight: 600; font-variant: small-caps; letter-spacing: .14em; font-size: clamp(26px, 4.6vw, 46px); line-height: 1; text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
.nameplate p { margin: 6px 0 0; font-family: var(--typewriter); font-size: 13px; letter-spacing: .02em; }
.nameplate::before, .nameplate::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff3cf, #6f5020); }
.nameplate::before { left: 9px; }
.nameplate::after { right: 9px; }

.scene { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 8%; }
.drawer {
  --cw: min(560px, calc(100vw - 56px));
  --ch: calc(var(--cw) * .6);
  position: absolute; left: 50%; top: 58%; width: calc(var(--cw) + 36px); height: var(--ch);
  margin-left: calc((var(--cw) + 36px) / -2); margin-top: calc(var(--ch) / -2);
  transform-style: preserve-3d;
  animation: slideout 1.4s cubic-bezier(.16, .84, .24, 1) both;
}
@keyframes slideout { from { transform: translate3d(0, -50px, -520px); } }
.drawer-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; transform-origin: 50% 100%; transform: rotateX(90deg); background: linear-gradient(180deg, #1c120a, #3a2615); }
.drawer-side { position: absolute; bottom: 0; width: 300px; height: calc(var(--ch) * .5); transform-origin: 0 50%; }
.drawer-side--l { left: 0; transform: translateZ(26px) rotateY(90deg); }
.drawer-side--r { left: 100%; transform: translateZ(26px) rotateY(90deg); }
.drawer-back { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--ch) * .5); transform: translateZ(-274px); filter: brightness(.55); }
.cards { position: absolute; left: 18px; bottom: 0; width: var(--cw); height: var(--ch); transform-style: preserve-3d; }

.card {
  --head: calc(var(--cw) * .1);
  --lh: calc(var(--cw) * .055);
  position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;
  display: block; overflow: hidden; text-decoration: none; color: var(--type);
  padding: 0 calc(var(--cw) * .05);
  border-radius: 6px;
  background:
    linear-gradient(var(--rule-red), var(--rule-red)) 0 var(--head) / 100% 2px no-repeat,
    repeating-linear-gradient(180deg, transparent 0 calc(var(--lh) - 1px), var(--rule-blue) calc(var(--lh) - 1px) var(--lh)) 0 calc(var(--head) + 2px) / 100% 100% no-repeat,
    linear-gradient(180deg, #fbf6e6, var(--card));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 -1px 0 rgba(0, 0, 0, .08), 0 -6px 14px rgba(0, 0, 0, .14);
  transform-origin: 50% 100%;
  font-family: var(--typewriter);
  will-change: transform, opacity;
}
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; height: var(--head); padding-top: calc(var(--cw) * .008); font-size: calc(var(--cw) * .018 + 5px); line-height: 1.15; letter-spacing: .04em; }
.callno, .card-kind { flex: 0 0 auto; }
.tab-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.card.is-front .tab-title, .flat .tab-title { visibility: hidden; }
.callno { font-size: 1.05em; }
.card-kind { text-transform: uppercase; font-size: .86em; opacity: .75; }
.card-author { display: block; margin-top: calc(var(--lh) * .12); font-size: calc(var(--cw) * .02 + 5px); line-height: var(--lh); opacity: .8; }
.card-title { display: block; font-size: calc(var(--cw) * .034 + 6px); line-height: var(--lh); text-shadow: 0 0 .5px rgba(43, 38, 34, .5); }
.card-tag {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: calc(var(--cw) * .02 + 6px); line-height: var(--lh); opacity: .9;
}
.card-hole { position: absolute; left: 50%; bottom: calc(var(--ch) * .05); width: calc(var(--cw) * .04); height: calc(var(--cw) * .04); margin-left: calc(var(--cw) * -.02); border-radius: 50%; background: #1c130b; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6); }
.card--blank .callno { color: #8f877a; font-family: var(--typewriter); }
a.card:hover .card-title, a.card:focus-visible .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
a.card:focus-visible { outline: 3px solid var(--brass-1); outline-offset: 2px; }

.drawer-front {
  position: absolute; left: -14px; right: -14px; bottom: -28px; height: calc(var(--ch) * .14 + 28px);
  transform: translateZ(34px); border-radius: 4px;
  display: flex; align-items: center; justify-content: center; gap: clamp(18px, 6vw, 60px);
  box-shadow: 0 18px 30px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .15), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.label-holder { display: grid; place-items: center; padding: 5px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.label-holder span { display: block; padding: 3px 10px; background: #efe7d2; color: var(--type); font-family: var(--typewriter); font-size: clamp(10px, 1.5vw, 13px); white-space: nowrap; }
.pull { width: clamp(46px, 8vw, 70px); height: clamp(18px, 3vw, 26px); border-radius: 0 0 40px 40px; box-shadow: 0 4px 6px rgba(0, 0, 0, .45), inset 0 -3px 4px rgba(0, 0, 0, .25); }

.ctrl {
  position: absolute; z-index: 5; left: 12px; right: 12px; bottom: max(14px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px;
  font-family: var(--typewriter); font-size: 14px; color: #e9dcc0;
}
.ctrl button {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; color: #2b200f; font-size: 22px; line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.ctrl button:disabled { opacity: .35; cursor: default; }
.count { min-width: 12em; text-align: center; }
.ctrl .basket { flex-basis: 100%; text-align: center; font-size: 12px; opacity: .8; }
.ctrl .basket b { font-weight: 400; color: var(--brass-1); }

/* Reduced motion: the drawer as a flat list of cards */
.flat .room { height: auto !important; }
.flat .stage { position: static; height: auto; overflow: visible; padding: 150px 16px 50px; }
.flat .cabinet, .flat .drawer-floor, .flat .drawer-side, .flat .drawer-back, .flat .ctrl button, .flat .count { display: none; }
.flat .scene { position: static; perspective: none; }
.flat .drawer { position: static; animation: none; margin: 0 auto; width: min(560px, 100%); height: auto; transform: none; }
.flat .cards { position: static; width: 100%; height: auto; display: grid; gap: 16px; }
.flat .card { position: relative; height: calc(var(--cw) * .6); transform: none !important; opacity: 1 !important; visibility: visible !important; }
.flat .drawer-front { position: relative; left: auto; right: auto; bottom: auto; margin-top: 18px; height: 70px; transform: none; }
.flat .ctrl { position: static; margin-top: 24px; }

/* ============ Chapter: the book ============ */

body.reading-room {
  background:
    radial-gradient(ellipse 60% 50% at 50% 34%, rgba(255, 196, 120, .16), transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 100%, #2a3a2c, transparent 60%),
    var(--room);
}
.lib-bar {
  position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px clamp(12px, 3vw, 32px); font-family: var(--typewriter); font-size: 14px; color: #e9dcc0;
}
.lib-bar a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.lib-bar a:hover { color: var(--brass-1); }
.lib-bar-right { display: flex; gap: 18px; align-items: center; min-width: 0; }
.lib-bar b { font-weight: 400; color: var(--brass-1); }

.reader { display: grid; justify-items: center; gap: 16px; padding: clamp(6px, 2vh, 20px) 16px 10px; overflow-x: hidden; overflow-x: clip; }
.reader > * { max-width: 100%; }
.book-wrap { position: relative; width: calc(var(--pw, 300px) * 2); height: var(--ph, 420px); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.book-wrap.is-single { width: var(--pw, 300px); }
.book-wrap::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: -14px; height: 30px; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(14px); }
.book { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.3, .1, .2, 1); }
.book.is-closed { transform: translateX(-25%); }

.leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: 0 50%; transform-style: preserve-3d;
  transform: perspective(2600px) rotateY(0deg);
  transition: transform 1s cubic-bezier(.35, .1, .2, 1);
  cursor: pointer;
}
.leaf.turned { transform: perspective(2600px) rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.face--back { transform: rotateY(180deg); }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 60%); }
.leaf.is-moving .face::after { opacity: 1; }

.sheet { position: absolute; inset: 0; transform-origin: 0 50%; transform: perspective(1800px) rotateY(0deg); transition: transform .8s cubic-bezier(.35, .1, .2, 1), opacity .8s; }
.sheet.gone { transform: perspective(1800px) rotateY(-110deg); opacity: 0; pointer-events: none; }

.flatbook { display: flex; }
.flatbook .slot { position: relative; flex: 1 1 0; min-width: 0; height: 100%; transition: opacity .2s; }
.flatbook .slot.is-fading { opacity: 0; }

.reader-ctrl { display: flex; align-items: center; justify-content: center; gap: 14px; font-family: var(--typewriter); font-size: 14px; color: #e9dcc0; }
.reader-ctrl button {
  width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; color: #2b200f; font-size: 22px; line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.reader-ctrl button:disabled { opacity: .35; cursor: default; }
.pos { min-width: 11em; text-align: center; }

/* Pages */
.pg {
  --accent: #8a2a1e; --muted: #7b6f60;
  position: absolute; inset: 0; overflow: hidden;
  background: var(--paper, #f8f4ea); color: #2a241d; font-family: var(--serif); font-size: var(--fs, 17px); line-height: 1.5;
}
.pg.recto { border-radius: 0 5px 5px 0; box-shadow: inset 22px 0 34px -22px rgba(60, 40, 20, .45), inset -1px 0 0 rgba(0, 0, 0, .08); }
.pg.verso { border-radius: 5px 0 0 5px; box-shadow: inset -22px 0 34px -22px rgba(60, 40, 20, .45), inset 1px 0 0 rgba(0, 0, 0, .08); }
.is-single .pg { border-radius: 2px 5px 5px 2px; box-shadow: inset 16px 0 26px -18px rgba(60, 40, 20, .45); }
.pg-in { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8% 10% 7%; }
.pg.recto .pg-in.has-note { padding-right: 24%; }
.pg.verso .pg-in.has-note { padding-left: 24%; }
.is-single .pg-in.has-note { padding-left: 10%; padding-right: 10%; }

.rh { margin: 0 0 1.4em; text-align: center; font-size: .66em; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.folio { margin: auto 0 0; padding-top: .8em; text-align: center; font-size: .78em; color: var(--muted); font-variant-numeric: oldstyle-nums; }
.sec-no { display: block; text-align: center; font-size: .9em; letter-spacing: .24em; color: var(--accent); }
.sec-h { margin: .2em 0 .9em; text-align: center; font-weight: 500; font-variant: small-caps; letter-spacing: .05em; font-size: 1.28em; line-height: 1.15; }
.txt { margin: 0; text-align: justify; hyphens: auto; -webkit-hyphens: auto; line-height: 1.55; }
.txt.dropcap::first-letter { float: left; font-size: 3.35em; line-height: .8; margin: .06em .08em 0 0; color: var(--accent); font-weight: 500; }
.note { position: absolute; top: 34%; width: 15%; margin: 0; font-style: italic; font-size: .72em; line-height: 1.35; color: var(--muted); }
.pg.recto .note { right: 5%; }
.pg.verso .note { left: 5%; text-align: right; }
.is-single .note { position: static; width: auto; margin-top: 1.1em; text-align: left; }
.is-single .note::before { content: "\2767\00a0"; font-style: normal; color: var(--accent); }

.title-page .pg-in { align-items: center; justify-content: center; text-align: center; gap: .6em; }
.tp-call { font-family: var(--typewriter); font-size: .8em; letter-spacing: .08em; color: var(--muted); }
.tp-title { margin: .2em 0 0; font-weight: 500; font-size: 2.3em; line-height: 1.02; letter-spacing: -.005em; }
.tp-orn { color: var(--accent); font-size: 1.4em; line-height: 1; }
.tp-tag { margin: 0; font-style: italic; font-size: 1.02em; line-height: 1.4; max-width: 22em; }
.tp-author { margin-top: 1.8em; font-variant: small-caps; letter-spacing: .16em; font-size: 1.05em; }

.lede-page .pg-in { justify-content: center; }
.lede-q { margin: 0; font-style: italic; font-size: 1.45em; line-height: 1.3; text-align: center; }
.lede-q::before { content: "\201C"; display: block; font-size: 2.2em; line-height: .6; color: var(--accent); font-style: normal; }
.mirror-title { margin: 0 0 .9em; text-align: center; font-weight: 500; font-size: 2.2em; line-height: 1.02; }

.plate-page .pg-in { justify-content: center; align-items: center; gap: 1em; }
.plate { margin: 0; position: relative; width: 100%; padding: 4%; background: #fffdf6; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.plate img { display: block; width: 100%; height: auto; }
.plate::before, .plate::after, .plate i::before, .plate i::after {
  content: ""; position: absolute; width: 8%; aspect-ratio: 1; background: #2b2420;
}
.plate::before { left: 1%; top: 1%; clip-path: polygon(0 0, 100% 0, 0 100%); }
.plate::after { right: 1%; top: 1%; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.plate i::before { left: 1%; bottom: 1%; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.plate i::after { right: 1%; bottom: 1%; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.plate-cap { margin: 0; text-align: center; font-style: italic; font-size: .82em; line-height: 1.4; color: var(--muted); max-width: 26em; }
.plate-no { font-style: normal; font-variant: small-caps; letter-spacing: .12em; color: var(--accent); }
.typo-plate { display: grid; place-items: center; width: 100%; flex: 1 1 auto; min-height: 0; text-align: center; }
.typo-big { font-size: 9em; line-height: .8; font-weight: 500; color: var(--accent); }
.typo-rev { display: inline-block; transform: scaleX(-1); font-weight: 500; font-size: 2.2em; line-height: 1.02; }

.posters-page .pg-in { gap: .6em; }
.pp-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6%; align-items: start; }
.pp { margin: 0; display: grid; gap: .3em; min-width: 0; }
.pp .plate { padding: 5%; }
.pp figcaption { text-align: center; font-size: .78em; line-height: 1.3; }
.pp figcaption b { display: block; font-weight: 500; font-variant: small-caps; letter-spacing: .06em; font-size: 1.1em; }

.details-page ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
.details-page li { display: flex; gap: .7em; line-height: 1.35; }
.details-page li::before { content: "\2766"; color: var(--accent); flex: 0 0 auto; }

.ledger { width: 100%; border-collapse: collapse; font-size: .86em; }
.ledger th { text-align: left; font-weight: 500; font-variant: small-caps; letter-spacing: .06em; color: var(--accent); padding: .3em .3em; border-bottom: 2px solid var(--accent); }
.ledger td { padding: .45em .3em; border-bottom: 1px solid rgba(80, 120, 150, .45); vertical-align: middle; }
.ledger td.num { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.ledger .add { min-height: 34px; padding: 0 .8em; border-radius: 4px; border: 1px solid #2a241d; background: transparent; cursor: pointer; font-family: var(--typewriter); font-size: .82em; }
.ledger .add:hover { background: #2a241d; color: #f6f0de; }
.ledger .add.is-added { background: #2a241d; color: #f6f0de; }

.notes-page .lines { flex: 1 1 auto; background: repeating-linear-gradient(180deg, transparent 0 1.9em, rgba(120, 110, 95, .28) 1.9em calc(1.9em + 1px)); }

.stickers-page .pg-in { justify-content: center; }
.stk-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.2em 1em; }
.stk { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: .4em; background: #fffdf8; border-radius: 4px; text-align: center; font-family: var(--marker); font-size: 1.05em; line-height: 1.05; color: #161616; box-shadow: 0 1px 0 rgba(0, 0, 0, .1), 0 4px 10px rgba(0, 0, 0, .18); transform: rotate(var(--r, -3deg)); }
.stk:nth-child(2) { --r: 4deg; }
.stk:nth-child(3) { --r: 2deg; }
.stk:nth-child(4) { --r: -5deg; }

/* Endpapers and bookplate */
.endpaper { background: var(--ep1); }
.b-cloth .endpaper {
  background:
    radial-gradient(circle, var(--ep2) 0 2.4px, transparent 2.9px) 0 0 / 18px 18px,
    radial-gradient(circle, var(--ep2) 0 1.2px, transparent 1.7px) 9px 9px / 18px 18px,
    var(--ep1);
}
.b-leather .endpaper {
  background:
    radial-gradient(circle at 50% 100%, transparent 0 7px, rgba(255, 255, 255, .07) 7px 8.5px, var(--ep2) 8.5px 10px, transparent 10.5px) 0 0 / 22px 11px,
    radial-gradient(circle at 50% 100%, transparent 0 7px, rgba(255, 255, 255, .07) 7px 8.5px, var(--ep2) 8.5px 10px, transparent 10.5px) 11px 5.5px / 22px 11px,
    var(--ep1);
}
.b-zine .endpaper {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 4.1'/></filter><rect width='200' height='200' filter='url(%23z)'/></svg>"),
    var(--ep1);
}
.b-ledger .endpaper {
  background:
    repeating-radial-gradient(circle at 0 100%, var(--ep2) 0 2px, var(--ep1) 2px 9px) 0 0 / 36px 36px;
}
.bookplate { margin: auto; width: 62%; padding: 1.1em 1em 1.2em; text-align: center; background: #fbf7ea; color: #2a241d; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); outline: 1px solid rgba(42, 36, 29, .35); outline-offset: -8px; }
.bookplate small { display: block; font-style: italic; font-size: .82em; color: var(--accent); }
.bookplate b { display: block; margin-top: .2em; font-weight: 500; font-variant: small-caps; letter-spacing: .14em; font-size: 1.15em; }
.bookplate span { display: block; margin-top: .5em; font-family: var(--typewriter); font-size: .74em; color: #6b5f50; }
.endpaper .pg-in { justify-content: center; align-items: center; }

/* Covers */
.cover { color: var(--tool); }
.cover .pg-in { align-items: center; justify-content: center; text-align: center; padding: 12% 12%; }
.cover-title { margin: 0; font-weight: 600; font-variant: small-caps; letter-spacing: .06em; font-size: 2.15em; line-height: 1.04; }
.foil {
  background: linear-gradient(172deg, var(--t1) 0%, var(--t2) 38%, var(--t3) 62%, var(--t4) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cover-author { margin-top: 1.4em; font-variant: small-caps; letter-spacing: .2em; font-size: .95em; }
.cover-orn { font-size: 1.2em; line-height: 1; margin: .6em 0; }
.cover-label { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); padding: .2em .6em; background: #f4efe0; color: #2a241d; font-family: var(--typewriter); font-size: .7em; letter-spacing: .06em; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); white-space: nowrap; }
.cover-frame { position: absolute; inset: 7%; pointer-events: none; }

.b-cloth .cover {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 7%, rgba(255, 255, 255, .08) 8%, rgba(0, 0, 0, 0) 11%),
    var(--cover);
}
.b-cloth .cover-frame { border: 2px solid rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 1px rgba(255, 255, 255, .08); border-radius: 2px; }

.b-leather .cover {
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .13), transparent 58%),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .07) 0 .8px, transparent 1.4px) 0 0 / 5px 5px,
    radial-gradient(circle at 60% 70%, rgba(0, 0, 0, .28) 0 1.1px, transparent 1.7px) 0 0 / 7px 6px,
    radial-gradient(circle at 20% 80%, rgba(0, 0, 0, .18) 0 .9px, transparent 1.5px) 0 0 / 4px 9px,
    linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 6%, rgba(255, 255, 255, .06) 7%, rgba(0, 0, 0, 0) 10%),
    var(--cover);
}
.b-leather .cover-frame { inset: 6%; border: 2px solid var(--tool); outline: 1px solid var(--tool); outline-offset: 5px; opacity: .85; }

.b-zine .cover {
  color: #111;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch' seed='5'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 4.2'/></filter><rect width='200' height='200' filter='url(%23z)'/></svg>"),
    linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 30%, rgba(0, 0, 0, .05)),
    var(--cover);
}
.b-zine .cover .pg-in { align-items: flex-start; text-align: left; justify-content: flex-end; }
.b-zine .cover-title { font-family: var(--typewriter); font-variant: normal; text-transform: uppercase; letter-spacing: .02em; font-size: 2.3em; background: #111; color: var(--cover); padding: .12em .3em .06em; transform: rotate(-2deg); line-height: 1.12; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.b-zine .cover-big { position: absolute; right: 6%; top: 4%; font-family: var(--serif); font-weight: 600; font-size: 9em; line-height: 1; color: #111; opacity: .9; }
.b-zine .cover-author { font-family: var(--typewriter); font-variant: normal; letter-spacing: .04em; }
.staple { position: absolute; left: 3.5%; width: 3px; height: 9%; border-radius: 2px; background: linear-gradient(90deg, #8d9096, #e9ebee, #8d9096); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.staple--a { top: 20%; }
.staple--b { bottom: 20%; }

.b-ledger .cover {
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px),
    var(--cover);
}
.b-ledger .cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13%; background: var(--corner); box-shadow: inset -4px 0 6px rgba(0, 0, 0, .3); }
.corner { position: absolute; right: 0; width: 22%; aspect-ratio: 1; background: var(--corner); }
.corner--t { top: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.corner--b { bottom: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.b-ledger .cover-label-box { position: relative; padding: 1.2em 1.4em; background: #efe6cf; color: #2a241d; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); outline: 1px solid #a99674; outline-offset: -6px; }
.b-ledger .cover-label-box .cover-title { font-size: 1.7em; color: #2a241d; }
.b-ledger .cover-label-box .cover-author { color: #5c5040; margin-top: .8em; }

/* Page papers per binding */
.b-leather .pg { --accent: #8f1f1f; }
.b-leather .pg:not(.cover):not(.endpaper) { box-shadow: inset 0 0 0 1px rgba(150, 110, 60, .25), inset 22px 0 34px -22px rgba(60, 40, 20, .45); }
.b-leather .sec-h { font-variant: small-caps; letter-spacing: .1em; }

.b-zine .pg:not(.cover):not(.endpaper) {
  font-family: var(--typewriter); line-height: 1.55;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='z'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' stitchTiles='stitch' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 4.35'/></filter><rect width='200' height='200' filter='url(%23z)'/></svg>"),
    radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0, 0, 0, .1)),
    var(--paper);
  --accent: #111; --muted: #4c4c4c;
}
.b-zine .sec-h { display: table; margin: .2em auto .9em; padding: .12em .45em .05em; background: #111; color: var(--paper); font-variant: normal; text-transform: uppercase; letter-spacing: .02em; transform: rotate(-1.5deg); font-size: 1.12em; }
.b-zine .txt { text-align: left; hyphens: manual; }
.b-zine .txt.dropcap::first-letter { font-family: var(--serif); font-weight: 600; color: #111; }
.b-zine .tp-title { font-family: var(--typewriter); text-transform: uppercase; }

.b-ledger .pg:not(.cover):not(.endpaper) {
  background:
    linear-gradient(90deg, transparent 0 calc(10% - 3px), rgba(200, 70, 60, .55) calc(10% - 3px) calc(10% - 2px), transparent calc(10% - 2px) 10%, rgba(200, 70, 60, .55) 10% calc(10% + 1px), transparent calc(10% + 1px)),
    repeating-linear-gradient(180deg, transparent 0 calc(1.55em - 1px), rgba(80, 130, 160, .3) calc(1.55em - 1px) 1.55em),
    var(--paper);
  background-position: 0 0, 0 2.2em, 0 0;
}
.b-ledger .pg { --accent: #8a2a1e; }

/* The pocket and slip, inside the back cover */
.pocket-page .pg-in { padding: 8% 9%; }
.pocket-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.slip {
  position: absolute; left: 7%; right: 7%; top: 0; bottom: 4%;
  padding: 7% 8%; background: #fbf6e3; color: #2a241d; box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
  font-family: var(--typewriter); font-size: .8em; line-height: 1.45;
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(80, 130, 160, .28) 0);
  background-size: 100% 1.45em; background-position: 0 2.2em;
}
.slip-head { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 .4em; text-transform: uppercase; letter-spacing: .06em; font-size: .86em; }
.slip-title { margin: 0 0 .6em; font-family: var(--serif); font-size: 1.5em; line-height: 1.05; }
.slip-rows { margin: 0 0 .8em; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1em 1em; }
.slip-rows dt { text-transform: uppercase; font-size: .86em; letter-spacing: .06em; color: #6b5f50; }
.slip-rows dd { margin: 0; }
.slip-btn {
  position: relative; z-index: 2; min-height: 44px; padding: 0 1.2em; border-radius: 4px; border: 0; cursor: pointer;
  background: #2a241d; color: #f6f0de; font-family: var(--typewriter); font-size: 1em; letter-spacing: .03em;
  box-shadow: 0 2px 0 #000;
}
.slip-btn:hover { background: #000; }
.slip-btn.is-added { background: #6a1d2c; }
.pocket {
  position: absolute; left: 0; right: 0; bottom: 0; height: 38%; z-index: 3;
  display: grid; place-items: center; text-align: center; color: #5b4a33;
  background: linear-gradient(180deg, #ecdfc2, #e2d2ae);
  clip-path: polygon(0 0, 36% 0, 41% 12%, 59% 12%, 64% 0, 100% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, .18));
}
.pocket span { display: block; padding-top: 10%; font-variant: small-caps; letter-spacing: .14em; font-size: .86em; }
.pocket small { display: block; font-family: var(--typewriter); font-size: .72em; letter-spacing: .04em; }
.stamp-ink {
  position: absolute; right: 7%; top: 30%; z-index: 2; display: grid; justify-items: center; gap: .1em;
  padding: .35em .7em .3em; border: 3px double #6a1d2c; border-radius: 6px; color: #6a1d2c;
  font-family: var(--typewriter); font-size: .9em; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-9deg); opacity: 0; pointer-events: none; mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3 2.6'/></filter><rect width='120' height='120' filter='url(%23r)'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='r'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -3 2.6'/></filter><rect width='120' height='120' filter='url(%23r)'/></svg>");
}
.stamp-ink b { font-weight: 400; font-size: 1.25em; letter-spacing: .14em; }
.stamp-ink.is-on { opacity: .92; }
.stamp-tool { position: absolute; right: 9%; top: 0; z-index: 4; width: 30%; transform: translateY(-160%); opacity: 0; pointer-events: none; }
.stamp-tool .handle { display: block; width: 34%; margin: 0 auto; aspect-ratio: 1 / 1.4; border-radius: 50% 50% 12% 12%; background: radial-gradient(circle at 35% 30%, #b07a48, #5d3a1d 70%); }
.stamp-tool .neck { display: block; width: 20%; height: 12px; margin: 0 auto; background: #4a2d14; }
.stamp-tool .base { display: block; height: 18px; border-radius: 3px; background: linear-gradient(#7a5230, #4a2d14); box-shadow: 0 3px 0 #6a1d2c; }
.stamp-tool.is-down { animation: stamp .9s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes stamp {
  0% { transform: translateY(-160%); opacity: 1; }
  38% { transform: translateY(70%); opacity: 1; }
  52% { transform: translateY(78%) scale(1.02, .96); opacity: 1; }
  100% { transform: translateY(-160%); opacity: 0; }
}

/* Shelf: previous and next cards */
.shelf { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; max-width: 1080px; margin: clamp(20px, 4vw, 40px) auto 0; padding: 0 16px clamp(30px, 6vw, 60px); align-items: stretch; }
.shelf a {
  --head: 26px;
  display: grid; align-content: start; gap: 4px; min-width: 0; padding: 0 14px 12px; border-radius: 5px; text-decoration: none; color: var(--type);
  background: linear-gradient(var(--rule-red), var(--rule-red)) 0 var(--head) / 100% 2px no-repeat, var(--card);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .4); font-family: var(--typewriter); transition: transform .25s;
}
.shelf a:hover { transform: translateY(-4px) rotate(-.6deg); }
.shelf small { display: block; height: var(--head); line-height: var(--head); font-size: 12px; letter-spacing: .06em; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf b { font-weight: 400; font-size: 17px; line-height: 1.3; overflow-wrap: break-word; }
.shelf .sh-next { text-align: right; }
.shelf .sh-home { align-content: center; text-align: center; background: linear-gradient(180deg, var(--brass-1), var(--brass-2) 45%, var(--brass-3) 56%, var(--brass-2) 80%, var(--brass-1)); color: #2b200f; padding: 12px 18px; }
@media (max-width: 640px) {
  .shelf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .shelf .sh-home { grid-column: 1 / -1; grid-row: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .drawer { animation: none; }
  .book, .leaf, .sheet { transition: none !important; }
  .stamp-tool.is-down { animation: none; }
  .shelf a { transition: none; }
}

/* Single page reader: notes sit under the text, margins even */
.is-single .pg .pg-in.has-note { padding-left: 10%; padding-right: 10%; }
.is-single .pg .note { text-align: left; }

/* Phones: no filters on the drawer while it scrolls */
@media (max-width: 820px), (pointer: coarse) {
  .cabinet { filter: none; opacity: .28; }
  .drawer-back { filter: none; box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .45); }
  .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #000; opacity: var(--dim, 0); pointer-events: none; }
  .flat .card::after { display: none; }
}