html, body { height: 100%; margin: 0; overflow: hidden; }
body {
background: radial-gradient(ellipse at 50% 38%, #45403a 0%, #2e2a26 55%, #1d1a17 100%);
overscroll-behavior: none;
-webkit-user-select: none; user-select: none;
}
#stage {
position: fixed; inset: 0;
display: flex; align-items: center; justify-content: center;
touch-action: none;
}
#flipbook { position: relative; }
#flipbook.open { box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 4px 14px rgba(0,0,0,.4); }
/* ---------- hard covers ---------- */
.cover {
background:
radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.09), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #142e56 0%, #24487f 46%, #142e56 100%);
box-shadow: inset 0 0 40px rgba(0,0,0,.35);
}
.cover-front::before, .cover-back::before {
content: ''; position: absolute; top: 0; bottom: 0; width: 12%;
pointer-events: none; z-index: 2;
}
.cover-front::before { left: 0; background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-back::before { right: 0; background: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,.14) 55%, rgba(0,0,0,0)); }
.cover-inner { position: absolute; inset: 0; }
.cover-frame {
position: absolute; inset: 7%;
border: 3px double #c9a84c; border-radius: 3px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: #e7c96f;
font-family: Georgia, 'Palatino Linotype', serif;
padding: 0 6%;
}
.cover-title {
font-variant: small-caps; letter-spacing: .1em;
font-size: 2em; line-height: 1.25;
text-shadow: 0 2px 3px rgba(0,0,0,.55);
}
.cover-orn { color: #b89a4e; font-size: 1.5em; margin-top: 1.1em; }
.cover-orn.big { font-size: 2.4em; }
.cover-sub { letter-spacing: .5em; font-size: .68em; margin-top: 1em; color: #cdb069; text-indent: .5em; }
.cover-author { margin-top: 2.4em; font-variant: small-caps; letter-spacing: .18em; font-size: 1.02em; color: #e2c26a; }
/* ---------- endpapers ---------- */
.endpaper {
background:
repeating-linear-gradient(45deg, rgba(120,96,58,.05) 0 3px, rgba(0,0,0,0) 3px 6px),
linear-gradient(#e8dfc8, #dcd2b6);
box-shadow: inset 0 0 55px rgba(96,74,40,.25);
}
/* ---------- paper pages ---------- */
.paper {
background:
radial-gradient(ellipse at 50% 45%, #faf5e9 55%, #f1e8d4 92%, #eadfc7 100%);
color: #33291f;
}
/* inner spine shadow — the fold between the two pages of a spread */
.pg-right::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 9%;
background: linear-gradient(to right, rgba(84,26,18,.30), rgba(84,26,18,.10) 52%, rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
.pg-left::before {
content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 9%;
background: linear-gradient(to left, rgba(84,26,18,.26), rgba(84,26,18,.09) 52%, rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
.pg-single::before {
content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 6%;
background: linear-gradient(to right, rgba(62,44,16,.18), rgba(84,26,18,0));
pointer-events: none; z-index: 3;
}
/* outer edge — hint of the closed page stack */
.pg-right::after, .pg-left::after {
content: ''; position: absolute; top: 0; bottom: 0; width: 7px;
pointer-events: none; z-index: 3; opacity: .5;
}
.pg-right::after { right: 0; background: repeating-linear-gradient(to left, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }
.pg-left::after { left: 0; background: repeating-linear-gradient(to right, rgba(90,70,40,.16) 0 1px, rgba(0,0,0,0) 1px 3px); }
/* ---------- text ---------- */
.textenv {
font-family: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
line-height: 1.55; text-align: justify;
hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto;
text-rendering: optimizeLegibility;
color: #33291f;
}
.textenv p { margin: 0; text-indent: 1.5em; }
.textenv p.noind { text-indent: 0; }
.chead { margin-bottom: 1.25em; }
.cnum {
text-align: center; font-variant: small-caps;
letter-spacing: .24em; font-size: 1.26em;
padding-top: 1em; text-indent: .24em; color: #4a3b28;
}
.corn { text-align: center; color: #8a744a; margin-top: .4em; font-size: 1em; }
.brk { text-align: center; margin: 1.1em 0; color: #8a744a; font-size: .78em; letter-spacing: .5em; text-indent: .5em; }
.theend { text-align: center; margin-top: 2.6em; letter-spacing: .4em; text-indent: .4em; font-size: 1.02em; color: #5a4a33; }
.folio { text-align: center; font-size: .66em; letter-spacing: .18em; color: #8d7b5f; font-family: Georgia, serif; }
/* ---------- title page ---------- */
.titlepage {
position: absolute; inset: 10% 12%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; font-family: Georgia, 'Palatino Linotype', serif; color: #3d3020;
}
.tp-title { font-variant: small-caps; font-size: 1.85em; letter-spacing: .1em; line-height: 1.3; }
.tp-rule { width: 42%; height: 1px; background: #a08c5a; margin: 1.4em 0; }
.tp-sub { letter-spacing: .45em; font-size: .72em; color: #6a583c; text-indent: .45em; }
.tp-by { margin-top: 2.2em; font-style: italic; font-size: .85em; color: #6a583c; }
.tp-author { margin-top: .5em; font-variant: small-caps; letter-spacing: .16em; font-size: 1.12em; }
.tp-orn { margin-top: 2.2em; color: #8a744a; font-size: 1.3em; }
/* ---------- chrome ---------- */
.nav {
position: fixed; top: 50%; transform: translateY(-50%);
z-index: 60; cursor: pointer;
font: 46px/1 Georgia, serif; color: rgba(255,255,255,.30);
padding: 26px 14px; transition: color .2s;
background: none; border: 0; margin: 0;
-webkit-appearance: none; appearance: none;
}
.nav:hover { color: rgba(255,255,255,.75); }
#nav-prev { left: 4px; }
#nav-next { right: 4px; }
#hint {
position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%);
z-index: 60; font: 12.5px/1.4 Georgia, serif; letter-spacing: .06em;
color: rgba(255,255,255,.45); background: rgba(0,0,0,.25);
padding: 6px 14px; border-radius: 20px; white-space: nowrap;
transition: opacity 1.2s; pointer-events: none;
}
#hint.gone { opacity: 0; }
#loader {
position: fixed; inset: 0; z-index: 100;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
background: rgba(24,21,18,.82);
font: 15px Georgia, serif; letter-spacing: .08em; color: #d8c9a6;
opacity: 0; pointer-events: none; transition: opacity .25s;
}
#loader.show { opacity: 1; pointer-events: auto; }
#loader .spin {
width: 34px; height: 34px; border-radius: 50%;
border: 3px solid rgba(216,201,166,.25); border-top-color: #d8c9a6;
animation: lspin .9s linear infinite;
}
@keyframes lspin { to { transform: rotate(360deg); } }
/* ---------- embossed cover tooling ---------- */
.cover-inner::before {
content: ''; position: absolute; inset: 2.2%;
pointer-events: none; opacity: .9;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%20%3Cg%20fill='none'%20stroke-width='1.4'%3E%20%3Cg%20transform='translate(0.9,0.9)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.6,-0.6)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Cpath%20d='M14%206%20L22%2014%20L14%2022%20L6%2014%20Z'/%3E%3Ccircle%20cx='14'%20cy='14'%20r='1.8'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: left top, left bottom, left top, right top;
background-size: 28px 28px;
}
.cover-inner::after {
content: ''; position: absolute; inset: 1.4%;
pointer-events: none; opacity: .95;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='56'%20height='56'%3E%20%3Cg%20fill='none'%20stroke-width='1.5'%3E%20%3Cg%20transform='translate(1,1)'%20stroke='rgba(0,0,0,0.50)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3Cg%20transform='translate(-0.7,-0.7)'%20stroke='rgba(255,255,255,0.13)'%3E%20%3Ccircle%20cx='28'%20cy='28'%20r='16'/%3E%3Ccircle%20cx='28'%20cy='28'%20r='9'/%3E%20%3Cpath%20d='M28%2012%20Q31%2020%2028%2024%20Q25%2020%2028%2012%20Z%20M28%2044%20Q31%2036%2028%2032%20Q25%2036%2028%2044%20Z%20M12%2028%20Q20%2031%2024%2028%20Q20%2025%2012%2028%20Z%20M44%2028%20Q36%2031%2032%2028%20Q36%2025%2044%2028%20Z'/%3E%20%3C/g%3E%20%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom;
background-size: 52px 52px;
}
/* ---------- illustration captions & display lines ---------- */
.illus {
margin: 1.15em 5%; padding: .5em 3%;
text-align: center; font-style: italic;
font-size: .84em; line-height: 1.45; color: #6b5a3e;
border-top: 1px solid rgba(122,100,60,.4);
border-bottom: 1px solid rgba(122,100,60,.4);
}
.disp {
text-align: center; margin: 1em 8%;
font-variant: small-caps; letter-spacing: .12em;
font-size: .95em; color: #4a3b28;
}
.ctitle {
text-align: center; font-variant: small-caps;
letter-spacing: .08em; font-size: 1.05em;
margin-top: .45em; color: #5a4a33;
}
.verse {
text-align: center; font-style: italic;
margin: 1.1em 0; line-height: 1.65; color: #4a3b28;
}
/* A PROSE EPIGRAPH -- the motto at the head of a chapter when it is a
paragraph rather than a line of verse. Indented on both sides so the
measure is visibly narrower than the text it stands over, which is what
tells the eye it is a quotation and not the chapter's first paragraph. */
.epig {
margin: 1.15em 7% 1.5em; text-indent: 0;
font-style: italic; font-size: .9em; line-height: 1.6;
color: #4a3b28; text-align: justify;
}
.epig + .epig { margin-top: -.7em; } /* a quotation and its translation */
.letter {
margin: 1.1em 6%; padding: .7em 1em;
font-size: .88em; line-height: 1.6; font-style: italic;
color: #4a3b28; background: rgba(146,120,70,.07);
border-left: 2px solid rgba(122,100,60,.45);
}
.songtitle {
text-align: center; font-variant: small-caps; letter-spacing: .18em;
text-indent: .18em; font-size: .92em; color: #5a4a33; margin: 1.2em 0 .3em;
}
.plate {
margin: 1.2em auto; padding: .45em 1.2em; width: fit-content;
text-align: center; letter-spacing: .3em; text-indent: .3em; font-size: .86em;
color: #4a3b28; border: 1px solid rgba(122,100,60,.55); border-radius: 2px;
background: rgba(170,150,95,.14);
}
.prog {
margin: 1.1em 6%; text-align: center; font-size: .85em; line-height: 1.75;
color: #4a3b28; border-top: 1px solid rgba(122,100,60,.4);
border-bottom: 1px solid rgba(122,100,60,.4); padding: .7em 0;
}
/* ---------- skip to page (fixed overlay: never touches #flipbook) ---------- */
#skipbar {
position: fixed; left: 50%; bottom: 12px;
transform: translateX(-50%) translateY(10px);
z-index: 70;
display: flex; align-items: center; gap: 8px;
opacity: 0; pointer-events: none;
transition: opacity .32s ease, transform .32s ease;
font-family: Georgia, 'Palatino Linotype', serif;
}
#skipbar.vis { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
#skipbar button {
font: 13.5px/1 Georgia, serif; letter-spacing: .06em;
color: #ffeec0; background: rgba(38,10,66,.85);
border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
padding: 9px 16px; cursor: pointer;
-webkit-appearance: none; appearance: none;
transition: background .18s, color .18s, border-color .18s;
}
#skipbar button:hover { background: rgba(70,21,122,.94); color: #fff8dc; border-color: #ffd86a; }
#skipbar button:focus-visible { outline: 2px solid #ffd86a; outline-offset: 2px; }
#skip-wrap {
display: none; align-items: center; gap: 6px;
background: rgba(38,10,66,.9);
border: 1px solid rgba(255,216,106,.55); border-radius: 18px;
padding: 5px 6px 5px 12px;
}
#skip-wrap.open { display: flex; }
#skip-btn.gone { display: none; }
#skip-input {
width: 74px; font: 14px/1 Georgia, serif; text-align: center;
color: #1b0733; background: #f8f0e2;
border: 1px solid rgba(255,216,106,.7); border-radius: 12px;
padding: 7px 8px; -webkit-appearance: none; appearance: none;
}
#skip-input:focus { outline: 2px solid #ffd86a; outline-offset: 1px; }
#skip-err {
font: 11.5px/1 Georgia, serif; letter-spacing: .05em;
color: rgba(255,238,192,.72); padding-right: 8px; white-space: nowrap;
}
@keyframes skipShake {
0%,100% { transform: translateX(0); }
20% { transform: translateX(-5px); } 40% { transform: translateX(5px); }
60% { transform: translateX(-3px); } 80% { transform: translateX(3px); }
}
#skip-wrap.bad { animation: skipShake .34s ease; border-color: #ff5c7a; }
#skip-wrap.bad #skip-err { color: #ffb3c1; }
@media (prefers-reduced-motion: reduce) {
#skipbar { transition: opacity .2s ease; transform: translateX(-50%); }
#skipbar.vis { transform: translateX(-50%); }
#skip-wrap.bad { animation: none; }
}
/* ---------- chapter half-title page ----------
Same cream stock, margins and rules as a text page; no folio, as a printed
half-title carries none. .chapanim is an empty full-bleed stage kept for
per-chapter artwork later. Animation "rise and settle": numeral lifts, a
hairline draws outward from the centre, the title follows. */
.paper.intro { overflow: hidden; }
.intropage {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.chapanim { position: absolute; inset: 0; pointer-events: none; }
.intro-label {
position: relative; z-index: 2;
text-align: center; padding: 0 14%;
font-family: Georgia, 'Palatino Linotype', serif;
color: #3a2f22;
}
.intro-label .il-num {
display: block; font-size: .74em; letter-spacing: .34em;
text-transform: uppercase; color: #8a6d3a;
}
.intro-label .il-rule {
display: block; height: 1px; width: 0; margin: 1.15em auto;
background: linear-gradient(to right, transparent, #b08d4c, transparent);
}
.intro-label .il-txt {
display: block; font-size: 1.42em; line-height: 1.35; letter-spacing: .04em;
}
.intro-label .il-txt.il-solo {
font-size: 1.9em; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
}
/* An optional summary beneath the title. Set smaller, italic and narrower
than the measure of a text page, so that it reads as apparatus rather than
as the opening of the story it stands in front of. */
.intro-label .il-sum {
display: block; max-width: 22em; margin: 1.45em auto 0;
font-size: .86em; line-height: 1.62; letter-spacing: .012em;
font-style: italic; color: #5c4a32;
}
/* the reveal runs when the page comes into view, not on a loop */
.intropage .il-num,
.intropage .il-rule,
.intropage .il-sum,
.intropage .il-txt { opacity: 0; }
.intropage.play .il-num { animation: introUp .70s ease-out .10s both; }
.intropage.play .il-rule { animation: introRule .60s ease-out .68s both; }
.intropage.play .il-txt { animation: introUp .80s ease-out 1.00s both; }
.intropage.play .il-sum { animation: introUp .90s ease-out 1.38s both; }
@keyframes introUp { from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; } }
@keyframes introRule { from { width: 0; opacity: 0; }
to { width: 42%; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.intropage .il-num, .intropage .il-txt, .intropage .il-sum { opacity: 1; }
.intropage .il-rule { opacity: 1; width: 42%; }
.intropage.play .il-num,
.intropage.play .il-rule,
.intropage.play .il-sum,
.intropage.play .il-txt { animation: none; }
/* the drawing stays, but stops moving */
.chapanim * { animation: none !important; }
}
/* ---------- translator's footnote ----------
Three notes in Crime and Punishment are the translator's, not Dostoevsky's.
They are set smaller and ruled off so they can't be mistaken for the text. */
.tnote { font-size: .82em; line-height: 1.5; color: #5b4f3f; margin: 1.05em 0 .95em;
padding-top: .55em; border-top: 1px solid rgba(90,70,40,.28); text-indent: 0; }
/* A note with no marker of its own gets a dagger; a note that carries its
own asterisk marker prints that instead, so the reader can match it. */
.tnote.dagger::before { content: '\2020\2003'; color: #937a45; }
.tn-m { color: #937a45; margin-right: .6em; font-weight: 700; letter-spacing: .04em; }
/* ---------- part half-title ----------
'Part I' owns a whole leaf, like a chapter half-title. .partanim is a
full-bleed stage left deliberately empty: the per-part animation goes there
later and needs no change to the page geometry. The page keeps the ordinary
paper aesthetic rather than going dark. */
.paper.part { overflow: hidden; }
/* ---------- full-page plate ----------
A leaf given over entirely to one picture. No folio, no text envelope,
nothing beside it. object-fit: contain is what keeps the plate honest:
the image is fitted INSIDE the leaf whatever its proportions, so a wide
plan and a tall portrait are both shown whole rather than cropped to
fill. The inset leaves the paper's own margin showing as a mount. */
.paper.plateleaf { overflow: hidden; }
.fullimg {
position: absolute; inset: 7% 8%;
display: flex; align-items: center; justify-content: center;
}
.fullimg img {
max-width: 100%; max-height: 100%;
width: auto; height: auto; object-fit: contain;
/* the plates in this series are line blocks on white; a soft border and
a little shadow sit them on the cream stock instead of letting them
float as a bright rectangle */
background: #fdfaf2;
padding: 2.2%;
border: 1px solid rgba(122, 100, 60, .45);
box-shadow: 0 2px 10px rgba(84, 26, 18, .18);
}
.parttitle { position: absolute; inset: 0; display: flex;
flex-direction: column; align-items: center; justify-content: center; }
.partanim { position: absolute; inset: 0; pointer-events: none; }
.part-label { position: relative; z-index: 2; text-align: center; padding: 0 14%;
font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22; }
.part-label .pt-rule { display: block; height: 1px; width: 0; margin: 1.5em auto;
background: linear-gradient(to right, transparent, #b08d4c, transparent); }
/* The word sits small and widely tracked above a big display numeral. */
.part-label .pt-word { display: block; font-size: .95em; letter-spacing: .52em;
text-indent: .52em; text-transform: uppercase; color: #7a6440;
margin-bottom: .18em; }
.part-label .pt-num { display: block; font-size: 5.6em; line-height: 1;
letter-spacing: .10em; text-indent: .10em; font-weight: 700;
text-transform: uppercase;
background: linear-gradient(180deg, #6b5636 0%, #b08d4c 42%,
#e6cd92 62%, #8a6f42 100%);
-webkit-background-clip: text; background-clip: text;
color: #8a6f42; -webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 0 rgba(255,252,244,.55))
drop-shadow(0 -1px 0 rgba(74,58,32,.28)); }
/* The legend's name, under the numeral. Optional: only parts that carry a
"sub" get one. Set in italic at text size so it reads as a name rather
than competing with the display numeral above it. */
.part-label .pt-sub { display: block; margin-top: .70em; font-size: 1.06em;
font-style: italic; letter-spacing: .06em; line-height: 1.35;
color: #6b5636; }
/* A label with no numeral -- "Epilogue" -- is set as one modest line. */
.parttitle.solo .pt-num { font-size: 2.3em; letter-spacing: .30em; text-indent: .30em; }
/* ---- the animated stage behind the lettering ----
Three rings open outward from the centre and six motes drift up through
them. Every looping period is distinct, per the out-of-phase rule that
governs the covers; the one-shot reveals are staged so the rules draw,
then the word, then the numeral lands. */
.partanim .pa-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%;
border: 1px solid rgba(176,141,76,.42); opacity: 0;
transform: translate(-50%,-50%) scale(.2); }
.partanim .g0 { width: 34%; padding-bottom: 34%; }
.partanim .g1 { width: 52%; padding-bottom: 52%; border-color: rgba(176,141,76,.30); }
.partanim .g2 { width: 72%; padding-bottom: 72%; border-color: rgba(176,141,76,.20); }
.partanim .pa-mote { position: absolute; width: 5px; height: 5px; border-radius: 50%;
background: rgba(176,141,76,.55); opacity: 0; }
.partanim .m0 { left: 22%; bottom: 16%; }
.partanim .m1 { left: 37%; bottom: 10%; }
.partanim .m2 { left: 52%; bottom: 19%; }
.partanim .m3 { left: 66%; bottom: 12%; }
.partanim .m4 { left: 78%; bottom: 22%; }
.partanim .m5 { left: 45%; bottom: 26%; }
/* ---- a drawing in place of the rings ----
A book may hand its Book pages line art of their own, standing for the
chapters in that Book. It is a full-bleed stage under the lettering, like
.chapanim on a chapter half-title, and it REPLACES the rings rather than
joining them -- the engine emits one stage or the other, never both.
The drawings themselves live in the per-book scenes.css the builder
appends; all this rule does is give them a stage to hang in. */
.partart { position: absolute; inset: 0; pointer-events: none; }
.parttitle .pt-word, .parttitle .pt-num, .parttitle .pt-rule,
.parttitle .pt-sub { opacity: 0; }
.parttitle.play .pt-rule:first-child { animation: ptRule .60s ease-out .10s both; }
.parttitle.play .pt-word { animation: ptUp .70s ease-out .46s both; }
.parttitle.play .pt-num { animation: ptNum .95s cubic-bezier(.19,1,.22,1) .62s both; }
/* The legend's name arrives after the numeral has settled, and before
the closing rule draws itself. */
.parttitle.play .pt-sub { animation: ptUp .70s ease-out 1.16s both; }
.parttitle.play .pt-rule:last-child { animation: ptRule .60s ease-out 1.62s both; }
.parttitle.play .g0 { animation: ptRing 1.50s cubic-bezier(.22,.9,.3,1) .30s both,
ptBreathe 7.30s ease-in-out 1.9s infinite; }
.parttitle.play .g1 { animation: ptRing 1.70s cubic-bezier(.22,.9,.3,1) .48s both,
ptBreathe 9.10s ease-in-out 2.2s infinite; }
.parttitle.play .g2 { animation: ptRing 1.90s cubic-bezier(.22,.9,.3,1) .66s both,
ptBreathe 11.40s ease-in-out 2.6s infinite; }
.parttitle.play .m0 { animation: ptMote 6.20s ease-in-out 1.40s infinite; }
.parttitle.play .m1 { animation: ptMote 7.10s ease-in-out 1.95s infinite; }
.parttitle.play .m2 { animation: ptMote 8.30s ease-in-out 2.40s infinite; }
.parttitle.play .m3 { animation: ptMote 9.40s ease-in-out 1.70s infinite; }
.parttitle.play .m4 { animation: ptMote 10.60s ease-in-out 2.80s infinite; }
.parttitle.play .m5 { animation: ptMote 11.90s ease-in-out 3.20s infinite; }
/* ---------- the sand sequence on a part page ----------
Three stages, in this order: the Book's title fades in letter by letter,
the letters blow away downwind, and the numeral resolves in the space they
leave. build.py bakes each letter's two delays and its own drift into
inline custom properties, so the stagger is scaled to the length of the
title and every Book page runs to the same clock however long its title is.
The title is laid over the whole leaf rather than stacked above the label,
so the numeral appears exactly where the title was standing rather than
somewhere underneath it. Words are inline-block: a line may break between
words and never inside one.
Note on the two animations per letter. sandOut is declared with `both`, so
during its delay it holds its own first frame -- and its first frame is the
fully-arrived letter, which is precisely what sandIn finished on. That is
what lets the two run back to back on one element without the second one
wiping out the first while it waits. */
/* Tracking and word space have to be set against each other. These titles
are capitals, and tracked-out capitals need a word space that grows with
the tracking -- at .12em of tracking against a .42em gap the two readings
were close enough that the line ran together and you could not see where
one word ended. The tracking is now half what it was and the word space
two and a half times, which puts them an order of magnitude apart. */
.parttitle.sandseq .pt-sand { position: absolute; inset: 10% 11%; z-index: 3;
display: flex; flex-wrap: wrap; gap: .35em 0;
align-items: center; justify-content: center; align-content: center;
font-family: Georgia,'Palatino Linotype',serif; color: #3a2f22;
font-size: 1.06em; line-height: 1.85; letter-spacing: .06em;
pointer-events: none; }
/* The word-space, and why it is a margin rather than the flex gap above.
The letters are wrapped in one aria-hidden span so a screen reader gets the
title once from the container instead of spelling it out. That wrapper is
the ONLY child of the flex box, so flex gap had nothing to apply between --
and because the builder joins the word spans with no whitespace at all,
there was no word-space in the markup either. The words were separated by
precisely the trailing letter-spacing of their last letter, which is to say
by exactly the same distance as the letters inside them, which is exactly
what a reader reported: you could not see where one word ended.
display:contents lifts the words back out to be the flex items, and the
margin gives them a word-space that holds whatever layout context they end
up in. Belt and braces on purpose: this went wrong once already. */
.parttitle.sandseq .pt-sand .sandwrap { display: contents; }
.parttitle.sandseq .pt-sand .w { display: inline-block; white-space: nowrap;
margin-right: 1.05em; }
.parttitle.sandseq .pt-sand .w:last-child { margin-right: 0; }
.parttitle.sandseq .pt-sand .l { display: inline-block; opacity: 0;
will-change: transform, opacity, filter; }
/* The hold. The last letter of a title arrives at 1.55s -- one second of
stagger plus its own .55s -- so the hold is what is left for reading it,
not the whole of the number below. At 2.20s the assembled title stood for
two thirds of a second, which is not long enough to read a line that can
run to two hundred and fifty characters. At 5.60s it stands for four
seconds. Everything downstream is timed off this number. */
.parttitle.sandseq.play .pt-sand .l {
animation: sandIn .55s ease-out var(--fd) both,
sandOut 1.05s cubic-bezier(.42,0,.86,.24)
calc(5.60s + var(--bd)) both; }
/* The numeral waits for the title to be most of the way gone: the first
letters are still in the air when it starts to arrive. These four move with
the hold above -- 3.40s later than they were, because the hold is. */
.parttitle.sandseq.play .pt-rule:first-child { animation: ptRule .60s ease-out 7.26s both; }
.parttitle.sandseq.play .pt-word { animation: ptUp .70s ease-out 7.42s both; }
.parttitle.sandseq.play .pt-num { animation: ptNum .95s cubic-bezier(.19,1,.22,1) 7.58s both; }
.parttitle.sandseq.play .pt-rule:last-child { animation: ptRule .60s ease-out 8.00s both; }
@keyframes sandIn { from { opacity:0; transform: translateY(12px) scale(.94);
filter: blur(3px); }
to { opacity:1; transform:none; filter: blur(0); } }
@keyframes sandOut { 0% { opacity:1; transform:none; filter: blur(0); }
22% { opacity:.94;
transform: translate(calc(var(--dx) * .07), calc(var(--dy) * .07))
rotate(calc(var(--r) * .05)); filter: blur(.4px); }
100% { opacity:0;
transform: translate(var(--dx), var(--dy))
rotate(var(--r)) scale(.55); filter: blur(4px); } }
/* A reader who has asked for less motion gets the same three facts without
the weather: the title simply is there, and the numeral simply is there. */
@media (prefers-reduced-motion: reduce) {
.parttitle.sandseq .pt-sand .l,
.parttitle.sandseq.play .pt-sand .l { animation: none; opacity: 1; }
.parttitle.sandseq.play .pt-word,
.parttitle.sandseq.play .pt-num,
.parttitle.sandseq.play .pt-rule { animation-delay: 0s; }
/* the Book's drawing stays on the page, but stops being drawn */
.partart * { animation: none !important; }
}
@keyframes ptUp { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
@keyframes ptRule { from { width:0; opacity:0; } to { width:46%; opacity:1; } }
@keyframes ptNum { 0% { opacity:0; transform: translateY(26px) scale(.82); letter-spacing:.34em; }
100% { opacity:1; transform:none; letter-spacing:.10em; } }
@keyframes ptRing { from { opacity:0; transform: translate(-50%,-50%) scale(.2); }
to { opacity:1; transform: translate(-50%,-50%) scale(1); } }
@keyframes ptBreathe { 0%,100% { opacity:.55; } 50% { opacity:1; } }
@keyframes ptMote { 0% { opacity:0; transform: translateY(0) scale(.7); }
18% { opacity:.85; }
82% { opacity:.85; }
100% { opacity:0; transform: translateY(-190px) scale(1.25); } }
/* ---------- signature and subhead ----------
Both were emitted by the engine but never styled: 75 signature lines across
Little Women, Pride and Prejudice and The Jungle Book were rendering as
ordinary paragraphs. A signature closes a letter, so it sits right and
italic; a subhead is a minor division inside a chapter. */
.sig { text-align: right; font-style: italic; text-indent: 0;
margin: .35em 0 1.05em; padding-right: .4em; color: #40362a; }
.subhead { text-align: center; text-indent: 0; margin: 1.35em 0 .85em;
font-size: .93em; letter-spacing: .17em; text-transform: uppercase;
color: #5b4a33; }
/* ---------- per-page drawings ---------- */
/* The drawing fills the stage and sits under the type; the type's
own z-index keeps it on top. */
.partart svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scene 0 -- Prelude -- the walls of Avila */
.partart .s0-wall { stroke-dasharray: 270.0 630.0; }
.partart .s0-wall { animation: s0Wall 26.00s linear 0.00s infinite; }
@keyframes s0Wall { from { stroke-dashoffset: 900.0; } to { stroke-dashoffset: 0; } }
.partart .s0-tw0 { stroke-dasharray: 85.0 165.0; }
.partart .s0-tw0 { animation: s0Tw0 17.00s linear 0.00s infinite; }
@keyframes s0Tw0 { from { stroke-dashoffset: 250.0; } to { stroke-dashoffset: 0; } }
.partart .s0-tw1 { stroke-dasharray: 85.0 165.0; }
.partart .s0-tw1 { animation: s0Tw1 19.40s linear 1.10s infinite; }
@keyframes s0Tw1 { from { stroke-dashoffset: 250.0; } to { stroke-dashoffset: 0; } }
.partart .s0-rdL { stroke-dasharray: 35.1 99.9; }
.partart .s0-rdL { animation: s0Rdl 11.00s linear 0.00s infinite; }
@keyframes s0Rdl { from { stroke-dashoffset: 135.0; } to { stroke-dashoffset: 0; } }
.partart .s0-rdR { stroke-dasharray: 35.1 99.9; }
.partart .s0-rdR { animation: s0Rdr 12.60s linear 0.60s infinite; }
@keyframes s0Rdr { from { stroke-dashoffset: 135.0; } to { stroke-dashoffset: 0; } }
.partart .s0-gate { stroke-dasharray: 51.7 100.3; }
.partart .s0-gate { animation: s0Gate 10.40s linear 0.00s infinite; }
@keyframes s0Gate { from { stroke-dashoffset: 152.0; } to { stroke-dashoffset: 0; } }
.partart .s0-gwall { stroke-dasharray: 50.2 81.8; }
.partart .s0-gwall { animation: s0Gwall 8.80s linear 0.50s infinite; }
@keyframes s0Gwall { from { stroke-dashoffset: 132.0; } to { stroke-dashoffset: 0; } }
.partart .s0-rut { stroke-dasharray: 45.2 180.8; }
.partart .s0-rut { animation: s0Rut 6.60s linear 0.20s infinite; }
@keyframes s0Rut { from { stroke-dashoffset: 226.0; } to { stroke-dashoffset: 0; } }
/* scene 1 -- Book I -- the cottage plan */
.partart .s1-arc { stroke-dasharray: 64.8 205.2; }
.partart .s1-arc { animation: s1Arc 13.00s linear 0.00s infinite; }
@keyframes s1Arc { from { stroke-dashoffset: 270.0; } to { stroke-dashoffset: 0; } }
.partart .s1-divg { transform-box: view-box; transform-origin: 200px 44px; }
.partart .s1-divg { animation: s1Divg 8.20s ease-in-out 0.00s infinite; }
@keyframes s1Divg { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.partart .s1-plan { stroke-dasharray: 184.8 475.2; }
.partart .s1-plan { animation: s1Plan 21.00s linear 0.00s infinite; }
@keyframes s1Plan { from { stroke-dashoffset: 660.0; } to { stroke-dashoffset: 0; } }
.partart .s1-walls { stroke-dasharray: 126.0 294.0; }
.partart .s1-walls { animation: s1Walls 15.40s linear 0.70s infinite; }
@keyframes s1Walls { from { stroke-dashoffset: 420.0; } to { stroke-dashoffset: 0; } }
.partart .s1-flue { stroke-dasharray: 25.2 34.8; }
.partart .s1-flue { animation: s1Flue 8.60s linear 0.00s infinite; }
@keyframes s1Flue { from { stroke-dashoffset: 60.0; } to { stroke-dashoffset: 0; } }
.partart .s1-swing { stroke-dasharray: 14.1 17.9; }
.partart .s1-swing { animation: s1Swing 6.90s linear 0.40s infinite; }
@keyframes s1Swing { from { stroke-dashoffset: 32.0; } to { stroke-dashoffset: 0; } }
/* scene 2 -- Book II -- the microscope */
.partart .s2-field { stroke-dasharray: 77.4 274.6; }
.partart .s2-field { animation: s2Field 19.00s linear 0.00s infinite; }
@keyframes s2Field { from { stroke-dashoffset: 352.0; } to { stroke-dashoffset: 0; } }
.partart .s2-cell0 { animation: s2Cell0 5.30s ease-in-out 0.00s infinite; }
@keyframes s2Cell0 { 0%,100% { opacity: .22; } 50% { opacity: .62; } }
.partart .s2-cell1 { animation: s2Cell1 6.70s ease-in-out 0.70s infinite; }
@keyframes s2Cell1 { 0%,100% { opacity: .22; } 50% { opacity: .62; } }
.partart .s2-cell2 { animation: s2Cell2 8.10s ease-in-out 1.40s infinite; }
@keyframes s2Cell2 { 0%,100% { opacity: .22; } 50% { opacity: .62; } }
.partart .s2-cell3 { animation: s2Cell3 9.50s ease-in-out 2.10s infinite; }
@keyframes s2Cell3 { 0%,100% { opacity: .22; } 50% { opacity: .62; } }
.partart .s2-foot { stroke-dasharray: 42.5 75.5; }
.partart .s2-foot { animation: s2Foot 10.60s linear 0.00s infinite; }
@keyframes s2Foot { from { stroke-dashoffset: 118.0; } to { stroke-dashoffset: 0; } }
.partart .s2-pillar { stroke-dasharray: 15.8 20.2; }
.partart .s2-pillar { animation: s2Pillar 7.20s linear 0.00s infinite; }
@keyframes s2Pillar { from { stroke-dashoffset: 36.0; } to { stroke-dashoffset: 0; } }
.partart .s2-arm { stroke-dasharray: 23.6 38.4; }
.partart .s2-arm { animation: s2Arm 9.80s linear 0.40s infinite; }
@keyframes s2Arm { from { stroke-dashoffset: 62.0; } to { stroke-dashoffset: 0; } }
.partart .s2-tube { stroke-dasharray: 27.2 52.8; }
.partart .s2-tube { animation: s2Tube 12.20s linear 0.50s infinite; }
@keyframes s2Tube { from { stroke-dashoffset: 80.0; } to { stroke-dashoffset: 0; } }
.partart .s2-stage { stroke-dasharray: 45.6 68.4; }
.partart .s2-stage { animation: s2Stage 9.40s linear 0.00s infinite; }
@keyframes s2Stage { from { stroke-dashoffset: 114.0; } to { stroke-dashoffset: 0; } }
.partart .s2-mirg { transform-box: view-box; transform-origin: 200px 522px; }
.partart .s2-mirg { animation: s2Mirg 10.67s ease-in-out 0.00s infinite; }
@keyframes s2Mirg { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
/* scene 3 -- Book III -- the keys and the tin box */
.partart .s3-ring { stroke-dasharray: 32.3 62.7; }
.partart .s3-ring { animation: s3Ring 10.20s linear 0.00s infinite; }
@keyframes s3Ring { from { stroke-dashoffset: 95.0; } to { stroke-dashoffset: 0; } }
.partart .s3-keyg { transform-box: view-box; transform-origin: 200px 44px; }
.partart .s3-keyg { animation: s3Keyg 7.40s ease-in-out 0.00s infinite; }
@keyframes s3Keyg { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
.partart .s3-key0 { animation: s3Key0 5.80s ease-in-out 0.00s infinite; }
@keyframes s3Key0 { 0%,100% { opacity: .34; } 50% { opacity: .74; } }
.partart .s3-key1 { animation: s3Key1 7.47s ease-in-out 0.80s infinite; }
@keyframes s3Key1 { 0%,100% { opacity: .34; } 50% { opacity: .74; } }
.partart .s3-key2 { animation: s3Key2 9.00s ease-in-out 1.60s infinite; }
@keyframes s3Key2 { 0%,100% { opacity: .34; } 50% { opacity: .74; } }
.partart .s3-box { stroke-dasharray: 145.6 374.4; }
.partart .s3-box { animation: s3Box 18.60s linear 0.00s infinite; }
@keyframes s3Box { from { stroke-dashoffset: 520.0; } to { stroke-dashoffset: 0; } }
.partart .s3-lid { stroke-dasharray: 59.0 105.0; }
.partart .s3-lid { animation: s3Lid 11.40s linear 0.60s infinite; }
@keyframes s3Lid { from { stroke-dashoffset: 164.0; } to { stroke-dashoffset: 0; } }
.partart .s3-hole { animation: s3Hole 4.60s ease-in-out 0.00s infinite; }
@keyframes s3Hole { 0%,100% { opacity: .32; } 50% { opacity: .82; } }
/* scene 4 -- Book IV -- the bell-tower and the railings */
.partart .s4-tower { stroke-dasharray: 82.9 213.1; }
.partart .s4-tower { animation: s4Tower 20.00s linear 0.00s infinite; }
@keyframes s4Tower { from { stroke-dashoffset: 296.0; } to { stroke-dashoffset: 0; } }
.partart .s4-louvre { stroke-dasharray: 53.8 114.2; }
.partart .s4-louvre { animation: s4Louvre 13.20s linear 0.50s infinite; }
@keyframes s4Louvre { from { stroke-dashoffset: 168.0; } to { stroke-dashoffset: 0; } }
.partart .s4-bat { stroke-dasharray: 39.2 58.8; }
.partart .s4-bat { animation: s4Bat 9.60s linear 0.00s infinite; }
@keyframes s4Bat { from { stroke-dashoffset: 98.0; } to { stroke-dashoffset: 0; } }
.partart .s4-bellg { transform-box: view-box; transform-origin: 200px 64px; }
.partart .s4-bellg { animation: s4Bellg 6.20s ease-in-out 0.00s infinite; }
@keyframes s4Bellg { 0%,100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
.partart .s4-bars { stroke-dasharray: 224.4 897.6; }
.partart .s4-bars { animation: s4Bars 24.00s linear 0.00s infinite; }
@keyframes s4Bars { from { stroke-dashoffset: 1122.0; } to { stroke-dashoffset: 0; } }
.partart .s4-rail { stroke-dasharray: 91.8 178.2; }
.partart .s4-rail { animation: s4Rail 12.80s linear 0.70s infinite; }
@keyframes s4Rail { from { stroke-dashoffset: 270.0; } to { stroke-dashoffset: 0; } }
/* scene 5 -- Book V -- the library ladder */
.partart .s5-shelf { stroke-dasharray: 86.4 201.6; }
.partart .s5-shelf { animation: s5Shelf 15.00s linear 0.00s infinite; }
@keyframes s5Shelf { from { stroke-dashoffset: 288.0; } to { stroke-dashoffset: 0; } }
.partart .s5-spines { stroke-dasharray: 342.0 1558.0; }
.partart .s5-spines { animation: s5Spines 27.00s linear 0.00s infinite; }
@keyframes s5Spines { from { stroke-dashoffset: 1900.0; } to { stroke-dashoffset: 0; } }
.partart .s5-stile { stroke-dasharray: 85.7 220.3; }
.partart .s5-stile { animation: s5Stile 16.40s linear 0.00s infinite; }
@keyframes s5Stile { from { stroke-dashoffset: 306.0; } to { stroke-dashoffset: 0; } }
.partart .s5-rungs { stroke-dasharray: 85.0 165.0; }
.partart .s5-rungs { animation: s5Rungs 11.60s linear 0.60s infinite; }
@keyframes s5Rungs { from { stroke-dashoffset: 250.0; } to { stroke-dashoffset: 0; } }
.partart .s5-taper { animation: s5Taper 3.90s ease-in-out 0.00s infinite; }
@keyframes s5Taper { 0%,100% { opacity: .30; } 50% { opacity: .84; } }
/* scene 6 -- Book VI -- the avenue of limes */
.partart .s6-verge { stroke-dasharray: 91.2 288.8; }
.partart .s6-verge { animation: s6Verge 16.20s linear 0.00s infinite; }
@keyframes s6Verge { from { stroke-dashoffset: 380.0; } to { stroke-dashoffset: 0; } }
.partart .s6-limes { stroke-dasharray: 148.8 471.2; }
.partart .s6-limes { animation: s6Limes 18.00s linear 0.00s infinite; }
@keyframes s6Limes { from { stroke-dashoffset: 620.0; } to { stroke-dashoffset: 0; } }
.partart .s6-boughs { stroke-dasharray: 154.0 546.0; }
.partart .s6-boughs { animation: s6Boughs 20.40s linear 0.90s infinite; }
@keyframes s6Boughs { from { stroke-dashoffset: 700.0; } to { stroke-dashoffset: 0; } }
.partart .s6-walkL { stroke-dasharray: 39.4 124.6; }
.partart .s6-walkL { animation: s6Walkl 10.80s linear 0.00s infinite; }
@keyframes s6Walkl { from { stroke-dashoffset: 164.0; } to { stroke-dashoffset: 0; } }
.partart .s6-walkR { stroke-dasharray: 39.4 124.6; }
.partart .s6-walkR { animation: s6Walkr 12.00s linear 0.50s infinite; }
@keyframes s6Walkr { from { stroke-dashoffset: 164.0; } to { stroke-dashoffset: 0; } }
.partart .s6-haha { stroke-dasharray: 60.8 99.2; }
.partart .s6-haha { animation: s6Haha 8.80s linear 0.30s infinite; }
@keyframes s6Haha { from { stroke-dashoffset: 160.0; } to { stroke-dashoffset: 0; } }
/* scene 7 -- Book VII -- the billiard table */
.partart .s7-lampg { transform-box: view-box; transform-origin: 200px 20px; }
.partart .s7-lampg { animation: s7Lampg 9.40s ease-in-out 0.00s infinite; }
@keyframes s7Lampg { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.partart .s7-lamp { animation: s7Lamp 5.10s ease-in-out 0.00s infinite; }
@keyframes s7Lamp { 0%,100% { opacity: .34; } 50% { opacity: .78; } }
.partart .s7-table { stroke-dasharray: 191.4 544.6; }
.partart .s7-table { animation: s7Table 22.00s linear 0.00s infinite; }
@keyframes s7Table { from { stroke-dashoffset: 736.0; } to { stroke-dashoffset: 0; } }
.partart .s7-pockets { stroke-dasharray: 90.0 210.0; }
.partart .s7-pockets { animation: s7Pockets 14.60s linear 0.60s infinite; }
@keyframes s7Pockets { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }
.partart .s7-ball0 { animation: s7Ball0 6.60s ease-in-out 0.00s infinite; }
@keyframes s7Ball0 { 0%,100% { opacity: .28; } 50% { opacity: .70; } }
.partart .s7-ball1 { animation: s7Ball1 8.10s ease-in-out 0.60s infinite; }
@keyframes s7Ball1 { 0%,100% { opacity: .28; } 50% { opacity: .70; } }
.partart .s7-ball2 { animation: s7Ball2 9.60s ease-in-out 1.20s infinite; }
@keyframes s7Ball2 { 0%,100% { opacity: .28; } 50% { opacity: .70; } }
.partart .s7-cueg { transform-box: view-box; transform-origin: 206px 462px; }
.partart .s7-cueg { animation: s7Cueg 4.30s ease-in-out 0.00s infinite; }
@keyframes s7Cueg { 0%,100% { transform: translate(-9px, 5px); } 55% { transform: translate(2px, -1px); } }
/* scene 8 -- Book VIII -- the window and the storm */
.partart .s8-win { stroke-dasharray: 104.0 296.0; }
.partart .s8-win { animation: s8Win 21.00s linear 0.00s infinite; }
@keyframes s8Win { from { stroke-dashoffset: 400.0; } to { stroke-dashoffset: 0; } }
.partart .s8-mull { stroke-dasharray: 83.2 176.8; }
.partart .s8-mull { animation: s8Mull 14.20s linear 0.60s infinite; }
@keyframes s8Mull { from { stroke-dashoffset: 260.0; } to { stroke-dashoffset: 0; } }
.partart .s8-bolt { animation: s8Bolt 7.80s ease-in-out 0.00s infinite; }
@keyframes s8Bolt { 0%,86%,100% { opacity: 0; } 88% { opacity: .95; } 90% { opacity: .12; } 93% { opacity: .80; } 96% { opacity: 0; } }
.partart .s8-rain0 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain0 { animation: s8Rain0 2.60s linear 0.00s infinite; }
@keyframes s8Rain0 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain1 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain1 { animation: s8Rain1 2.91s linear 0.17s infinite; }
@keyframes s8Rain1 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain2 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain2 { animation: s8Rain2 3.22s linear 0.34s infinite; }
@keyframes s8Rain2 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain3 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain3 { animation: s8Rain3 3.53s linear 0.51s infinite; }
@keyframes s8Rain3 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain4 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain4 { animation: s8Rain4 3.84s linear 0.68s infinite; }
@keyframes s8Rain4 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain5 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain5 { animation: s8Rain5 4.15s linear 0.85s infinite; }
@keyframes s8Rain5 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-rain6 { stroke-dasharray: 43.8 102.2; }
.partart .s8-rain6 { animation: s8Rain6 4.46s linear 1.02s infinite; }
@keyframes s8Rain6 { from { stroke-dashoffset: 146.0; } to { stroke-dashoffset: 0; } }
.partart .s8-sill { stroke-dasharray: 108.8 211.2; }
.partart .s8-sill { animation: s8Sill 12.40s linear 0.00s infinite; }
@keyframes s8Sill { from { stroke-dashoffset: 320.0; } to { stroke-dashoffset: 0; } }
/* scene 9 -- Finale -- the river in its channels */
.partart .s9-bankL { stroke-dasharray: 33.6 106.4; }
.partart .s9-bankL { animation: s9Bankl 15.00s linear 0.00s infinite; }
@keyframes s9Bankl { from { stroke-dashoffset: 140.0; } to { stroke-dashoffset: 0; } }
.partart .s9-bankR { stroke-dasharray: 33.6 106.4; }
.partart .s9-bankR { animation: s9Bankr 16.80s linear 0.80s infinite; }
@keyframes s9Bankr { from { stroke-dashoffset: 140.0; } to { stroke-dashoffset: 0; } }
.partart .s9-rip0 { animation: s9Rip0 5.40s ease-in-out 0.00s infinite; }
@keyframes s9Rip0 { 0%,100% { opacity: .16; } 50% { opacity: .58; } }
.partart .s9-rip1 { animation: s9Rip1 6.67s ease-in-out 0.55s infinite; }
@keyframes s9Rip1 { 0%,100% { opacity: .16; } 50% { opacity: .58; } }
.partart .s9-rip2 { animation: s9Rip2 7.94s ease-in-out 1.10s infinite; }
@keyframes s9Rip2 { 0%,100% { opacity: .16; } 50% { opacity: .58; } }
.partart .s9-rip3 { animation: s9Rip3 9.21s ease-in-out 1.65s infinite; }
@keyframes s9Rip3 { 0%,100% { opacity: .16; } 50% { opacity: .58; } }
.partart .s9-chan0 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan0 { animation: s9Chan0 9.20s linear 0.00s infinite; }
@keyframes s9Chan0 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
.partart .s9-chan1 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan1 { animation: s9Chan1 10.33s linear 0.42s infinite; }
@keyframes s9Chan1 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
.partart .s9-chan2 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan2 { animation: s9Chan2 11.46s linear 0.84s infinite; }
@keyframes s9Chan2 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
.partart .s9-chan3 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan3 { animation: s9Chan3 12.59s linear 1.26s infinite; }
@keyframes s9Chan3 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
.partart .s9-chan4 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan4 { animation: s9Chan4 13.72s linear 1.68s infinite; }
@keyframes s9Chan4 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
.partart .s9-chan5 { stroke-dasharray: 34.8 123.2; }
.partart .s9-chan5 { animation: s9Chan5 14.85s linear 2.10s infinite; }
@keyframes s9Chan5 { from { stroke-dashoffset: 158.0; } to { stroke-dashoffset: 0; } }
/* middlemarch cover. Scoped under .cover-front. */
/* The reset every illustrated cover needs. Without it the engine
keeps its own 3px double gold border at inset 7%, which the
600x820 artwork overflows, and keeps rendering .cover-sub from
the book config, whose -joined words cannot wrap and run
off both edges. The SVG sets its own lettering. */
.cover-front .cover-frame { padding: 0; border: 0; }
.cover-front .cover-title { width: 100%; font-size: 1em; letter-spacing: 0; text-shadow: none; }
.cover-front svg.cvsvg { width: 100%; height: auto; display: block; }
.cover-front .cover-orn, .cover-front .cover-sub, .cover-front .cover-author { display: none; }
/* The engine also stamps an embossed border of its own on every
cover: .cover-inner::before repeats a diamond band along all
four edges at 2.2% inset, and ::after sets rosettes in the four
corners at 1.4%. Both are drawn as a dark copy offset against a
light one -- the emboss technique. On a full-bleed illustration
that reads as a frame the art is trapped inside, so it is off
here. The back cover keeps it. */
.cover-front .cover-inner::before,
.cover-front .cover-inner::after { display: none; }
.cover-front .cvsvg text { font-family: Georgia,'Times New Roman',serif; text-anchor: middle; }
.cover-front, .cover-back { background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.05), rgba(255,255,255,0) 55%), linear-gradient(135deg, #061c24 0%, #17454e 52%, #061c24 100%); }
.cover-front .mmscr0 { animation: mmScr0 7.30s ease-in-out 0.00s infinite; }
@keyframes mmScr0 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr1 { animation: mmScr1 8.49s ease-in-out 0.41s infinite; }
@keyframes mmScr1 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr2 { animation: mmScr2 9.68s ease-in-out 0.82s infinite; }
@keyframes mmScr2 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr3 { animation: mmScr3 10.87s ease-in-out 1.23s infinite; }
@keyframes mmScr3 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr4 { animation: mmScr4 12.06s ease-in-out 1.64s infinite; }
@keyframes mmScr4 { 0%,100% { stroke-opacity: .34; } 50% { stroke-opacity: .86; } }
.cover-front .mmscr5 { animation: mmScr5 13.25s ease-in-out 2.05s infinite; }
@keyframes mmScr5 { 0%,100% { stroke-opacity: .34; } 50% { stroke-opacity: .86; } }
.cover-front .mmscr6 { animation: mmScr6 14.44s ease-in-out 2.46s infinite; }
@keyframes mmScr6 { 0%,100% { stroke-opacity: .34; } 50% { stroke-opacity: .86; } }
.cover-front .mmscr7 { animation: mmScr7 15.63s ease-in-out 2.87s infinite; }
@keyframes mmScr7 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr8 { animation: mmScr8 16.82s ease-in-out 3.28s infinite; }
@keyframes mmScr8 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr9 { animation: mmScr9 18.01s ease-in-out 3.69s infinite; }
@keyframes mmScr9 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr10 { animation: mmScr10 19.20s ease-in-out 4.10s infinite; }
@keyframes mmScr10 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmscr11 { animation: mmScr11 20.39s ease-in-out 4.51s infinite; }
@keyframes mmScr11 { 0%,100% { stroke-opacity: .14; } 50% { stroke-opacity: .36; } }
.cover-front .mmring0 { animation: mmRing0 5.60s ease-in-out 0.00s infinite; }
@keyframes mmRing0 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring0 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmring1 { animation: mmRing1 6.97s ease-in-out 0.63s infinite; }
@keyframes mmRing1 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring1 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmring2 { animation: mmRing2 8.34s ease-in-out 1.26s infinite; }
@keyframes mmRing2 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring2 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmring3 { animation: mmRing3 9.71s ease-in-out 1.89s infinite; }
@keyframes mmRing3 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring3 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmring4 { animation: mmRing4 11.08s ease-in-out 2.52s infinite; }
@keyframes mmRing4 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring4 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmring5 { animation: mmRing5 12.45s ease-in-out 3.15s infinite; }
@keyframes mmRing5 { 0%,100% { stroke-opacity: .18; transform: rotate(0deg); } 50% { stroke-opacity: .60; transform: rotate(3deg); } }
.cover-front .mmring5 { transform-box: view-box; transform-origin: 300.0px 392.0px; }
.cover-front .mmdrip { animation: mmDrip 11.90s ease-in-out 0.90s infinite; }
@keyframes mmDrip { 0%,100% { stroke-opacity: .22; } 50% { stroke-opacity: .52; } }
.cover-front .mmshine { animation: mmShine 9.10s ease-in-out 0.40s infinite; }
@keyframes mmShine { 0%,100% { stroke-opacity: .10; } 50% { stroke-opacity: .30; } }
.cover-front .mmember { animation: mmEmber 3.70s ease-in-out 0.00s infinite; }
@keyframes mmEmber { 0%,100% { fill-opacity: .40; } 50% { fill-opacity: 1; } }
.cover-front .mmflame { transform-box: view-box; transform-origin: 300.0px 452px; }
.cover-front .mmflame { animation: mmFlame 4.30s ease-in-out 0.00s infinite; }
@keyframes mmFlame { 0%,100% { transform: rotate(-2.2deg) scaleY(1); } 38% { transform: rotate(1.6deg) scaleY(1.06); } 70% { transform: rotate(-0.8deg) scaleY(.97); } }
.cover-front .mmhalo { animation: mmHalo 4.30s ease-out 0.00s infinite; }
@keyframes mmHalo { 0%,100% { opacity: .62; } 38% { opacity: 1; } 70% { opacity: .74; } }
.cover-front .mmpool { animation: mmPool 4.30s ease-out 0.00s infinite; }
@keyframes mmPool { 0%,100% { opacity: .70; } 38% { opacity: 1; } 70% { opacity: .80; } }
.cover-front .mmmote0 { animation: mmMote0 6.10s ease-in-out 0.00s infinite; }
@keyframes mmMote0 { 0%,100% { transform: translate(0,0); fill-opacity: .16; } 50% { transform: translate(11.0px,-11.6px); fill-opacity: .62; } }
.cover-front .mmmote0 { transform-box: view-box; }
.cover-front .mmmote1 { animation: mmMote1 7.83s ease-in-out 0.87s infinite; }
@keyframes mmMote1 { 0%,100% { transform: translate(0,0); fill-opacity: .16; } 50% { transform: translate(10.9px,-13.3px); fill-opacity: .62; } }
.cover-front .mmmote1 { transform-box: view-box; }
.cover-front .mmmote2 { animation: mmMote2 9.56s ease-in-out 1.74s infinite; }
@keyframes mmMote2 { 0%,100% { transform: translate(0,0); fill-opacity: .16; } 50% { transform: translate(-10.9px,-17.8px); fill-opacity: .62; } }
.cover-front .mmmote2 { transform-box: view-box; }
.cover-front .mmmote3 { animation: mmMote3 11.29s ease-in-out 2.61s infinite; }
@keyframes mmMote3 { 0%,100% { transform: translate(0,0); fill-opacity: .16; } 50% { transform: translate(-8.8px,-8.1px); fill-opacity: .62; } }
.cover-front .mmmote3 { transform-box: view-box; }
.cover-front .t0 { opacity:0; animation: cvT0 1.00s cubic-bezier(.22,.9,.3,1) 0.28s both; }
@keyframes cvT0 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .byl { opacity:0; animation: cvByl 1.20s ease-out 1.08s both; }
@keyframes cvByl { from { opacity:0; } to { opacity:1; } }
.cover-front .ftr { opacity:0; animation: cvFtr 1.20s ease-out 3.00s both; }
@keyframes cvFtr { from { opacity:0; } to { opacity:1; } }