/* ============================================================
   CONCEPTO P — THE EDITORIAL'S SHELVES
   Volumes (bindery.js): the wall of heavy books. Magazines (rack.js): the
   issues fanned on a table (its own rules are in magazines.css). Both are drawn
   by CP.gl on one canvas that fills the window, white, with the type standing
   over it: the place's word at the upper left under the Editorial's rail, the
   catalogue entry at the foot, and the index of numerals (Volumes).
   No box, no rule, no leader, no band: the books and the type are the frame,
   and the nav floats over all of it with nothing under it. Every figure is the
   catalogue's (numerals.css). Motion is the house's: opacity and transforms on
   --settle, --breath and --lift, at --slow and --slower.
   ============================================================ */

.bd-room, .rk-room{ background:#FFFFFF; color:var(--ink, #1A1814); }
html:has(.bd-room), html:has(.rk-room), .page-volumes, .page-magazines{ background:#FFFFFF; }
.bd, .rk{ position:relative; z-index:1; }

/* the desk, when the Editorial's painter has not laid one: the page's own white */
.bd-ground{ position:fixed; inset:0; z-index:0; pointer-events:none; background:#FFFFFF; }

/* ---------- the canvas, and the controls over what it draws ---------- */
.bd-gl{ position:fixed; inset:0; z-index:1; overflow:hidden; background:#FFFFFF; }
.bd-gl > canvas{ z-index:0; }
.bd-hits{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.bd-hit{
  position:absolute; left:0; top:0; width:0; height:0; padding:0; margin:0; min-height:0;
  pointer-events:auto; background:none; border:0; overflow:hidden;
  color:transparent; font-size:1px; line-height:1; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
/* a key that finds a book is told by the book itself, never by a ring (focus is ink, not a box): the
   focus walks the wall to that book (bindery.js), its entry comes up under it and its numeral takes the full ink.
   The issue a key finds in the Magazines' fan is turned to the eye (rack.js). */
:is(.bd-room, .rk-room) .bd-gl .bd-hits .bd-hit:focus-visible{ outline:none !important; }
.bd-run{ position:relative; z-index:0; pointer-events:none; }
.is-flat .bd-gl{ display:none; }

/* ---------- the frame: it stands still over the canvas ---------- */
.bd-frame{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  transition:opacity var(--slow) var(--settle);
}
.bd-frame :is(a, button){ pointer-events:auto; }
/* the place's word and the book's title answer the hand letter by letter, like every word of the house's scale */
.bd-frame :is(.bd-word, .bd-t){ pointer-events:auto; }
.bd-furn{ position:absolute; top:calc(var(--nav-h) + 30px); left:var(--gutter, 3.8vw); right:var(--gutter, 3.8vw); margin:0; }
.bd-back{ color:var(--ink-quiet, #5C564C); }
.bd-col{ position:absolute; top:calc(var(--nav-h) + 66px); left:var(--gutter, 3.8vw); margin:0; }
.bd-word{ margin:0; color:var(--ink, #1A1814); }
.bd-line{ margin:.5em 0 0; color:var(--ink-quiet, #5C564C); }
.bd-sample{ margin-left:.7em; color:var(--ink-quiet, #5C564C); }

/* the catalogue entry, for the book at the eye */
.bd-entry{
  position:absolute; left:var(--gutter, 3.8vw); bottom:clamp(48px, 8vh, 96px); width:min(32em, 40vw); margin:0;
  pointer-events:none;
}
.bd-entry :is(button, a){ pointer-events:auto; }
.bd-entry.is-out{ opacity:0; transition:opacity var(--slow) var(--lift); }
.bd-entry .bd-fade{ opacity:0; transition:opacity var(--slower) var(--settle) var(--fd, 0s); }
.bd-entry.is-in .bd-fade{ opacity:1; }
.bd-k{ margin:0 0 .5em; color:var(--ink-quiet, #5C564C); }
.bd-t{ margin:0; color:var(--ink, #1A1814); }
.bd-sub{ margin:.45em 0 0; color:var(--ink, #1A1814); }
.bd-facts{ margin:1.1em 0 0; color:var(--ink, #1A1814); }
.bd-ed{ margin:.3em 0 0; color:var(--ink-quiet, #5C564C); }
.bd-ed .bd-of::before{ content:"  ·  "; white-space:pre; }
.bd-ed .bd-sample{ margin-left:.9em; }
.bd-acts{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 30px; margin:1.1em 0 0; }
.bd-open{ display:inline-flex; align-items:center; min-height:44px; padding:0; color:var(--ink, #1A1814); }

/* the index of numerals: the wall's order, the book at the eye in full ink */
.bd-index{
  position:absolute; right:var(--gutter, 3.8vw); bottom:clamp(48px, 8vh, 96px); margin:0;
  display:flex; flex-wrap:wrap; justify-content:flex-end; gap:2px 14px; max-width:min(26em, 34vw);
}
.bd-no{
  padding:.45em 0; color:var(--ink, #1A1814); opacity:.34;
  transition:opacity var(--slow) var(--settle);
}
.bd-no.is-on{ opacity:1; }
@media (hover:hover){ .bd-no:hover{ opacity:.8; } }
/* On the wall the numerals are the index, and the entry stands under the shelf, closer set. */
.bd-room.bd-wall .bd-frame .bd-index{ display:flex; }
.bd-room .bd-frame .bd-no{ opacity:.34; }
.bd-room .bd-frame .bd-no.is-on{ opacity:1; }
.bd-room .bd-entry .bd-t{ margin-top:4px !important; }
.bd-room .bd-entry .bd-sub{ margin-top:8px !important; }
.bd-room .bd-entry .bd-facts{ margin-top:16px !important; padding-top:0; }
.bd-room .bd-entry .bd-acts{ margin-top:12px !important; }
/* the folded facts (20 October): on a wide window they hang under Open, unseen, and unfold on demand */
.bd-more{ display:block; }
@media (min-width:760px) and (min-aspect-ratio:1/1){
  .bd-entry .bd-more{
    position:absolute; left:0; top:100%; width:100%; padding-top:2px;
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none;
    transition:clip-path var(--slower) var(--settle), opacity var(--slow) var(--settle);
  }
  .bd-entry .bd-more .bd-facts{ margin-top:0 !important; }
  .bd-entry.is-in:is(:hover, :focus-within, .is-more) .bd-more{ clip-path:inset(0 0 0 0); opacity:1; }
}

/* opening: the frame lets the book go first; reading: it is not drawn under the reader */
.bd-room.is-opening .bd-frame, .rk-room.is-opening .bd-frame{ opacity:0; transition:opacity var(--slow) var(--lift); }
.bd-room.is-read .bd-frame, .rk-room.is-read .bd-frame{ visibility:hidden; }

/* ---------- reduced motion: still ---------- */
.is-still .bd-entry .bd-fade, .is-still .bd-frame, .is-still .bd-no{ transition:none; }

/* ---------- a phone: the book above, its entry under it, the numerals at the foot ---------- */
@media (max-width:759px){
  .bd-furn{ left:16px; right:16px; }
  .bd-col{ left:16px; right:16px; top:calc(var(--nav-h) + 58px); }
  .bd-line{ margin-top:.45em; }
  .bd-entry{ left:16px; right:16px; width:auto; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); }
  .bd-facts{ margin-top:.7em; }
  .bd-ed .bd-bind{ display:none; }
  .bd-ed .bd-of::before{ content:none; }
  .bd-acts{ margin-top:.6em; }
  .bd-index{
    left:16px; right:16px; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); max-width:none;
    justify-content:space-between; gap:0;
  }
  /* twelve numerals share the width, each its whole share of it to the finger (no gap between them to miss) */
  .bd-no{ flex:1 1 0; min-width:0; text-align:center; padding:.8em 0; min-height:44px; }
  .bd-no:first-child{ text-align:left; }
  .bd-no:last-child{ text-align:right; }
}

/* ---- P, 22 Oct: Volumes and Magazines read first, as the entrance does. The room's word heavier; the line under it,
   and each object's line, in the house's clean reading ink (no vinyl shadow under small words), larger and at full ink;
   Open and the numerals larger and easier to find ---- */
:is(.bd-room, .rk-room) .bd-word{ -webkit-text-stroke:.016em currentColor; paint-order:stroke fill; }
:is(.bd-room, .rk-room) :is(.bd-line, .bd-sub){
  filter:none !important; font-family:var(--serif) !important; font-style:italic !important; letter-spacing:0 !important;
  font-size:clamp(18px, 14.5px + .6vw, 24px) !important; line-height:1.35; color:var(--ink, #1A1814);
}
:is(.bd-room, .rk-room) .bd-t{ -webkit-text-stroke:.012em currentColor; }
:is(.bd-room, .rk-room) .bd-open{ font-size:14px !important; letter-spacing:.16em !important; }
:is(.bd-room, .rk-room) .bd-frame .bd-no{ font-size:clamp(15px, 13px + .3vw, 18px) !important; opacity:.5; }
:is(.bd-room, .rk-room) .bd-frame .bd-no.is-on{ opacity:1; }