/* The room. Copied from unhack-root/web/styles.css ("The library"), so the
   two shelves are one piece of furniture. Only the additions at the end
   are this site's own: the on-order outline and the plain list.

   The copied rules use that site's token names; they are mapped onto this
   site's here rather than renamed, so a fix there can be carried across
   by pasting. */
:root {
  --ink: var(--fg); --ink-soft: var(--muted); --line: var(--rule);
  --bg-soft: var(--bg-alt); --radius: 12px;
}

/* --- The library ---------------------------------------------------
   Leather is faked with three things and no images: a cross-spine
   gradient so the book reads as round rather than flat, a very fine
   repeating gradient for grain, and raised bands near the ends. Gilt is
   a gradient with a dark edge under it, because real gold leaf is bright
   metal over a debossed line and flat yellow never reads as gold. */

.library-fonts { font-family: "EB Garamond", Georgia, serif; }

.desk {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-top: 1.75rem; padding: 1.15rem 1.3rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.desk-words { flex: 1 1 18rem; min-width: 0; }
.desk h2 {
  margin: 0 0 .4rem; font-size: 1.5rem; line-height: 1.2;
  font-family: "EB Garamond", Georgia, serif; font-weight: 600;
}
.desk p { margin: 0; color: var(--ink-soft); font-size: .97rem; }
.desk-actions { display: flex; align-items: center; gap: .75rem; }
.desk-ask { white-space: nowrap; }

.shelf-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 1.6rem 0 .7rem; font-size: .9rem;
}
.controls-label { color: var(--ink-soft); margin-right: .2rem; }
.shelf-controls button {
  font: inherit; padding: .3rem .7rem; cursor: pointer;
  color: var(--ink-soft); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
}
.shelf-controls button[aria-pressed="true"] {
  color: var(--bg); background: var(--accent); border-color: var(--accent);
}

/* The case. Dark on both themes on purpose — a library is a dark room
   with light on the spines, and a white one looks like a spreadsheet. */
/* The case sits in a frame so the arrows can hang over its edges without
   being inside the thing that scrolls. */
.shelf-frame { position: relative; }
.shelf-nav {
  position: absolute; top: 0; bottom: 15px; width: 46px; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; padding: 0;
  color: #f0e3cb; font-size: 26px; line-height: 1;
  transition: opacity .2s;
}
.shelf-nav[hidden] { display: none; }
.shelf-nav-prev { left: 0;  border-radius: 10px 0 0 0;
  background: linear-gradient(90deg, #3a2a1ce6 30%, #3a2a1c00 100%); }
.shelf-nav-next { right: 0; border-radius: 0 10px 0 0;
  background: linear-gradient(270deg, #3a2a1ce6 30%, #3a2a1c00 100%); }
.shelf-nav:hover { color: #fff; }
.shelf-nav svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px #000); }

.shelf-case {
  --case: #6b4f33;
  position: relative; border-radius: 10px; padding: 1.4rem 1.1rem .5rem;
  /* Wood: irregular grain rather than an even stripe, a warm mid-brown
     rather than near-black, and only a soft shadow at the top, so the
     shelf reads as lit from the room instead of unlit. */
  background:
    linear-gradient(180deg, #00000026 0%, #0000 22%, #0000 78%, #0000002e 100%),
    repeating-linear-gradient(90deg,
      #00000010 0 2px, #0000 2px 7px, #ffffff0a 7px 8px, #0000 8px 17px,
      #00000014 17px 19px, #0000 19px 29px),
    linear-gradient(180deg, #7d5d3d 0%, #6b4f33 45%, #5a4129 100%);
  box-shadow: inset 0 9px 18px -12px #0008, 0 2px 14px #0003;
  overflow-x: auto; overflow-y: hidden; perspective: 1400px;
  /* The scrollbar was a gray browser bar laid across the wood, right where
     the shelf edge should be. Now that the arrows exist it has nothing
     left to tell anyone, so it goes and the board is unbroken. Dragging,
     swiping, trackpads and keyboards all still scroll. */
  scrollbar-width: none;
}
.shelf-case::-webkit-scrollbar { height: 0; width: 0; }
.shelf-row {
  display: flex; align-items: flex-end; gap: 3px;
  min-height: 218px; padding-bottom: 2px;
  transform-style: preserve-3d;
}
/* Outside the scrolling case. Inside it, the board was only as wide as
   the visible area, so it ran out from under the books as soon as you
   scrolled — the shelf edge stopped a few books short. A shelf edge is a
   fixed piece of furniture; it should not move when you look along it. */
.shelf-board {
  height: 15px; border-radius: 0 0 8px 8px;
  background:
    repeating-linear-gradient(90deg,
      #00000012 0 3px, #0000 3px 11px, #ffffff0c 11px 12px, #0000 12px 23px),
    linear-gradient(180deg, #9c7850 0%, #7a5c3c 40%, #4e3823 100%);
  box-shadow: 0 5px 12px -4px #0007, inset 0 1px 0 #ffffff26;
}
.shelf-hint { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-soft); }
.shelf-noscript { color: #e8dcc8; padding: 1rem; }

/* A book. Width is the time it asks of you; height means nothing. */
.book {
  --leather: #463322;
  position: relative; flex: none; padding: 0; cursor: pointer;
  width: 48px; height: var(--tall, 186px);
  background: none; border: 0;
  transform-style: preserve-3d; transition: transform .45s ease, margin .45s ease;
  transform-origin: bottom center;
}
.book-t1 { width: 44px; } .book-t2 { width: 60px; }
.book-t3 { width: 80px; } .book-t4 { width: 98px; }

.spine, .face {
  position: absolute; inset: 0; border-radius: 3px 5px 5px 3px;
  backface-visibility: hidden;
  background:
    linear-gradient(90deg, #0008 0%, #0000 14%, #ffffff14 32%, #0000 62%, #0007 100%),
    repeating-linear-gradient(0deg, #0000000d 0 2px, #0000 2px 5px),
    var(--leather);
  box-shadow: inset 0 0 0 1px #0004, 2px 2px 7px -2px #000a;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; overflow: hidden;
}
/* The cover is hinged on the spine's outer edge and folded back 90°, so
   it is a real cover — much wider than the spine, the way a book is —
   rather than a second panel the same width. Turning the book swings it
   into view. */
.face {
  visibility: hidden;          /* only the open book needs one — see below */
  left: 100%; right: auto; width: 132px;
  transform-origin: left center;
  transform: rotateY(-90deg);
  border-radius: 2px 6px 6px 2px;
  background:
    linear-gradient(105deg, #0007 0%, #ffffff10 8%, #0000 30%, #0000 78%, #0005 100%),
    repeating-linear-gradient(0deg, #0000000d 0 2px, #0000 2px 5px),
    var(--leather);
  box-shadow: inset 0 0 0 1px #0004, inset 0 0 28px -6px #0007;
}
/* A blind-tooled border, the way a bound cover is finished. */
.face::after {
  content: ""; position: absolute; inset: 9px; border-radius: 2px;
  border: 1px solid #d9b45e3d;
  box-shadow: inset 0 0 0 1px #00000030;
}

.band {
  position: absolute; left: 0; right: 0; height: 9px;
  background: linear-gradient(180deg, #ffffff1f, #0006);
  box-shadow: 0 1px 0 #0006, 0 -1px 0 #0006;
}
.band-top { top: 26px; } .band-bottom { bottom: 26px; }

.gilt-emblem, .face-emblem, .legend-emblem, .syn-emblem {
  color: #d9b45e;
  filter: drop-shadow(0 1px 0 #00000080);
}
/* A gilt device sits on a pasted label, not straight on the hide. */
.gilt-emblem {
  width: 15px; height: 15px; position: absolute; bottom: 9px;
  padding: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #ffffff33, #ffffff14);
  box-shadow: inset 0 0 0 1px #d9b45e40, 0 1px 2px #0005;
}
.book-t1 .gilt-emblem { width: 13px; height: 13px; padding: 2px; }

.spine-title {
  writing-mode: vertical-rl; text-orientation: mixed;
  max-height: calc(100% - 94px); overflow: hidden;
  font-family: "IM Fell English", Georgia, serif;
  font-size: 11px; line-height: 1.12; letter-spacing: .015em;
  text-align: center;
  background: linear-gradient(180deg, #f0d79a 0%, #c9a24e 45%, #8d6b23 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 1px 0 #00000055;
}
.book-t1 .spine-title { font-size: 10px; }

/* House editions get a gilt rule down each edge. */
.is-ours .spine::before, .is-ours .spine::after {
  content: ""; position: absolute; top: 14px; bottom: 14px; width: 1px;
  background: linear-gradient(180deg, #0000, #d9b45e88, #0000);
}
.is-ours .spine::before { left: 4px; } .is-ours .spine::after { right: 4px; }

/* A pamphlet is a thin thing: no bands, paler, no gilt edging. */
.is-pamphlet .spine { filter: saturate(.7) brightness(1.12); }
.is-pamphlet .band { display: none; }

/* Pulled out and turned toward you. One animation, and it is the most
   library-ish moment in the thing.

   Only the open book gets a cover in the scene. Every book carrying a
   132px panel folded back into shared 3D space meant each one intersected
   its neighbors — which is what the speckled overlap across the spines
   was, on every platform. */
.book.is-open .face { visibility: visible; }
.book.is-open {
  transform: translateY(-14px) rotateY(52deg) scale(1.1); z-index: 5;
  transform-origin: left bottom;
  margin-right: 118px; margin-left: 8px;
}
.book.is-open .spine-title { opacity: .3; }
.face-inner {
  display: flex; flex-direction: column; align-items: center; gap: .34rem;
  padding: .85rem .7rem; text-align: center; width: 100%;
  justify-content: center;
}
.face-emblem { width: 22px; height: 22px; flex: none; }
.face-title {
  font-family: "IM Fell English", Georgia, serif;
  font-size: 13.5px; line-height: 1.22;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
  background: linear-gradient(180deg, #f3dca6, #c9a24e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.face-rule { width: 52%; height: 1px; background: #d9b45e66; }
.face-meta { font-size: 10.5px; color: #e6d6b0b0; font-family: "EB Garamond", serif; }
/* A stable target for the synopsis: the book moves when it opens, so a
   second click on where it used to be landed on the case and read as
   "close". A button on the cover cannot move out from under you. */
.face-open {
  flex: none; white-space: nowrap;
  margin-top: .3rem; padding: .28rem .62rem; border-radius: 3px;
  font-family: "EB Garamond", Georgia, serif; font-size: 11px;
  color: #2a2014; background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 1px 0 #8d6b23;
}

.legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.4rem;
  margin: 1.5rem 0 0; font-size: .9rem; color: var(--ink-soft);
}
.legend-item { display: flex; align-items: center; gap: .45rem; }
.legend-item b { color: var(--ink); font-weight: 600; }
.legend-swatch {
  width: 22px; height: 22px; border-radius: 3px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--leather); box-shadow: inset 0 0 0 1px #0005;
}
.legend-emblem { width: 13px; height: 13px; }

/* The synopsis */
/* [hidden] sets display:none, but a class rule with display:flex beats
   it on specificity — so the empty dialog was showing on page load. */
.synopsis[hidden] { display: none; }
.synopsis {
  position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center; padding: 1.1rem;
  background: #0b0906cc; backdrop-filter: blur(2px);
}
.syn-card {
  position: relative; width: min(34rem, 100%); max-height: 84vh; overflow: auto;
  padding: 1.5rem 1.6rem; border-radius: 8px;
  background: linear-gradient(180deg, #fdfaf2, #f3ecdc);
  color: #24201a; box-shadow: 0 18px 50px #000a;
  font-family: "EB Garamond", Georgia, serif;
}
@media (prefers-color-scheme: dark) {
  .syn-card { background: linear-gradient(180deg, #221d16, #1a1611); color: #eee3cd; }
}
.syn-close {
  position: absolute; top: .5rem; right: .7rem; font-size: 1.5rem; line-height: 1;
  background: none; border: 0; cursor: pointer; color: inherit; opacity: .55;
}
.syn-close:hover { opacity: 1; }
.syn-title {
  margin: 0 0 .3rem; font-family: "IM Fell English", Georgia, serif;
  font-size: 1.6rem; line-height: 1.18; font-weight: 400;
}
.syn-meta { margin: 0 0 1rem; font-size: .9rem; opacity: .72;
  display: flex; align-items: center; gap: .4rem; }
.syn-emblem { width: 15px; height: 15px; }
.syn-action { margin: 0 0 1rem; font-size: 1.12rem; font-style: italic; }
.syn-outline { margin: 0 0 1.3rem; padding-left: 1.15rem; font-size: .97rem; }
.syn-outline li { margin: .32rem 0; }
.syn-unread { font-size: .97rem; opacity: .8; margin-bottom: 1.3rem; }
.take-out {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.1rem; border-radius: 6px; text-decoration: none;
  font-weight: 600; font-size: 1rem;
  color: #2a2014; background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 2px 0 #8d6b23, 0 4px 10px #0004;
}
.take-out svg { width: 19px; height: 19px; }
.take-out:hover { filter: brightness(1.06); }
body.modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .shelf-row { min-height: 190px; }
  .shelf-nav { width: 34px; }
  .book { height: calc(var(--tall, 186px) * .86); }
  .book.is-open { transform: translateY(-8px) rotateY(48deg) scale(1.05); margin-right: 96px; }
  .face { width: 112px; }
  /* In a column, `flex: 1 1 18rem` on the words made the box grow into a
     tall empty panel. Stacked, nothing should stretch. */
  .desk { flex-direction: column; align-items: flex-start; gap: .9rem; }
  .desk-words { flex: none; }
  .desk-actions { width: 100%; }
  .desk-ask { flex: 1 1 auto; text-align: center; }
}

/* The open book's controls, in ordinary flow. They are not on the cover
   because a cover rotated in 3D is not reliably hit-testable: at the
   button's own center the browser reports the shelf behind it, on desktop
   and on a phone alike. Real covers have no buttons on them anyway. */
.book-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  justify-content: space-between;
  margin: .7rem 0 0; padding: .7rem .9rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.book-bar[hidden] { display: none; }
.bar-words { min-width: 0; font-family: "EB Garamond", Georgia, serif; }
.bar-words b { display: block; font-size: 1.05rem; line-height: 1.25; }
.bar-words span { font-size: .87rem; color: var(--ink-soft); }
.bar-buttons { display: flex; gap: .5rem; flex: none; }
.bar-btn {
  font: inherit; font-size: .92rem; padding: .45rem .9rem; cursor: pointer;
  border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--ink);
}
.bar-btn:hover { border-color: var(--accent); }
.bar-btn-gilt {
  font-weight: 600; color: #2a2014; border-color: #b8933f;
  background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 1px 0 #8d6b23;
}
.bar-btn-gilt:hover { filter: brightness(1.06); border-color: #8d6b23; }


/* ---- This site's own additions ------------------------------------ */

.desk h2 { font-size: 1.35rem; }
.desk-ask {
  display: inline-block; padding: .7rem 1.05rem; border-radius: 10px;
  background: var(--accent); color: var(--bg); text-decoration: none; font-weight: 600;
}

/* On order: the space a book will take, drawn as an outline. Empty shelf
   space is the promise of next month, not an apology — so it is shown,
   but it must never be mistaken for a book you can have. */
.is-on-order { width: 34px; }
.is-on-order .spine {
  background: #00000024;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--leather) 45%, #e8dcc8 55%);
  border: 0; outline: 1px dashed #e8dcc85c; outline-offset: -4px;
}
.is-on-order .band { display: none; }
.is-on-order .gilt-emblem { background: none; box-shadow: none; opacity: .55; }
.is-on-order .spine-title {
  background: none; color: #e8dcc8a6; -webkit-text-fill-color: #e8dcc8a6;
  font-style: italic; text-shadow: none;
}
.is-on-order.is-open { margin-right: 104px; }
.is-on-order .face { opacity: .9; }

/* The legend is also the course outline, so it reads as a list. */
.legend { flex-direction: column; gap: .5rem; }
.legend-item { align-items: flex-start; }
.legend-swatch { margin-top: .12rem; }

.shelf-key { margin: .9rem 0 0; font-size: .88rem; color: var(--muted); }
.shelf-key b { color: var(--fg); font-weight: 600; }

.syn-author { margin: -.6rem 0 1rem; font-size: 1rem; opacity: .8; }

.shelf-list { margin: 1.6rem 0 0; font-size: .95rem; }
.shelf-list summary { cursor: pointer; color: var(--accent); }
.shelf-list h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; }
.shelf-list ul { margin: 0; padding-left: 1.2rem; }
.shelf-list li { margin: .25rem 0; }
.shelf-list a { color: var(--accent); }

/* The hub's copy: a reading in a book's contents is something you can play. */
.syn-reading { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; }
.syn-listen {
  display: inline-flex; align-items: center; gap: .35rem; flex: none;
  padding: .3rem .75rem; border-radius: 5px; text-decoration: none;
  font-weight: 600; font-size: .92rem;
  color: #2a2014; background: linear-gradient(180deg, #e7c878, #c9a24e);
  box-shadow: 0 1px 0 #8d6b23;
}
.syn-listen svg { width: 15px; height: 15px; }
.syn-listen:hover { filter: brightness(1.06); }
.take-out.is-secondary {
  padding: .45rem .85rem; font-size: .92rem; font-weight: 400;
  color: inherit; background: none; box-shadow: none;
  border: 1px solid currentColor; opacity: .75;
}
.take-out.is-secondary svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .book { transition: none; }
}