@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,600;1,400&display=swap');
/* Methodology: a shelf of old books */
.bo-library{display:grid;grid-template-columns:minmax(190px,260px) 1fr;gap:4%;align-items:start;margin:30px 0 20px;--paper:#e8dcbd;--ink:#2a1f14;--gold:#c9a45c}
.bo-shelf{position:relative;display:flex;align-items:flex-end;gap:8px;height:420px;padding:0 14px 22px;background:linear-gradient(#0000 0 calc(100% - 22px),#3a2616 calc(100% - 22px),#24170d);border-bottom:6px solid #160e08;box-shadow:inset 0 -30px 40px -30px #000}
.bo-shelf:before{content:'';position:absolute;inset:0 0 22px;background:linear-gradient(90deg,#00000080,#0000 15%,#0000 85%,#00000080);pointer-events:none}
.bo-spine{position:relative;flex:1;height:var(--h,95%);min-width:44px;border:0;padding:18px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--gold);
 background:linear-gradient(90deg,#0006,#fff1 20%,#0000 45%,#0005),repeating-linear-gradient(0deg,#0000 0 3px,#00000012 3px 4px),var(--tone);
 box-shadow:inset 0 0 0 1px #0007,4px 0 8px #0008;border-radius:3px 3px 1px 1px;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.bo-spine:before,.bo-spine:after{content:'';position:absolute;left:6px;right:6px;height:3px;border-block:1px solid var(--gold);opacity:.8}
.bo-spine:before{top:10px}.bo-spine:after{bottom:12px}
.bo-spine b{font:600 15px 'EB Garamond',serif;letter-spacing:1px}
.bo-spine span{writing-mode:vertical-rl;font:700 15px 'Amiri',serif;line-height:1.2;max-height:72%;overflow:hidden;text-align:center;color:#ead7a6;text-shadow:0 1px 0 #000}
html[lang=en] .bo-spine span{font-family:'EB Garamond',serif;font-weight:600;letter-spacing:.5px}
.bo-spine i{position:absolute;bottom:34px;width:18px;height:18px;border:1px solid var(--gold);transform:rotate(45deg);opacity:.7}
.bo-spine:hover{transform:translateY(-10px)}
.bo-spine[aria-selected=true]{transform:translateY(-26px);box-shadow:inset 0 0 0 1px #0007,0 14px 24px #000c,0 0 0 1px var(--gold)}
.bo-library .scope-doc{grid-column:1;margin:18px 0 0;padding:18px 18px 14px;background:linear-gradient(135deg,#efe5c9,#dccfae);color:var(--ink);transform:rotate(-1.5deg);box-shadow:0 10px 24px #000a;font-family:'Amiri',serif;border:0}
.bo-library .scope-doc .kicker{color:#7a2e1f;font-family:inherit}
.bo-library .scope-doc a{display:block;color:#5a1f1b;margin:6px 0;font-size:15px}
.bo-library .scope-doc p{color:#4b3d2b;font-size:14px}

/* the open book */
.bo-book{grid-column:2;grid-row:1/span 2;perspective:2200px}
.bo-book-board{position:relative;padding:22px;background:linear-gradient(135deg,#4a2a18,#2b170c 60%,#3a2214);border-radius:6px;box-shadow:0 40px 80px #000d,inset 0 0 0 2px #1a0e07,inset 0 0 0 7px #5b3720,inset 0 0 0 8px var(--gold);transform-style:preserve-3d}
.bo-book-pages{position:relative;min-height:440px;padding:46px 54px 56px;color:var(--ink);font-family:'Amiri',serif;
 background:linear-gradient(90deg,#0000 0 calc(50% - 22px),#0000003a 50%,#0000 calc(50% + 22px)),radial-gradient(ellipse at 20% 15%,#c9a86a33,#0000 40%),radial-gradient(ellipse at 85% 80%,#9b743d30,#0000 45%),radial-gradient(circle at 70% 25%,#b48b4d1c 0 6%,#0000 7%),var(--paper);
 box-shadow:inset 0 0 60px #7a5a2c66,0 2px 0 #cbbd98,0 4px 0 #b9ab86,0 6px 0 #a89a76;border-radius:2px}
.bo-book-pages article{column-count:2;column-gap:108px;column-fill:balance;min-height:340px;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;color:var(--ink)!important}
.bo-book-pages article>span:first-child{display:block;text-align:center;font:600 46px 'EB Garamond',serif;color:#7a2e1f;line-height:1;margin-bottom:6px}
.bo-book-pages article>span:first-child:before,.bo-book-pages article>span:first-child:after{content:'❦';font-size:20px;color:#8a6a3a;margin:0 14px;vertical-align:middle}
.bo-book-pages article>span:first-child,.bo-book-pages h2{column-span:all}
.bo-book-pages h2{text-align:center;font:700 30px/1.5 'Amiri',serif;color:#2a1f14;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid #2a1f1444}
html[lang=en] .bo-book-pages h2,html[lang=en] .bo-book-pages p{font-family:'EB Garamond',serif}
.bo-book-pages p{font-size:20px;line-height:2;margin:0 0 16px;text-align:justify;color:#2e2317!important}
.bo-book-pages b{color:#5a1f1b}
.bo-folio{position:absolute;bottom:38px;font:italic 15px 'EB Garamond',serif;color:#6b5434}
.bo-folio-a{right:76px}.bo-folio-b{left:76px}

/* cover: swings open when the section appears */
.bo-book-cover{position:absolute;top:22px;bottom:22px;left:22px;width:calc(50% - 22px);transform-origin:right center;backface-visibility:hidden;display:grid;place-items:center;
 background:radial-gradient(ellipse at 40% 30%,#6b2a1f,#3a140f 70%);border-radius:4px 0 0 4px;box-shadow:inset 0 0 0 10px #2c0f0b,inset 0 0 0 11px var(--gold),inset 0 0 0 16px #2c0f0b,inset 0 0 0 17px #c9a45c88,-8px 0 20px #0009;transition:transform 1.25s cubic-bezier(.6,.05,.2,1);z-index:4}
html[dir=rtl] .bo-book-cover{left:auto;right:22px;transform-origin:left center;border-radius:0 4px 4px 0}
.bo-cover-title{max-width:70%;text-align:center;font:700 28px/1.6 'Amiri',serif;color:var(--gold);text-shadow:0 1px 0 #000,0 0 18px #c9a45c55}
.bo-book-cover i{position:absolute;inset:40px;border:1px solid #c9a45c66;pointer-events:none}
.bo-book-cover.is-open{transform:rotateY(-178deg)}
html[dir=rtl] .bo-book-cover.is-open{transform:rotateY(178deg)}
/* page turn */
.bo-book-turn{position:absolute;top:22px;bottom:22px;left:50%;width:calc(50% - 22px);transform-origin:left center;background:linear-gradient(90deg,#d9cba7,var(--paper) 30%,#efe5ca);box-shadow:inset 20px 0 40px #7a5a2c55;opacity:0;pointer-events:none;z-index:3;border-radius:0 2px 2px 0}
html[dir=rtl] .bo-book-turn{left:22px;transform-origin:right center}
.bo-book-turn.is-turning{animation:bo-turn .7s cubic-bezier(.5,0,.3,1) both}
html[dir=rtl] .bo-book-turn.is-turning{animation-name:bo-turn-rtl}
.bo-book-turn.is-back{animation-direction:reverse}
@keyframes bo-turn{0%{opacity:1;transform:rotateY(0)}96%{opacity:1}100%{opacity:0;transform:rotateY(-180deg)}}
@keyframes bo-turn-rtl{0%{opacity:1;transform:rotateY(0)}96%{opacity:1}100%{opacity:0;transform:rotateY(180deg)}}

@media(max-width:900px){
 .bo-library{grid-template-columns:1fr}
 .bo-shelf{height:230px;order:1}
 .bo-spine span{font-size:12px}
 .bo-book{grid-column:1;grid-row:auto;order:2}
 .bo-library .scope-doc{grid-column:1;order:3}
 .bo-book-pages{padding:30px 22px 50px;background:radial-gradient(ellipse at 20% 15%,#c9a86a33,#0000 40%),var(--paper)}
 .bo-book-pages article{column-count:1}
 .bo-book-cover{width:calc(100% - 44px)}
 .bo-book-turn{left:22px;width:calc(100% - 44px)}
 .bo-folio-b{display:none}.bo-folio-a{right:50%;transform:translateX(50%)}
 .bo-book-pages p{font-size:18px}
}
@media(prefers-reduced-motion:reduce){.bo-book-cover{display:none}.bo-book-turn{display:none}}
.motion-paused .bo-book-cover{transition:none}
#method{overflow-x:clip}
.bo-library{overflow:clip;overflow-clip-margin:40px}
@media(max-width:900px){.bo-book-cover{transition:transform 1.1s cubic-bezier(.6,.05,.2,1),opacity .35s .85s}.bo-book-cover.is-open{opacity:0}}