:root {
--display: "IM Fell English", "EB Garamond", Georgia, serif;
--body: "EB Garamond", Georgia, serif;
--type: "Special Elite", "Courier New", monospace;
--hand: "Reenie Beanie", "Comic Sans MS", cursive;
--rule: rgba(70, 90, 140, .16);
--margin-red: rgba(163, 36, 26, .28);
--sheet: #f4eedf;
}
body.reader { background: var(--paper); color: var(--ink); font-family: var(--body); }
.readbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
body.reader::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--paper); }
.readbar-in {
max-width: 62rem; margin: 0 auto; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; align-items: baseline; justify-content: space-between;
padding-block: .7rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.rb-home { font-family: var(--display); font-size: 1.15rem; text-decoration: none; }
.readbar nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .95rem; }
.readbar nav a { text-decoration: none; color: var(--ink-soft); }
.readbar nav a:hover, .readbar nav a:focus-visible { color: var(--ink); text-decoration: underline; }
.readbar nav a[aria-current="page"] { color: var(--ink); border-bottom: 2px solid var(--red); }
.book {
max-width: 36rem; margin: 0 auto; padding-block: 3.5rem 5rem;
padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
font-size: 1.18rem; line-height: 1.7;
}
.book p { margin: 0 0 1.05em; }
.book a { color: inherit; }
.part-title { text-align: center; margin-bottom: 4rem; }
.pt-label { font-variant: small-caps; letter-spacing: .14em; color: var(--faded); margin: 0 0 .3rem; }
.part-title h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.2rem, 7vw, 3.4rem); line-height: 1.1; text-wrap: balance; margin: 0; }
.byline-r { margin-top: .6rem; letter-spacing: .18em; text-transform: uppercase; font-size: .85rem; color: var(--ink-soft); }
.dedication { font-style: italic; color: var(--faded); margin-top: 2.5rem; }
section.piece, section.compiler { margin-bottom: 4.5rem; }
.book section { scroll-margin-top: 5rem; }
.book h2 { font-family: var(--display); font-weight: 400; font-size: 1.85rem; line-height: 1.2; text-wrap: balance; margin: 0 0 1.4rem; }
.sign { text-align: right; font-style: italic; }
.note { font-size: .95rem; font-style: italic; color: var(--ink-soft); }
.doc { font-family: var(--type); font-size: .9rem; line-height: 1.6; color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: .9rem; }
.stutter { font-family: var(--type); font-size: .95rem; letter-spacing: .02em; word-break: break-word; }
.editor { font-family: var(--type); font-size: .9rem; color: var(--red); }
.toc { display: grid; gap: 3rem; }
.toc-part h2 { margin-bottom: .8rem; }
.toc-part h2 a { text-decoration: none; }
.toc-part h2 a:hover { text-decoration: underline; }
.toc-part ol { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: 2rem; font-size: 1.05rem; }
.toc-part li { break-inside: avoid; padding: .15rem 0; }
.toc-part li a { text-decoration: none; color: var(--ink-soft); }
.toc-part li a:hover, .toc-part li a:focus-visible { color: var(--ink); text-decoration: underline; }
.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.6rem; font-family: var(--display); font-size: 1.1rem; }
.pager a { text-decoration: none; }
.pager a:hover { text-decoration: underline; }
body.part-two { background: var(--paper); color: #2a241c; }
.part-two .book {
max-width: 42rem; margin-block: 2.2rem 3rem; padding-block: 3rem 4rem;
padding-left: max(1.6rem, env(safe-area-inset-left, 0px)); padding-right: max(1.6rem, env(safe-area-inset-right, 0px));
background-color: #e4d6b3;
background-image:
linear-gradient(180deg, transparent 0 82%, rgba(120,78,30,.16) 100%),
linear-gradient(90deg, transparent 2.6rem, rgba(163,36,26,.22) 2.6rem, rgba(163,36,26,.22) calc(2.6rem + 1px), transparent calc(2.6rem + 1px)),
repeating-linear-gradient(transparent 0 33px, rgba(70,90,140,.13) 33px 34px),
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27900%27 height=%271500%27%3E%0A%3Cdefs%3E%3Cfilter id=%27r%27 x=%27-20%25%27 y=%27-20%25%27 width=%27140%25%27 height=%27140%25%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.035%27 numOctaves=%273%27 seed=%277%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 scale=%2738%27/%3E%3CfeGaussianBlur stdDeviation=%271.2%27/%3E%3C/filter%3E%0A%3Cfilter id=%27e%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.06%27 numOctaves=%272%27 seed=%272%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 scale=%279%27/%3E%3C/filter%3E%3C/defs%3E%0A%3Cg filter=%27url%28%23r%29%27%3E%0A%3Cellipse cx=%27740%27 cy=%27210%27 rx=%27120%27 ry=%2790%27 fill=%27rgba%28150,100,40,.18%29%27/%3E%0A%3Cellipse cx=%27120%27 cy=%27880%27 rx=%27160%27 ry=%27110%27 fill=%27rgba%28140,92,35,.15%29%27/%3E%0A%3Cellipse cx=%27620%27 cy=%271290%27 rx=%2790%27 ry=%27140%27 fill=%27rgba%28130,85,30,.16%29%27/%3E%0A%3Cellipse cx=%27300%27 cy=%27420%27 rx=%2760%27 ry=%2745%27 fill=%27rgba%28150,100,40,.13%29%27/%3E%0A%3C/g%3E%0A%3Cg filter=%27url%28%23e%29%27 fill=%27none%27%3E%0A%3Ccircle cx=%27690%27 cy=%27700%27 r=%2774%27 stroke=%27rgba%28115,65,20,.32%29%27 stroke-width=%275%27 stroke-dasharray=%27400 65%27/%3E%0A%3Ccircle cx=%27690%27 cy=%27700%27 r=%2770%27 stroke=%27rgba%28115,65,20,.13%29%27 stroke-width=%279%27/%3E%0A%3Ccircle cx=%27180%27 cy=%271360%27 r=%2760%27 stroke=%27rgba%28115,65,20,.26%29%27 stroke-width=%274%27 stroke-dasharray=%27300 80%27/%3E%0A%3C/g%3E%0A%3Cg fill=%27rgba%28125,75,25,.32%29%27%3E%0A%3Ccircle cx=%2780%27 cy=%27120%27 r=%273%27/%3E%3Ccircle cx=%2796%27 cy=%27140%27 r=%272%27/%3E%3Ccircle cx=%27842%27 cy=%27540%27 r=%272.5%27/%3E%3Ccircle cx=%27430%27 cy=%271010%27 r=%273.5%27/%3E%3Ccircle cx=%27446%27 cy=%271022%27 r=%271.8%27/%3E%3Ccircle cx=%27860%27 cy=%271140%27 r=%272.2%27/%3E%3Ccircle cx=%2756%27 cy=%27600%27 r=%272%27/%3E%3Ccircle cx=%27520%27 cy=%2780%27 r=%271.6%27/%3E%0A%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27520%27 height=%27520%27%3E%3Cfilter id=%27f%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.012 .09%27 numOctaves=%272%27 seed=%274%27/%3E%3CfeColorMatrix values=%270 0 0 0 .45 0 0 0 0 .3 0 0 0 0 .12 0 0 0 .35 -.08%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23f%29%27/%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27260%27 height=%27260%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.85%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3CfeColorMatrix values=%270 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .1 0 0 0 .55 0%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23n%29%27/%3E%3C/svg%3E"),
radial-gradient(ellipse at 30% 10%, rgba(255,250,235,.45), transparent 60%);
background-size: auto, auto, auto, 900px 1500px, 520px 520px, 260px 260px, auto;
background-attachment: local;
box-shadow: inset 0 0 70px rgba(110,70,25,.38), inset 0 0 8px rgba(80,50,20,.4), 0 14px 34px rgba(60,40,15,.22);
border-radius: 3px 6px 4px 3px;
}
.part-two .part-title h1 { font-family: var(--hand); font-size: clamp(3rem, 9vw, 4.4rem); }
.part-two .pt-label { color: #6e5f47; }
.part-two .compiler {
background: #f7f3ea; color: var(--ink); position: relative; transform: rotate(-.3deg);
box-shadow: 0 3px 10px rgba(0,0,0,.18);
}
.part-two .compiler::before {
content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px;
background: rgba(230,222,200,.75); box-shadow: 0 1px 2px rgba(0,0,0,.12); transform: rotate(2deg);
}
.part-two .plate-art { background: rgba(255,250,235,.16); border-color: rgba(60,45,25,.3); }
.plate.b23 { position: relative; }
.plate.b23::after {
content: ""; position: absolute; right: -1.2rem; top: 40%; width: 150px; height: 136px; pointer-events: none;
background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27220%27 height=%27200%27%3E%3Cfilter id=%27e%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.07%27 numOctaves=%272%27 seed=%279%27/%3E%3CfeDisplacementMap in=%27SourceGraphic%27 scale=%277%27/%3E%3C/filter%3E%3Cg filter=%27url%28%23e%29%27 fill=%27none%27 stroke=%27rgba%28110,62,18,.24%29%27 stroke-linecap=%27round%27%3E%0A%3Cpath d=%27M40 110 A72 72 0 0 0 184 110%27 stroke-width=%276%27/%3E%0A%3Cpath d=%27M70 50 L92 72 M92 50 L70 72%27 stroke-width=%274%27/%3E%3Cpath d=%27M132 50 L154 72 M154 50 L132 72%27 stroke-width=%274%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; transform: rotate(-8deg);
}
@media (max-width: 760px) {
.part-two .book { margin-block: 0 0; border-radius: 0; padding-left: max(1.1rem, env(safe-area-inset-left, 0px)); padding-right: max(1.1rem, env(safe-area-inset-right, 0px)); }
.plate.b23::after { right: 0; width: 110px; height: 100px; }
}
.part-two .book { line-height: 34px; font-size: 1.15rem; }
.part-two .book p { margin-bottom: 34px; }
.part-two .entry { margin-bottom: 34px; }
.part-two .entry h3 { font-family: var(--hand); font-weight: 400; font-size: 2.1rem; line-height: 34px; margin: 0; color: #2a241c; }
.part-two section.piece h2, .part-two section.compiler h2 { margin-bottom: 34px; }
.part-two section.piece h2 { font-family: var(--hand); font-size: 2.8rem; }
.part-two .compiler { padding: 1.6rem 1.4rem .4rem; line-height: 1.7; }
.part-two .compiler p { margin-bottom: 1.05em; }
.plate { margin: 0 0 34px; display: grid; gap: .6rem; }
.plate-art {
aspect-ratio: 4 / 3; max-width: 100%; border: 2px dashed rgba(42,36,28,.35); border-radius: 2px;
display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18);
}
.plate-art span { font-family: var(--type); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faded); }
.plate figcaption { font-family: var(--hand); font-size: 1.55rem; line-height: 1.15; color: #2a241c; }
.plate-title { display: block; font-size: 1.85rem; margin-bottom: .3rem; }
.plate ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.part-three section.piece {
background: var(--sheet); box-shadow: 0 8px 22px rgba(0,0,0,.14); border-radius: 1px;
padding: 2rem 1.6rem 1.2rem; font-family: var(--type); font-size: 1rem; line-height: 1.75;
}
.part-three section.piece h2 { font-family: var(--display); font-size: 1.35rem; color: var(--faded); margin-bottom: 1.2rem; }
.part-three .date { text-align: right; }
@media (max-width: 760px) {
.part-three section.piece { padding: 1.4rem 1rem 1rem; }
}
@media print { .readbar, .pager { display: none; } }
.book section { position: relative; }
.margin-note {
position: absolute; right: -14rem; width: 12rem; margin: 0; pointer-events: none;
font-family: var(--hand); font-size: 1.6rem; line-height: 1.1; color: var(--red);
opacity: 0; transform: rotate(-3deg); transition: opacity 1.4s;
}
.margin-note.on { opacity: .9; }
@media (max-width: 1100px) {
.margin-note { right: 0; width: auto; max-width: 70%; background: rgba(243,236,220,.92); padding: .2rem .5rem; }
}
body.reader.shell::before { background: var(--void); }
.shell .readbar { position: sticky; z-index: 6; background: rgba(11,10,9,.94); border-bottom: 1px solid #1f1d1a; }
.shell .readbar-in { align-items: center; }
.shell .rb-home { font-family: var(--hand); font-size: 1.9rem; line-height: 1; color: var(--chalk); }
.shell .readbar nav { gap: .3rem 1.3rem; }
.shell .readbar nav a { font-family: var(--hand); font-size: 1.55rem; line-height: 1.1; color: var(--chalk-dim); border-bottom: 0; padding-bottom: .2rem; position: relative; }
.shell .readbar nav a:hover, .shell .readbar nav a:focus-visible { color: var(--chalk); text-decoration: none; outline: none; }
.shell .readbar nav a[aria-current="page"] { color: var(--chalk); border-bottom: 0; }
.shell .readbar nav a[aria-current="page"]::after {
content: ""; position: absolute; left: -3%; right: -3%; bottom: -2px; height: 7px; opacity: .8;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M1 5 L12 3 L22 6 L35 2 L48 6 L61 3 L74 6 L86 2 L99 5' fill='none' stroke='%23ece8e0' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.shell.reader .book {
max-width: 42rem; margin: 0 auto; padding-block: 3.2rem 4rem; color: var(--chalk);
padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
background: none; box-shadow: none;
}
.shell.reader .part-title { color: var(--chalk); margin-bottom: 2.6rem; }
.shell.reader .pt-label { color: var(--chalk-dim); }
.shell.reader .part-title h1 { color: var(--chalk); }
.shell.reader .pager { border-top-color: #2a2723; color: var(--chalk); margin-top: 1rem; }
.shell .sheet {
color: #231e18; background-color: var(--aged-color); background-image: var(--aged); background-size: var(--aged-size);
box-shadow: var(--aged-shadow); border-radius: 2px; padding: 2.2rem 2rem 1.4rem; margin: 0 0 2.4rem; position: relative;
}
.shell .sheet:nth-of-type(3n+1) { background-position: 0 0, -380px -640px, 0 0, 0 0, 0 0; transform: rotate(-.25deg); }
.shell .sheet:nth-of-type(3n+2) { background-position: 0 0, -700px -200px, 0 0, 0 0, 0 0; transform: rotate(.2deg); }
.shell .sheet > section { margin-bottom: 1.8rem; }
.shell .sheet > section:last-child { margin-bottom: 0; }
.shell .notebook-page {
padding-left: 3.4rem; line-height: 34px;
background-image: linear-gradient(90deg, transparent 2.6rem, rgba(163,36,26,.22) 2.6rem, rgba(163,36,26,.22) calc(2.6rem + 1px), transparent calc(2.6rem + 1px)), repeating-linear-gradient(transparent 0 33px, rgba(70,90,140,.13) 33px 34px), var(--aged);
background-size: auto, auto, var(--aged-size);
}
.shell .notebook-page > section { margin-bottom: 34px; }
.shell.part-two .sheet-compiler { background: #f3eee2; box-shadow: 0 12px 30px rgba(0,0,0,.5); transform: rotate(-.4deg); }
.shell.part-two .sheet-compiler::before {
content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 26px; margin-left: -55px;
background: rgba(230,222,200,.75); box-shadow: 0 1px 2px rgba(0,0,0,.2); transform: rotate(2deg);
}
.shell.part-two .sheet-compiler .compiler { background: none; box-shadow: none; padding: 0; transform: none; }
.shell.part-two .sheet-compiler .compiler::before { display: none; }
.shell.part-three .sheet section.piece { background: none; box-shadow: none; padding: 0; border-radius: 0; }
.shell.contents .toc { color: var(--chalk); }
.shell.contents .toc-part h2 a { color: var(--chalk); }
.shell.contents .toc-part li a { color: var(--chalk-dim); }
.shell.contents .toc-part li a:hover, .shell.contents .toc-part li a:focus-visible { color: var(--chalk); }
.shell.contents .byline-r, .shell.contents .dedication { color: var(--chalk-dim); }
.toc-two ol { columns: 3 9rem; }
.shell .margin-note { color: var(--blood); }
@media (max-width: 1100px) { .shell .margin-note { color: #a3241a; } }
@media (max-width: 760px) {
.shell .sheet { padding: 1.6rem 1.2rem 1rem; }
.shell .notebook-page { padding-left: 2.6rem; background-image: linear-gradient(90deg, transparent 1.9rem, rgba(163,36,26,.22) 1.9rem, rgba(163,36,26,.22) calc(1.9rem + 1px), transparent calc(1.9rem + 1px)), repeating-linear-gradient(transparent 0 33px, rgba(70,90,140,.13) 33px 34px), var(--aged); }
.shell .rb-home { font-size: 1.6rem; }
.shell .readbar nav a { font-size: 1.35rem; }
}
.shell .rights { margin-top: 3.5rem; text-align: center; font-size: .9rem; color: var(--chalk-faint); }
.book a.hidden-k { color: inherit; text-decoration: none; cursor: text; transition: color 2s ease; }
.book a.hidden-k:hover, .book a.hidden-k:focus-visible { color: #8d2a20; cursor: pointer; transition-duration: .4s; outline: none; }
.shell .sheet.sheet-last {
min-height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
text-align: center; gap: .2rem; margin-top: 4rem;
}
.sheet-last .lp-line { font-family: var(--hand); color: var(--red); font-size: clamp(2rem, 7vw, 2.9rem); line-height: 1.1; margin: 0; transform: rotate(-1.5deg); }
.sheet-last .lp-line + .lp-line { transform: rotate(.8deg); margin-left: 1.2rem; }
.sheet-last .lp-addr { margin: 3.2rem 0 0; font-family: var(--body); letter-spacing: .14em; font-size: .95rem; }
.sheet-last .lp-addr a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid currentColor; }
.sheet-last .lp-addr a:hover, .sheet-last .lp-addr a:focus-visible { color: var(--red); }
.mn-a { transition: background-size 2.4s ease, box-shadow 2.4s; background-image: linear-gradient(transparent 82%, rgba(163,36,26,.5) 82%, rgba(163,36,26,.5) 92%, transparent 92%); background-size: 0 100%; background-repeat: no-repeat; }
.mn-a.on { background-size: 100% 100%; }
.mn-a.circle { background: none; border-radius: 48% 52% 50% 46% / 60% 50% 54% 44%; box-shadow: 0 0 0 0 transparent; padding: 0 .15em; margin: 0 -.15em; }
.mn-a.circle.on { box-shadow: 0 0 0 2px rgba(163,36,26,.62); }
.mn-a.still { transition: none; }
.mn {
display: block; font-family: var(--hand); color: #a3241a; font-size: 1.6rem; line-height: 1.05; margin: -.3rem 0 1rem 1.2rem;
transform: rotate(-2deg); opacity: 0; filter: blur(2px); transition: opacity 4s ease, filter 4s ease; pointer-events: none;
}
.mn.on { opacity: calc(.92 * var(--him, 1)); filter: none; }
.mn.still { transition: none; }
@media (min-width: 1100px) {
.shell .mn { position: absolute; right: -15rem; width: 12.5rem; margin: 0; color: var(--blood); font-size: 1.85rem; }
.shell.part-two .mn { right: -14rem; width: 11rem; }
}
.pr { white-space: nowrap; }
.pr s { text-decoration-color: rgba(163,36,26,.8); text-decoration-thickness: 2px; }
.pr .ins { font-family: var(--hand); color: #a3241a; font-size: 1.35em; line-height: 0; margin-left: .2em; display: inline-block; transform: rotate(-4deg) translateY(-.35em); }
.his-fin { font-family: var(--hand); color: #a3241a; font-size: 1.3em; line-height: 0; }
.father-q { font-family: var(--hand); color: #3a3226; font-size: 1.5rem; line-height: 1.1; margin: .6rem 0 0 1.5rem; transform: rotate(-1deg); }
.father-q::before { content: "— "; }