/* ============================================================
   The library build of the book.
   StPageFlip owns the geometry and the flip; tsParticles owns the
   dust. Everything here is presentation only — page texture, type,
   boards — so the comparison is about the mechanics, not the art.
   ============================================================ */

/* --- StPageFlip's own structural CSS (from page-flip/src/Style) --- */
.stf__parent{ position:relative; display:block; box-sizing:border-box; transform:translateZ(0);
              -ms-touch-action:pan-y; touch-action:pan-y }
.sft__wrapper{ position:relative; width:100%; box-sizing:border-box }
.stf__parent canvas{ position:absolute; width:100%; height:100%; left:0; top:0 }
.stf__block{ position:absolute; width:100%; height:100%; box-sizing:border-box; perspective:2000px }
.stf__item{ display:none; position:absolute; transform-style:preserve-3d }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow{ position:absolute; left:0; top:0 }

/* --- our dressing on top of it --- */
.libtome{
  position:relative; margin:0 auto; touch-action:pan-y;
  width:100%;
  /* the about page gives it a whole column, so cap it; inside the compare
     grid the column is already narrow and this never bites */
  max-width:min(880px, 88vw, calc((100svh - 330px) * 1.42));
}
.libtome-stage{ position:relative; margin:0 auto; width:100% }
.libtome-book{ margin:0 auto; position:relative; z-index:2 }

.libtome .page{
  background:#efe4cd url("../tome/page.jpg") center/cover;
  color:#3b2f22;
  overflow:hidden;
  box-shadow:inset 0 0 34px rgba(112,84,44,.30);
}
.libtome .page[data-density="hard"]{
  background:#5a3325 url("../tome/leather.jpg") center/cover;
  box-shadow:inset 0 0 46px rgba(30,14,6,.30), inset 0 0 14px rgba(30,14,6,.24);
}
/* Settled dust, over everything on the cover including the gilt — dust does
   not respect the tooling. */
.libtome .page[data-density="hard"]::before{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:url("../tome/cover-dust.png") center/cover;
  opacity:.5;
}
.libtome .page[data-density="hard"]::after{
  /* knocked corners: the board shows through where it has been dropped */
  content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:
    radial-gradient(circle at 0 0,      rgba(196,158,116,.55) 0, transparent 9%),
    radial-gradient(circle at 100% 0,   rgba(196,158,116,.42) 0, transparent 7%),
    radial-gradient(circle at 0 100%,   rgba(196,158,116,.50) 0, transparent 8%),
    radial-gradient(circle at 100% 100%,rgba(196,158,116,.60) 0, transparent 10%);
  width:auto;
}
.libtome .page .sheet{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:clamp(18px,3.2vw,42px) clamp(18px,3.4vw,46px);
  font-size:var(--sheet-fs, clamp(.72rem,1vw,.98rem)); line-height:1.62;
}
/* Each paper page's own aging, composed by stain() in tome-lib.js. It
   lives on a child .leaf because StPageFlip rewrites the page element's
   entire style.cssText on every draw -- inline styles on the item itself do
   not survive the first frame. The leaf carries the sheet of stock (its
   crop, tint and vignette inline) and its ::before paints the --age
   gradients; the item's clip-path folds both with the page. It is
   .age-leaf, not .leaf -- tome.css owns .leaf for the hand-built book's
   half-spread leaves, and about.html loads tome.css, so the collision
   halved this element's width. Before .sheet
   in tree order, so it ages the paper and never the type. The verso is ours,
   StPageFlip never touches it, so it keeps the direct arrangement. */
.libtome .age-leaf{
  position:absolute; inset:0; pointer-events:none;
  background:#efe4cd url("../tome/page.jpg") center/cover;
}
.libtome .age-leaf::before,
.libtome-verso::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--age, none);
}

/* the gutter shadow, mirrored for versos */
.libtome .page::after{
  content:""; position:absolute; top:0; bottom:0; width:13%; pointer-events:none;
  background:linear-gradient(to right, rgba(76,52,26,.32), rgba(76,52,26,.04) 55%, transparent);
}
.libtome .page.--left::after{ right:0; transform:scaleX(-1) }
.libtome .page.--right::after{ left:0 }

.libtome .page[data-density="hard"] .cover-inner{
  position:absolute; inset:clamp(12px,2vw,26px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(10px,2vw,22px); padding:clamp(14px,2.6vw,30px);
}

/* the dust canvas tsParticles renders into */
.libtome-dust{
  position:absolute; left:-30%; top:-28%; width:160%; height:158%;
  pointer-events:none; z-index:60;
}
.libtome-dust canvas{ width:100% !important; height:100% !important }

/* boards under the book, so it reads as an object like the other one */
.libtome-boards{
  position:absolute; z-index:0; pointer-events:none;
  background:#5a3325 url("../tome/leather.jpg") center/cover;
  border-radius:9px;
  box-shadow:
    0 1px 0 rgba(255,226,190,.12) inset,
    0 4px 0 -1px #5c3526, 0 7px 0 -2px #34190f, 0 9px 1px -3px rgba(0,0,0,.55),
    0 20px 28px -18px rgba(30,18,10,.8), 0 46px 62px -30px rgba(40,26,14,.5);
  /* NO geometry transition, deliberately. A leather rectangle sliding
     sideways reads as furniture moving, not as a book opening. In
     landscape there are TWO of these — right and left half-boards that
     never move or resize; the left one only fades in place under a landed
     cover. See sizeBoards' choreography note in tome-lib.js. */
}

/* StPageFlip's crease and cover shadows exist only to shade a turn in
   flight; its initial render can leave one parked over the empty half of a
   closed book, which reads as a pale ghost panel. Visibility (not display)
   so the dust engine can still read the crease's box every frame. */
.libtome .stf__outerShadow, .libtome .stf__innerShadow,
.libtome .stf__hardShadow, .libtome .stf__hardInnerShadow{ visibility:hidden }
.libtome.is-flipping .stf__outerShadow, .libtome.is-flipping .stf__innerShadow,
.libtome.is-flipping .stf__hardShadow, .libtome.is-flipping .stf__hardInnerShadow{ visibility:visible }


/* ---------- portrait: make it read as an open book ----------
   StPageFlip shows one page in portrait, which on its own looks like a
   floating leaf. The verso and the boards are drawn continuing off the left
   of the screen so there is obviously a book there, and the whole thing
   shifts right once it is open so the spine sits inside the viewport. */
.libtome-verso{
  position:absolute; z-index:1; pointer-events:none; display:none;
  overflow:hidden; color:#3b2f22;
  background:#efe4cd url("../tome/page.jpg") center/cover;
  box-shadow:inset -18px 0 26px -14px rgba(76,52,26,.5);
  border-radius:5px 1px 1px 5px;
}
.libtome-verso::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:16%;
  background:linear-gradient(to left, rgba(76,52,26,.4), transparent);
}
.libtome-stage{ transition:transform 1s cubic-bezier(.45,.05,.25,1) }

@media (max-width:820px){
  .libtome{ max-width:min(73vw, calc((100svh - 300px) * .70)) }
  .libtome.is-open .libtome-verso{ display:block }
  .libtome.is-open .libtome-stage{ transform:translateX(9%) }
}


/* the verso carries the previous page's text, cropped by the screen edge */
.libtome-verso .sheet{
  position:absolute; inset:0; display:flex; flex-direction:column;
  padding:clamp(18px,3.2vw,42px) clamp(18px,3.4vw,46px);
  font-size:var(--sheet-fs, clamp(.72rem,1vw,.98rem)); line-height:1.62;
  opacity:.9;
}
.libtome-verso .folio{ margin-top:auto }

/* The inside of the back board is a paste-down endpaper, not the outside of
   the cover — that face is the only one you ever see, since the book stops
   before it can be turned. */
.libtome .page[data-type="backcover"]{
  background:#e6d8bd url("../tome/page.jpg") center/cover;
  box-shadow:inset 0 0 60px rgba(84,58,28,.42), inset 0 0 18px rgba(60,38,16,.34);
}
.libtome .page[data-type="backcover"]::before{
  content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(74,50,22,.30) 100%),
    linear-gradient(115deg, rgba(120,88,44,.10), transparent 45%);
  opacity:1; mix-blend-mode:multiply;
}
.libtome .page[data-type="backcover"]::after{ content:none }

/* The inside back board carries no ornament. It used to hold a single
   centerd U+25C6 diamond, which read as an artifact rather than as tooling
   -- one small shape floating in the middle of an otherwise empty endpaper
   looks like something went wrong, not like a decision. A real paste-down
   endpaper is blank. */

/* ---- a page of pictures -------------------------------------------------
   The Education spread's right-hand page: two figures stacked, each taking
   the height it can get. min-height:0 on every flex level is what lets an
   image shrink to its box instead of pushing the folio off the page. */
.libtome .page[data-type="figures"] .sheet{ justify-content:center; gap:.8em }
.sheet .fig{
  margin:0; flex:1 1 0; min-height:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.sheet .fig picture{
  flex:1 1 auto; min-height:0; max-width:100%;
  display:flex; align-items:center; justify-content:center;
}
/* The picture is wrapped in a link to its full-size file (lightbox.js opens
   it in a modal). The link takes over the box the <picture> had, and the
   <picture> steps aside, so the image sizes exactly as it did before. */
.sheet .fig .fig-zoom{
  flex:1 1 auto; min-height:0; max-width:100%;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in;
}
.sheet .fig .fig-zoom picture{ display:contents }
.sheet .fig img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  padding:4px; background:#fffdf6; border:1px solid rgba(90,66,36,.35);
  box-shadow:0 6px 14px -9px rgba(40,28,14,.5);
}
.sheet .fig-cap{
  margin:.4em 0 0; max-width:none; text-align:center;
  font-family:var(--sans); font-size:.6rem; letter-spacing:.08em; color:#8a7457;
}
.tome-fallback .fig{ margin:1em 0 }
.tome-fallback .fig img{ max-width:100%; height:auto }