/* card-binder v3.1.0 (2026-09-29) */
/* card-binder: a pocket-page binder as a physical object. Charcoal woven cover, dark pocket sheets, clear sleeves.
   Every colour and size is a token on the host, override them on the host element. Class names are cb- prefixed.
   Layout classes the module sets on the host: cb-two (spread mode), cb-fit (size the spread from the viewport height). */
.cb-host{
  --cb-cover:oklch(0.3 0.006 260);--cb-cover-hi:oklch(0.345 0.006 260);--cb-sheet:oklch(from var(--cb-cover) calc(l + .07 * var(--cb-press)) calc(c * .7) h);--cb-pocket:oklch(from var(--cb-cover) calc(l + .035 * var(--cb-press)) calc(c * .7) h);   /* the inside follows the cover: a step lighter on a dark cover, a step darker on a light one */
  --cb-seam:oklch(0.66 0.005 260 / .5);--cb-thread:oklch(0.86 0.02 80);   /* thread: the dashed stitch line on the inside covers */--cb-stitch:color-mix(in oklch, var(--cb-thread), transparent 55%);
  --cb-paper:oklch(0.98 0.004 95);--cb-ink:oklch(0.22 0.012 95);--cb-ink-dim:oklch(0.47 0.012 95);
  --cb-recess:inset 0 1px 3px oklch(0 0 0 / .35),inset 1px 0 2px oklch(0 0 0 / .16),0 0 0 1px oklch(0 0 0 / .6),0 1px 0 oklch(1 0 0 / .1);   /* paper set into the cover (the contents card, the name plate, the page numbers and bars): a dark rim, the wall's shadow on the top and left edges, a lit lower lip */
  --cb-line:oklch(0.6 0.01 95);--cb-line-soft:oklch(0.8 0.01 95);
  --cb-aw:63;--cb-ah:88;               /* pocket aspect, width and height units of whatever sits in a pocket */
  --cb-gap:14px;                       /* between pockets; the module lowers it at four and five plus columns unless --cb-gap-fixed is set */
  --cb-bpad:6px;--cb-lpad:calc(var(--cb-gap) * .7);--cb-ppad:calc(var(--cb-gap) * .3);
  --cb-press:1;                        /* 1 on a dark cover, -1 on a light one: the sheets and pockets step lighter or darker by it; setCover sets it for hex colours */
  --cb-foot:18px;                      /* the cover band under each page (this plus --cb-bpad): page number in the outer corner, that page's bar in the middle */
  --cb-tabw:30px;--cb-tab-mark:var(--cb-ink);--cb-tabpad:0px;   /* tab dividers: one tab column's width beside the page, the bar marking the current tab at its outer edge; tabpad is what the module reserves for the columns;
     the tabs take paper, ink and ink-dim unless the host sets --cb-tab-paper, --cb-tab-text and --cb-tab-text-dim (a tab standing out from the page) */
  --cb-navw:36px;--cb-navpad:0px;      /* the chevrons beside a spread: one button's width; navpad is the gutter the module reserves for the pair on each side */
  --cb-spine:36px;--cb-turn:.75s;      /* turn: how long one sheet takes to swing over the spine; the module sets --cb-persp per turn from the page width */
  --cb-reserve:160px;  /* reserve: viewport height taken by everything outside the book when cb-fit is on (site header, margins, this pager) */
  --cb-mono:ui-monospace,Menlo,monospace;
  /* the cover's edge: a 1px highlight and a 1px dark line inside the rim (ring), and the shadow it casts on the page (cast) */
  --cb-ring:inset 0 1px 0 oklch(1 0 0 / .08),inset 0 0 0 1px oklch(0 0 0 / .35);
  --cb-cast:0 10px 24px oklch(0.2 0.02 95 / .35),0 1px 2px oklch(0.2 0.02 95 / .4);
  --cb-cols:3;--cb-rows:3;
  display:block;position:relative;box-sizing:border-box;margin:0 auto;padding-inline:calc(var(--cb-tabpad) + var(--cb-navpad));max-width:100%;overflow:clip;perspective:var(--cb-persp,1600px);font-family:system-ui,-apple-system,sans-serif;color:var(--cb-ink)}
.cb-host.cb-two{--cb-navpad:calc(2 * var(--cb-navw) + 4px);--cb-bpad:16px;--cb-lpad:var(--cb-gap);--cb-ppad:calc(var(--cb-gap) * .45)}
.cb-host.cb-two.cb-fit{
  --cb-tileh:calc((100svh - var(--cb-reserve) - 2 * var(--cb-bpad) - var(--cb-foot) - 2 * var(--cb-lpad) - (var(--cb-rows) - 1) * var(--cb-gap) - var(--cb-rows) * 2 * var(--cb-ppad)) / var(--cb-rows));
  --cb-pagew:calc(var(--cb-cols) * (var(--cb-tileh) * var(--cb-aw) / var(--cb-ah) + 2 * var(--cb-ppad)) + (var(--cb-cols) - 1) * var(--cb-gap) + 2 * var(--cb-lpad));
  max-width:min(100%,max(360px,calc(2 * var(--cb-pagew) + var(--cb-spine) + 2 * var(--cb-bpad) + 2 * var(--cb-tabpad) + 2 * var(--cb-navpad))))}
.cb-host.cb-tabbed{--cb-tabpad:calc(var(--cb-tabw) * var(--cb-tabcols,1))}
.cb-host.cb-two.cb-tabbed{--cb-navpad:calc(2 * var(--cb-navw) + 4px - var(--cb-bpad))}   /* a tab starts at the page's edge, under the cover's rim, so the tab reserve has a rim's width to spare: the chevrons take it and sit 4px off the tabs */
.cb-host:not(.cb-two){--cb-tabw:24px}
.cb-host.cb-tabbed:not(.cb-two){padding-inline:0 var(--cb-tabpad)}   /* one page at a time every tab sits on the right */

.cb-book{position:relative;display:grid;container-type:inline-size;padding:var(--cb-bpad) var(--cb-bpad) calc(var(--cb-bpad) + var(--cb-foot));touch-action:pan-y}
.cb-book,.cb-board{border-radius:6px;
  background:repeating-linear-gradient(45deg,oklch(1 0 0 / .025) 0 1px,transparent 1px 3px),repeating-linear-gradient(-45deg,oklch(1 0 0 / .025) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 35%,var(--cb-cover-hi),var(--cb-cover) 75%);
  box-shadow:var(--cb-ring),var(--cb-cast)}
.cb-book.cb-spread{grid-template-columns:1fr 1fr;column-gap:var(--cb-spine)}
/* the spine shading: a strip down the centre of the open book. While a cover turns, the book is shut (one half of the spread) and the
   other half is the board in flight, so each draws its own half of the strip on its spine side (the board only when it carries an inside
   cover) and the two halves meet at the centre from the first frame to the last, the same pixels as the strip on the open book */
.cb-book.cb-spread::before,.cb-host.cb-two .cb-book.cb-turning.cb-closed::before,.cb-board.cb-inside::before{content:"";position:absolute;top:6px;bottom:6px;width:var(--cb-spine);pointer-events:none;
  background:linear-gradient(90deg,transparent,oklch(0 0 0 / .3) 40%,oklch(0 0 0 / .5) 50%,oklch(0 0 0 / .3) 60%,transparent) center / var(--cb-spine) 100% no-repeat}
.cb-book.cb-spread::before{left:50%;transform:translateX(-50%)}
.cb-host.cb-two .cb-book.cb-turning.cb-closed::before,.cb-board.cb-inside::before{width:calc(var(--cb-spine) / 2)}
.cb-host.cb-two .cb-book.cb-turning.cb-front::before,.cb-board.cb-inside.cb-sl::before{left:0;background-position:right}
.cb-host.cb-two .cb-book.cb-turning.cb-back::before,.cb-board.cb-inside.cb-sr::before{right:0;background-position:left}
/* and the cover texture under it: its highlight is centred on the box that draws it, on the spine of the open book but on the middle of a
   shut half, so the shut book while it turns and a board carrying an inside cover draw the open book's texture at double width, positioned
   to their half; a board carrying an outside cover keeps the shut book's own texture, which it sits on and lands on */
.cb-host.cb-two .cb-book.cb-turning.cb-closed,.cb-board.cb-inside{background-size:200% 100%}
.cb-host.cb-two .cb-book.cb-turning.cb-front,.cb-board.cb-inside.cb-sl{background-position:right}
.cb-host.cb-two .cb-book.cb-turning.cb-back,.cb-board.cb-inside.cb-sr{background-position:left}
.cb-leaf{position:relative;padding:var(--cb-lpad);background:var(--cb-sheet);border-radius:3px;box-shadow:inset 0 0 0 1px oklch(1 0 0 / .07),0 1px 2px oklch(0 0 0 / .45)}
/* the page number: a paper disc in the band's outer corner, so it reads on any cover colour */
.cb-leaf::after{content:attr(data-p);position:absolute;right:0;top:calc(100% + (var(--cb-bpad) + var(--cb-foot) - 20px) / 2);box-sizing:border-box;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--cb-paper);box-shadow:var(--cb-recess);font-family:var(--cb-mono);font-size:10px;font-weight:600;line-height:20px;text-align:center;color:var(--cb-ink)}
.cb-leaf.cb-lp::after{right:auto;left:0}
.cb-leaf.cb-cov::after{content:none}
.cb-grid{display:grid;grid-template-columns:repeat(var(--cb-cols),1fr);gap:var(--cb-gap)}
/* a pocket is welded on three sides (dashed seam); the top is the open mouth, its opaque film lip covers the seam there */
.cb-pkt{position:relative;padding:var(--cb-ppad);border-radius:2px;background:var(--cb-pocket);outline:1px dashed var(--cb-seam);outline-offset:-1px}
.cb-pkt.cb-empty{box-sizing:content-box;aspect-ratio:var(--cb-aw) / var(--cb-ah)}
.cb-pkt>*{display:block;width:100%}
.cb-pkt::before{content:"";position:absolute;inset:0;border-radius:2px;z-index:6;pointer-events:none;
  background:radial-gradient(60% 40% at 18% 12%,oklch(1 0 0 / .22),transparent 70%),linear-gradient(158deg,oklch(1 0 0 / .2) 0%,oklch(1 0 0 / .07) 24%,transparent 46%,oklch(1 0 0 / .06) 72%,transparent 100%)}
.cb-pkt::after{content:"";position:absolute;left:0;right:0;top:0;height:8%;border-radius:2px 2px 0 0;z-index:7;pointer-events:none;
  border-top:1.5px solid color-mix(in oklch, var(--cb-pocket), white 45%);box-shadow:inset 0 4px 5px -2px oklch(0 0 0 / .4)}

/* the cover band under each page, centred in the cover margin below it: that page's own bar and count */
.cb-foot{position:absolute;left:0;right:0;top:100%;height:calc(var(--cb-bpad) + var(--cb-foot));display:flex;align-items:center;justify-content:center;padding:0 24px;pointer-events:none}
.cb-prog{display:inline-flex;align-items:center;gap:8px;width:min(60%,240px)}
.cb-prog>span{flex:1;height:4px;border-radius:2px;background:color-mix(in oklch, var(--cb-ink), transparent 85%);overflow:hidden}
.cb-prog>span>i{display:block;height:100%;border-radius:2px;background:var(--cb-ink)}
.cb-prog small{font-family:var(--cb-mono);font-size:9px;font-weight:600;color:var(--cb-ink-dim)}
/* in the band a page's bar sits on its own paper plate, like the contents card */
.cb-foot .cb-prog{box-sizing:border-box;padding:4px 8px;border-radius:3px;background:var(--cb-paper);box-shadow:var(--cb-recess)}
/* the total, centred between the book and the pager */
.cb-total{display:flex;justify-content:center;margin-top:12px}
.cb-total:empty{display:none}
.cb-total .cb-prog{width:min(70%,320px)}
.cb-total .cb-prog small{font-size:11px}

/* tab dividers: paper index tabs down the outer edge of each page, one slot per tab from the top, the label running down the tab (up it on
   a left page: the same tab turned round), the turned ones on the left page of a spread and the rest on the right; a tab in the second
   column is a wider tab that runs under the first column's, the way a thick set is cut */
.cb-tabs{position:absolute;top:0;bottom:0;width:var(--cb-tabw);pointer-events:none}
.cb-tabs.cb-tr{left:100%}
.cb-tabs.cb-tl{right:100%}
.cb-tab{position:absolute;left:0;top:calc(var(--i) * 100% / var(--n));width:calc(100% + var(--c) * 100%);height:calc(100% / var(--n) - 3px);padding:0 0 0 calc(var(--c) * var(--cb-tabw));z-index:calc(3 - var(--c));
  display:flex;align-items:center;justify-content:center;border:0;border-radius:0 5px 5px 0;background:var(--cb-tab-paper,var(--cb-paper));color:var(--cb-tab-ink,var(--cb-tab-text-dim,var(--cb-ink-dim)));
  writing-mode:vertical-rl;font:650 8.5px/1 system-ui,-apple-system,sans-serif;text-transform:uppercase;letter-spacing:var(--cb-tabtrack,.14em);white-space:nowrap;cursor:pointer;pointer-events:auto;user-select:none;-webkit-tap-highlight-color:transparent;transition:color .15s;
  box-shadow:0 1px 2px oklch(0 0 0 / .45),inset 0 0 0 1px oklch(0 0 0 / .18)}
.cb-tabs.cb-tl .cb-tab{left:auto;right:0;transform:rotate(180deg)}
.cb-tab.cb-cur{color:var(--cb-tab-ink,var(--cb-tab-text,var(--cb-ink)));box-shadow:inset -3px 0 0 var(--cb-tab-mark),0 1px 2px oklch(0 0 0 / .45),inset 0 0 0 1px oklch(0 0 0 / .18)}
.cb-tab:focus-visible{outline:2px solid var(--cb-ink);outline-offset:1px}
@media (hover:hover){.cb-tab:hover{color:var(--cb-tab-ink,var(--cb-tab-text,var(--cb-ink)))}}
.cb-host:not(.cb-two) .cb-tab{font-size:7.5px}

/* the inside of a cover, and the closed covers */
.cb-leaf.cb-cov{padding:0;background:none;box-shadow:none}
.cb-leaf.cb-cov .cb-grid{display:block;height:100%}
.cb-incover{position:relative;height:100%;min-height:120px;border-radius:3px;background:radial-gradient(100% 80% at 50% 40%,var(--cb-cover-hi),var(--cb-cover) 80%);box-shadow:inset 0 0 0 1px oklch(0 0 0 / .3)}
.cb-incover::before{content:"";position:absolute;inset:10px;border:1px dashed var(--cb-stitch);border-radius:2px;pointer-events:none}
.cb-contents{position:absolute;left:50%;top:12%;transform:translateX(-50%);width:min(78%,300px);padding:12px 14px 14px;background:var(--cb-paper);color:var(--cb-ink);font-family:var(--cb-mono);box-shadow:var(--cb-recess)}
.cb-contents>b{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--cb-line-soft)}
.cb-contents dl{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:5px;margin:0;font-size:10px}
.cb-contents dt{color:var(--cb-ink-dim);font-weight:500;white-space:nowrap}
.cb-contents dd{margin:0;text-align:right;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-contents .cb-prog{display:flex;width:100%;margin-top:10px}
.cb-book.cb-closed{width:min(100%,calc(var(--cb-pagew,100%) + 2 * var(--cb-bpad)));cursor:pointer}
.cb-book.cb-closed.cb-front{margin-left:auto}
.cb-book.cb-closed.cb-back{margin-right:auto}
/* on a spread the shut book is one half of the open book: its spine-side rim is half the spine, so a cover swinging open or shut meets
   the other half at the spine centre with no gap; it takes at most half the host, as each half of the open book does when the host is
   narrower than the fitted spread */
.cb-host.cb-two .cb-book.cb-closed{width:min(50%,calc(var(--cb-pagew,100%) + var(--cb-bpad) + var(--cb-spine) / 2))}
.cb-host.cb-two .cb-book.cb-closed.cb-front{padding-left:calc(var(--cb-spine) / 2)}
.cb-host.cb-two .cb-book.cb-closed.cb-back{padding-right:calc(var(--cb-spine) / 2)}
/* and its spine side is the centre of the open book: square corners, no edge line (the ring runs along the other three sides); the board
   in flight matches, so the two halves meet as the open book does */
.cb-host.cb-two .cb-book.cb-closed.cb-front,.cb-board.cb-sl{border-top-left-radius:0;border-bottom-left-radius:0;
  --cb-ring:inset 0 1px 0 oklch(1 0 0 / .08),inset -1px 0 0 oklch(0 0 0 / .35),inset 0 1px 0 oklch(0 0 0 / .35),inset 0 -1px 0 oklch(0 0 0 / .35)}
.cb-host.cb-two .cb-book.cb-closed.cb-back,.cb-board.cb-sr{border-top-right-radius:0;border-bottom-right-radius:0;
  --cb-ring:inset 0 1px 0 oklch(1 0 0 / .08),inset 1px 0 0 oklch(0 0 0 / .35),inset 0 1px 0 oklch(0 0 0 / .35),inset 0 -1px 0 oklch(0 0 0 / .35)}
/* a cover shown alone (the shut book, or the inside front cover one page at a time) is as tall as a filled page */
.cb-book.cb-closed .cb-leaf,.cb-host:not(.cb-two) .cb-leaf.cb-cov{--cb-tw:calc((100cqw - 2 * var(--cb-lpad) - (var(--cb-cols) - 1) * var(--cb-gap) - var(--cb-cols) * 2 * var(--cb-ppad)) / var(--cb-cols));
  height:calc(var(--cb-rows) * (var(--cb-tw) * var(--cb-ah) / var(--cb-aw) + 2 * var(--cb-ppad)) + (var(--cb-rows) - 1) * var(--cb-gap) + 2 * var(--cb-lpad))}
.cb-incover.cb-front,.cb-incover.cb-back{background:radial-gradient(120% 90% at 50% 35%,var(--cb-cover-hi),var(--cb-cover) 75%)}
.cb-incover.cb-front::before,.cb-incover.cb-back::before{inset:12px;border-style:solid;border-color:oklch(0.5 0.006 260 / .35)}
.cb-incover.cb-front::after,.cb-incover.cb-back::after{content:"";position:absolute;top:0;bottom:0;width:10px;pointer-events:none}
.cb-incover.cb-front::after{left:0;background:linear-gradient(90deg,oklch(0 0 0 / .4),transparent)}
.cb-incover.cb-back::after{right:0;background:linear-gradient(-90deg,oklch(0 0 0 / .4),transparent)}
/* the name on the shut front cover sits on a paper name plate set into the leather, like the contents card inside */
.cb-plate{position:absolute;left:50%;top:22%;transform:translateX(-50%);box-sizing:border-box;max-width:80%;padding:.6em .9em .6em 1.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--cb-paper);box-shadow:var(--cb-recess);color:var(--cb-ink);font-family:var(--cb-mono);font-weight:700;text-transform:uppercase;font-size:clamp(11px,3.4cqw,22px);letter-spacing:.16em}

/* pager: first, previous, page box, next, last, and the optional size picker, centred under the book; on a spread the four chevrons
   leave the row for the host's side gutters (see below) */
.cb-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:12px;position:relative}
.cb-pager button{width:40px;height:40px;padding:0;border:0;border-radius:50%;background:none;color:var(--cb-ink-dim);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color .15s}
.cb-pager button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cb-pager button:disabled{opacity:.35;cursor:default}
.cb-pager button:focus-visible{outline:2px solid var(--cb-ink);outline-offset:1px}
@media (hover:hover){.cb-pager button:not(:disabled):hover{color:var(--cb-ink)}}
.cb-pager button:not(:disabled):active{color:var(--cb-ink)}
.cb-pgo{display:flex;align-items:center;gap:6px;margin:0 8px;font-family:var(--cb-mono);font-size:14px}
.cb-pgo input{width:52px;height:38px;border:1px solid var(--cb-line-soft);background:var(--cb-paper);color:var(--cb-ink);font:inherit;text-align:center}
.cb-pgo input[hidden]{display:none}
.cb-size{position:absolute;right:0;top:0}
.cb-size>button{width:auto;min-width:40px;padding:0 10px;border:1px solid var(--cb-line-soft);border-radius:20px;background:var(--cb-paper);color:var(--cb-ink);font-size:13px;font-family:var(--cb-mono)}
.cb-size .cb-pop{position:absolute;right:0;bottom:calc(100% + 4px);z-index:40;background:var(--cb-paper);border:1px solid var(--cb-line-soft);border-radius:4px;padding:10px;box-shadow:0 4px 14px oklch(0.25 0.02 95 / .12)}
.cb-size .cb-pop[hidden]{display:none}
.cb-size .cb-pop>div{display:grid;grid-template-columns:repeat(6,22px);gap:4px}
.cb-size .cb-pop>div button{width:22px;height:22px;min-width:0;padding:0;border:1px solid var(--cb-line);border-radius:2px}
.cb-size .cb-pop>div button.cb-hi{background:var(--cb-ink);border-color:var(--cb-ink)}
.cb-size .cb-pop .cb-slbl{display:block;margin-top:8px;text-align:center;font-family:var(--cb-mono);font-size:12px}
/* on a spread the chevrons sit beside the book, centred on its height (--cb-bookh, which the module keeps current): front cover and
   previous on the left, next and back cover on the right, the covers outermost; the page box stays under the book */
.cb-host.cb-two .cb-pager{position:static}
.cb-host.cb-two .cb-pager [data-go]{position:absolute;top:calc(var(--cb-bookh,100%) / 2);width:var(--cb-navw);height:56px;margin-top:-28px;border-radius:6px}
.cb-host.cb-two .cb-pager [data-go] svg{width:24px;height:24px}
.cb-host.cb-two .cb-pager [data-go="first"]{left:0}
.cb-host.cb-two .cb-pager [data-go="prev"]{left:var(--cb-navw)}
.cb-host.cb-two .cb-pager [data-go="next"]{right:var(--cb-navw)}
.cb-host.cb-two .cb-pager [data-go="last"]{right:0}
.cb-host.cb-two .cb-size{top:auto;bottom:0;right:calc(var(--cb-tabpad) + var(--cb-navpad))}
@media (max-width:600px){.cb-pager{gap:6px}.cb-pager button{width:36px;height:36px}.cb-pager button svg{width:18px;height:18px}.cb-pgo{margin:0 2px;font-size:13px}.cb-pgo input{width:46px;height:36px}.cb-size>button{width:auto;height:36px}.cb-size{position:static;flex-basis:100%;display:flex;justify-content:center;margin-top:4px}.cb-size .cb-pop{right:auto;left:50%;transform:translateX(-50%)}}

/* page turns: ghosts the module stages in the host over the leaves for one turn. On a spread the turning page (.cb-flier: the lifted page on its
   front, the page it reveals on its back) swings over the spine and lands on the far leaf while the page it covers waits underneath; a cover
   turn swings the whole board (.cb-board: the leaf inside the cover's rim, edge and shadow);
   one page at a time the old page lifts away from the spine, or the previous page drops back in */
.cb-ghost{position:absolute;z-index:10;pointer-events:none;margin:0}
.cb-flier{z-index:11;transform-style:preserve-3d;animation:var(--cb-turn) cubic-bezier(.45,.05,.3,1) both}
.cb-flier.cb-fwd{animation-name:cb-flip-fwd}
.cb-flier.cb-back{animation-name:cb-flip-back}
.cb-flier .cb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cb-flier .cb-face.cb-back{transform:rotateY(180deg)}
.cb-board>.cb-leaf{position:absolute;left:var(--cb-bpad);right:var(--cb-bpad);top:var(--cb-bpad);bottom:calc(var(--cb-bpad) + var(--cb-foot))}
.cb-board.cb-sl>.cb-leaf{left:calc(var(--cb-spine) / 2)}
.cb-board.cb-sr>.cb-leaf{right:calc(var(--cb-spine) / 2)}
/* a board carrying an inside cover stands in for the missing half of the open book and casts the book's shadow, on the outer three
   sides only (on the spine side it would fall on the other half and vanish as the turn ends); a board carrying an outside cover sits on,
   lifts from or lands on the shut book, which casts its own shadow, so it carries none */
.cb-board.cb-sl{clip-path:inset(-40px -40px -40px 0)}
.cb-board.cb-sr{clip-path:inset(-40px 0 -40px -40px)}
.cb-board:not(.cb-inside){--cb-cast:0 0 0 transparent}
.cb-flier .cb-face::after,.cb-flier .cb-face .cb-foot,.cb-host:not(.cb-two) .cb-ghost .cb-tabs{display:none}   /* one page at a time no tab moves with the page */
.cb-ghost.cb-lift{transform-origin:left center;animation:cb-lift calc(var(--cb-turn) * .7) cubic-bezier(.5,0,.8,.4) both}
.cb-ghost.cb-drop{transform-origin:left center;animation:cb-drop calc(var(--cb-turn) * .7) cubic-bezier(.2,.6,.4,1) both}
@keyframes cb-flip-fwd{to{transform:rotateY(-180deg)}}
@keyframes cb-flip-back{to{transform:rotateY(180deg)}}
@keyframes cb-lift{to{transform:rotateY(-95deg)}}
@keyframes cb-drop{from{transform:rotateY(-95deg)}}