/* Books page, on white: the intro in a box over a yellow strip, every book in one stack running down the strip, the
   essays and blogs beside it, and a List of all of them. Interface in a plain grotesque (after Are.na), reading text in
   Newsreader. */

body.books-page {
  /* The stack's scale (screen px per inch; 18 on phones), and the strip: the widest book wide (--tallest, from
     shelf.js) and a gutter either side. */
  --ppi: 20px;
  --gutter: 32px;
  --strip-w: calc(var(--tallest) * var(--ppi) + 2 * var(--gutter));
  background: #fff;
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  overflow-x: clip;
  scrollbar-gutter: stable;
}

.books-page main {
  max-width: 1120px;
  position: relative;
}

/* Back to the room on the home page, in the corner above the intro (out of the flow, so the room keeps its height). */
.back-to-room {
  position: absolute;
  z-index: 3; /* over the strip, where they meet */
  top: 10px;
  left: 0;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.back-to-room:hover {
  color: var(--ink);
}

.back-to-room:focus-visible,
.view-switch:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

/* Shelf / List, in the opposite corner: two views of the same things (after Are.na), one in place of the other. */
.view-bar {
  position: absolute;
  z-index: 3;
  top: -2px;
  right: -8px;
  display: flex;
  gap: 2px;
}

.view-switch {
  font: inherit;
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 12px 8px; /* a thumb-sized target around a small label */
  cursor: pointer;
}

.view-switch::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 6px 1px 0;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.view-switch[aria-pressed="true"] {
  color: var(--ink);
}

.view-switch[aria-pressed="true"]::before {
  background: currentColor;
}

/* One view at a time: chosen in books.html before the page is first drawn, switched by shelf.js. */
[data-view="shelf"] .view-list,
[data-view="list"] .view-shelf {
  display: none;
}

/* Where the corners beside the intro get too narrow, the link and the switch share a line above it. */
@media (max-width: 920px) {
  .back-to-room {
    position: relative;
    top: 0;
    display: inline-block;
    margin-top: 16px;
  }

  .view-bar {
    top: 4px;
  }

  .view-bar + .intro {
    margin-top: 12px;
  }
}

/* ------------------------------------------------------------- intro */

/* A small note in a white box, square, in the middle of the screen at the top; in the Shelf view the strip and its
   books pass under it. */
.intro {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  max-width: 500px;
  margin: 32px auto 0;
  padding: 9px 14px;
  background: #fff;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

/* ------------------------------------------------------------- the Shelf view: one screen */

/* One screen, not scrolled (on a phone the index runs on under it): the stack running down its strip, the small boxed
   note just right of it at the top, and the essays and blogs beside it. */
@media (min-width: 761px) {
  html[data-view="shelf"] body.books-page {
    box-sizing: border-box;
    height: 100dvh;
    padding-bottom: 0;
    overflow: hidden;
  }
}

html[data-view="shelf"] .books-page main {
  --index-w: 380px;
  --col-gap: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, var(--index-w));
  grid-template-rows: minmax(32px, auto) auto minmax(0, 1fr);
  column-gap: var(--col-gap);
  height: 100%;
}

.shelf-view {
  display: contents;
}

[data-view="shelf"] .back-to-room {
  margin-bottom: 12px; /* where it's on its own line, above the box */
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: start;
}

/* In the middle of the screen, across both columns, over the strip and its books. */
[data-view="shelf"] .intro {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  align-self: start;
  margin: 0;
}

/* ------------------------------------------------------------- the stack on its conveyor */

.stack-frame {
  grid-column: 1;
  grid-row: 1 / -1;
  justify-self: center;
  width: var(--strip-w);
}

/* The yellow strip, from the top of the page to the bottom of the screen (shelf.js sets where and how tall). The stack
   runs down it and comes back in at the top; the labels reach out beside it. */
.stack-strip {
  position: absolute;
  z-index: 1;
  width: var(--strip-w);
  background: #f2d24b;
  overflow-x: visible;
  overflow-y: clip;
}

/* The stack and the copies of it over it, moved by shelf.js (a transform, so nothing is laid out as it runs). */
.stack-track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  will-change: transform;
}

/* The books' left ends all in one line, flush with the strip's left edge. */
.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Whether it runs, in the strip's bottom corner: ❚❚ stops it, ▶ starts it (as does a click on the yellow, or Space). */
.conveyor-toggle {
  position: absolute;
  right: 4px;
  bottom: 6px;
  padding: 4px 5px;
  border: 0;
  background: none;
  font: 10px/1 var(--sans);
  color: rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.conveyor-toggle:hover {
  color: rgba(0, 0, 0, 0.8);
}

.conveyor-toggle:focus-visible {
  outline: 1px solid rgba(0, 0, 0, 0.5);
  outline-offset: 1px;
}

/* A book lying flat, spine out, at one scale: as wide as the book is tall and as high as it is thick, its left end in
   line with all the others. */
.spine {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--h) * var(--ppi));
  height: calc(var(--t) * var(--ppi));
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* The one slid out, and its label, over its neighbours. */
.spine.is-out {
  z-index: 1;
}

/* Until its photo is in, a spine shows the book's colour. */
.spine-body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--tone);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hovered or focused, a book slides out to the right, as if drawn from the stack. */
.spine.is-out .spine-body {
  transform: translateX(max(14px, calc(0.9 * var(--ppi))));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* The spine's photo stands upright; turned a quarter to the left, it lies as the book does, its head to the left. */
.spine-face {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: calc(var(--t) * var(--ppi));
  height: calc(var(--h) * var(--ppi));
  max-width: none;
  translate: -50% -50%;
  rotate: -90deg;
}

/* Just right of the strip, level with the book slid out: its title, who wrote it and where it happens, and its size in
   real inches. */
.spine-label {
  position: absolute;
  top: 50%;
  left: calc(100% + (var(--tallest) - var(--h)) * var(--ppi) + 2 * var(--gutter) + 14px);
  width: max-content;
  max-width: 12rem;
  translate: 0 -50%;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.label-title {
  display: block;
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
}

.label-by {
  display: block;
}

.label-by:empty {
  display: none;
}

.label-size {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.spine.is-out .spine-label {
  opacity: 1;
  transition-delay: 0.1s;
}

.spine:focus {
  outline: none;
}

.spine:focus-visible .spine-body {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}

.spine.is-taken {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .spine-body,
  .spine-label {
    transition: none;
  }
}

/* ------------------------------------------------------------- the index: essays and blogs */

/* Beside the stack, under the box, scrolling on its own where the screen is too short for all of it: each piece's title
   in the serif, a link to where it can be read, then who and where. */
.essays {
  grid-column: 2;
  grid-row: 3;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -4px;
  padding: 24px 4px 20px; /* room for a focused link's outline */
}

.essays h2:first-child {
  margin-top: 0;
}

.essays h2,
.essays ul {
  max-width: 30rem;
}

.essays h2 {
  margin: 22px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 400;
  color: var(--faint);
}

.essays ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.essay {
  padding: 10px 0 11px;
  border-bottom: 1px solid #f3f3f3;
}

.essay-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.25;
  color: var(--ink);
  text-decoration: none;
}

.essay-title:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.essay-meta {
  margin: 3px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* The faint ↗ that tells a link out (a new tab) from links that stay: in the List and in the reader's "Also here". */
.out {
  color: var(--faint);
}

/* Where a book comes from ("Amazon ↗"), in the List: straight there, in a new tab. */
.source {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.source:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------- the list */

/* In place of the stack and the index: every book, essay and blog, by section; each line its title, author, source. A
   book's title takes it down; an essay's or a blog's goes to it. */
.book-index {
  margin-top: 16px;
}

.book-index h2 {
  margin: 30px 0 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  font-weight: 400;
  color: var(--faint);
}

.book-index ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.book-index li {
  display: grid;
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 24px;
  padding: 9px 0;
  border-bottom: 1px solid #f3f3f3;
  font-size: 15px;
}

.book-index .title {
  color: var(--ink);
  text-decoration: none;
}

.book-index .title:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.book-index .by {
  color: var(--muted);
}

.book-index .source,
.book-index .where {
  justify-self: start;
  font-size: 13px;
}

.book-index .where {
  color: var(--muted);
}

.essay-title:focus-visible,
.book-index .title:focus-visible,
.source:focus-visible {
  outline: 1px solid var(--muted);
  outline-offset: 3px;
}

/* ------------------------------------------------------------- reader */

html.reader-open {
  overflow: hidden;
}

.reader {
  position: fixed;
  inset: 0;
  z-index: 30;
  perspective: 1800px;
}

.reader[hidden] {
  display: none;
}

.reader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(2px) saturate(0.8);
  backdrop-filter: blur(2px) saturate(0.8);
  cursor: zoom-out;
}

.reader-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.book3d {
  position: absolute;
  width: var(--w);
  height: var(--h);
  left: calc(var(--w) / -2);
  top: calc(var(--h) / -2);
  transform-style: preserve-3d;
  transform: rotateY(90deg);
}

.book3d .face {
  position: absolute;
  top: 0;
  left: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.face-cover,
.face-back {
  width: var(--w);
  height: var(--h);
  background: var(--tone);
}

.face-cover {
  transform: translateZ(calc(var(--t) / 2));
  box-shadow: inset 6px 0 10px -6px rgba(0, 0, 0, 0.35), 30px 40px 60px -20px rgba(0, 0, 0, 0.25);
}

.face-back {
  transform: rotateY(180deg) translateZ(calc(var(--t) / 2));
}

.face-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.face-cover.is-typeset {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18% 12% 14%;
  box-sizing: border-box;
  color: var(--cover-ink);
  font-family: var(--serif);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.18)), var(--tone);
}

.typeset-title {
  font-size: 46px;
  line-height: 1.08;
  font-style: italic;
}

.typeset-author {
  font-size: 17px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.face-spine {
  width: var(--t);
  height: var(--h);
  left: calc((var(--w) - var(--t)) / 2) !important;
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: var(--tone);
}

.face-spine img {
  display: block;
  width: 100%;
  height: 100%;
}

.face-pages {
  width: var(--t);
  height: var(--h);
  left: calc((var(--w) - var(--t)) / 2) !important;
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background: repeating-linear-gradient(90deg, #f3eee3 0 2px, #e4dccb 2px 3px);
}

.face-top {
  width: var(--w);
  height: var(--t);
  top: calc((var(--h) - var(--t)) / 2) !important;
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background: repeating-linear-gradient(0deg, #f3eee3 0 2px, #e4dccb 2px 3px);
}

/* Left and width are set by the script so object and text are centred together. */
.reader-card {
  position: absolute;
  top: 50%;
  left: calc(50vw + 60px);
  width: min(400px, 30vw);
  max-height: 84vh;
  overflow: auto;
  translate: 0 -50%;
  box-sizing: border-box;
}

.card-kicker {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.card-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.12;
  color: var(--ink);
}

.card-author {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.card-note {
  margin: 20px 0 0;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink);
}

.card-desc {
  margin: 16px 0 0;
  font-family: var(--serif);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
}

.card-meta {
  margin: 18px 0 0;
  font-size: 13px;
  color: var(--faint);
}

.card-links {
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
}

.card-links a {
  color: var(--muted);
  text-underline-offset: 3px;
}

.card-links a:hover {
  color: var(--ink);
}

.card-related {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.6;
}

.related-lead {
  margin-right: 10px;
  color: var(--faint);
}

.card-related button,
.card-related a {
  font: inherit;
  margin: 0 12px 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: #cfcfcf;
  text-underline-offset: 3px;
  cursor: pointer;
}

.card-related button:hover,
.card-related button:focus-visible,
.card-related a:hover,
.card-related a:focus-visible {
  text-decoration-color: currentColor;
  outline: none;
}

.card-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}

.card-nav button {
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}

.card-nav button:hover:not(:disabled) {
  color: var(--ink);
}

.card-nav button:disabled {
  opacity: 0.3;
  cursor: default;
}

.card-nav button:focus {
  outline: none;
}

.card-nav button:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.card-keys {
  margin-left: auto;
  font-size: 12px;
  color: #8a8a8a;
}

/* ------------------------------------------------------------- small screens */

@media (max-width: 760px) {
  body.books-page {
    --ppi: 18px;
  }

  /* One column: the box, over the top of the strip (which runs from just above it to the bottom of the first screen;
     shelf.js places it), then the index under that. */
  html[data-view="shelf"] .books-page main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(32px, auto) auto auto auto;
  }

  .stack-frame {
    grid-row: 1 / 4;
  }

  /* Clear of the link and the switch, the strip's top showing between them and the box. */
  [data-view="shelf"] .intro {
    margin-top: 28px;
  }

  .essays {
    grid-column: 1;
    grid-row: 4;
    overflow: visible;
    padding-top: 32px;
  }

  .intro {
    padding: 8px 12px;
  }

  /* No room beside the stack: the label shows over the book slid out, centred on it, on white. */
  .spine-label {
    top: auto;
    bottom: calc(100% + 6px);
    left: 50%;
    max-width: min(16rem, 100vw - 48px);
    translate: -50% 0;
    padding: 5px 8px;
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  }

  .essays h2,
  .essays ul {
    max-width: none;
  }

  .book-index li {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .reader-card {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-height: 55vh;
    translate: none;
    padding: 18px 20px calc(10px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--rule);
  }

  .card-title {
    font-size: 26px;
  }

  .card-note {
    font-size: 17px;
  }

  .card-nav {
    justify-content: space-between;
    gap: 0;
    margin-top: 16px;
  }

  .card-nav button {
    min-width: 44px;
    min-height: 44px;
  }

  .card-keys {
    display: none;
  }
}