/* ==========================================================================
   Stories — one volume, paginated. The prose is read inside the site.

   Pagination is real CSS multi-column: the whole book flows into columns as
   wide as a page, and turning a page translates the flow by one column.
   scripts/book.js measures and drives it. Below 700px none of that applies
   and the book is an ordinary scroll.
   ========================================================================== */

/* The book gets more room than the rest of the site: a narrower rail, a
   tighter gutter and a wider ceiling, so each page carries ~65 characters
   rather than ~48. Justified text needs the width or the word gaps gape. */
.book-wrap {
  max-width: 178rem;
  padding-bottom: clamp(6rem, 12vh, 14rem);
  display: grid;
  grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  gap: clamp(2.4rem, 3.5vw, 5.6rem);
  align-items: start;
}

/* The book claws back gutter to widen the page — but only where there is
   width to claw. On a phone it keeps the site's normal gutter so the rail
   lines up with the masthead above it. */
@media (min-width: 701px) {
  .book-wrap { --gutter: clamp(2rem, 4vw, 9rem); }
}

/* ---- the rail: same vocabulary as .poem-rail, but it tracks the book ---- */

.book-rail {
  position: sticky;
  top: calc(var(--nav-h) + var(--s-4));
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.book-rail dt {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: var(--s-2);
}
.book-rail dt:first-child { margin-top: 0; }

.book-rail dd {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

.book-rail .book-jump {
  font: inherit;
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0.2rem 0;
  cursor: pointer;
  text-align: left;
  transition: color 0.25s var(--ease);
}
.book-rail .book-jump:hover { color: var(--fg); }

/* the story you are actually in */
.book-rail .book-jump[aria-current="true"] { color: var(--accent); }

/* The date rides on the story's own title, right-aligned — phone only. On
   desktop the rail's Date field already tracks whichever story is open. */
.story-when { display: none; }

/* ---- the book ---------------------------------------------------------- */

.book { position: relative; }

/* the inline padding is the page margin — without it justified text sits
   flush against the border. book.js measures flow.clientWidth, inside it. */
.book-viewport {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding-block: clamp(2.4rem, 4vh, 4.4rem);
  padding-inline: clamp(1.6rem, 2.5vw, 4rem);
}

.book-flow {
  height: 100%;
  column-width: var(--page-w, 32rem);
  column-gap: var(--page-gap, 6rem);
  column-fill: auto;
  transform: translateX(var(--shift, 0px));
  transition: transform 0s;   /* the shift snaps; book.js fades the opacity */
}

/* the spine: a hairline down the middle of the spread */
.book-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--rule-soft);
  pointer-events: none;
}

/* each story opens on a fresh page */
.story,
.leaf-contents { break-before: column; }
.leaf-title { break-before: auto; }

/* ---- front matter ------------------------------------------------------ */

.leaf { break-inside: avoid; }

/* The eyebrow sits flush with the top of the page like every other leaf; the
   drop below it is carried by the h2 instead of the container, so the title
   block still sits low the way a title page should. */
.leaf-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
}
.leaf-title h2 {
  margin-top: clamp(2rem, 6vh, 6rem);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 4vw, 5.6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.02em;
}
.leaf-byline {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.leaf-contents ol { margin-top: var(--s-3); }
.leaf-contents li { border-bottom: 1px solid var(--rule-soft); }

.leaf-contents .book-jump {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  padding-block: var(--s-2);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg);
  text-align: left;
  transition: color 0.25s var(--ease);
}
.leaf-contents .book-jump:hover { color: var(--accent); }

.leaf-name {
  font-family: var(--font-display);
  font-size: var(--t-base);
  font-weight: 500;
}
.leaf-date {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}

/* ---- the prose --------------------------------------------------------- */

.story-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 2.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: var(--s-3);
  break-after: avoid;
}

.story p {
  font-size: clamp(1.5rem, 1.15vw, 1.75rem);
  line-height: 1.85;
  text-align: justify;
  hyphens: auto;                 /* justified prose needs hyphenation */
  -webkit-hyphens: auto;
  orphans: 2;
  widows: 2;
}
.story p + p { text-indent: 1.6em; }

/* a drop cap opens each story, the way the printed page does */
.story .lede::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.1em;
  line-height: 0.82;
  padding-right: 0.08em;
  padding-top: 0.04em;
  color: var(--accent);
}

/* The seal closes the last line of prose rather than sitting in its own
   block. As a block it could be pushed onto a page of its own — Chrome does
   not reliably honour break-before:avoid inside a multicol flow, and it
   still stranded the mark at some page heights. Inline it cannot separate
   from the text, and an end-mark on the final line is how print does it. */
.story-mark {
  vertical-align: middle;
  margin-left: 0.5em;
  width: 2.6rem;
  height: 2.6rem;
}

/* justification must not stretch the last line to reach the mark */
.story p:last-of-type { text-align-last: left; }

/* ---- controls ----------------------------------------------------------- */

/* Controls sit at the foot of the spread like a running footer. The arrows
   are drawn from hairlines — the same line the rules and crop marks are
   made of — rather than set in a circle. */
.book-controls {
  margin-top: var(--s-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.book-controls button {
  display: inline-flex;
  align-items: center;
  gap: clamp(1rem, 1.4vw, 1.8rem);
  padding: 0.8rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: color 0.3s var(--ease);
}
.book-controls button:hover:not(:disabled),
.book-controls button:focus-visible:not(:disabled) { color: var(--accent); }
.book-controls button:disabled { opacity: 0.22; cursor: default; }

.book-arrow {
  position: relative;
  display: block;
  width: clamp(4.4rem, 7vw, 9rem);
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.book-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
}
.book-next .book-arrow::after { right: 0; transform: translateY(-50%) rotate(45deg); }
.book-prev .book-arrow::after { left: 0; transform: translateY(-50%) rotate(-135deg); }

/* the line draws itself longer under the cursor */
.book-controls button:hover:not(:disabled) .book-arrow { width: clamp(6rem, 9vw, 12rem); }

.book-lbl { white-space: nowrap; }

.book-folio {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
  min-width: 9rem;
  text-align: center;
}

/* ==========================================================================
   phone — the book becomes an ordinary scroll
   ========================================================================== */

@media (max-width: 700px) {
  .book-wrap {
    grid-template-columns: 1fr;
    padding-bottom: clamp(3.5rem, 6vh, 6rem);
  }

  .book-rail {
    position: static;
    top: auto;
  }
  .book-rail dl {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
  }
  /* the label takes a whole row, so the titles flow horizontally beneath it
     instead of trailing off the end of the first line */
  .book-rail dt {
    margin-top: 0;
    flex: 0 0 100%;
  }

  /* the open story's date means nothing once it is all one scroll — the
     date sits on each story's own title instead */
  .rail-date { display: none; }

  .story-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
  }
  .story-when {
    display: block;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-faint);
    white-space: nowrap;
  }

  .book-viewport {
    overflow: visible;
    height: auto !important;
    border: 0;
    padding-block: 0;
  }
  .book-viewport::after { display: none; }

  .book-flow {
    height: auto;
    columns: auto;
    column-width: auto;
    transform: none !important;
  }

  .book-controls { display: none; }

  /* front matter is redundant once it is all one scroll */
  .leaf-title,
  .leaf-contents { display: none; }

  /* anchored jumps must clear the fixed nav */
  .story {
    padding-block: clamp(3.5rem, 6vh, 6rem);
    scroll-margin-top: calc(var(--nav-h) + 1.6rem);
  }
  .story + .story { border-top: 1px solid var(--rule); }
  /* justified on the phone too, so hyphenation has to stay on or the word
     gaps tear open at this measure */
  .story p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .story .lede::first-letter { font-size: 2.8em; }
}