/* Raff 3D books and layered covers — shared by the landing page and the reader. */
/* =========================================================
   3D BOOK (shared): faces + layered cover
   ========================================================= */
.bk { --w: 160px; --h: calc(var(--w) * 1.42); --d: calc(var(--w) * .15);
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.bf { position: absolute; top: 0; left: 0; }
.bk .front { width: var(--w); height: var(--h); transform-origin: 0 50%; transform: translateZ(calc(var(--d) / 2)); transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.3, .8, .25, 1); }
.bk.open .front { transform: translateZ(calc(var(--d) / 2)) rotateY(-150deg); }
html[dir="rtl"] .bk .front { transform-origin: 100% 50%; }
html[dir="rtl"] .bk.open .front { transform: translateZ(calc(var(--d) / 2)) rotateY(150deg); }
.bk .front .in { position: absolute; inset: 0; transform: rotateY(180deg) translateZ(1px); backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 9px 3px 3px 9px;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 10px), linear-gradient(160deg, var(--c), var(--c2)); }
.bk .back { width: var(--w); height: var(--h); transform: translateZ(calc(var(--d) / -2)) rotateY(180deg); background: linear-gradient(160deg, var(--c), var(--c2)); border-radius: 9px 3px 3px 9px; display: grid; place-items: center; }
.bk .back span { font-family: var(--f-display-en); font-weight: 700; letter-spacing: .3em; font-size: calc(var(--w) / 14); color: var(--ink); opacity: .6; }
.bk .spine { width: var(--d); height: var(--h); left: calc((var(--w) - var(--d)) / 2); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2));
  background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0, rgba(0, 0, 0, 0) 9%, rgba(0, 0, 0, 0) 91%, rgba(0, 0, 0, .7) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .34) 36%, rgba(255, 255, 255, .05) 62%, rgba(0, 0, 0, .42)),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 3px), var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12% 0 8%; color: var(--ink); overflow: hidden; }
.bk .spine::before, .bk .spine::after { content: ""; position: absolute; left: 20%; right: 20%; height: 2px; background: var(--ink); opacity: .75; box-shadow: 0 3px 0 var(--ink); }
.bk .spine::before { top: 4.5%; } .bk .spine::after { bottom: 4.5%; }
.bk .spine span { writing-mode: vertical-rl; font-family: var(--f-display); font-weight: 800; font-size: calc(var(--w) / 19); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: 78%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.bk .spine b { font-family: var(--f-mono); font-size: calc(var(--w) / 19); opacity: .85; }
.bk .edge { width: var(--d); height: calc(var(--h) - 8px); top: 4px; left: calc((var(--w) - var(--d)) / 2); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px));
  background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 22%, transparent 78%, rgba(0, 0, 0, .3)), repeating-linear-gradient(90deg, #f7f1e3 0 1px, #d4c9b2 1px 2px); }
html[dir="rtl"] .bk .spine { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
html[dir="rtl"] .bk .edge { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 3px)); }
.bk .top, .bk .bottom { width: calc(var(--w) - 6px); height: var(--d); left: 3px; top: calc((var(--h) - var(--d)) / 2);
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 12%, transparent 88%, rgba(0, 0, 0, .22)), repeating-linear-gradient(0deg, #f7f1e3 0 1px, #d4c9b2 1px 2px); }
.bk .top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2 - 3px)); }
.bk .bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2 - 3px)); }
.bk .page1 { width: calc(var(--w) - 8px); height: calc(var(--h) - 10px); top: 5px; left: 4px; transform: translateZ(calc(var(--d) / 2 - 2px)); background: #f6f6f8; border-radius: 2px; overflow: hidden; }
.bk.soon .cv-bg { filter: saturate(.85); }

/* cover layers (each sits at its own depth) */
.cv { position: absolute; inset: 0; transform-style: preserve-3d; color: var(--ink); font-size: calc(var(--w) / 16); }
.cv > * { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.cv-bg { border-radius: 3px 9px 9px 3px; overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 38%, var(--c2) 115%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 1.4em rgba(0, 0, 0, .4); }
html[dir="rtl"] .cv-bg { border-radius: 9px 3px 3px 9px; }
.cv-l { width: 100%; height: 100%; }
.cv-l.l1 { transform: translateZ(calc(var(--w) * .015)); border-radius: 3px 9px 9px 3px; }
.cv-l.l2 { transform: translateZ(calc(var(--w) * .06)); }
.cv-bg::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 92%, transparent) 70%); }
.cv-l.l2::after { content: none; }
.cv-t { transform: translateZ(calc(var(--w) * .085)); padding: 1.2em 1.15em 1.15em; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.cv-l.l3 { transform: translateZ(calc(var(--w) * .12)); }
/* printed texture + varnish: the topmost layers, so they cover the artwork like a real jacket */
.cv-tex { transform: translateZ(calc(var(--w) * .128)); pointer-events: none; mix-blend-mode: multiply; opacity: .75; border-radius: inherit;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.cv-gloss { transform: translateZ(calc(var(--w) * .13)); border-radius: inherit; pointer-events: none;
  background: radial-gradient(55% 40% at var(--gx, 30%) var(--gy, 14%), rgba(255, 255, 255, .34), transparent 72%), linear-gradient(115deg, rgba(255, 255, 255, .16) 0%, transparent 30%, transparent 62%, rgba(0, 0, 0, .26));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .35), inset -1px -1px 0 rgba(0, 0, 0, .4); }
/* hinge groove along the spine side + a debossed frame, like a hardcover */
.cv-gloss::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 5.5%; width: 2.6%; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .22) 42%, rgba(0, 0, 0, .1) 72%, transparent); }
html[dir="rtl"] .cv-gloss::before { background: linear-gradient(270deg, rgba(0, 0, 0, .38), rgba(255, 255, 255, .22) 42%, rgba(0, 0, 0, .1) 72%, transparent); }
.cv-gloss::after { content: ""; position: absolute; inset: 3.4%; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); pointer-events: none; }
.cv-l.l2, .cv-l.l3 { filter: drop-shadow(0 .06em .09em rgba(0, 0, 0, .38)); }
.ck-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: .6em; letter-spacing: .14em; opacity: .92; direction: ltr; }
.ck-top > span { display: inline-flex; align-items: center; gap: .5em; }
.ck-logo { display: inline-block; width: 2.5em; height: 2em; background: var(--ink); -webkit-mask: url(../img/logo-mark.png) center / contain no-repeat; mask: url(../img/logo-mark.png) center / contain no-repeat; }
.ck-bot { position: relative; }
/* foil-stamped (light ink) / pressed (dark ink) lettering */
.ck-mark:not(.roman), .ck-title { background: linear-gradient(172deg, color-mix(in srgb, var(--ink) 55%, #fff) 0%, var(--ink) 42%, color-mix(in srgb, var(--ink) 74%, var(--c)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .42)) drop-shadow(0 .08em .16em rgba(0, 0, 0, .3)); }
.cv.ink-dark .ck-mark:not(.roman), .cv.ink-dark .ck-title { background: linear-gradient(172deg, color-mix(in srgb, var(--ink) 80%, var(--c)) 0%, var(--ink) 55%, color-mix(in srgb, var(--ink) 90%, #000) 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)) drop-shadow(0 -1px 0 rgba(0, 0, 0, .18)); }
.ck-mark { font-family: var(--f-display-en); font-weight: 700; font-size: 3.1em; line-height: .9; letter-spacing: -.04em; display: flex; align-items: baseline; gap: .18em; }
.ck-mark small { font-family: var(--f-display); font-size: .3em; letter-spacing: 0; font-weight: 800; opacity: .95; }
.ck-mark.roman { -webkit-text-stroke: 1.4px var(--ink); color: transparent; font-size: 3.4em; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.ck-title { margin: .25em 0 0; font-family: var(--f-display); font-weight: 800; font-size: 1.28em; line-height: 1.25; }
.cv-spin { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.cv-blink { animation: blink 1.2s steps(2, start) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }
/* first page (visible when the cover opens) */
.pg1 { position: absolute; inset: 0; padding: 1.2em 1.1em; font-size: calc(var(--w) / 17); display: flex; flex-direction: column; color: #16161b; }
.pg1-tag { font-family: var(--f-mono); font-size: .58em; letter-spacing: .1em; color: var(--c); filter: brightness(.8); direction: ltr; text-align: start; }
.pg1-toc { list-style: none; margin: .9em 0 0; padding: 0; display: grid; gap: .32em; }
.pg1-toc li { display: flex; gap: .5em; align-items: baseline; font-size: .68em; line-height: 1.25; border-bottom: 1px solid #e3e3e8; padding-bottom: .3em; }
.pg1-toc b { font-family: var(--f-display-en); color: var(--c); filter: brightness(.85); min-width: 1.6em; }
.pg1-toc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg1-lines { display: grid; gap: .55em; margin-top: 1.4em; }
.pg1-lines i { height: .4em; border-radius: 1em; background: #dcdce2; }

@media (prefers-reduced-motion: reduce) { .cv-spin, .cv-blink { animation: none; } }

/* ---- covers inside the reader (front = layered art, back = colour + blurb) ---- */
.cover-3d { position: absolute; inset: 0; container-type: size; perspective: 900px; overflow: hidden; background: #000; }
.cover-3d > .cv { --w: 100cqw; transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cover-3d > .cv .cv-bg { border-radius: 0; }
.cover-3d.back3 { container-type: normal; perspective: none; padding: 9% 9% 8%; display: flex; flex-direction: column; color: var(--ink);
  background: radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 38%, var(--c2) 115%); font-size: clamp(9px, 2.6cqw, 16px); }
.back3 .b3-top { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .72em; letter-spacing: .14em; opacity: .85; direction: ltr; }
.back3 .b3-title { font-family: var(--f-display); font-weight: 700; font-size: 1.7em; line-height: 1.2; margin: 1.6em 0 .7em; }
.back3 .b3-blurb { font-size: 1em; line-height: 1.75; opacity: .92; margin: 0; }
.back3 .b3-stats { display: flex; gap: .6em; margin-top: auto; }
.back3 .b3-stats div { flex: 1; padding: .6em .4em; border-radius: .8em; text-align: center; background: color-mix(in srgb, var(--ink) 12%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); }
.back3 .b3-stats b { display: block; font-family: var(--f-display-en); font-size: 1.5em; line-height: 1.1; }
.back3 .b3-stats span { font-size: .72em; opacity: .8; }
.back3 .b3-foot { display: flex; align-items: center; justify-content: center; gap: .5em; margin-top: 1.4em; font-family: var(--f-display); font-weight: 700; }
.back3 .b3-foot svg { width: 2em; height: 2em; }
.cv-bg::after { content: none; }
.cv-t::before { content: ""; position: absolute; inset: 52% 0 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 94%, transparent) 55%); border-radius: 0 0 9px 3px; }
html[dir="rtl"] .cv-t::before { border-radius: 0 0 3px 9px; }
.cover-3d .cv-t::before { border-radius: 0; }
.ck-top, .ck-bot { position: relative; }
.endpaper.ep3 { background: radial-gradient(circle, color-mix(in srgb, var(--ink) 22%, transparent) 1.2px, transparent 1.8px) 0 0 / 18px 18px, linear-gradient(160deg, var(--c), var(--c2)); }

/* =========================================================
   REAL-BOOK DETAILS
   ========================================================= */
/* cloth weave under the print */
.cv-bg::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .55;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 2px); }

/* board thickness: the cover boards are real slabs, wrapped in darker cloth, a little larger than the page block */
.bk { --t: calc(var(--w) * .024); }
.bk .bd { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .25)), color-mix(in srgb, var(--c) 72%, #000); }
.bk .bd-t1, .bk .bd-t2, .bk .bd-b1, .bk .bd-b2 { width: calc(var(--w) - 14px); height: var(--t); left: 7px; top: calc((var(--h) - var(--t)) / 2); }
.bk .bd-t1 { transform: rotateX(90deg) translateY(calc(var(--d) / 2 - var(--t) / 2)) translateZ(calc(var(--h) / 2)); }
.bk .bd-t2 { transform: rotateX(90deg) translateY(calc(var(--d) / -2 + var(--t) / 2)) translateZ(calc(var(--h) / 2)); }
.bk .bd-b1 { transform: rotateX(-90deg) translateY(calc(var(--d) / -2 + var(--t) / 2)) translateZ(calc(var(--h) / 2)); }
.bk .bd-b2 { transform: rotateX(-90deg) translateY(calc(var(--d) / 2 - var(--t) / 2)) translateZ(calc(var(--h) / 2)); }
.bk .bd-e1, .bk .bd-e2 { width: var(--t); height: calc(var(--h) - 14px); top: 7px; left: calc((var(--w) - var(--t)) / 2); background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .28)), color-mix(in srgb, var(--c) 72%, #000); }
.bk .bd-e1 { transform: rotateY(90deg) translateX(calc(var(--d) / -2 + var(--t) / 2)) translateZ(calc(var(--w) / 2)); }
.bk .bd-e2 { transform: rotateY(90deg) translateX(calc(var(--d) / 2 - var(--t) / 2)) translateZ(calc(var(--w) / 2)); }
html[dir="rtl"] .bk .bd-e1 { transform: rotateY(-90deg) translateX(calc(var(--d) / 2 - var(--t) / 2)) translateZ(calc(var(--w) / 2)); }
html[dir="rtl"] .bk .bd-e2 { transform: rotateY(-90deg) translateX(calc(var(--d) / -2 + var(--t) / 2)) translateZ(calc(var(--w) / 2)); }

/* back cover: same cloth + a barcode, like a published book */
.bk .back { background: radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 40%, var(--c2) 115%); box-shadow: inset 0 0 1.4em rgba(0, 0, 0, .4); overflow: hidden; }
.bk .back::before { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; opacity: .6; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 2px); }
.bk .back::after { content: ""; position: absolute; bottom: 7%; inset-inline-end: 9%; width: 28%; height: 12%; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  background: #fff repeating-linear-gradient(90deg, #111 0 1.2px, transparent 1.2px 2.6px, #111 2.6px 4.4px, transparent 4.4px 5.4px, #111 5.4px 6.2px, transparent 6.2px 8px) content-box; padding: 6% 8%; }
.bk .front .in { box-shadow: inset 0 0 1.2em rgba(0, 0, 0, .35); }

/* reader: the cover page itself gets the same hardcover finish */
.cover-3d { background: color-mix(in srgb, var(--c) 40%, #000); }
.cover-3d .cv-gloss::after { inset: 3.6%; }
.cover-3d.back3 { box-shadow: inset 0 0 1.4em rgba(0, 0, 0, .4); }
.cover-3d.back3::before { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; opacity: .6; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 1px, transparent 1px 2px); }
.cover-3d.back3::after { content: ""; position: absolute; inset-inline-start: 5.5%; top: 0; bottom: 0; width: 2.6%; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .2) 42%, transparent); }
html[dir="rtl"] .cover-3d.back3::after { background: linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(255, 255, 255, .2) 42%, transparent); }