/* ═══════════════════════════════════════════════════════════════
   Bindery Terminal — the hardcover
   The case: canvas cloth on the boards, the spine and the hollow at
   the head, and the endpapers pasted inside the covers with the
   cloth turned in around them. Reusable: colours come from the
   theme variables (--canvas, --canvas-deep, --endpaper); the weave
   is one SVG tile lit from the top left, so it stays a texture at
   any zoom instead of a pixel grid, and no edge carries a hairline.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --endpaper:#ece7dc;
  /* canvas weave: warp and weft threads as stretched noise, embossed by a distant light */
  --cloth-weave:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='w' x='0' y='0' width='100%' height='100%' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.95 .045' numOctaves='2' seed='4' stitchTiles='stitch' result='warp'/><feTurbulence type='fractalNoise' baseFrequency='.045 .95' numOctaves='2' seed='9' stitchTiles='stitch' result='weft'/><feTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='1' seed='2' stitchTiles='stitch' result='grain'/><feComposite in='warp' in2='weft' operator='arithmetic' k2='.5' k3='.5' result='ww'/><feComposite in='ww' in2='grain' operator='arithmetic' k2='.8' k3='.2' result='h'/><feDiffuseLighting in='h' surfaceScale='2.2' diffuseConstant='1' lighting-color='white' result='lit'><feDistantLight azimuth='225' elevation='52'/></feDiffuseLighting><feColorMatrix in='lit' type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  -1.5 0 0 0 1.2' result='shadow'/><feComponentTransfer in='shadow'><feFuncA type='linear' slope='.62'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23w)'/></svg>");
  --cloth-weave-size:240px 240px;
  /* the endpaper: a quieter laid-paper grain */
  --endpaper-grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='.02 .7' numOctaves='2' seed='5' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .32  0 0 0 0 .27  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}

/* ── the cloth ─────────────────────────────────────────────── */
.board, .cover, .spine{
  background-color:var(--canvas);
  background-image:var(--cloth-weave), linear-gradient(to bottom, rgba(255,255,255,.05), rgba(0,0,0,.04));
  background-size:var(--cloth-weave-size), 100% 100%;
}
.board{box-shadow:inset 0 0 30px rgba(0,0,0,.07)}
.cover{box-shadow:inset 0 0 44px rgba(0,0,0,.045)}
.spine{background-color:var(--canvas-deep)}

/* the hinge: cloth darkens where it bends into the spine */
.stack-left  .board::after{content:""; position:absolute; top:0; bottom:0; right:0; width:calc(var(--sq) + 10px); background:linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,.16))}
.stack-right .board::after{content:""; position:absolute; top:0; bottom:0; left:0;  width:calc(var(--sq) + 10px); background:linear-gradient(to left,  rgba(0,0,0,0), rgba(0,0,0,.16))}
.cover-front::before, .cover-back::before{
  content:""; position:absolute; top:0; bottom:0; width:18px; pointer-events:none;
  background:linear-gradient(to right, rgba(0,0,0,.12), rgba(0,0,0,0));
}
.cover-front::before{left:0}
.cover-back::before{right:0; transform:scaleX(-1)}

/* the hollow at the head and tail: cloth in shadow, not a black notch */
.bed{background:linear-gradient(to bottom, #aaa497 0 var(--sq), #08090a var(--sq) calc(100% - var(--sq)), #aaa497 calc(100% - var(--sq)))}

/* ── inside the cover: endpaper pasted down, cloth turned in around it ── */
.cover.pastedown{box-shadow:inset 0 0 60px rgba(0,0,0,.05)}
.cover.pastedown::before{
  content:""; position:absolute; pointer-events:none;
  top:calc(var(--sq) * 1.7); bottom:calc(var(--sq) * 1.7);
  left:calc(var(--sq) * 1.7); right:calc(var(--sq) * 1.7);
  background-color:var(--endpaper);
  background-image:var(--endpaper-grain), linear-gradient(to bottom, rgba(255,255,255,.08), rgba(0,0,0,.02));
  box-shadow:0 0 0 .5px rgba(60,52,40,.10), 0 1px 3px rgba(40,34,24,.10);
}
/* the endpaper runs into the hinge on the spine side */
.cover.pastedown.left::before{right:0}
.cover.pastedown.right::before{left:0}
.cover.pastedown .colophon{z-index:1}

/* page block edges */
.edge.fore{background:linear-gradient(to right, #d8d3c8, #ece8de 40%, #dcd7cc)}
.edge.top, .edge.bottom{background:linear-gradient(to bottom, #d8d3c8, #ece8de 40%, #dcd7cc)}