/* ───────────────────────────────────────────────────────────────
   PARANOID AND READY — Books and Knowledge, as a deck

   Loaded after base.css, category.css and deck.css, by
   categories/books-knowledge.html and nothing else. It does not restyle any
   of the components on that page; it only says what this page's five panels
   do with the deck.

   The mechanics — .deck, .deck-panel, .panel-head, .panel-body — are in
   deck.css, shared with the checklist guides, which run the same shell over
   four panels of their own. This file starts where that one stops.

   The homepage runs as a deck of full-screen snapping panels and this page
   does the same, so the two read as one site rather than as a poster
   followed by a document. Five panels:

     1  the title and the shelves
     2  the Book of the Month beside the Action Plan
     3  the Essential Shelf
     4  the guides
     5  the red seam and the free documents
   ─────────────────────────────────────────────────────────────── */

/* ── 01 The title and the shelves ───────────────────────────────
   The title loses the standalone page's deep top padding: on a deck it is
   the top of a panel rather than the top of a document, and the shelves
   underneath need the room more than the white space does. */
.bk .cat-head { padding: calc(clamp(50px, 8.5vh, 88px) + var(--ticker-band)) 0 0; }
/* 01, with the ceiling every deck heading carries. */
.bk .cat-title { font-size: min(var(--t-page), 12vh); }
.bk .cat-head .section-head { padding-top: clamp(12px, 2.2vh, 22px); padding-bottom: 0; }

.bk-panel--shelves .panel-body > .wrap { flex: 1 1 auto; min-height: 0; padding-top: clamp(10px, 1.6vh, 18px); padding-bottom: clamp(14px, 2.4vh, 28px); }
.bk-panel--shelves .rows { flex: 1 1 auto; min-height: 0; }

/* While everything is closed the seven shelves divide the panel between
   them, so the list is the screen rather than a short stack with dead air
   under it. The moment one opens, its own contents need the room more than
   the closed rows below it do, and the stretching stops. */
.bk .rows:not(:has(.open)) { display: flex; flex-direction: column; }
.bk .rows:not(:has(.open)) .row { flex: 1 1 auto; display: flex; flex-direction: column; }
.bk .rows:not(:has(.open)) .row-trigger { flex: 1 1 auto; }

/* The whole list on the screen, with the title above it, and no scroll.
   A list that has to be scrolled to be counted is not an index of what the
   page holds, it is the first two thirds of one. The rows carry the site's
   standard padding everywhere else; here they take whatever the panel has
   left after the title, down to the height of the type inside them. */
.bk-panel--shelves .row-trigger { padding: clamp(8px, 1.3vh, 16px) 0; }
/* 04, capped: seven shelves and their rows share one screen. */
.bk-panel--shelves .row-name { font-size: min(var(--t-row), 3.6vh); }

/* ── 02 The book beside the plan ────────────────────────────────
   No centring on the body. The split already fills it, and once the two
   halves stack on a phone the block is taller than the panel: a centred
   overflowing flex child hangs off both ends and the top of it cannot be
   scrolled back to. */
.bk-panel--split .bk-split { flex: 1 0 auto; display: flex; flex-direction: column; margin: 0; border: none; }
.bk-panel--split .split { flex: 1 0 auto; }

/* ── 03 The Essential Shelf ─────────────────────────────────────
   The reel is centred in what is left of the panel rather than sitting
   directly under the eyebrow with the rest of the screen empty below it. */
.bk-panel--ess .panel-head .wrap { padding-top: max(clamp(46px, 8vh, 82px), var(--chrome-h)); }
.bk-panel--ess .ess-section { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: safe center; padding-bottom: clamp(20px, 4vh, 44px); }
.bk-panel--ess .reel-wrap { flex: 0 1 auto; min-height: 0; }

/* ── 04 The guides ──────────────────────────────────────────────
   Every guide on one screen, no scroll. The nine rows divide the panel
   between them the same way the eight shelves divide panel 01: the list
   is the screen. On a tall window that spreads them out, on a short one
   they close up to the height of the type inside them, and either way
   the ninth guide is on screen with the first. */
/* ── Guides beside the free documents ──────────────────────────
   Two lists, nine rows and seven, on one screen. Stacked they were two
   panels and the second was below the fold; side by side they are one
   answer to one question -- what is there to read -- with the price as the
   only difference between the columns.

   Each half carries the big Anton heading the homepage gives its own
   guides list, in place of the 11px red eyebrow one had and the red seam
   rule the other had. Two devices doing one job became one device. */
.bk-panel--index { height: auto; min-height: var(--h); }
.bk-panel--index .panel-body { display: flex; flex-direction: column; }
.bk-index {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(28px, 4vw, 72px);
  padding: calc(clamp(58px, 9vh, 108px) + var(--ticker-band)) var(--gutter) clamp(18px, 3vh, 34px);
}

.bk-index-half { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: clamp(14px, 2.4vh, 26px); }

/* A hairline between the columns rather than a box around either. */
.bk-index-half--free { border-left: 1px solid var(--hair); padding-left: clamp(28px, 4vw, 72px); }

/* 02: a panel title over the whole width of a screen. Book of the Month runs
   a split with one half in it, so its heading spans the panel like the
   Essential Shelf's does, and the two are the same object however the markup
   arrives at them. Both carry the deck's ceiling in vh, since each shares its
   screen with a cover that must not be pushed off the bottom. */
.bk-panel--ess .panel-title,
.bk-split--solo .panel-title {
  text-align: center;
  font-size: min(var(--t-panel), 9vh);
  color: var(--bone);
}

/* The heading the homepage uses for the same list, sized for a half. */
.bk-index-half .panel-title {
  text-align: center;
  font-size: min(var(--t-group), 5vh);
  line-height: 1.06;
  min-height: 2.12em;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone);
}

/* The publisher, under the title of a free document. The guides have no
   equivalent and want none: their publisher is this site. */
.bk-index .plan-sub {
  display: block;
  margin-top: 4px;
  font-family: var(--prose);
  font-size: clamp(10px, 0.85vw, 12px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: rgba(var(--rgb-bone), 0.5);
}/* ── Narrow ─────────────────────────────────────────────────────
   Nothing about the deck changes: a panel is still one screen and still
   scrolls inside itself. Only the head padding comes down, because on a
   phone the fixed wordmark is the only thing that has to clear. */
@media (max-width: 860px) {
  .bk .cat-head { padding-top: calc(clamp(44px, 7vh, 64px) + var(--ticker-band)); }
  .bk-panel--ess .panel-head .wrap,
  .bk-index { grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4.5vh, 44px) 0; }
  /* Side by side these two lists are separated by a rule between the
     columns, which is what a column divider is for. Stacked, that rule
     turns on its side and lands 37px below the hairline the list above
     already closes itself with: two lines, nothing between them, and no
     way to tell which of the two means anything. It is the second one the
     reader asks about, because it arrives after the list has visibly
     ended.

     A stacked section does not need a rule to say it has started. Its
     heading says so, and the heading here is four words in Anton. What it
     needs is room, so the rule goes and the space it was drawn in becomes
     the separation: enough that the eye reads a new section rather than a
     gap in the old one. */
  .bk-index-half--free {
    border-left: 0;
    border-top: 0;
    padding-left: 0;
    padding-top: clamp(44px, 7vh, 72px);
  }  /* Book of the Month alone runs close to a full screen once it stacks
     above the plan rather than beside it; the plan half now carries a note
     and four reasons on top of the list, so the pair together used to run
     to nearly two screens read through a scrollbar inside a screen locked
     to one. Letting the panel grow, the same device the homepage's own
     split uses for the same problem, turns that into two ordinary swipes
     instead: Book of the Month fills the first, the Action Plan the second,
     each its own snap stop rather than a scrollbar inside either. */
  .bk-panel--split { height: auto; min-height: var(--h); }
  .bk-panel--split .panel-body { flex: 0 0 auto; overflow: visible; }

  /* The opposite problem from .bk-panel--split above: one reel card is much
     shorter than a screen, and .ess-section's flex:1 plus its `safe center`
     centred it in whatever was left over after a fixed var(--h), which on a
     phone was close to 250px of empty ground above and below the card.
     Sized to its content instead, same as .bags-panel and .books-panel on
     the homepage for the identical pattern. */
  .bk-panel--ess { height: auto; }

  /* The publisher line under each free document, the last thing on the site
     still under the 11px floor. */
  .bk-index .plan-sub { font-size: 11px; }
}

/* ── Two panels go light ─────────────────────────────────────────
   Black, bone, black, bone down the deck. The two bone ones are the two that
   hold a book cover at full size, and a cover is a printed object: on the
   near-black ground the pale jackets glowed and the dark ones dissolved into
   the panel, which is the page deciding for the reader which books look worth
   owning. On bone they all sit on the same paper.

   Everything under here is the same card in dark ink. The shadow under a
   cover comes down with it: a 60% black at that blur is a bruise on paper,
   and a cover only needs enough to lift off the ground. */
.bk-panel--split,
.bk-panel--ess { background: var(--bone); color: var(--void); }

.bk-panel--split .panel-title,
.bk-panel--ess .panel-title { color: var(--void); }

.bk-panel--split .feat-name,
.bk-panel--ess .ess-name { color: var(--void); }

.bk-panel--split .feat-by,
.bk-panel--ess .ess-by { color: rgba(var(--rgb-void), 0.55); }

.bk-panel--split .feat-why p,
.bk-panel--ess .ess-note { color: rgba(var(--rgb-void), 0.72); }

.bk-panel--split .feat-cover img,
.bk-panel--ess .ess-cover img { filter: var(--cover-shadow-bone); }

/* A bone plate on a bone panel is not a plate. The stand-in for a cover with
   no artwork inverts with the ground. */
.bk-panel--split .book-plate,
.bk-panel--ess .book-plate { background: var(--void); color: var(--bone); box-shadow: 0 16px 30px rgba(var(--rgb-void), 0.3); }
.bk-panel--ess .book-plate-b { color: rgba(var(--rgb-bone), 0.6); }

/* Hairlines drawn in bone-alpha vanish on bone. */
.bk-panel--split .bk-split { border-color: var(--hair-dark); }
.bk-panel--ess .reel-btn { border-color: var(--hair-dark); }

/* ── Clear of the chrome band ───────────────────────────────────
   Two panels put content at the very top of themselves rather than behind a
   head, so they are the two that would have started under the band. Written
   here rather than in category.css because the shorthand there sets padding
   on all four sides after the solo rule has set the top, and a longhand that
   loses to a shorthand is a rule that only looks like it works.

   max(), so a window tall enough that the panel's own padding already clears
   the band keeps the spacing it was designed with. */
.bk-panel--split .split-half { padding-top: max(clamp(30px, 5.5vh, 58px), var(--chrome-h)); }
.bk-panel--index .split-half { padding-top: var(--chrome-h); }

/* ── Stacked halves stop paying for the chrome each ─────────────
   Both rules above reserve the chrome's height on a .split-half, and they
   are right to while the halves sit side by side: either one can be the
   thing at the top of the screen, so either one can end up under the
   wordmark.

   Stacked on a phone they cannot. The first half is under the chrome and
   every half after it is a section further down a page that scrolls, so the
   reservation stops being clearance and becomes a gap. On the guides panel
   it was being paid twice over on the way in as well, once by .bk-index's
   own band and again by the half inside it: 131px and 110px, so the title
   of a list of eight guides began 241px down a panel whose neighbours start
   at 110, with the second half adding another 110px of nothing between the
   first list and the next title.

   The outer band is the one that keeps the job, because it is the one the
   chrome actually sits on. The halves inside it get the rhythm a section
   needs from the thing above it, which is a smaller number and the same one
   the homepage's stacked panels use. */
@media (max-width: 860px) {
  .bk-panel--split .split-half,
  .bk-panel--index .split-half { padding-top: clamp(30px, 5vh, 48px); }

  /* Rhythm, not clearance. A max() against the chrome height was the first
     answer here and it kept choosing the chrome, which put the guides title
     151px down a panel nobody arrives at: there are no snap points on a
     deck page at this width, so the only panel a reader is ever parked at
     the top of is the first one on the page. That one keeps its clearance
     untouched. Everything below it is scrolled past, and content passing
     behind a fixed row is what the row is for. */
  .bk-index { padding-top: clamp(40px, 6.5vh, 62px); }
  .bk-panel--ess .panel-head .wrap { padding-top: clamp(40px, 6.5vh, 62px); }
}

/* ── No numbers ─────────────────────────────────────────────────────
   The shelves, the guides and the free documents were numbered, and the
   shelves counted their books. None of it helped anyone choose, and three
   numbered lists on one page read as a form. The markup lost the numbers on
   26.09.2026; this gives their columns back. The indent under an opened
   shelf lined its books up with the name, past the number, so it goes too. */
.bk .guides-index .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
.bk .vols { padding-left: 0; }

@media (max-width: 860px) {
  .bk .guides-index .plan-row { grid-template-columns: minmax(0, 1fr); }
}

/* ── The phone: one feature, then three headers ─────────────────────
   On a phone this page was four screens of lists: seven shelves, a book of
   the month in three paragraphs, ten guides, seven documents and a reel.
   Now it is the shelves, which are the page, then the book of the month,
   then Paranoid Guides, the free documents and the Essential Shelf as three
   headers a reader opens, the same device the homepage uses for its own
   sections. js/inner.js does the folding; this is the layout. */
@media (max-width: 860px) {

  /* Book of the Month, as one centred column. Before this the cover sat at
     a third of the screen's width against the left edge, the title and the
     writing ran full width under it, and a small button floated in the
     middle below: three alignments for one object. */
  .bk-panel--split { min-height: 0; }
  .bk-panel--split .split-half { padding-bottom: clamp(40px, 6.5vh, 60px); }
  .bk-split--solo .feat-book {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: clamp(22px, 3.6vh, 30px);
    margin-top: clamp(22px, 3.6vh, 32px);
    text-align: center;
  }
  /* The box AND the image. The box alone was sized, and the cover inside it
     kept rendering at its srcset width, about 90px, centred in a 240 by 360
     frame: a thumbnail with a band of empty ground above and below it. */
  .bk-split--solo .feat-cover {
    height: auto;
    max-height: none;
    width: min(60vw, 240px);
    aspect-ratio: auto;
  }
  .bk-split--solo .feat-cover img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .bk-split--solo .feat-side { align-items: center; width: 100%; }
  .bk-split--solo .feat-meta { align-items: center; gap: 8px; }
  .bk-split--solo .feat-name { font-size: clamp(24px, 7vw, 32px); }
  .bk-split--solo .feat-by { font-size: 14px; }
  .bk-split--solo .feat-why {
    overflow: visible;
    max-width: 34ch;
    margin: clamp(8px, 1.4vh, 14px) auto 0;
    gap: 12px;
    align-items: center;
  }
  .bk-split--solo .feat-why p { font-size: 15px; line-height: 1.6; }
  .feat-why.is-clipped .feat-more { display: none; }
  .feat-toggle {
    min-height: 44px;
    padding: 10px 14px;
    background: none;
    border: 0;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--signal);
    cursor: pointer;
  }
  .bk-split--solo .feat-foot { width: 100%; padding-top: clamp(12px, 2vh, 18px); }
  .bk-split--solo .feat-foot .btn {
    justify-content: center;
    width: 100%;
    max-width: 360px;
    min-height: 52px;
  }

  /* The three folds. Everything that spaced these as panels goes: the
     full-screen minimum on the index panel, the band it reserved at its
     top, and the gaps between its halves. Each fold is its header, a
     hairline above it, and whatever opens under it. */
  .bk-panel--index { min-height: 0; }
  .bk-index { padding: 0 var(--gutter); gap: 0; }
  .bk-panel--index .split-half,
  .bk-index-half,
  .bk-index-half--free { padding-top: 0; gap: 0; }
  .bk .bk-panel--ess .panel-head .wrap { padding-top: 0; }

  .bk .is-foldable .fold-head {
    display: block;
    min-height: 0;
    margin: 0;
    padding: clamp(20px, 3.4vh, 30px) 0;
    border-top: 1px solid var(--hair);
    font-size: clamp(21px, 6.4vw, 30px);
    line-height: 1.05;
    text-align: center;
  }
  /* The last header closes the run, so the footer does not start against a
     bare edge. While it is open the reel sits there instead. */
  .bk .bk-panel--ess:not(.is-open) .fold-head { border-bottom: 1px solid var(--hair); }

  /* What opens, with room to breathe under its header. */
  /* The next header's hairline is the list's end. Its own last rule would
     be a second line a gap above that one, which is the stacked-halves
     problem the note further up describes, back again. */
  .bk .bk-index-half .fold-body > .plan-list { margin-bottom: clamp(20px, 3.4vh, 30px); }
  .bk .bk-index-half .fold-body .plan-list li:last-child { border-bottom: 0; }
  /* No padding on a fold body: max-height clips content but not padding,
     so the section's own padding held the closed Essential Shelf 38px open
     with the top of the first cover showing through. The space is drawn
     inside instead, where the fold can close over it. */
  .bk .bk-panel--ess .ess-section { padding-top: 0; padding-bottom: 0; }
  .bk .bk-panel--ess .ess-section::before { content: ''; display: block; height: clamp(4px, 1vh, 10px); }
  .bk .bk-panel--ess .ess-section::after { content: ''; display: block; height: clamp(28px, 4.5vh, 40px); }
}