/* "Sla open" — the band opened as a real book (js/flipbook.js). Two-page spread / single page, 3D page turns. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.flipbook {
  --pw: 400px; --ph: 571px; --fs: 15px; --shift: 0px;
  --sheet: #f6efdf; --sheet-2: #efe4cc; --sheet-ink: #241a10; --sheet-muted: #6f604c;
  position: fixed; inset: 0; z-index: 70;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto auto; grid-template-columns: minmax(0, 1fr);
  background:
    radial-gradient(120% 80% at 50% 45%, rgba(255, 236, 200, .16), transparent 60%),
    url("/img/leather-grain.png"),
    linear-gradient(180deg, #2b1d14, #1a110b);
  background-size: auto, 220px 220px, auto;
  color: #f3e9d6;
  outline: none;
}
.flipbook.is-on { display: grid; }
html.dark .flipbook { background: radial-gradient(120% 80% at 50% 45%, rgba(255, 220, 160, .08), transparent 60%), url("/img/leather-grain.png"), linear-gradient(180deg, #120d0a, #080605); background-size: auto, 220px 220px, auto; }
.flipbook .fb-bar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; min-width: 0; max-width: 100vw; box-sizing: border-box; }
.flipbook .fb-bar .icon-btn { flex-shrink: 0; }
.flipbook .fb-bar .book-meta { display: flex; flex-direction: column; min-width: 0; margin-right: auto; }
.flipbook .fb-bar strong { font-family: var(--font-foil); letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; color: #f0dc9a; }
.flipbook .fb-bar span { font-family: var(--font-display); font-style: italic; color: #cbb999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flipbook .icon-btn { color: #f3e9d6; background: rgba(255, 248, 235, .12); border-color: rgba(255, 248, 235, .22); }
.flipbook .btn.secondary { background: rgba(255, 248, 235, .12); color: #f3e9d6; border-color: rgba(255, 248, 235, .22); }

.fb-stage { position: relative; min-width: 0; display: grid; place-items: center; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; padding: 6px 12px; }
.fb-stage:active { cursor: grabbing; }
.fb-clip { position: relative; perspective: 2400px; perspective-origin: 50% 40%; }
.is-spread .fb-clip { width: calc(var(--pw) * 2); height: var(--ph); }
.is-single .fb-clip { width: var(--pw); height: var(--ph); overflow: hidden; border-radius: 2px 6px 6px 2px; }
.fb-book {
  position: absolute; top: 0; left: 0; width: calc(var(--pw) * 2); height: var(--ph);
  transform-style: preserve-3d;
  transform: translateX(var(--shift));
  transition: transform .7s cubic-bezier(.3, .7, .2, 1);
}
.is-single .fb-book { transform: translateX(calc(var(--pw) * -1)); }
/* page block (thickness) under the open spread + soft shadow on the desk */
.fb-book::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 5px; bottom: -7px; z-index: -1;
  background: repeating-linear-gradient(180deg, #e9dcc0 0 1px, #f7efdd 1px 3px);
  border-radius: 3px 3px 6px 6px;
  box-shadow: 0 28px 50px -10px rgba(0, 0, 0, .7), 0 6px 14px rgba(0, 0, 0, .45);
  transition: left .7s, right .7s, opacity .4s;
}
.fb-book.is-closed::before { opacity: 0; }
.is-single .fb-book::before { left: calc(var(--pw) + 4px); }

.fb-leaf {
  position: absolute; top: 0; left: var(--pw); width: var(--pw); height: var(--ph);
  transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.35, .12, .2, 1);
  will-change: transform;
}
.fb-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-face.fb-back { transform: rotateY(180deg); }
.fb-paper-side, .fb-end-side {
  background: url("/img/paper-grain.png"), linear-gradient(var(--sheet), var(--sheet));
  background-blend-mode: multiply, normal;
  color: var(--sheet-ink);
}
/* gutter shading: recto (front) darkens towards the spine on its left, verso (back) on its right */
.fb-face.fb-front.fb-paper-side, .fb-face.fb-front.fb-end-side { border-radius: 0 4px 4px 0; box-shadow: inset 26px 0 30px -18px rgba(70, 45, 15, .55), inset -1px 0 0 rgba(0, 0, 0, .06); }
.fb-face.fb-back.fb-paper-side, .fb-face.fb-back.fb-end-side { border-radius: 4px 0 0 4px; box-shadow: inset -26px 0 30px -18px rgba(70, 45, 15, .55), inset 1px 0 0 rgba(0, 0, 0, .06); }
.fb-verso { background: url("/img/paper-grain.png"), linear-gradient(90deg, #e8dcc2, var(--sheet) 30%); }
html.dark .fb-paper-side, html.dark .fb-end-side { filter: brightness(.9) saturate(.95); }
.fb-shade { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .05) 40%, rgba(255, 255, 255, .08) 70%, rgba(0, 0, 0, .2)); }
.fb-leaf.is-turning .fb-shade { animation: fb-shade .75s ease-in-out; }
@keyframes fb-shade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
/* no filter on a turning leaf: filter flattens preserve-3d and would show the mirrored front through the back */
.fb-leaf.is-turning > .fb-face { box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .35); }

/* covers */
.fb-cover-side { border-radius: 3px 8px 8px 3px; }
.fb-face.fb-back.fb-cover-side { border-radius: 8px 3px 3px 8px; }
.fb-coverface { position: absolute !important; inset: 0; border-radius: inherit; background: var(--bc); }
.fb-face.fb-front .fb-coverface { box-shadow: inset 12px 0 18px -6px rgba(0, 0, 0, .45), inset -2px 0 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fb-coverface .cover-art { position: absolute; inset: 0; }
.fb-coverface.is-back { box-shadow: inset -12px 0 18px -6px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fb-backcover-art { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 14%; text-align: center; color: var(--foil, #e8c56b); }
.flipbook.foil-gold { --foil: #e8c56b; } .flipbook.foil-silver { --foil: #e4e8ee; } .flipbook.foil-copper { --foil: #e0a066; } .flipbook.foil-burgundy { --foil: #6a1c28; }
.flipbook.ink-dark { --foil: #2a1a10; }
.fb-blurb { font-family: var(--font-display); font-style: italic; font-size: calc(var(--fs) * 1.15); line-height: 1.45; margin: 0; }

/* endpapers: hand-marbled look in the band's colour with gold veins */
.fb-endpaper {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, transparent 0 9%, rgba(232, 197, 107, .55) 9.5% 10.2%, transparent 10.8%) 0 0 / 90px 90px,
    radial-gradient(circle at 70% 65%, transparent 0 14%, rgba(255, 245, 220, .35) 14.5% 15.3%, transparent 16%) 0 0 / 130px 120px,
    radial-gradient(ellipse at 40% 50%, color-mix(in srgb, var(--bc) 70%, #000) 0 18%, transparent 19%) 20px 10px / 70px 54px,
    repeating-radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--bc) 85%, #fff) 0 6px, var(--bc) 6px 13px, color-mix(in srgb, var(--bc2, var(--bc)) 80%, #000) 13px 15px),
    var(--bc);
  opacity: .96;
}
.fb-face.fb-front .fb-endpaper { box-shadow: inset 26px 0 30px -14px rgba(0, 0, 0, .55); }
.fb-face.fb-back .fb-endpaper { box-shadow: inset -26px 0 30px -14px rgba(0, 0, 0, .55); }
.fb-exlibris {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-1.5deg);
  width: 58%; padding: 1.4rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  background: url("/img/paper-grain.png"), #f6efdf; color: #2a1d10; text-align: center;
  border: 1px solid #b58f3e; outline: 4px double #b58f3e; outline-offset: -10px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
}
.fb-exl-k { font-family: var(--font-display); font-style: italic; font-size: calc(var(--fs) * 1.6); }
.fb-exl-n { font-family: var(--font-foil); letter-spacing: .14em; text-transform: uppercase; font-size: calc(var(--fs) * .8); }
.fb-exl-s { font-family: var(--font-display); font-size: calc(var(--fs) * .95); color: #6f604c; }

/* paper pages */
.fb-inner, .fb-measure .fb-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  padding: calc(var(--pw) * .085) calc(var(--pw) * .09) calc(var(--pw) * .06) calc(var(--pw) * .1);
  font-family: var(--font-serif); font-size: var(--fs); line-height: 1.52; color: var(--sheet-ink);
}
.fb-face.fb-back .fb-inner { padding-left: calc(var(--pw) * .09); padding-right: calc(var(--pw) * .1); }
.fb-measure { position: absolute; left: -99999px; top: 0; visibility: hidden; pointer-events: none; }
.fb-running { font-family: var(--font-foil); font-size: calc(var(--fs) * .62); letter-spacing: .16em; text-transform: uppercase; color: var(--sheet-muted); text-align: center; margin-bottom: calc(var(--fs) * 1.1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-text { flex: 1; overflow: hidden; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.fb-text p { margin: 0; text-indent: 1.4em; }
.fb-text p.first, .fb-text p.cont, .fb-text .fb-chap + p, .fb-text ul + p { text-indent: 0; }
.fb-text p.first::first-letter {
  float: left; font-family: var(--font-display); font-weight: 700; font-size: 3.35em; line-height: .82;
  padding: .06em .08em 0 0; color: #8a6a28;
}
.fb-text ul { margin: .35em 0 .45em 1.15em; padding: 0; }
.fb-text li { margin: .15em 0; }
.fb-text li::marker { color: #8a6a28; }
.fb-text a { color: #6b4a14; }
.fb-chap { margin: calc(var(--fs) * .6) 0 calc(var(--fs) * 1.1); text-align: left; }
.fb-chap-k { display: block; font-family: var(--font-foil); font-size: calc(var(--fs) * .66); letter-spacing: .2em; text-transform: uppercase; color: #8a6a28; }
.fb-chap h3 { margin: .2em 0 0; font-family: var(--font-display); font-weight: 600; font-size: calc(var(--fs) * 1.85); line-height: 1.08; letter-spacing: -.005em; }
.fb-chap::after { content: ""; display: block; width: 3.2em; height: 1px; margin-top: .7em; background: linear-gradient(90deg, #b58f3e, transparent); }
.fb-folio { font-family: var(--font-display); font-size: calc(var(--fs) * .95); color: var(--sheet-muted); margin-top: calc(var(--fs) * .6); text-align: right; font-variant-numeric: oldstyle-nums; }
.fb-face.fb-back .fb-folio { text-align: left; }
.fb-inner--plain { justify-content: center; }
.fb-inner--plain .fb-folio { position: absolute; bottom: calc(var(--pw) * .06); right: calc(var(--pw) * .09); }
.fb-face.fb-back .fb-inner--plain .fb-folio { right: auto; left: calc(var(--pw) * .09); }
.fb-titlepage { text-align: center; display: flex; flex-direction: column; align-items: center; }
.fb-titlepage h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--fs) * 2.9); line-height: 1; margin: .3em 0 .15em; }
.fb-tp-orn { color: #b58f3e; font-size: calc(var(--fs) * 1.4); }
.fb-tp-sub { font-family: var(--font-display); font-style: italic; font-size: calc(var(--fs) * 1.35); margin: 0; color: var(--sheet-muted); }
.fb-tp-rule { width: 40%; height: 1px; margin: 1.6em 0; background: linear-gradient(90deg, transparent, #b58f3e, transparent); }
.fb-tp-author { font-family: var(--font-foil); letter-spacing: .16em; text-transform: uppercase; font-size: calc(var(--fs) * .78); margin: 0 0 .4em; }
.fb-tp-imprint { font-family: var(--font-display); font-size: calc(var(--fs) * .95); color: var(--sheet-muted); margin: 0; }
.fb-colophon { margin-top: auto; font-size: calc(var(--fs) * .78); color: var(--sheet-muted); line-height: 1.5; }
.fb-colophon p { margin: 0 0 .3em; }
.fb-inner--plain:has(.fb-colophon) { justify-content: flex-end; }
.fb-toc h2 { font-family: var(--font-display); font-weight: 600; font-size: calc(var(--fs) * 2.1); margin: 0 0 1em; text-align: center; }
.fb-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: ch; }
.fb-toc li { counter-increment: ch; }
.fb-toc a { display: flex; align-items: baseline; gap: .4em; padding: .38em 0; color: var(--sheet-ink); text-decoration: none; font-family: var(--font-display); font-size: calc(var(--fs) * 1.12); }
.fb-toc a::before { content: counter(ch, upper-roman) "."; font-family: var(--font-foil); font-size: .7em; color: #8a6a28; min-width: 2.2em; }
.fb-toc a i { flex: 1; border-bottom: 1px dotted #b8a684; transform: translateY(-.3em); }
.fb-toc a b { font-weight: 500; font-variant-numeric: oldstyle-nums; }
.fb-toc a:hover span, .fb-toc a:focus-visible span { color: #8a6a28; text-decoration: underline; }
.fb-notes { font-family: var(--font-display); font-style: italic; color: var(--sheet-muted); text-align: center; align-self: center;
  background: repeating-linear-gradient(transparent 0 1.9em, rgba(110, 90, 60, .25) 1.9em calc(1.9em + 1px)); width: 100%; height: 70%; padding-top: .3em; }

/* nav */
.fb-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: .5rem 1rem .2rem; }
.fb-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 248, 235, .25); background: rgba(255, 248, 235, .08); color: #f3e9d6; display: grid; place-items: center; cursor: pointer; }
.fb-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fb-arrow:disabled { opacity: .3; cursor: default; }
.fb-arrow:not(:disabled):hover { background: rgba(255, 248, 235, .16); }
.fb-status { min-width: 12rem; text-align: center; font-family: var(--font-display); font-size: 1.05rem; color: #e9dcc2; font-variant-numeric: oldstyle-nums; }
.fb-help { margin: 0; padding: 0 1rem .8rem; text-align: center; color: #b9a78a; font-size: .82rem; }
@media (max-width: 759px) {
  .flipbook .fb-bar .btn { padding: .5rem .8rem; font-size: .85rem; }
  .flipbook [data-fb-shelve], .flipbook .fb-bar .book-meta span { display: none; }
  .flipbook .fb-bar { gap: .45rem; padding: .6rem .7rem; }
  /* longer labels (de/vi/pl/...) must never push the bar wider than the screen */
  .flipbook .fb-bar .btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; flex-shrink: 1; min-width: 0; }
  .flipbook .fb-bar strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
  .fb-help { display: none; }
  .fb-nav { padding-bottom: .9rem; }
}

/* reduced motion: no 3D turning, a short fade */
.fb-book.fb-fading { animation: fb-fade .28s ease-out; }
@keyframes fb-fade { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .fb-leaf, .fb-book, .fb-book::before { transition: none !important; }
  .fb-leaf.is-turning .fb-shade { animation: none; }
}

/* header sound toggle */
[data-sound-toggle] .slash { display: none; }
[data-sound-toggle].is-muted .slash { display: inline; }
[data-sound-toggle].is-muted .wave { display: none; }