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;
}
/* A CAPTIONED PLATE. The uncaptioned rules above are left exactly as they
were; these only take effect when the block carries a caption, so the
plates in the two earlier books render identically. The figure becomes
the flex child and stacks picture over caption, and the picture's own
max-height is reduced to leave the caption room on the leaf. */
.fullimg.hascap figure {
margin: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center;
max-width: 100%; max-height: 100%;
}
.fullimg.hascap img { max-height: 86%; }
.platecap {
margin-top: .9em; padding: 0 4%;
text-align: center; font-style: italic;
font-family: Georgia,'Palatino Linotype',serif;
font-size: .84em; line-height: 1.45; color: #6b5a3e;
}
.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; }
/* A SECTION HEAD -- the third level of division, added for The Theory of
Moral Sentiments, which sets Part over Section over Chapter. It has to read
as LARGER than a chapter head and SMALLER than a Part leaf, and the way it
does that is by being ruled rather than by being loud: rules above and
below mark it as a boundary, while the type stays close to the chapter
head's size so the page does not acquire a second shouting voice. */
.sect {
margin: 1.6em 4% 1.4em; text-align: center;
border-top: 1.2px solid #c3b291;
border-bottom: 1.2px solid #c3b291;
padding: .55em 0 .6em;
}
.sect-num {
display: block; font-variant: small-caps; letter-spacing: .16em;
font-size: .82em; color: #8a7350; margin-bottom: .18em;
}
.sect-ttl {
display: block; font-style: italic; font-size: 1.02em;
line-height: 1.45; color: #4a3b28;
}
/* AN EPIGRAPH WITH ITS SOURCE, SET AS ONE OBJECT. Udolpho heads every one of
its 57 chapters with a quotation and names the poet under it, and eight more
stand inside the prose. The lines are centred italic like .verse; the rule
beneath is what separates the quotation from the chapter it stands over, and
the source is set small and spaced so that it reads as a signature rather
than as a last line of the poem. Measured as one block by the paginator, so
a poet is never left stranded at the top of the following page. */
.motto {
margin: 1.15em 8% 1.6em;
text-indent: 0;
}
.motto-v {
text-align: center; font-style: italic;
font-size: .93em; line-height: 1.6; color: #4a3b28;
}
.motto-src {
margin-top: .45em; padding-top: .4em;
border-top: 1px solid rgba(150,124,74,.42);
text-align: center; font-style: normal;
font-variant: small-caps; letter-spacing: .15em; text-indent: .15em;
font-size: .74em; color: #8a7350;
}
/* Directly under a chapter head the motto wants a little more air above it and
a shade less below, so the quotation sits with the heading rather than
floating between the heading and the first paragraph. */
.chead + .motto { margin-top: 1.5em; margin-bottom: 1.9em; }
/* ---------- per-page drawings ---------- */
/* The drawing fills the stage and sits under the type; the type's
own z-index keeps it on top. */
.chapanim svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scene 0 -- the breakfast tray, and the men who ate it */
.chapanim .s0-tray { stroke-dasharray: 314.4 471.5; }
.chapanim .s0-tray { animation: s0Tray 12.70s linear 0.00s infinite; }
@keyframes s0Tray { from { stroke-dashoffset: 785.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-cup { stroke-dasharray: 93.4 140.1; }
.chapanim .s0-cup { animation: s0Cup 16.10s linear 0.80s infinite; }
@keyframes s0Cup { from { stroke-dashoffset: 233.6; } to { stroke-dashoffset: 0; } }
.chapanim .s0-saucer { stroke-dasharray: 48.7 73.0; }
.chapanim .s0-saucer { animation: s0Saucer 20.30s linear 1.60s infinite; }
@keyframes s0Saucer { from { stroke-dashoffset: 121.7; } to { stroke-dashoffset: 0; } }
.chapanim .s0-handle { stroke-dasharray: 33.9 50.9; }
.chapanim .s0-handle { animation: s0Handle 25.10s linear 2.40s infinite; }
@keyframes s0Handle { from { stroke-dashoffset: 84.9; } to { stroke-dashoffset: 0; } }
.chapanim .s0-pot { stroke-dasharray: 92.3 138.4; }
.chapanim .s0-pot { animation: s0Pot 29.70s linear 3.20s infinite; }
@keyframes s0Pot { from { stroke-dashoffset: 230.7; } to { stroke-dashoffset: 0; } }
.chapanim .s0-lid { stroke-dasharray: 33.5 50.2; }
.chapanim .s0-lid { animation: s0Lid 34.30s linear 4.00s infinite; }
@keyframes s0Lid { from { stroke-dashoffset: 83.7; } to { stroke-dashoffset: 0; } }
.chapanim .s0-knob { stroke-dasharray: 28.6 42.9; }
.chapanim .s0-knob { animation: s0Knob 39.10s linear 4.80s infinite; }
@keyframes s0Knob { from { stroke-dashoffset: 71.6; } to { stroke-dashoffset: 0; } }
.chapanim .s0-crumb { stroke-dasharray: 15.9 23.9; }
.chapanim .s0-crumb { animation: s0Crumb 13.07s linear 5.60s infinite; }
@keyframes s0Crumb { from { stroke-dashoffset: 39.8; } to { stroke-dashoffset: 0; } }
/* scene 1 -- the examining magistrate's warped little notebook */
.chapanim .s1-cover { stroke-dasharray: 466.4 699.7; }
.chapanim .s1-cover { animation: s1Cover 12.77s linear 0.00s infinite; }
@keyframes s1Cover { from { stroke-dashoffset: 1166.1; } to { stroke-dashoffset: 0; } }
.chapanim .s1-leaves { stroke-dasharray: 116.8 175.2; }
.chapanim .s1-leaves { animation: s1Leaves 16.17s linear 0.80s infinite; }
@keyframes s1Leaves { from { stroke-dashoffset: 291.9; } to { stroke-dashoffset: 0; } }
.chapanim .s1-warpA { stroke-dasharray: 119.1 178.7; }
.chapanim .s1-warpA { animation: s1Warpa 20.37s linear 1.60s infinite; }
@keyframes s1Warpa { from { stroke-dashoffset: 297.8; } to { stroke-dashoffset: 0; } }
.chapanim .s1-warpB { stroke-dasharray: 119.0 178.5; }
.chapanim .s1-warpB { animation: s1Warpb 25.17s linear 2.40s infinite; }
@keyframes s1Warpb { from { stroke-dashoffset: 297.5; } to { stroke-dashoffset: 0; } }
.chapanim .s1-ruled { stroke-dasharray: 588.5 882.7; }
.chapanim .s1-ruled { animation: s1Ruled 29.77s linear 3.20s infinite; }
@keyframes s1Ruled { from { stroke-dashoffset: 1471.2; } to { stroke-dashoffset: 0; } }
.chapanim .s1-blot { stroke-dasharray: 41.8 62.7; }
.chapanim .s1-blot { animation: s1Blot 34.37s linear 4.00s infinite; }
@keyframes s1Blot { from { stroke-dashoffset: 104.5; } to { stroke-dashoffset: 0; } }
/* scene 2 -- the wooden stair to the court offices, and its notice */
.chapanim .s2-flight { stroke-dasharray: 199.7 299.5; }
.chapanim .s2-flight { animation: s2Flight 12.84s linear 0.00s infinite; }
@keyframes s2Flight { from { stroke-dashoffset: 499.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-string { stroke-dasharray: 141.3 211.9; }
.chapanim .s2-string { animation: s2String 16.24s linear 0.80s infinite; }
@keyframes s2String { from { stroke-dashoffset: 353.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-rail { stroke-dasharray: 141.3 211.9; }
.chapanim .s2-rail { animation: s2Rail 20.44s linear 1.60s infinite; }
@keyframes s2Rail { from { stroke-dashoffset: 353.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-post0 { stroke-dasharray: 16.3 24.5; }
.chapanim .s2-post0 { animation: s2Post0 25.24s linear 2.40s infinite; }
@keyframes s2Post0 { from { stroke-dashoffset: 40.8; } to { stroke-dashoffset: 0; } }
.chapanim .s2-post1 { stroke-dasharray: 16.3 24.5; }
.chapanim .s2-post1 { animation: s2Post1 29.84s linear 3.20s infinite; }
@keyframes s2Post1 { from { stroke-dashoffset: 40.8; } to { stroke-dashoffset: 0; } }
.chapanim .s2-post2 { stroke-dasharray: 16.3 24.5; }
.chapanim .s2-post2 { animation: s2Post2 34.44s linear 4.00s infinite; }
@keyframes s2Post2 { from { stroke-dashoffset: 40.8; } to { stroke-dashoffset: 0; } }
.chapanim .s2-notice { stroke-dasharray: 122.9 184.3; }
.chapanim .s2-notice { animation: s2Notice 39.17s linear 4.80s infinite; }
@keyframes s2Notice { from { stroke-dashoffset: 307.2; } to { stroke-dashoffset: 0; } }
.chapanim .s2-noticeln { stroke-dasharray: 83.5 125.3; }
.chapanim .s2-noticeln { animation: s2Noticeln 13.14s linear 5.60s infinite; }
@keyframes s2Noticeln { from { stroke-dashoffset: 208.8; } to { stroke-dashoffset: 0; } }
/* scene 3 -- the long dining table that fills the room */
.chapanim .s3-top { stroke-dasharray: 272.1 408.1; }
.chapanim .s3-top { animation: s3Top 12.91s linear 0.00s infinite; }
@keyframes s3Top { from { stroke-dashoffset: 680.2; } to { stroke-dashoffset: 0; } }
.chapanim .s3-legL { stroke-dasharray: 62.7 94.1; }
.chapanim .s3-legL { animation: s3Legl 16.31s linear 0.80s infinite; }
@keyframes s3Legl { from { stroke-dashoffset: 156.9; } to { stroke-dashoffset: 0; } }
.chapanim .s3-legR { stroke-dasharray: 62.7 94.1; }
.chapanim .s3-legR { animation: s3Legr 20.51s linear 1.60s infinite; }
@keyframes s3Legr { from { stroke-dashoffset: 156.9; } to { stroke-dashoffset: 0; } }
.chapanim .s3-legM { stroke-dasharray: 62.7 94.1; }
.chapanim .s3-legM { animation: s3Legm 25.31s linear 2.40s infinite; }
@keyframes s3Legm { from { stroke-dashoffset: 156.9; } to { stroke-dashoffset: 0; } }
.chapanim .s3-plate0 { stroke-dasharray: 36.0 54.0; }
.chapanim .s3-plate0 { animation: s3Plate0 29.91s linear 3.20s infinite; }
@keyframes s3Plate0 { from { stroke-dashoffset: 90.1; } to { stroke-dashoffset: 0; } }
.chapanim .s3-plate1 { stroke-dasharray: 36.0 54.0; }
.chapanim .s3-plate1 { animation: s3Plate1 34.51s linear 4.00s infinite; }
@keyframes s3Plate1 { from { stroke-dashoffset: 90.1; } to { stroke-dashoffset: 0; } }
.chapanim .s3-plate2 { stroke-dasharray: 36.0 54.0; }
.chapanim .s3-plate2 { animation: s3Plate2 39.24s linear 4.80s infinite; }
@keyframes s3Plate2 { from { stroke-dashoffset: 90.1; } to { stroke-dashoffset: 0; } }
.chapanim .s3-plate3 { stroke-dasharray: 36.0 54.0; }
.chapanim .s3-plate3 { animation: s3Plate3 13.21s linear 5.60s infinite; }
@keyframes s3Plate3 { from { stroke-dashoffset: 90.1; } to { stroke-dashoffset: 0; } }
.chapanim .s3-plate4 { stroke-dasharray: 36.0 54.0; }
.chapanim .s3-plate4 { animation: s3Plate4 16.47s linear 6.40s infinite; }
@keyframes s3Plate4 { from { stroke-dashoffset: 90.1; } to { stroke-dashoffset: 0; } }
.chapanim .s3-window { stroke-dasharray: 127.1 190.6; }
.chapanim .s3-window { animation: s3Window 20.67s linear 7.20s infinite; }
@keyframes s3Window { from { stroke-dashoffset: 317.6; } to { stroke-dashoffset: 0; } }
.chapanim .s3-sash { stroke-dasharray: 32.9 49.4; }
.chapanim .s3-sash { animation: s3Sash 25.47s linear 8.00s infinite; }
@keyframes s3Sash { from { stroke-dashoffset: 82.4; } to { stroke-dashoffset: 0; } }
/* scene 4 -- the lumber-room: old forms and toppled ink-bottles */
.chapanim .s4-stack { stroke-dasharray: 235.3 353.0; }
.chapanim .s4-stack { animation: s4Stack 12.98s linear 0.00s infinite; }
@keyframes s4Stack { from { stroke-dashoffset: 588.3; } to { stroke-dashoffset: 0; } }
.chapanim .s4-sheets { stroke-dasharray: 557.6 836.3; }
.chapanim .s4-sheets { animation: s4Sheets 16.38s linear 0.80s infinite; }
@keyframes s4Sheets { from { stroke-dashoffset: 1393.9; } to { stroke-dashoffset: 0; } }
.chapanim .s4-bottleA { stroke-dasharray: 91.1 136.7; }
.chapanim .s4-bottleA { animation: s4Bottlea 20.58s linear 1.60s infinite; }
@keyframes s4Bottlea { from { stroke-dashoffset: 227.8; } to { stroke-dashoffset: 0; } }
.chapanim .s4-neckA { stroke-dasharray: 38.6 58.0; }
.chapanim .s4-neckA { animation: s4Necka 25.38s linear 2.40s infinite; }
@keyframes s4Necka { from { stroke-dashoffset: 96.6; } to { stroke-dashoffset: 0; } }
.chapanim .s4-bottleB { stroke-dasharray: 61.2 91.8; }
.chapanim .s4-bottleB { animation: s4Bottleb 29.98s linear 3.20s infinite; }
@keyframes s4Bottleb { from { stroke-dashoffset: 153.0; } to { stroke-dashoffset: 0; } }
.chapanim .s4-spill { stroke-dasharray: 55.2 82.7; }
.chapanim .s4-spill { animation: s4Spill 34.58s linear 4.00s infinite; }
@keyframes s4Spill { from { stroke-dashoffset: 137.9; } to { stroke-dashoffset: 0; } }
.chapanim .s4-sill { stroke-dasharray: 144.0 216.0; }
.chapanim .s4-sill { animation: s4Sill 39.31s linear 4.80s infinite; }
@keyframes s4Sill { from { stroke-dashoffset: 360.0; } to { stroke-dashoffset: 0; } }
/* scene 5 -- the uncle's crushed Panama hat */
.chapanim .s5-brim { stroke-dasharray: 319.5 479.2; }
.chapanim .s5-brim { animation: s5Brim 13.05s linear 0.00s infinite; }
@keyframes s5Brim { from { stroke-dashoffset: 798.7; } to { stroke-dashoffset: 0; } }
.chapanim .s5-crown { stroke-dasharray: 174.6 261.8; }
.chapanim .s5-crown { animation: s5Crown 16.45s linear 0.80s infinite; }
@keyframes s5Crown { from { stroke-dashoffset: 436.4; } to { stroke-dashoffset: 0; } }
.chapanim .s5-dent { stroke-dasharray: 69.2 103.8; }
.chapanim .s5-dent { animation: s5Dent 20.65s linear 1.60s infinite; }
@keyframes s5Dent { from { stroke-dashoffset: 172.9; } to { stroke-dashoffset: 0; } }
.chapanim .s5-band { stroke-dasharray: 87.1 130.7; }
.chapanim .s5-band { animation: s5Band 25.45s linear 2.40s infinite; }
@keyframes s5Band { from { stroke-dashoffset: 217.8; } to { stroke-dashoffset: 0; } }
.chapanim .s5-bandlo { stroke-dasharray: 87.0 130.5; }
.chapanim .s5-bandlo { animation: s5Bandlo 30.05s linear 3.20s infinite; }
@keyframes s5Bandlo { from { stroke-dashoffset: 217.5; } to { stroke-dashoffset: 0; } }
.chapanim .s5-edge { stroke-dasharray: 287.4 431.1; }
.chapanim .s5-edge { animation: s5Edge 34.65s linear 4.00s infinite; }
@keyframes s5Edge { from { stroke-dashoffset: 718.5; } to { stroke-dashoffset: 0; } }
/* scene 6 -- three heath landscapes, and all three the same */
.chapanim .s6-frame0 { stroke-dasharray: 213.5 320.2; }
.chapanim .s6-frame0 { animation: s6Frame0 13.12s linear 0.00s infinite; }
@keyframes s6Frame0 { from { stroke-dashoffset: 533.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-sun0 { stroke-dasharray: 39.9 59.8; }
.chapanim .s6-sun0 { animation: s6Sun0 16.52s linear 0.80s infinite; }
@keyframes s6Sun0 { from { stroke-dashoffset: 99.7; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeA0 { stroke-dasharray: 29.7 44.5; }
.chapanim .s6-treeA0 { animation: s6Treea0 20.72s linear 1.60s infinite; }
@keyframes s6Treea0 { from { stroke-dashoffset: 74.1; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeB0 { stroke-dasharray: 33.0 49.6; }
.chapanim .s6-treeB0 { animation: s6Treeb0 25.52s linear 2.40s infinite; }
@keyframes s6Treeb0 { from { stroke-dashoffset: 82.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-grass0 { stroke-dasharray: 39.2 58.8; }
.chapanim .s6-grass0 { animation: s6Grass0 30.12s linear 3.20s infinite; }
@keyframes s6Grass0 { from { stroke-dashoffset: 98.1; } to { stroke-dashoffset: 0; } }
.chapanim .s6-frame1 { stroke-dasharray: 213.5 320.2; }
.chapanim .s6-frame1 { animation: s6Frame1 34.72s linear 4.00s infinite; }
@keyframes s6Frame1 { from { stroke-dashoffset: 533.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-sun1 { stroke-dasharray: 39.9 59.8; }
.chapanim .s6-sun1 { animation: s6Sun1 39.38s linear 4.80s infinite; }
@keyframes s6Sun1 { from { stroke-dashoffset: 99.7; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeA1 { stroke-dasharray: 29.7 44.5; }
.chapanim .s6-treeA1 { animation: s6Treea1 13.28s linear 5.60s infinite; }
@keyframes s6Treea1 { from { stroke-dashoffset: 74.1; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeB1 { stroke-dasharray: 33.0 49.6; }
.chapanim .s6-treeB1 { animation: s6Treeb1 16.54s linear 6.40s infinite; }
@keyframes s6Treeb1 { from { stroke-dashoffset: 82.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-grass1 { stroke-dasharray: 39.2 58.8; }
.chapanim .s6-grass1 { animation: s6Grass1 20.74s linear 7.20s infinite; }
@keyframes s6Grass1 { from { stroke-dashoffset: 98.1; } to { stroke-dashoffset: 0; } }
.chapanim .s6-frame2 { stroke-dasharray: 213.5 320.2; }
.chapanim .s6-frame2 { animation: s6Frame2 25.54s linear 8.00s infinite; }
@keyframes s6Frame2 { from { stroke-dashoffset: 533.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-sun2 { stroke-dasharray: 39.9 59.8; }
.chapanim .s6-sun2 { animation: s6Sun2 30.07s linear 8.80s infinite; }
@keyframes s6Sun2 { from { stroke-dashoffset: 99.7; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeA2 { stroke-dasharray: 29.7 44.5; }
.chapanim .s6-treeA2 { animation: s6Treea2 34.67s linear 9.60s infinite; }
@keyframes s6Treea2 { from { stroke-dashoffset: 74.1; } to { stroke-dashoffset: 0; } }
.chapanim .s6-treeB2 { stroke-dasharray: 33.0 49.6; }
.chapanim .s6-treeB2 { animation: s6Treeb2 39.47s linear 10.40s infinite; }
@keyframes s6Treeb2 { from { stroke-dashoffset: 82.6; } to { stroke-dashoffset: 0; } }
.chapanim .s6-grass2 { stroke-dasharray: 39.2 58.8; }
.chapanim .s6-grass2 { animation: s6Grass2 13.44s linear 11.20s infinite; }
@keyframes s6Grass2 { from { stroke-dashoffset: 98.1; } to { stroke-dashoffset: 0; } }
/* scene 7 -- the bed in the maid's room, and the recess at its head */
.chapanim .s7-frame { stroke-dasharray: 318.8 478.1; }
.chapanim .s7-frame { animation: s7Frame 13.19s linear 0.00s infinite; }
@keyframes s7Frame { from { stroke-dashoffset: 796.9; } to { stroke-dashoffset: 0; } }
.chapanim .s7-head { stroke-dasharray: 78.8 118.1; }
.chapanim .s7-head { animation: s7Head 16.59s linear 0.80s infinite; }
@keyframes s7Head { from { stroke-dashoffset: 196.9; } to { stroke-dashoffset: 0; } }
.chapanim .s7-foot { stroke-dasharray: 56.2 84.4; }
.chapanim .s7-foot { animation: s7Foot 20.79s linear 1.60s infinite; }
@keyframes s7Foot { from { stroke-dashoffset: 140.6; } to { stroke-dashoffset: 0; } }
.chapanim .s7-legA { stroke-dasharray: 16.9 25.3; }
.chapanim .s7-legA { animation: s7Lega 25.59s linear 2.40s infinite; }
@keyframes s7Lega { from { stroke-dashoffset: 42.2; } to { stroke-dashoffset: 0; } }
.chapanim .s7-legB { stroke-dasharray: 16.9 25.3; }
.chapanim .s7-legB { animation: s7Legb 30.19s linear 3.20s infinite; }
@keyframes s7Legb { from { stroke-dashoffset: 42.2; } to { stroke-dashoffset: 0; } }
.chapanim .s7-cover { stroke-dasharray: 96.5 144.7; }
.chapanim .s7-cover { animation: s7Cover 34.79s linear 4.00s infinite; }
@keyframes s7Cover { from { stroke-dashoffset: 241.2; } to { stroke-dashoffset: 0; } }
.chapanim .s7-recess { stroke-dasharray: 219.4 329.1; }
.chapanim .s7-recess { animation: s7Recess 39.45s linear 4.80s infinite; }
@keyframes s7Recess { from { stroke-dashoffset: 548.4; } to { stroke-dashoffset: 0; } }
.chapanim .s7-candle { stroke-dasharray: 19.7 29.5; }
.chapanim .s7-candle { animation: s7Candle 13.35s linear 5.60s infinite; }
@keyframes s7Candle { from { stroke-dashoffset: 49.2; } to { stroke-dashoffset: 0; } }
.chapanim .s7-flame { stroke-dasharray: 25.2 37.8; }
.chapanim .s7-flame { animation: s7Flame 16.61s linear 6.40s infinite; }
@keyframes s7Flame { from { stroke-dashoffset: 63.0; } to { stroke-dashoffset: 0; } }
.chapanim .s7-papers { stroke-dasharray: 103.1 154.7; }
.chapanim .s7-papers { animation: s7Papers 20.81s linear 7.20s infinite; }
@keyframes s7Papers { from { stroke-dashoffset: 257.8; } to { stroke-dashoffset: 0; } }
/* scene 8 -- the small side pulpit, too low to stand up in */
.chapanim .s8-pillar { stroke-dasharray: 258.8 388.1; }
.chapanim .s8-pillar { animation: s8Pillar 13.26s linear 0.00s infinite; }
@keyframes s8Pillar { from { stroke-dashoffset: 646.9; } to { stroke-dashoffset: 0; } }
.chapanim .s8-courses { stroke-dasharray: 228.8 343.1; }
.chapanim .s8-courses { animation: s8Courses 16.66s linear 0.80s infinite; }
@keyframes s8Courses { from { stroke-dashoffset: 571.9; } to { stroke-dashoffset: 0; } }
.chapanim .s8-basket { stroke-dasharray: 201.0 301.5; }
.chapanim .s8-basket { animation: s8Basket 20.86s linear 1.60s infinite; }
@keyframes s8Basket { from { stroke-dashoffset: 502.5; } to { stroke-dashoffset: 0; } }
.chapanim .s8-front { stroke-dasharray: 201.8 302.6; }
.chapanim .s8-front { animation: s8Front 25.66s linear 2.40s infinite; }
@keyframes s8Front { from { stroke-dashoffset: 504.4; } to { stroke-dashoffset: 0; } }
.chapanim .s8-rail { stroke-dasharray: 78.8 118.1; }
.chapanim .s8-rail { animation: s8Rail 30.26s linear 3.20s infinite; }
@keyframes s8Rail { from { stroke-dashoffset: 196.9; } to { stroke-dashoffset: 0; } }
.chapanim .s8-corbel { stroke-dasharray: 76.6 114.9; }
.chapanim .s8-corbel { animation: s8Corbel 34.86s linear 4.00s infinite; }
@keyframes s8Corbel { from { stroke-dashoffset: 191.5; } to { stroke-dashoffset: 0; } }
.chapanim .s8-vault { stroke-dasharray: 88.7 133.1; }
.chapanim .s8-vault { animation: s8Vault 39.52s linear 4.80s infinite; }
@keyframes s8Vault { from { stroke-dashoffset: 221.8; } to { stroke-dashoffset: 0; } }
.chapanim .s8-lamp { stroke-dasharray: 30.6 45.9; }
.chapanim .s8-lamp { animation: s8Lamp 13.42s linear 5.60s infinite; }
@keyframes s8Lamp { from { stroke-dashoffset: 76.4; } to { stroke-dashoffset: 0; } }
.chapanim .s8-stem { stroke-dasharray: 10.9 16.3; }
.chapanim .s8-stem { animation: s8Stem 16.68s linear 6.40s infinite; }
@keyframes s8Stem { from { stroke-dashoffset: 27.2; } to { stroke-dashoffset: 0; } }
.chapanim .s8-stair { stroke-dasharray: 51.8 77.6; }
.chapanim .s8-stair { animation: s8Stair 20.88s linear 7.20s infinite; }
@keyframes s8Stair { from { stroke-dashoffset: 129.4; } to { stroke-dashoffset: 0; } }
/* scene 9 -- the window on the top floor, its wings flung open */
.chapanim .s9-frame { stroke-dasharray: 350.5 525.7; }
.chapanim .s9-frame { animation: s9Frame 13.19s linear 0.00s infinite; }
@keyframes s9Frame { from { stroke-dashoffset: 876.1; } to { stroke-dashoffset: 0; } }
.chapanim .s9-sill { stroke-dasharray: 215.1 322.7; }
.chapanim .s9-sill { animation: s9Sill 16.73s linear 0.80s infinite; }
@keyframes s9Sill { from { stroke-dashoffset: 537.8; } to { stroke-dashoffset: 0; } }
.chapanim .s9-wingL { stroke-dasharray: 158.0 237.1; }
.chapanim .s9-wingL { animation: s9Wingl 20.93s linear 1.60s infinite; }
@keyframes s9Wingl { from { stroke-dashoffset: 395.1; } to { stroke-dashoffset: 0; } }
.chapanim .s9-wingR { stroke-dasharray: 158.0 237.1; }
.chapanim .s9-wingR { animation: s9Wingr 25.73s linear 2.40s infinite; }
@keyframes s9Wingr { from { stroke-dashoffset: 395.1; } to { stroke-dashoffset: 0; } }
.chapanim .s9-paneL { stroke-dasharray: 144.0 216.0; }
.chapanim .s9-paneL { animation: s9Panel 30.33s linear 3.20s infinite; }
@keyframes s9Panel { from { stroke-dashoffset: 360.0; } to { stroke-dashoffset: 0; } }
.chapanim .s9-paneR { stroke-dasharray: 144.0 216.0; }
.chapanim .s9-paneR { animation: s9Paner 34.93s linear 4.00s infinite; }
@keyframes s9Paner { from { stroke-dashoffset: 360.0; } to { stroke-dashoffset: 0; } }
.chapanim .s9-dark { stroke-dasharray: 296.7 445.0; }
.chapanim .s9-dark { animation: s9Dark 39.59s linear 4.80s infinite; }
@keyframes s9Dark { from { stroke-dashoffset: 741.7; } to { stroke-dashoffset: 0; } }
.chapanim .s9-glint { stroke-dasharray: 153.1 229.6; }
.chapanim .s9-glint { animation: s9Glint 13.49s linear 5.60s infinite; }
@keyframes s9Glint { from { stroke-dashoffset: 382.7; } to { stroke-dashoffset: 0; } }
/* ---------- The Trial: the drawing above, the title below ----------
The division is made with padding rather than by pinning the label's top
edge. Pinned, a title sets more lines as the measure narrows and grows
downward out of the page, which is clipped stock; centred inside the lower
band it grows in both directions from the middle of the space it has.
These are the longest chapter titles this series has set -- chapter I
carries three parts and their separators, fifty-eight characters in all --
so the type gets more of the page here than in any deck since Oliver. */
.intropage { justify-content: center; padding-top: 62.1%; }
.intropage .intro-label { padding: 0 9%; }
.intropage .il-txt { font-size: 1.14em; line-height: 1.32; }
/* ---------- 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 -- the drawer, the sheets, and the folded note */
.partart .s0-front { stroke-dasharray: 350.9 526.3; }
.partart .s0-front { animation: s0Front 13.70s linear 0.00s infinite; }
@keyframes s0Front { from { stroke-dashoffset: 877.2; } to { stroke-dashoffset: 0; } }
.partart .s0-inside { stroke-dasharray: 325.1 487.6; }
.partart .s0-inside { animation: s0Inside 17.30s linear 0.90s infinite; }
@keyframes s0Inside { from { stroke-dashoffset: 812.7; } to { stroke-dashoffset: 0; } }
.partart .s0-pull { stroke-dasharray: 51.1 76.7; }
.partart .s0-pull { animation: s0Pull 21.90s linear 1.80s infinite; }
@keyframes s0Pull { from { stroke-dashoffset: 127.8; } to { stroke-dashoffset: 0; } }
.partart .s0-sheet0 { stroke-dasharray: 149.7 224.6; }
.partart .s0-sheet0 { animation: s0Sheet0 26.30s linear 2.70s infinite; }
@keyframes s0Sheet0 { from { stroke-dashoffset: 374.3; } to { stroke-dashoffset: 0; } }
.partart .s0-sheet1 { stroke-dasharray: 164.3 246.5; }
.partart .s0-sheet1 { animation: s0Sheet1 31.10s linear 3.60s infinite; }
@keyframes s0Sheet1 { from { stroke-dashoffset: 410.8; } to { stroke-dashoffset: 0; } }
.partart .s0-sheet2 { stroke-dasharray: 142.4 213.6; }
.partart .s0-sheet2 { animation: s0Sheet2 35.90s linear 4.50s infinite; }
@keyframes s0Sheet2 { from { stroke-dashoffset: 356.0; } to { stroke-dashoffset: 0; } }
.partart .s0-ruled { stroke-dasharray: 111.4 167.0; }
.partart .s0-ruled { animation: s0Ruled 40.70s linear 5.40s infinite; }
@keyframes s0Ruled { from { stroke-dashoffset: 278.4; } to { stroke-dashoffset: 0; } }
.partart .s0-note { stroke-dasharray: 133.3 199.9; }
.partart .s0-note { animation: s0Note 14.11s linear 6.30s infinite; }
@keyframes s0Note { from { stroke-dashoffset: 333.2; } to { stroke-dashoffset: 0; } }
.partart .s0-fold { stroke-dasharray: 25.6 38.3; }
.partart .s0-fold { animation: s0Fold 17.71s linear 7.20s infinite; }
@keyframes s0Fold { from { stroke-dashoffset: 63.9; } to { stroke-dashoffset: 0; } }
.partart .s0-lift { stroke-dasharray: 29.4 44.2; }
.partart .s0-lift { animation: s0Lift 22.31s linear 8.10s infinite; }
@keyframes s0Lift { from { stroke-dashoffset: 73.6; } to { stroke-dashoffset: 0; } }
.partart .s0-ink { stroke-dasharray: 48.4 72.6; }
.partart .s0-ink { animation: s0Ink 26.71s linear 9.00s infinite; }
@keyframes s0Ink { from { stroke-dashoffset: 120.9; } to { stroke-dashoffset: 0; } }
/* ---------- The Trial: the Afterword leaf ---------- */
.partart .part-label { padding: 0 10%%; }
/* prozess 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,.055), rgba(255,255,255,0) 55%), linear-gradient(135deg, #2a1430 0%, #3b1f3d 46%, #2a1430 100%); }
.cover-front .pz-glow { animation: pzGlow 19.70s ease-in-out 0.00s infinite; }
@keyframes pzGlow { 0%,100%{opacity:.82} 34%{opacity:1} 62%{opacity:.7} 84%{opacity:.93} }
.cover-front .pz-beam { animation: pzBeam 19.70s ease-out 0.35s infinite; }
@keyframes pzBeam { 0%,100%{opacity:.82} 34%{opacity:1} 62%{opacity:.7} 84%{opacity:.93} }
.cover-front .pz-hall.h0 { animation: pzHall0 13.10s ease-in-out 0.00s infinite; }
@keyframes pzHall0 { 0%,100%{stroke-opacity:.30} 48%{stroke-opacity:.72} }
.cover-front .pz-hall.h1 { animation: pzHall1 16.30s ease-in-out 0.80s infinite; }
@keyframes pzHall1 { 0%,100%{stroke-opacity:.30} 48%{stroke-opacity:.72} }
.cover-front .pz-hall.h2 { animation: pzHall2 21.50s ease-in-out 1.60s infinite; }
@keyframes pzHall2 { 0%,100%{stroke-opacity:.30} 48%{stroke-opacity:.72} }
.cover-front .pz-bead { animation: pzBead 15.30s ease-in-out 0.00s infinite; }
@keyframes pzBead { 0%,100%{opacity:.62} 46%{opacity:1} 76%{opacity:.78} }
.cover-front .pz-sillhi { animation: pzSill 12.70s ease-in-out 0.00s infinite; }
@keyframes pzSill { 0%,100%{stroke-opacity:.35} 50%{stroke-opacity:.8} }
.cover-front .pz-stool { animation: pzStool 24.70s ease-in-out 0.00s infinite; }
@keyframes pzStool { 0%,100%{opacity:1} 50%{opacity:.84} }
.cover-front .pz-floor { animation: pzFloor 26.10s ease-in-out 0.00s infinite; }
@keyframes pzFloor { 0%,100%{stroke-opacity:.5} 50%{stroke-opacity:.3} }
.cover-front .pz-sheen { animation: pzSheen 14.50s ease-in-out 0.00s infinite; }
@keyframes pzSheen { 0%{transform:translateX(0px)} 60%{transform:translateX(1060px)} 100%{transform:translateX(1060px)} }
.cover-front .pz-dust.d0 { animation: pzDust0 17.90s ease-in-out 0.00s infinite; }
@keyframes pzDust0 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.56} 58%{transform:translate(7px,-15px);opacity:.4} 82%{transform:translate(-4px,-26px);opacity:.24} }
.cover-front .pz-dust.d1 { animation: pzDust1 18.90s ease-in-out 1.10s infinite; }
@keyframes pzDust1 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.56} 58%{transform:translate(7px,-15px);opacity:.4} 82%{transform:translate(-4px,-26px);opacity:.24} }
.cover-front .pz-dust.d2 { animation: pzDust2 22.30s ease-in-out 2.20s infinite; }
@keyframes pzDust2 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.56} 58%{transform:translate(7px,-15px);opacity:.4} 82%{transform:translate(-4px,-26px);opacity:.24} }
.cover-front .pz-dust.d3 { animation: pzDust3 25.10s ease-in-out 3.30s infinite; }
@keyframes pzDust3 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.56} 58%{transform:translate(7px,-15px);opacity:.4} 82%{transform:translate(-4px,-26px);opacity:.24} }
.cover-front .pz-dust.d4 { animation: pzDust4 26.90s ease-in-out 4.40s infinite; }
@keyframes pzDust4 { 0%,100%{transform:translate(0px,0px);opacity:.18} 34%{opacity:.56} 58%{transform:translate(7px,-15px);opacity:.4} 82%{transform:translate(-4px,-26px);opacity:.24} }
.cover-front .pz-corner.c0 { animation: pzCorner0 23.90s ease-in-out 0.00s infinite; }
@keyframes pzCorner0 { 0%,100%{opacity:.52} 50%{opacity:1} }
.cover-front .pz-corner.c1 { animation: pzCorner1 27.50s ease-in-out 0.70s infinite; }
@keyframes pzCorner1 { 0%,100%{opacity:.52} 50%{opacity:1} }
.cover-front .pz-corner.c2 { animation: pzCorner2 28.70s ease-in-out 1.40s infinite; }
@keyframes pzCorner2 { 0%,100%{opacity:.52} 50%{opacity:1} }
.cover-front .pz-corner.c3 { animation: pzCorner3 29.90s ease-in-out 2.10s infinite; }
@keyframes pzCorner3 { 0%,100%{opacity:.52} 50%{opacity:1} }
.cover-front .pz-course.c0 { animation: pzCourse0 31.10s ease-in-out 0.00s infinite; }
@keyframes pzCourse0 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.58} }
.cover-front .pz-course.c1 { animation: pzCourse1 32.30s ease-in-out 0.50s infinite; }
@keyframes pzCourse1 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.58} }
.cover-front .pz-course.c2 { animation: pzCourse2 33.50s ease-in-out 1.00s infinite; }
@keyframes pzCourse2 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.58} }
.cover-front .pz-course.c3 { animation: pzCourse3 34.70s ease-in-out 1.50s infinite; }
@keyframes pzCourse3 { 0%,100%{stroke-opacity:.34} 50%{stroke-opacity:.58} }
.cover-front .t0 { opacity:0; animation: cvT0 1.00s cubic-bezier(.22,.9,.3,1) 0.30s both; }
@keyframes cvT0 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .t1 { opacity:0; animation: cvT1 1.00s cubic-bezier(.22,.9,.3,1) 0.50s both; }
@keyframes cvT1 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .rul { opacity:0; animation: cvRule 0.90s ease-out 0.70s both; }
@keyframes cvRule { from { opacity:0; transform:scaleX(.06); } to { opacity:.9; transform:none; } }
.cover-front .rul { transform-origin:center; }
.cover-front .byl { opacity:0; animation: cvByl 1.20s ease-out 2.60s 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; } }
.cover-front .r2 { animation: cvRuleGlow 14.30s ease-in-out 1.40s infinite; }
@keyframes cvRuleGlow { 0%,100% { stroke-opacity:.75; } 50% { stroke-opacity:1; } }
.cover-front .d0 { animation: cvDot0 6.40s ease-in-out 1.10s infinite; }
@keyframes cvDot0 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d1 { animation: cvDot1 7.23s ease-in-out 1.57s infinite; }
@keyframes cvDot1 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d2 { animation: cvDot2 8.06s ease-in-out 2.04s infinite; }
@keyframes cvDot2 { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.cover-front .d3 { animation: cvDot3 8.89s ease-in-out 2.51s infinite; }
@keyframes cvDot3 { 0%,100% { opacity:.6; } 50% { opacity:1; } }