/* ============================================================================
   flipbook.css — the ebooks become a book you turn, on the site.

   WHAT IT REPLACED. Both ebooks were <a href="...pdf" download>. Clicking the
   thing library.html itself calls "Start here" ended the visit: the reader
   left for a PDF viewer, nothing we could see, and on a phone it opened in a
   separate app with no account button within reach. The two files are also
   4,778 words of the best writing we give away, and none of it existed
   anywhere Google could read — only the titles were ever in HTML.

   PROGRESSIVE ENHANCEMENT, AND THAT IS THE WHOLE POINT. The page ships the
   ebook as ordinary semantic HTML. flipbook.js paginates that same DOM into
   leaves afterwards. So the text is crawlable, selectable and printable, and
   with scripting off the book is simply a long article — which is a perfectly
   good way to read it. Nothing here is required for the words to arrive.

   WHY NOT RENDER THE PDF. A PDF renderer paints to canvas; the text stops
   being text, which throws away the one benefit worth having. The PDF stays
   as a download for the truck and the office printer.
   ========================================================================= */

.fb-wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(14px,3vw,28px); }

/* ── the stage ───────────────────────────────────────────────────────────── */
.fb-stage{
  position:relative; margin:clamp(18px,2.4vw,30px) 0 0;
  perspective:2600px; perspective-origin:50% 44%;
}
.fb-book{
  position:relative; margin:0 auto;
  width:min(100%, 1060px);
  aspect-ratio:1.46/1;                 /* two pages side by side */
  transform-style:preserve-3d;
}
/* the slab the leaves sit on, so a turned page has something behind it */
.fb-book::before{
  content:""; position:absolute; inset:0; border-radius:11px;
  background:linear-gradient(180deg,#15171b 0%,#101216 100%);
  border:1px solid rgba(255,255,255,0.10);
  /* the block of pages has thickness: a stack of hairlines down each fore-edge */
  box-shadow:
    0 54px 120px rgba(0,0,0,.66),
    0 10px 30px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.07);
}
/* a warm pool of light on the plate beneath, so the book sits ON something */
.fb-stage::before{
  content:""; position:absolute; left:50%; top:52%; width:116%; height:116%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:0;
  background:radial-gradient(44% 46% at 50% 46%, rgba(244,197,33,.075) 0%,
             rgba(244,197,33,.028) 46%, transparent 72%);
}
/* the spine */
.fb-book::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:28px;
  margin-left:-14px; pointer-events:none; z-index:40;
  background:linear-gradient(90deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.42) 36%, rgba(0,0,0,.60) 50%,
    rgba(0,0,0,.42) 64%, rgba(0,0,0,0) 100%);
}

/* ── a leaf: two pages back to back ──────────────────────────────────────── */
.fb-leaf{
  position:absolute; top:0; bottom:0; left:50%; width:50%;
  transform-style:preserve-3d; transform-origin:left center;
  transition:transform 900ms cubic-bezier(.32,.08,.18,1);
  will-change:transform;
}
.fb-leaf.is-turned{ transform:rotateY(-180deg); }

.fb-face{
  position:absolute; inset:0; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  /* PAPER, NOT A PANEL. A flat fill reads as a div; a sheet catches a little
     light at the top and loses it toward the foot. */
  background:
    radial-gradient(130% 70% at 50% -8%, rgba(255,255,255,.055) 0%, transparent 62%),
    linear-gradient(180deg,#1d2126 0%,#171a1f 58%,#13161a 100%);
  padding:clamp(26px,3.1vw,44px) clamp(24px,3vw,42px) clamp(42px,3.8vw,56px);
  display:flex; flex-direction:column;
}
/* THE GUTTER. The single strongest cue that this is a bound book rather than
   two rectangles: the inner edge of every page falls into the spine. */
.fb-face.fb-recto{ border-radius:0 11px 11px 0;
  box-shadow:inset 26px 0 34px -24px rgba(0,0,0,.96), inset 0 0 0 1px rgba(255,255,255,.045); }
.fb-face.fb-verso{ transform:rotateY(180deg); border-radius:11px 0 0 11px;
  box-shadow:inset -26px 0 34px -24px rgba(0,0,0,.96), inset 0 0 0 1px rgba(255,255,255,.045); }

/* The leaf darkens as it swings, the way paper does when it leaves the light.
   It rides the same 900ms as the transform, so the shading IS the turn. */
.fb-face::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  opacity:0; transition:opacity 900ms cubic-bezier(.32,.08,.18,1);
  background:linear-gradient(90deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.14) 42%, transparent 72%);
}
.fb-leaf.is-turned .fb-face.fb-recto::after{ opacity:1; }

/* ── what a page holds ───────────────────────────────────────────────────── */
.fb-copy{ flex:1 1 auto; overflow:hidden; }
.fb-copy > *:first-child{ margin-top:0; }
.fb-copy p{ margin:0 0 .82em; font-size:clamp(.89rem,1.06vw,1.02rem); line-height:1.72;
             color:var(--ink,#f2f1ef); hyphens:auto; }
/* A CHAPTER OPENS LIKE A CHAPTER: a gold rule, then a dropped initial on the
   paragraph that follows. Both are keyed off the heading, so they land
   correctly wherever the measured pagination happens to break. */
.fb-copy h2{ margin:.15em 0 .55em; font-family:var(--font-display,inherit);
             font-size:clamp(1.06rem,1.6vw,1.42rem); line-height:1.2; letter-spacing:-.01em;
             color:var(--ink,#f2f1ef); }
.fb-copy h2::before{ content:""; display:block; width:40px; height:2px; margin:0 0 .6em;
             background:linear-gradient(90deg,var(--ember,#F4C521),rgba(244,197,33,.15)); }
.fb-copy h2 + p::first-letter{
  float:left; font-family:var(--font-display,inherit); font-weight:800;
  font-size:3.05em; line-height:.78; margin:.04em .1em 0 0;
  color:var(--ember,#F4C521);
}
.fb-copy h3{ margin:1.1em 0 .4em; font-size:clamp(.92rem,1.1vw,1.04rem); color:var(--ink,#f2f1ef); }
.fb-copy ul,.fb-copy ol{ margin:0 0 .8em; padding-left:1.15em; }
.fb-copy li{ margin:0 0 .35em; font-size:clamp(.84rem,1vw,.95rem); line-height:1.6; color:var(--ink,#f2f1ef); }
.fb-copy strong{ color:#fff; font-weight:650; }
.fb-copy blockquote{ margin:0 0 .9em; padding:.6em .9em; border-left:2px solid var(--ember,#F4C521);
                     background:rgba(244,197,33,.06); }
.fb-copy blockquote p:last-child{ margin-bottom:0; }
.fb-copy figure{ margin:0 0 .9em; }
/* THE FIGURE MARKS, scaled for a book page.
   edu_markdown.mjs draws the same ```figure blocks for an article and for an
   ebook — ribbon, ladder, bars, totals — but the CSS for them only ever existed
   inside the article template's inline <style>. So on the reader they arrived as
   correct markup with no rules at all and fell back to a bare list of labels and
   numbers: the chart was there and invisible. Same marks, smaller type. */
.fb-copy .art-fig{ margin:0 0 1em; padding:0; }
.fb-copy .af-t{ margin:0 0 .15em; font-weight:700; font-size:.92rem; color:var(--ink,#f2f1ef); }
.fb-copy .af-n{ margin:0 0 .7em; font-size:.76rem; line-height:1.45; color:var(--ink-dim,#9aa4ad); }
.fb-copy .af-ribbon{ display:flex; gap:2px; height:11px; margin:0 0 .7em; }
.fb-copy .af-ribbon div:first-child{ border-radius:3px 0 0 3px; }
.fb-copy .af-ribbon div:last-child{ border-radius:0 3px 3px 0; }
.fb-copy .af-ladder{ border-top:1px solid rgba(255,255,255,.1); }
.fb-copy .af-rung{ display:flex; align-items:center; gap:9px; padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.1); font-size:.78rem; }
.fb-copy .af-l{ flex:1 1 40%; color:var(--ink-dim,#9aa4ad); min-width:0; overflow-wrap:anywhere; }
.fb-copy .af-chip{ display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:6px; }
.fb-copy .af-track{ flex:1 1 20px; height:8px; background:rgba(255,255,255,.07); border-radius:3px; min-width:14px; }
.fb-copy .af-bar{ height:8px; border-radius:0 3px 3px 0; min-width:3px; }
.fb-copy .af-v{ flex:0 0 auto; text-align:right; font-weight:650;
  font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--ink,#f2f1ef); }
.fb-copy .af-total{ border-bottom:none; border-top:2px solid var(--ember,#F4C521); padding-top:8px; }
.fb-copy .af-big{ font-size:1rem; color:var(--ember,#F4C521); }
.fb-copy .art-fig figcaption{ margin-top:.6em; font-size:.74rem; line-height:1.45; color:var(--ink-dim,#9aa4ad); }

.fb-copy .af-stat{ text-align:center; padding:.8em .6em; border-top:1px solid rgba(244,197,33,.28);
                   border-bottom:1px solid rgba(244,197,33,.28); }
.fb-copy .af-stat-n{ margin:0 0 .18em; font-family:var(--font-display,inherit); font-weight:800;
                     font-size:clamp(1.5rem,3vw,2.3rem); letter-spacing:-.02em; color:var(--ember,#F4C521); }
.fb-copy .af-stat .af-n{ margin:0 0 .35em; font-family:var(--font-mono,monospace); font-size:.66rem;
                         letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim,#9aa4ad); }
.fb-copy .af-stat figcaption{ margin:0; font-size:.78rem; line-height:1.5; color:var(--ink-dim,#9aa4ad); }
.fb-copy img{ max-width:100%; height:auto; border-radius:8px; }

.fb-folio{
  flex:0 0 auto; margin-top:14px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.085);
  display:flex; align-items:center; justify-content:space-between;
  font-family:var(--font-mono,monospace); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim,#9aa4ad);
}
.fb-folio span{ opacity:.62; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-folio b{ color:var(--ember,#F4C521); font-weight:600; }

/* the cover sits on the first recto */
/* THE COVER IS THE PHOTOGRAPH. It used to be a small picture sitting above
   centred text, which is a slide, not a cover. Full bleed, scrim, type at the
   foot — the shape every book on a shelf uses. */
.fb-cover{ padding:0; justify-content:flex-end; }
.fb-cover .fb-cphoto{ position:absolute; inset:0; width:100%; height:100%;
  max-height:none; object-fit:cover; margin:0; border-radius:0; z-index:0; }
.fb-cover .fb-cscrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(12,14,17,.34) 0%, rgba(12,14,17,.74) 46%,
                    rgba(12,14,17,.94) 74%, rgba(12,14,17,.985) 100%),
    radial-gradient(120% 70% at 50% 0%, rgba(244,197,33,.10) 0%, transparent 58%); }
.fb-cover .fb-ctext{ position:relative; z-index:2;
  padding:0 clamp(24px,3vw,42px) clamp(30px,3.4vw,46px); }
.fb-cover .fb-ceyebrow{ margin:0 0 .85em; font-family:var(--font-mono,monospace); font-size:.64rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ember,#F4C521); }
.fb-cover .fb-crule{ display:block; width:52px; height:2px; margin:0 0 .9em;
  background:linear-gradient(90deg,var(--ember,#F4C521),rgba(244,197,33,.12)); }
.fb-cover .fb-ctitle{ margin:0 0 .5em; font-family:var(--font-display,inherit); font-weight:800;
  font-size:clamp(1.45rem,2.9vw,2.35rem); line-height:1.08; letter-spacing:-.025em;
  color:#fff; text-wrap:balance; }
.fb-cover .fb-ctitle::before{ content:none; }
.fb-cover .fb-csub{ margin:0; max-width:36ch; font-size:clamp(.85rem,1.02vw,.98rem);
  line-height:1.58; color:rgba(242,241,239,.82); }
.fb-cover .fb-cfoot{ margin:1.1em 0 0; font-family:var(--font-mono,monospace); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-dim,#9aa4ad); }

/* ── controls ────────────────────────────────────────────────────────────── */
.fb-bar{
  display:flex; align-items:center; justify-content:center; gap:clamp(10px,1.6vw,20px);
  margin:clamp(16px,2vw,24px) 0 0; flex-wrap:wrap;
}
.fb-btn{
  appearance:none; cursor:pointer; border-radius:999px;
  border:1px solid rgba(244,197,33,0.55); background:rgba(244,197,33,0.08);
  color:var(--ink,#f2f1ef); font-family:var(--font-mono,monospace);
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 20px; min-height:44px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.fb-btn:hover{ background:rgba(244,197,33,0.16); border-color:rgba(244,197,33,0.8); }
.fb-btn[disabled]{ opacity:.38; cursor:default; }
.fb-count{ font-family:var(--font-mono,monospace); font-size:.74rem; letter-spacing:.1em;
           color:var(--ink-dim,#9aa4ad); min-width:9ch; text-align:center; }

/* ── phone: one page, and the turn stays ─────────────────────────────────── */
@media (max-width:860px){
  /* A FIXED ASPECT RATIO WAS WASTING THE PHONE. At .76/1 a 347px-wide page was
     only 456px tall on an 812px screen, so a single long paragraph that would
     not fit pushed to the next page and left half a page blank — 44 pages for
     one ebook, most of them part-empty. Pagination is by whole blocks and a
     paragraph cannot be split, so the cure is a taller page, not smaller type.
     Height now follows the viewport and keeps room for the controls. */
  .fb-book{ aspect-ratio:auto; height:min(72vh, 660px); }
  .fb-leaf{ left:0; width:100%; }
  .fb-face.fb-recto{ border-radius:11px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); }
  .fb-face.fb-verso{ border-radius:11px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.045); }
  .fb-face{ padding:clamp(22px,5.5vw,30px) clamp(20px,5vw,28px) clamp(34px,7vw,42px); }
  .fb-book::after{ display:none; }          /* no spine on a single page */
  .fb-cover .fb-ctext{ padding:0 clamp(20px,5vw,28px) clamp(26px,6vw,34px); }
  .fb-bar{ gap:10px; }
}

/* ── the plain-article fallback, and what JS hides ───────────────────────── */
.fb-plain{ max-width:68ch; margin:0 auto; }
html.fb-on .fb-plain{ position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* ^ moved out of sight rather than display:none ON PURPOSE: the words stay in
   the accessibility tree and in the page source, which is the entire reason
   this is HTML and not a rendered PDF. */
html:not(.fb-on) .fb-stage,
html:not(.fb-on) .fb-bar{ display:none; }

@media (prefers-reduced-motion:reduce){
  .fb-leaf{ transition:none; }
}