/* Потёртая кожа, бумага и латунь связывают книгу с её инструментами. */
:root{--book-height:min(690px,calc(100svh - 330px))}
.book-stage{padding-inline:29px}
.book-cover{padding:23px 22px 29px;background:linear-gradient(90deg,#120c0860,transparent 10%,#0e090655 49%,transparent 70%,#160c0755),url('assets/aged-leather.jpg') center/570px auto;border-radius:14px 19px 22px 13px;box-shadow:inset 0 2px 3px #e2b4775c,inset 0 -4px 5px #0c0707b3,2px 6px 3px #0f0807,0 23px 31px -7px #070402df,0 46px 60px -20px #070402bd}
.book-cover:before{content:'';position:absolute;inset:8px 9px 13px;border:1px solid #be965b80;border-radius:8px 11px 13px 7px;box-shadow:inset 0 0 0 2px #25120e65,0 0 0 2px #20110c70;pointer-events:none}
.book-cover:after{content:'';position:absolute;left:calc(50% - 27px);top:2px;bottom:1px;width:54px;background:linear-gradient(90deg,transparent,#0906035c 30%,#ab794836 48%,#0d070575 70%,transparent);border-radius:45%;pointer-events:none}
.paper-stack{inset:28px 20px 17px;border-radius:4px 10px 11px 3px;box-shadow:0 3px 3px #0e0807}
.leaf,.leaf.left,.leaf.right{background-image:linear-gradient(90deg,#9a743426,transparent 10%,#fff7df12 80%,#8c62272e),url('assets/aged-paper.jpg');background-size:100% 100%;box-shadow:inset 0 1px 3px #805b2c55,inset 0 -2px 4px #79552640}
.leaf.left{border-radius:4px 0 0 5px;background-image:linear-gradient(90deg,#9a743426,transparent 9%,transparent 86%,#68472164),url('assets/aged-paper.jpg')}
.leaf.right{border-radius:0 6px 7px 0;background-image:linear-gradient(90deg,#66411f66,transparent 12%,transparent 90%,#9a743426),url('assets/aged-paper.jpg')}
.spine{top:23px;bottom:28px;width:36px;left:calc(50% - 18px);background:linear-gradient(90deg,transparent,#6c492b26 27%,#36231475 48%,#f5ddac33 52%,#72502a22 70%,transparent)}
.corner{width:36px;height:36px;opacity:1;border-color:#b39764;border-width:0!important;background:linear-gradient(135deg,#d8bd7a,#8d6d35 35%,#c3a56c 45%,#65471e 85%);clip-path:polygon(0 0,100% 0,100% 14%,65% 16%,49% 32%,30% 34%,34% 51%,16% 65%,14% 100%,0 100%);filter:drop-shadow(1px 2px 1px #1e1008)}
.corner:after{width:5px;height:5px;top:5px;left:5px;background:#4c341e;box-shadow:0 1px 1px #efd296b3}
.corner.tl{top:4px;left:4px}.corner.tr{top:4px;right:4px}.corner.bl{bottom:5px;left:4px}.corner.br{bottom:5px;right:4px}
.ribbon{top:19px;right:46px}
.brand{font-size:28px}.brand small{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:500;margin-top:5px;color:#e2c69b;letter-spacing:0}
.topbar{padding-top:23px;padding-bottom:15px}
.tools{gap:11px}
.tool,.page-nav{position:relative;font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;background:linear-gradient(145deg,#b08a4c2b,#160c0990 55%),url('assets/aged-leather.jpg') center/280px;border:1px solid #ad8a517d;border-radius:5px 8px 5px 8px;box-shadow:inset 0 1px 1px #ead29a3b,inset 0 -2px 2px #0a06097a,0 3px 5px #0a06095c;color:#eed1a0;min-width:43px;min-height:43px;transition:filter .2s,transform .2s,border-color .2s}
.tool:hover,.page-nav:not(:disabled):hover{background:linear-gradient(145deg,#c79f5e4a,#160c0970 55%),url('assets/aged-leather.jpg') center/280px;filter:brightness(1.2);border-color:#d7b67c}
.tool:active,.page-nav:not(:disabled):active{transform:translateY(1px)}
.tool.with-label{font-size:19px;padding:7px 16px;gap:10px}
.tool[aria-pressed=true]{color:#ffe3a6;background:linear-gradient(145deg,#c3924e66,#21120c90),url('assets/aged-leather.jpg') center/280px;border-color:#d7ae69}
.type-button{font-size:25px}.tool-divider{display:none}
.page-nav{font-size:20px;min-width:125px;padding:9px 20px;justify-content:center}
.page-nav:before,.page-nav:after{content:'';position:absolute;width:4px;height:4px;background:#c6a771;transform:rotate(45deg);top:calc(50% - 2px)}
.page-nav:before{left:6px}.page-nav:after{right:6px}.page-nav svg{width:18px;height:18px}
.shelf-note{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:500;margin:5px 0 18px;color:#e1c69d}
.reading-nav{margin-top:24px;gap:37px;max-width:640px}
.reading-position{font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;min-width:190px;color:#eed1a4;font-weight:500}
.progress-track{margin-top:8px}
.reading-hint{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:500;color:#dfc49c;margin-top:15px}
.reading-hint kbd{font-size:17px}
.site-footer{font-size:17px;color:#d6b98e;margin-top:18px;margin-bottom:13px}
.guild-illustration{width:auto;max-width:100%;height:auto;max-height:clamp(125px,24svh,220px);min-height:0;object-fit:contain;flex-shrink:1;margin:0 auto 4px;mask-image:url('assets/worn-edge.svg');mask-size:100% 100%;filter:sepia(.6) saturate(.65) contrast(.9);aspect-ratio:1}
.title-content{gap:0}.title-content h1{font-size:clamp(43px,4.4vw,62px)}
.title-content .title-description{font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:500;line-height:1.35;margin:13px 0 9px}
.title-motto{font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:500;line-height:1.4;max-width:290px}
.title-ornament{margin:0 0 8px}.title-divider{margin:8px 0}
.page-top{font-size:16px}
.page-content .portrait{width:auto;height:auto;max-width:100%;max-height:calc(var(--book-height) * .48);object-fit:contain;object-position:center;aspect-ratio:1;mask-image:url('assets/worn-edge.svg');mask-size:100% 100%;margin:0 auto 18px;filter:sepia(.25) saturate(.8)}
.page-content .portrait[src*="image5"],.page-content .portrait[src*="image4"]{object-position:center}
.turn-sheet{animation:none;backface-visibility:visible;transform-style:preserve-3d;box-shadow:none;will-change:transform;z-index:7;pointer-events:none}
.turn-sheet.forward,.turn-sheet.backward{animation:none}
.turn-sheet:after{display:none}
.turn-sheet .turn-face{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.turn-face>.leaf,.mobile-sheet>.leaf{width:100%;height:100%}
.leaf{flex-shrink:0;transform:translateZ(0)}
.turn-sheet .turn-front{transform:rotateY(0deg)}
.turn-sheet .turn-back{transform:rotateY(180deg)}
.turn-face:after{display:none}
.resting-sheet{position:absolute;top:0;z-index:5;width:50%;height:100%;pointer-events:none}
.book-cover:has(.turn-sheet) .spine{z-index:6}
@keyframes turn-leaf-forward{from{transform:rotateY(0deg)}to{transform:rotateY(-180deg)}}
@keyframes turn-leaf-back{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes leaf-shading{0%,100%{opacity:0}45%,60%{opacity:1}}
body.bright-paper .leaf{background-blend-mode:normal,screen}
@media(max-width:1100px){.tools{gap:8px}.topbar{padding-inline:4%}.tool.with-label{font-size:18px;padding-inline:12px}.brand{font-size:26px}.brand small{font-size:15px}}
@media(max-width:760px){:root{--book-height:min(690px,calc(100svh - 305px))}.topbar{padding:15px 16px 12px;gap:10px}.brand{font-size:25px;gap:8px}.brand small{font-size:14px;margin-top:4px}.brand-emblem{width:30px;height:37px;flex-shrink:0}.tools{gap:5px}.tool,.tool.with-label{min-width:35px;min-height:38px;padding:6px}.tool.with-label span{display:none}.tools svg{width:18px;height:18px}.type-button{font-size:23px}.shelf-note{font-size:17px;margin:5px 0 16px}.book-stage{padding-inline:15px;overflow:clip;overflow-clip-margin:20px}.book-cover{padding:17px 15px 22px;border-radius:12px 17px 19px 11px}.book-cover:before{inset:6px 6px 10px}.book-cover:after{display:none}.paper-stack{inset:22px 14px 12px}.leaf{--page-px:27px}.leaf.left{background-image:linear-gradient(90deg,#9a743426,transparent 9%,transparent 90%,#9a743426),url('assets/aged-paper.jpg');border-radius:3px 5px 6px 3px}.spine{display:none}.ribbon{top:12px;right:31px;width:26px;height:51px}.corner{width:29px;height:29px}.title-content h1{font-size:57px}.title-content .title-description{font-size:17px;margin:13px 0 10px}.title-motto{font-size:16px;line-height:1.35}.guild-illustration{max-height:calc(var(--book-height) * .34)}.title-ornament{margin-bottom:8px}.title-divider{margin:7px 0}.page-content .portrait{max-height:calc(var(--book-height) * .48);height:auto;width:auto;max-width:100%}.reading-nav{gap:13px;margin-top:20px;padding-inline:16px}.page-nav{min-width:88px;min-height:43px;font-size:19px;padding:8px 12px;gap:5px}.reading-position{min-width:128px;font-size:16px}.progress-track{width:110px}.reading-hint{font-size:15px;margin-top:12px;margin-inline:12px}.site-footer{font-size:15px;margin-top:13px;line-height:1.4;gap:2px;max-width:300px;margin-inline:auto}.turn-sheet.single{left:0;transform-origin:left center}.turn-sheet.single .turn-back{background-image:linear-gradient(90deg,#9a743426,transparent 9%,transparent 90%,#9a743426),url('assets/aged-paper.jpg')}.turn-sheet.single .turn-back>*{visibility:hidden}.turn-sheet.single.backward{transform-origin:right center}.page-top{font-size:15px}.reader-panel .tool{min-width:40px}}
@media(max-width:370px){.brand{font-size:23px}.brand small{display:block;font-size:13px}.brand-emblem{display:none}.topbar{padding-inline:14px}.tools{gap:4px}.tool{min-width:32px}.reading-nav{gap:8px}.reading-position{min-width:111px;font-size:15px}.page-nav{min-width:80px;padding-inline:10px}.leaf{--page-px:23px}.title-content h1{font-size:52px}}
@media(max-height:760px){.title-content h1{font-size:49px}.title-content .title-description{font-size:16px;margin:8px 0}.title-ornament{margin-bottom:5px}.title-ornament svg{width:22px;height:22px}.title-motto{font-size:15px}.guild-illustration{max-height:calc(var(--book-height) * .3)}}
@media(max-width:760px){.brand{font-size:23px;gap:7px}.brand>span:last-child{white-space:nowrap}.brand small{font-size:13px}.brand-emblem{width:26px;height:34px}.tools{gap:4px}.tool,.tool.with-label{min-width:34px}.topbar{gap:8px}}
/* На телефоне листы образуют стопку: вперёд — снять верхний лист влево. */
.mobile-sheet,.mobile-resting{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mobile-sheet{z-index:8;will-change:transform,opacity;box-shadow:3px 9px 18px #291a1433}
.mobile-resting{z-index:5}
.mobile-sheet.slide-away{transform-origin:bottom left;animation:stack-away .7s cubic-bezier(.24,.04,.24,1) both}
.mobile-sheet.slide-back{transform-origin:bottom left;animation:stack-back .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes stack-away{from{transform:translateX(0) rotate(0deg)}to{transform:translateX(-118%) rotate(-5deg)}}
@keyframes stack-back{from{transform:translateX(-118%) rotate(-5deg)}to{transform:translateX(0) rotate(0deg)}}
@media(max-width:760px){
  .book-stage{padding-inline:22px;overflow:clip;overflow-clip-margin:18px}
  .book-cover{padding:0 0 12px;background:none;border-radius:3px 9px 5px 2px;box-shadow:0 17px 25px -10px #070402bd}
  .book-cover:before,.book-cover:after,.corner{display:none}
  .paper-stack{inset:4px -3px 3px 4px;transform:rotate(.45deg);border-radius:2px 5px 4px 2px;box-shadow:2px 3px 0 #ab9060,4px 6px 0 #d1b780,5px 7px 2px #3d291b66}
  .paper-stack:before{content:'';position:absolute;inset:-1px 0 1px -2px;transform:rotate(-.75deg);background:url('assets/aged-paper.jpg') center/100% 100%;box-shadow:0 1px 2px #3a281c3d}
  .leaf.left{border-radius:3px 6px 4px 2px}
  .ribbon{top:-3px;right:23px}
  .book-cover:has(.mobile-sheet) .ribbon{z-index:9}
  .reading-hint{max-width:330px;margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.turn-sheet{display:none}.tool,.page-nav{transition:filter .1s,border-color .1s}}