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);
}
/* ---------- a plate that BLEEDS ----------
Opt-in, and only when the block asks for it. Every rule above is left
exactly as it was and none of them is overridden except through the
.bleed class, so the two books already built with mounted plates render
character for character as before.
The difference is what the picture is FOR. A MOUNTED plate is an
illustration laid ON the page with paper showing round it. A BLED plate
IS the page: it runs to all four edges, and the caption therefore has no
paper of its own to stand on, so it has to stand on the picture. Two
consequences follow that the mounted rules never have to deal with.
FIRST, object-fit HAS TO BECOME cover. `contain` fits the whole picture
inside the leaf and leaves bars wherever the proportions disagree -- and
on a bled plate those bars are the one thing the mode exists to abolish.
`cover` fills the leaf and crops the overflow instead. That is a real
cost, paid knowingly: a plate materially wider or narrower than the leaf
loses its edges. The plates this was built for are portraits within a few
per cent of the leaf's own proportion, so the crop is a sliver off the
head and foot and no figure is cut.
SECOND, the caption NEEDS ITS OWN GROUND. Light type over an unknown
picture is legible on one plate and invisible on the next, so the caption
carries a gradient scrim: opaque at the foot, clear a short way up, dark
enough at every point in between that the words hold. The scrim is a
background ON THE CAPTION BOX rather than a separate element, so it can
never drift away from the words it exists to carry. */
.fullimg.bleed { inset: 0; }
.fullimg.bleed figure {
margin: 0; position: absolute; inset: 0;
display: block; max-width: none; max-height: none;
}
.fullimg.bleed img {
width: 100%; height: 100%;
max-width: none; max-height: none;
object-fit: cover; object-position: center;
/* the mount goes with the margin it used to sit in */
background: none; padding: 0; border: 0; box-shadow: none;
}
.fullimg.bleed .platecap {
position: absolute; left: 0; right: 0; bottom: 0;
margin: 0; padding: 2.4em 7% 1.2em;
color: #fdf3df;
text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
background: linear-gradient(to top,
rgba(18, 12, 7, .90) 0%,
rgba(18, 12, 7, .80) 40%,
rgba(18, 12, 7, .44) 72%,
rgba(18, 12, 7, 0) 100%);
}
.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. */
.partart svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* scene 0 -- Part One -- the lamp and the rails */
.partart .s0-post { stroke-dasharray: 45.2 128.8; }
.partart .s0-post { animation: s0Post 13.40s linear 0.00s infinite; }
@keyframes s0Post { from { stroke-dashoffset: 174.0; } to { stroke-dashoffset: 0; } }
.partart .s0-lamp { stroke-dasharray: 57.0 133.0; }
.partart .s0-lamp { animation: s0Lamp 16.10s linear 0.50s infinite; }
@keyframes s0Lamp { from { stroke-dashoffset: 190.0; } to { stroke-dashoffset: 0; } }
.partart .s0-flame { animation: s0Flame 3.10s ease-in-out 0.00s infinite; }
@keyframes s0Flame { 0%,100% { opacity: .30; } 45% { opacity: .78; } }
.partart .s0-sn0 { animation: s0Sn0 4.30s ease-in-out 0.00s infinite; }
@keyframes s0Sn0 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn1 { animation: s0Sn1 4.71s ease-in-out 0.33s infinite; }
@keyframes s0Sn1 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn2 { animation: s0Sn2 5.12s ease-in-out 0.66s infinite; }
@keyframes s0Sn2 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn3 { animation: s0Sn3 5.53s ease-in-out 0.99s infinite; }
@keyframes s0Sn3 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn4 { animation: s0Sn4 5.94s ease-in-out 1.32s infinite; }
@keyframes s0Sn4 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn5 { animation: s0Sn5 6.35s ease-in-out 1.65s infinite; }
@keyframes s0Sn5 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn6 { animation: s0Sn6 6.76s ease-in-out 1.98s infinite; }
@keyframes s0Sn6 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn7 { animation: s0Sn7 7.17s ease-in-out 2.31s infinite; }
@keyframes s0Sn7 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-sn8 { animation: s0Sn8 7.58s ease-in-out 2.64s infinite; }
@keyframes s0Sn8 { from { transform: translate(0,0); opacity: 0; } 18% { opacity: .46; } to { transform: translate(-26px,62px); opacity: 0; } }
.partart .s0-railL { stroke-dasharray: 37.4 132.6; }
.partart .s0-railL { animation: s0Raill 11.20s linear 0.00s infinite; }
@keyframes s0Raill { from { stroke-dashoffset: 170.0; } to { stroke-dashoffset: 0; } }
.partart .s0-railR { stroke-dasharray: 37.4 132.6; }
.partart .s0-railR { animation: s0Railr 12.60s linear 0.70s infinite; }
@keyframes s0Railr { from { stroke-dashoffset: 170.0; } to { stroke-dashoffset: 0; } }
.partart .s0-sl0 { animation: s0Sl0 5.90s ease-in-out 0.00s infinite; }
@keyframes s0Sl0 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl1 { animation: s0Sl1 6.53s ease-in-out 0.24s infinite; }
@keyframes s0Sl1 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl2 { animation: s0Sl2 7.16s ease-in-out 0.48s infinite; }
@keyframes s0Sl2 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl3 { animation: s0Sl3 7.79s ease-in-out 0.72s infinite; }
@keyframes s0Sl3 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl4 { animation: s0Sl4 8.42s ease-in-out 0.96s infinite; }
@keyframes s0Sl4 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl5 { animation: s0Sl5 9.05s ease-in-out 1.20s infinite; }
@keyframes s0Sl5 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s0-sl6 { animation: s0Sl6 9.68s ease-in-out 1.44s infinite; }
@keyframes s0Sl6 { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
/* scene 1 -- Part Two -- the barricade and the ditch */
.partart .s1-rail { stroke-dasharray: 74.9 237.1; }
.partart .s1-rail { animation: s1Rail 14.70s linear 0.00s infinite; }
@keyframes s1Rail { from { stroke-dashoffset: 312.0; } to { stroke-dashoffset: 0; } }
.partart .s1-br0 { animation: s1Br0 6.80s ease-in-out 0.00s infinite; }
@keyframes s1Br0 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br1 { animation: s1Br1 7.24s ease-in-out 0.19s infinite; }
@keyframes s1Br1 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br2 { animation: s1Br2 7.54s ease-in-out 0.38s infinite; }
@keyframes s1Br2 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br3 { animation: s1Br3 7.91s ease-in-out 0.57s infinite; }
@keyframes s1Br3 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br4 { animation: s1Br4 8.28s ease-in-out 0.76s infinite; }
@keyframes s1Br4 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br5 { animation: s1Br5 8.65s ease-in-out 0.95s infinite; }
@keyframes s1Br5 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br6 { animation: s1Br6 9.02s ease-in-out 1.14s infinite; }
@keyframes s1Br6 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br7 { animation: s1Br7 9.39s ease-in-out 1.33s infinite; }
@keyframes s1Br7 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br8 { animation: s1Br8 9.76s ease-in-out 1.52s infinite; }
@keyframes s1Br8 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br9 { animation: s1Br9 10.13s ease-in-out 1.71s infinite; }
@keyframes s1Br9 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br10 { animation: s1Br10 10.50s ease-in-out 1.90s infinite; }
@keyframes s1Br10 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br11 { animation: s1Br11 10.87s ease-in-out 2.09s infinite; }
@keyframes s1Br11 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-br12 { animation: s1Br12 11.24s ease-in-out 2.28s infinite; }
@keyframes s1Br12 { 0%,100% { opacity: .20; } 50% { opacity: .56; } }
.partart .s1-mound { stroke-dasharray: 70.0 280.0; }
.partart .s1-mound { animation: s1Mound 18.30s linear 0.60s infinite; }
@keyframes s1Mound { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s1-ditch { stroke-dasharray: 83.6 296.4; }
.partart .s1-ditch { animation: s1Ditch 15.90s linear 0.00s infinite; }
@keyframes s1Ditch { from { stroke-dashoffset: 380.0; } to { stroke-dashoffset: 0; } }
.partart .s1-wat0 { animation: s1Wat0 4.90s ease-in-out 0.00s infinite; }
@keyframes s1Wat0 { 0%,100% { opacity: .14; } 50% { opacity: .54; } }
.partart .s1-wat1 { animation: s1Wat1 6.21s ease-in-out 0.47s infinite; }
@keyframes s1Wat1 { 0%,100% { opacity: .14; } 50% { opacity: .54; } }
.partart .s1-wat2 { animation: s1Wat2 7.52s ease-in-out 0.94s infinite; }
@keyframes s1Wat2 { 0%,100% { opacity: .14; } 50% { opacity: .54; } }
.partart .s1-hf0 { animation: s1Hf0 7.40s ease-in-out 0.00s infinite; }
@keyframes s1Hf0 { 0%,100% { opacity: .16; } 50% { opacity: .50; } }
.partart .s1-hf1 { animation: s1Hf1 7.93s ease-in-out 0.31s infinite; }
@keyframes s1Hf1 { 0%,100% { opacity: .16; } 50% { opacity: .50; } }
.partart .s1-hf2 { animation: s1Hf2 8.46s ease-in-out 0.62s infinite; }
@keyframes s1Hf2 { 0%,100% { opacity: .16; } 50% { opacity: .50; } }
.partart .s1-hf3 { animation: s1Hf3 8.99s ease-in-out 0.93s infinite; }
@keyframes s1Hf3 { 0%,100% { opacity: .16; } 50% { opacity: .50; } }
/* scene 2 -- Part Three -- the scythe and the swathes */
.partart .s2-snath { stroke-dasharray: 62.4 177.6; }
.partart .s2-snath { animation: s2Snath 13.90s linear 0.00s infinite; }
@keyframes s2Snath { from { stroke-dashoffset: 240.0; } to { stroke-dashoffset: 0; } }
.partart .s2-grip1 { animation: s2Grip1 8.90s ease-in-out 0.00s infinite; }
@keyframes s2Grip1 { 0%,100% { opacity: .22; } 50% { opacity: .58; } }
.partart .s2-grip2 { animation: s2Grip2 9.70s ease-in-out 0.40s infinite; }
@keyframes s2Grip2 { 0%,100% { opacity: .22; } 50% { opacity: .58; } }
.partart .s2-blade { stroke-dasharray: 58.8 151.2; }
.partart .s2-blade { animation: s2Blade 12.10s linear 0.80s infinite; }
@keyframes s2Blade { from { stroke-dashoffset: 210.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw0 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw0 { animation: s2Sw0 10.40s linear 0.00s infinite; }
@keyframes s2Sw0 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw1 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw1 { animation: s2Sw1 11.47s linear 0.38s infinite; }
@keyframes s2Sw1 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw2 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw2 { animation: s2Sw2 12.54s linear 0.76s infinite; }
@keyframes s2Sw2 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw3 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw3 { animation: s2Sw3 13.61s linear 1.14s infinite; }
@keyframes s2Sw3 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw4 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw4 { animation: s2Sw4 14.68s linear 1.52s infinite; }
@keyframes s2Sw4 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
.partart .s2-sw5 { stroke-dasharray: 63.0 287.0; }
.partart .s2-sw5 { animation: s2Sw5 15.75s linear 1.90s infinite; }
@keyframes s2Sw5 { from { stroke-dashoffset: 350.0; } to { stroke-dashoffset: 0; } }
/* scene 3 -- Part Four -- the chalk on the cloth */
.partart .s3-edge { stroke-dasharray: 81.6 258.4; }
.partart .s3-edge { animation: s3Edge 15.30s linear 0.00s infinite; }
@keyframes s3Edge { from { stroke-dashoffset: 340.0; } to { stroke-dashoffset: 0; } }
.partart .s3-rim { animation: s3Rim 11.27s ease-in-out 0.50s infinite; }
@keyframes s3Rim { 0%,100% { opacity: .12; } 50% { opacity: .40; } }
.partart .s3-ck0 { animation: s3Ck0 5.10s ease-in-out 0.00s infinite; }
@keyframes s3Ck0 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck1 { animation: s3Ck1 5.39s ease-in-out 0.42s infinite; }
@keyframes s3Ck1 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck2 { animation: s3Ck2 5.68s ease-in-out 0.84s infinite; }
@keyframes s3Ck2 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck3 { animation: s3Ck3 5.97s ease-in-out 1.26s infinite; }
@keyframes s3Ck3 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck4 { animation: s3Ck4 6.26s ease-in-out 1.68s infinite; }
@keyframes s3Ck4 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck5 { animation: s3Ck5 6.55s ease-in-out 2.10s infinite; }
@keyframes s3Ck5 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck6 { animation: s3Ck6 6.84s ease-in-out 2.52s infinite; }
@keyframes s3Ck6 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck7 { animation: s3Ck7 7.13s ease-in-out 2.94s infinite; }
@keyframes s3Ck7 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck8 { animation: s3Ck8 7.42s ease-in-out 3.36s infinite; }
@keyframes s3Ck8 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck9 { animation: s3Ck9 7.71s ease-in-out 3.78s infinite; }
@keyframes s3Ck9 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-ck10 { animation: s3Ck10 8.00s ease-in-out 4.20s infinite; }
@keyframes s3Ck10 { 0%,100% { opacity: .10; } 40%,60% { opacity: .70; } }
.partart .s3-cl0 { animation: s3Cl0 6.30s ease-in-out 0.60s infinite; }
@keyframes s3Cl0 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl1 { animation: s3Cl1 6.63s ease-in-out 0.97s infinite; }
@keyframes s3Cl1 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl2 { animation: s3Cl2 6.96s ease-in-out 1.34s infinite; }
@keyframes s3Cl2 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl3 { animation: s3Cl3 7.29s ease-in-out 1.71s infinite; }
@keyframes s3Cl3 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl4 { animation: s3Cl4 7.62s ease-in-out 2.08s infinite; }
@keyframes s3Cl4 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl5 { animation: s3Cl5 7.95s ease-in-out 2.45s infinite; }
@keyframes s3Cl5 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl6 { animation: s3Cl6 8.35s ease-in-out 2.82s infinite; }
@keyframes s3Cl6 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl7 { animation: s3Cl7 8.61s ease-in-out 3.19s infinite; }
@keyframes s3Cl7 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-cl8 { animation: s3Cl8 8.94s ease-in-out 3.56s infinite; }
@keyframes s3Cl8 { 0%,100% { opacity: .10; } 40%,60% { opacity: .66; } }
.partart .s3-sweep { stroke-dasharray: 66.0 264.0; }
.partart .s3-sweep { animation: s3Sweep 9.60s linear 0.00s infinite; }
@keyframes s3Sweep { from { stroke-dashoffset: 330.0; } to { stroke-dashoffset: 0; } }
/* scene 4 -- Part Five -- the tapers and the stretcher */
.partart .s4-tap0 { stroke-dasharray: 49.4 140.6; }
.partart .s4-tap0 { animation: s4Tap0 12.90s linear 0.00s infinite; }
@keyframes s4Tap0 { from { stroke-dashoffset: 190.0; } to { stroke-dashoffset: 0; } }
.partart .s4-fl0 { animation: s4Fl0 3.70s ease-in-out 0.00s infinite; }
@keyframes s4Fl0 { 0%,100% { opacity: .28; transform: scaleY(.88); } 45% { opacity: .80; transform: scaleY(1.06); } }
.partart .s4-tap1 { stroke-dasharray: 49.4 140.6; }
.partart .s4-tap1 { animation: s4Tap1 14.31s linear 0.60s infinite; }
@keyframes s4Tap1 { from { stroke-dashoffset: 190.0; } to { stroke-dashoffset: 0; } }
.partart .s4-fl1 { animation: s4Fl1 4.60s ease-in-out 0.50s infinite; }
@keyframes s4Fl1 { 0%,100% { opacity: .28; transform: scaleY(.88); } 45% { opacity: .80; transform: scaleY(1.06); } }
.partart .s4-crown { stroke-dasharray: 54.0 246.0; }
.partart .s4-crown { animation: s4Crown 17.60s linear 0.30s infinite; }
@keyframes s4Crown { from { stroke-dashoffset: 300.0; } to { stroke-dashoffset: 0; } }
.partart .s4-frame { stroke-dasharray: 132.8 531.2; }
.partart .s4-frame { animation: s4Frame 19.80s linear 0.00s infinite; }
@keyframes s4Frame { from { stroke-dashoffset: 664.0; } to { stroke-dashoffset: 0; } }
.partart .s4-barA { animation: s4Bara 8.10s ease-in-out 0.00s infinite; }
@keyframes s4Bara { 0%,100% { opacity: .10; } 50% { opacity: .34; } }
.partart .s4-barB { animation: s4Barb 8.70s ease-in-out 0.60s infinite; }
@keyframes s4Barb { 0%,100% { opacity: .10; } 50% { opacity: .34; } }
/* scene 5 -- Part Six -- the marsh and the flight line */
.partart .s5-flight { stroke-dasharray: 64.0 336.0; }
.partart .s5-flight { animation: s5Flight 10.90s linear 0.00s infinite; }
@keyframes s5Flight { from { stroke-dashoffset: 400.0; } to { stroke-dashoffset: 0; } }
.partart .s5-rd0 { animation: s5Rd0 4.70s ease-in-out 0.00s infinite; }
@keyframes s5Rd0 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-rd1 { animation: s5Rd1 5.13s ease-in-out 0.27s infinite; }
@keyframes s5Rd1 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.partart .s5-rd2 { animation: s5Rd2 5.56s ease-in-out 0.54s infinite; }
@keyframes s5Rd2 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-rd3 { animation: s5Rd3 5.99s ease-in-out 0.81s infinite; }
@keyframes s5Rd3 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.partart .s5-rd4 { animation: s5Rd4 6.42s ease-in-out 1.08s infinite; }
@keyframes s5Rd4 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-rd5 { animation: s5Rd5 6.85s ease-in-out 1.35s infinite; }
@keyframes s5Rd5 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.partart .s5-rd6 { animation: s5Rd6 7.28s ease-in-out 1.62s infinite; }
@keyframes s5Rd6 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-rd7 { animation: s5Rd7 7.78s ease-in-out 1.89s infinite; }
@keyframes s5Rd7 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.partart .s5-rd8 { animation: s5Rd8 8.14s ease-in-out 2.16s infinite; }
@keyframes s5Rd8 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-rd9 { animation: s5Rd9 8.57s ease-in-out 2.43s infinite; }
@keyframes s5Rd9 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(1.6deg); } }
.partart .s5-rd10 { animation: s5Rd10 9.00s ease-in-out 2.70s infinite; }
@keyframes s5Rd10 { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(-1.6deg); } }
.partart .s5-fl0 { animation: s5Fl0 5.50s ease-in-out 0.00s infinite; }
@keyframes s5Fl0 { 0%,100% { opacity: .14; } 50% { opacity: .52; } }
.partart .s5-fl1 { animation: s5Fl1 6.69s ease-in-out 0.51s infinite; }
@keyframes s5Fl1 { 0%,100% { opacity: .14; } 50% { opacity: .52; } }
.partart .s5-fl2 { animation: s5Fl2 7.88s ease-in-out 1.02s infinite; }
@keyframes s5Fl2 { 0%,100% { opacity: .14; } 50% { opacity: .52; } }
.partart .s5-fl3 { animation: s5Fl3 9.07s ease-in-out 1.53s infinite; }
@keyframes s5Fl3 { 0%,100% { opacity: .14; } 50% { opacity: .52; } }
.partart .s5-st0 { animation: s5St0 7.90s ease-in-out 0.00s infinite; }
@keyframes s5St0 { 0%,100% { opacity: .14; } 50% { opacity: .46; } }
.partart .s5-st1 { animation: s5St1 8.51s ease-in-out 0.34s infinite; }
@keyframes s5St1 { 0%,100% { opacity: .14; } 50% { opacity: .46; } }
.partart .s5-st2 { animation: s5St2 9.12s ease-in-out 0.68s infinite; }
@keyframes s5St2 { 0%,100% { opacity: .14; } 50% { opacity: .46; } }
.partart .s5-st3 { animation: s5St3 9.73s ease-in-out 1.02s infinite; }
@keyframes s5St3 { 0%,100% { opacity: .14; } 50% { opacity: .46; } }
.partart .s5-st4 { animation: s5St4 10.34s ease-in-out 1.36s infinite; }
@keyframes s5St4 { 0%,100% { opacity: .14; } 50% { opacity: .46; } }
/* scene 6 -- Part Seven -- the candle and the shadow */
.partart .s6-stick { stroke-dasharray: 28.0 72.0; }
.partart .s6-stick { animation: s6Stick 13.10s linear 0.00s infinite; }
@keyframes s6Stick { from { stroke-dashoffset: 100.0; } to { stroke-dashoffset: 0; } }
.partart .s6-sock { animation: s6Sock 10.10s ease-in-out 0.40s infinite; }
@keyframes s6Sock { 0%,100% { opacity: .18; } 50% { opacity: .54; } }
.partart .s6-wax { stroke-dasharray: 34.3 97.7; }
.partart .s6-wax { animation: s6Wax 14.30s linear 0.50s infinite; }
@keyframes s6Wax { from { stroke-dashoffset: 132.0; } to { stroke-dashoffset: 0; } }
.partart .s6-run { animation: s6Run 12.40s ease-in-out 0.00s infinite; }
@keyframes s6Run { 0%,100% { opacity: .12; } 50% { opacity: .42; } }
.partart .s6-wick { animation: s6Wick 15.20s ease-in-out 0.00s infinite; }
@keyframes s6Wick { 0%,100% { opacity: .22; } 50% { opacity: .56; } }
.partart .s6-fire { animation: s6Fire 2.90s ease-in-out 0.00s infinite; }
@keyframes s6Fire { 0%,100% { opacity: .34; transform: translateX(0) scaleY(.86); } 30% { opacity: .82; transform: translateX(1.4px) scaleY(1.10); } 70% { opacity: .58; transform: translateX(-1.2px) scaleY(.96); } }
.partart .s6-corn { stroke-dasharray: 77.4 274.6; }
.partart .s6-corn { animation: s6Corn 16.80s linear 0.00s infinite; }
@keyframes s6Corn { from { stroke-dashoffset: 352.0; } to { stroke-dashoffset: 0; } }
.partart .s6-cor2 { animation: s6Cor2 9.10s ease-in-out 0.50s infinite; }
@keyframes s6Cor2 { 0%,100% { opacity: .10; } 50% { opacity: .34; } }
.partart .s6-sh0 { stroke-dasharray: 24.0 96.0; }
.partart .s6-sh0 { animation: s6Sh0 6.10s linear 0.00s infinite; }
@keyframes s6Sh0 { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }
.partart .s6-sh1 { stroke-dasharray: 24.0 96.0; }
.partart .s6-sh1 { animation: s6Sh1 7.19s linear 0.44s infinite; }
@keyframes s6Sh1 { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }
.partart .s6-sh2 { stroke-dasharray: 24.0 96.0; }
.partart .s6-sh2 { animation: s6Sh2 8.49s linear 0.88s infinite; }
@keyframes s6Sh2 { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }
.partart .s6-sh3 { stroke-dasharray: 24.0 96.0; }
.partart .s6-sh3 { animation: s6Sh3 9.37s linear 1.32s infinite; }
@keyframes s6Sh3 { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }
.partart .s6-sh4 { stroke-dasharray: 24.0 96.0; }
.partart .s6-sh4 { animation: s6Sh4 10.46s linear 1.76s infinite; }
@keyframes s6Sh4 { from { stroke-dashoffset: 120.0; } to { stroke-dashoffset: 0; } }
/* scene 7 -- Part Eight -- the skeps and the sky */
.partart .s7-cl1 { stroke-dasharray: 72.0 328.0; }
.partart .s7-cl1 { animation: s7Cl1 21.30s linear 0.00s infinite; }
@keyframes s7Cl1 { from { stroke-dashoffset: 400.0; } to { stroke-dashoffset: 0; } }
.partart .s7-cl2 { stroke-dasharray: 72.0 328.0; }
.partart .s7-cl2 { animation: s7Cl2 23.70s linear 1.10s infinite; }
@keyframes s7Cl2 { from { stroke-dashoffset: 400.0; } to { stroke-dashoffset: 0; } }
.partart .s7-star0 { animation: s7Star0 3.30s ease-in-out 0.00s infinite; }
@keyframes s7Star0 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-star1 { animation: s7Star1 3.97s ease-in-out 0.29s infinite; }
@keyframes s7Star1 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-star2 { animation: s7Star2 4.64s ease-in-out 0.58s infinite; }
@keyframes s7Star2 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-star3 { animation: s7Star3 5.31s ease-in-out 0.87s infinite; }
@keyframes s7Star3 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-star4 { animation: s7Star4 5.98s ease-in-out 1.16s infinite; }
@keyframes s7Star4 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-star5 { animation: s7Star5 6.65s ease-in-out 1.45s infinite; }
@keyframes s7Star5 { 0%,100% { opacity: .18; } 50% { opacity: .78; } }
.partart .s7-bench { stroke-dasharray: 76.0 304.0; }
.partart .s7-bench { animation: s7Bench 18.90s linear 0.00s infinite; }
@keyframes s7Bench { from { stroke-dashoffset: 380.0; } to { stroke-dashoffset: 0; } }
.partart .s7-sk0 { stroke-dasharray: 36.0 114.0; }
.partart .s7-sk0 { animation: s7Sk0 11.97s linear 0.00s infinite; }
@keyframes s7Sk0 { from { stroke-dashoffset: 150.0; } to { stroke-dashoffset: 0; } }
.partart .s7-co00 { animation: s7Co00 7.20s ease-in-out 0.00s infinite; }
@keyframes s7Co00 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co01 { animation: s7Co01 7.61s ease-in-out 0.20s infinite; }
@keyframes s7Co01 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co02 { animation: s7Co02 8.02s ease-in-out 0.40s infinite; }
@keyframes s7Co02 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-mo0 { animation: s7Mo0 13.30s ease-in-out 0.00s infinite; }
@keyframes s7Mo0 { 0%,100% { opacity: .12; } 50% { opacity: .44; } }
.partart .s7-sk1 { stroke-dasharray: 36.0 114.0; }
.partart .s7-sk1 { animation: s7Sk1 13.27s linear 0.52s infinite; }
@keyframes s7Sk1 { from { stroke-dashoffset: 150.0; } to { stroke-dashoffset: 0; } }
.partart .s7-co10 { animation: s7Co10 8.33s ease-in-out 0.30s infinite; }
@keyframes s7Co10 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co11 { animation: s7Co11 8.74s ease-in-out 0.50s infinite; }
@keyframes s7Co11 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co12 { animation: s7Co12 9.15s ease-in-out 0.70s infinite; }
@keyframes s7Co12 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-mo1 { animation: s7Mo1 14.13s ease-in-out 0.37s infinite; }
@keyframes s7Mo1 { 0%,100% { opacity: .12; } 50% { opacity: .44; } }
.partart .s7-sk2 { stroke-dasharray: 36.0 114.0; }
.partart .s7-sk2 { animation: s7Sk2 14.64s linear 1.04s infinite; }
@keyframes s7Sk2 { from { stroke-dashoffset: 150.0; } to { stroke-dashoffset: 0; } }
.partart .s7-co20 { animation: s7Co20 9.46s ease-in-out 0.60s infinite; }
@keyframes s7Co20 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co21 { animation: s7Co21 9.87s ease-in-out 0.80s infinite; }
@keyframes s7Co21 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-co22 { animation: s7Co22 10.28s ease-in-out 1.00s infinite; }
@keyframes s7Co22 { 0%,100% { opacity: .10; } 50% { opacity: .38; } }
.partart .s7-mo2 { animation: s7Mo2 14.96s ease-in-out 0.74s infinite; }
@keyframes s7Mo2 { 0%,100% { opacity: .12; } 50% { opacity: .44; } }
.partart .s7-bee0 { stroke-dasharray: 13.4 82.6; }
.partart .s7-bee0 { animation: s7Bee0 4.10s linear 0.00s infinite; }
@keyframes s7Bee0 { from { stroke-dashoffset: 96.0; } to { stroke-dashoffset: 0; } }
.partart .s7-bee1 { stroke-dasharray: 13.4 82.6; }
.partart .s7-bee1 { animation: s7Bee1 4.99s linear 0.36s infinite; }
@keyframes s7Bee1 { from { stroke-dashoffset: 96.0; } to { stroke-dashoffset: 0; } }
.partart .s7-bee2 { stroke-dasharray: 13.4 82.6; }
.partart .s7-bee2 { animation: s7Bee2 5.88s linear 0.72s infinite; }
@keyframes s7Bee2 { from { stroke-dashoffset: 96.0; } to { stroke-dashoffset: 0; } }
/* anna 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, #0d1220 0%, #2b3550 52%, #0d1220 100%); }
.an-seamA { stroke-dasharray: 205.0 45.0; }
.an-seamB { stroke-dasharray: 213.2 46.8; }
.cover-front .an-seamA { animation: anSeamA 12.40s linear 0.00s infinite; }
@keyframes anSeamA { from { stroke-dashoffset: 250; } to { stroke-dashoffset: 0; } }
.cover-front .an-seamB { animation: anSeamB 14.80s linear 0.60s infinite; }
@keyframes anSeamB { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
.cover-front .an-lamp { animation: anLamp 9.80s linear 0.00s infinite; }
@keyframes anLamp { 0% { transform: skewX(-14deg) translateX(0); } 100% { transform: skewX(-14deg) translateX(1180px); } }
.cover-front .an-fr0 { animation: anFr0 16.30s ease-in-out 0.00s infinite; }
@keyframes anFr0 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-7px,9px); opacity: .52; } }
.cover-front .an-fr1 { animation: anFr1 17.73s ease-in-out 0.77s infinite; }
@keyframes anFr1 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-4px,13px); opacity: .52; } }
.cover-front .an-fr2 { animation: anFr2 19.16s ease-in-out 1.54s infinite; }
@keyframes anFr2 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-1px,17px); opacity: .52; } }
.cover-front .an-fr3 { animation: anFr3 20.59s ease-in-out 2.31s infinite; }
@keyframes anFr3 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(2px,21px); opacity: .52; } }
.cover-front .an-fr4 { animation: anFr4 22.02s ease-in-out 3.08s infinite; }
@keyframes anFr4 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(5px,9px); opacity: .52; } }
.cover-front .an-fr5 { animation: anFr5 23.45s ease-in-out 3.85s infinite; }
@keyframes anFr5 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-7px,13px); opacity: .52; } }
.cover-front .an-fr6 { animation: anFr6 24.88s ease-in-out 4.62s infinite; }
@keyframes anFr6 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-4px,17px); opacity: .52; } }
.cover-front .an-fr7 { animation: anFr7 26.31s ease-in-out 5.39s infinite; }
@keyframes anFr7 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-1px,21px); opacity: .52; } }
.cover-front .an-fr8 { animation: anFr8 27.74s ease-in-out 6.16s infinite; }
@keyframes anFr8 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(2px,9px); opacity: .52; } }
.cover-front .an-fr9 { animation: anFr9 29.17s ease-in-out 6.93s infinite; }
@keyframes anFr9 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(5px,13px); opacity: .52; } }
.cover-front .an-fr10 { animation: anFr10 30.60s ease-in-out 7.70s infinite; }
@keyframes anFr10 { 0%,100% { transform: translate(0,0); opacity: .10; } 50% { transform: translate(-7px,17px); opacity: .52; } }
.cover-front .an-catch { animation: anCatch 9.87s ease-in-out 0.30s infinite; }
@keyframes anCatch { 0%,100% { filter: brightness(.86); } 44%,52% { filter: brightness(1.55); } }
.cover-front .an-flare { animation: anFlare 9.80s ease-out 0.30s infinite; }
@keyframes anFlare { 0%,100% { opacity: 0; } 44%,52% { opacity: .92; } }
.cover-front .an-stud { animation: anStud 6.70s ease-in-out 1.10s infinite; }
@keyframes anStud { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
.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 .t1 { opacity:0; animation: cvT1 1.00s cubic-bezier(.22,.9,.3,1) 0.48s both; }
@keyframes cvT1 { from { opacity:0; transform:translateY(-14px); } to { opacity:1; transform:none; } }
.cover-front .byl { opacity:0; animation: cvByl 1.20s ease-out 1.28s 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; } }