/* Paper, pencil, bookbinding. The margin is part of the composition. */
:root{--ink:#302e28;--accent:#865c40;--paper:#eee8d9;--cat-w:120px}
body{background:#e5dfd0;color:var(--ink)}
.echo-space{background:radial-gradient(ellipse at 53% 40%,#fcf8ed 0,#ede7d9 48%,#d9d2c2 100%)}
.echo-space:after{opacity:.19;background-size:1500px}
.echo-space:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 4.8%,#8c7a6020 4.86%,#fff8 4.94%,transparent 5.04%,transparent 94.84%,#806a4f20 94.9%,#fff8 94.98%,transparent 95.04%),linear-gradient(118deg,transparent 49.8%,#78644708 49.95%,#fff5 50.1%,transparent 50.45%);pointer-events:none}
.space-horizon{display:block;left:0;right:0;top:auto;bottom:18%;height:15%;border-radius:50%;background:none;border-top:1px solid #b2a58e33;box-shadow:0 -10px 70px #7664480b;transform:rotate(-5deg);filter:none}
.appbar{padding-top:18px}.appbar:after{background:linear-gradient(90deg,#8c795e77,transparent 30%,transparent 70%,#8c795e77)}
.book-logo .book-title{display:inline;font-weight:500;letter-spacing:.2em}.cat-emblem{filter:drop-shadow(0 1px 0 #fff8)}
.appbar nav>button{font-size:24px;gap:10px}.appbar nav>button span{writing-mode:vertical-rl;font-size:10px;letter-spacing:.14em;align-self:center;color:#7a6f5b}
.appbar nav>button:after{content:'';position:absolute;left:0;right:19px;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s}
.appbar nav>button:hover:after{transform:scaleX(1)}
.fold-book{top:47%}.leaf{box-shadow:0 0 0 .75px #fff9e8,0 2px 0 #ccc3ad,1px 4px 0 #95897077,4px 13px 16px #57453030}
.hinge-shade{background:linear-gradient(90deg,#46372032,transparent 15%,transparent 83%,#3a2a1d3d 99%,#fff9)!important}
.leaf:nth-child(even) .hinge-shade{background:linear-gradient(90deg,#fff9,#4b371e34 2%,transparent 21%,transparent 81%,#3e2e1833)!important}
/* These layers cover the complete window, including the protruding paper corners. No white veil. */
.edge-mist{top:calc(-1 * var(--bar));bottom:calc(-1 * var(--dock));opacity:1;background:none;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);mask-image:linear-gradient(90deg,#000 40%,#000d 68%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,#000 40%,#000d 68%,transparent 100%)}
.mist-left{width:calc((100% - var(--leaf-w))/2 + var(--book-shift,0px) + 35px)}
.mist-right{width:calc((100% - var(--leaf-w))/2 - var(--book-shift,0px) + 35px)}
/* Clear voices against a defocused image: initial, byline, hanging punctuation, pencil tail. */
.margin-panel{width:clamp(190px,calc((100vw - var(--leaf-w))/2 - 106px),325px);color:#302c24}
.echo-panel{top:23%;padding:0 0 0 22px;background:none;border:0;box-shadow:none;--voice-ink:#3e4938}
.echo-right{top:44%;--voice-ink:#71523c}.echo-panel:before{content:'“';display:block;position:absolute;left:-1px;top:79px;font:54px Georgia,serif;color:var(--voice-ink)}
.echo-panel:after{display:none}.echo-folio{position:absolute;top:-68px;left:10px;font:italic 138px/1 Georgia,serif;letter-spacing:-.06em;color:#77674613;-webkit-text-stroke:.55px #68543a3b;pointer-events:none}
.echo-byline{position:relative;display:flex;align-items:baseline;gap:15px;flex-wrap:wrap;padding-bottom:14px;margin-bottom:20px;border-bottom:1px solid #7f6d4855}
.echo-panel .margin-kicker{font:italic 30px/1.2 Georgia,serif;margin:0;color:var(--voice-ink);letter-spacing:-.035em}.echo-date{font:10px/1.4 var(--sans);letter-spacing:.03em;color:#655b49;margin:0}
.echo-panel blockquote{position:relative;font:500 clamp(16px,1.22vw,22px)/1.95 var(--song);color:#302d26;letter-spacing:.025em;text-shadow:0 1px 8px #f1ead5}
.echo-panel .echo-source{color:var(--voice-ink);font-size:11px;margin:20px 0 0;min-height:32px;border:0}.thought-thread{width:88%;height:24px;display:block;margin-top:4px;overflow:visible}.thought-thread path{fill:none;stroke:#736a536e;stroke-width:.65;stroke-dasharray:285;stroke-dashoffset:calc((1 - var(--scene-progress,1)) * 285);transition:stroke-dashoffset .2s linear}
/* Opening as a printed foreword, closing as two open book spines. */
.opening-note{top:11%;padding:0 0 0 23px}.opening-note:before{content:'';position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(#887150 0 20%,#88715033 20% 100%)}
.opening-note .margin-kicker,.closing-note .margin-kicker{display:flex;justify-content:space-between;font:10px/1.5 var(--sans);letter-spacing:.13em;color:#76644c;margin-bottom:25px}.opening-note .margin-kicker span{display:inline;letter-spacing:.08em}.opening-note h2{position:relative;font:500 clamp(25px,1.7vw,35px)/1.55 var(--song);letter-spacing:.035em;color:#383329;margin-bottom:23px}.question-mark{display:inline-block;color:#8d7451}
.opening-body p{font:14px/1.9 var(--song);color:#50483a;margin-bottom:15px;letter-spacing:.025em}.opening-coda{margin-top:25px;padding-top:15px;border-top:1px solid #8470504d}.opening-coda blockquote{font:15px/1.75 var(--song);color:#5b4c36}.opening-coda button{font:10px var(--sans);margin-top:9px;color:#7c5f3e}
.closing-note{top:12%;padding-left:9px}.closing-note .margin-kicker span{letter-spacing:0;color:#8b7d64}
.closing-person{position:relative;padding:0 0 18px 22px;margin:27px 0 25px;border-left:1px solid #77634755;border-bottom:1px solid #8a795545}
.closing-person:before{content:attr(data-initial);position:absolute;right:2px;top:-21px;font:italic 100px/1 Georgia,serif;color:#806f4910;-webkit-text-stroke:.6px #7764414a;pointer-events:none}
.reading-period{font:10px var(--song);letter-spacing:.14em;color:#74654d}.closing-person h2{position:relative;font:42px/1.3 Georgia,serif;margin:9px 0 7px;color:#494634;letter-spacing:-.04em}.closing-person:nth-of-type(2) h2{color:#70553d}
.closing-person button.read-diary{display:flex;align-items:center;gap:30px;font:15px var(--song);color:#4e4634;min-height:35px;min-width:164px;margin-right:0;border:0}.read-diary span{font:23px Georgia,serif;transition:transform .35s}.read-diary:hover span{transform:translate(5px,-4px)}.closing-person button.read-dialogue{font:11px var(--sans);color:#7d6d53;border:0;min-height:30px}
.closing-quote{font:12px/1.8 var(--song);color:#70624b;margin-top:14px}.closing-quote button{display:block;font:10px var(--sans);margin-top:8px;min-height:30px;color:#877154}
/* Both cat plates retain the colours of the immutable source artwork. */
.cover-leaf{background:#d6ccad;color:#3f4335}.cover-leaf .leaf-content{background:repeating-linear-gradient(0deg,#fffc 0 .5px,transparent .5px 3px),repeating-linear-gradient(90deg,#77684309 0 .5px,transparent .5px 4px);background-blend-mode:soft-light;box-shadow:inset 10px 0 13px #6b614427}
.cover-leaf .leaf-content:before{border-color:#8e82615c;box-shadow:inset 0 0 0 4px #d6ccad,inset 0 0 0 5px #8e826138}.cover-leaf h1{color:#4b5645;text-shadow:0 1px 0 #fff8}.cover-leaf h1>span,.cover-edition span,.cover-poem .citation{color:#776f51}.cover-edition,.cover-poem{color:#4e4c3d}.cover-cat,.last-cat{opacity:1;mix-blend-mode:normal;background:#eeeada;box-shadow:0 1px 0 #fff9,0 3px 6px #483b2124;border:1px solid #b4a99044;transform:rotate(-1deg)}
.cover-cat img,.last-cat img{filter:none!important;mix-blend-mode:normal!important;opacity:1;object-fit:contain;transform:none!important}.last-night{background:#e5dbc3;color:#423c2d}.last-night h2,.last-night-text blockquote,.last-night-thanks blockquote{color:#4b4333}.last-night .running-head,.last-night .citation,.last-night .leaf-foot{color:#77674b;border-color:#9a8a6955}.last-night .last-cat{height:25%;transform:rotate(1deg)}
.ambrose-leaf{background:#eee7d5}.judas-leaf{background:#c2bda8}.sea-leaf{background:#e2dbc9}.ship-leaf{background:#beb69e}.goodbye-ambrose{background:#ded7c5}.end-leaf{background:#cec7b3}.mobile-intro{color:#6a634e}
/* Stage progress stays visible while the folio is still. */
.reading-line{height:34px;position:relative}.reading-line #gesture-hint{font:10px var(--sans);letter-spacing:.1em;color:#7c7057;position:absolute;left:50%;transform:translateX(-50%)}
#scene-meter{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:#68563d;font:10px var(--sans);white-space:nowrap}#scene-meter[hidden]{display:none}#scene-meter>i{width:73px;height:1px;background:#91826355}#scene-progress{display:block;height:2px;background:#746c4f;transform:scaleX(0);transform-origin:left}
.wood-ruler{overflow:visible;background:linear-gradient(#d9cba6,#dfd4b7 40%,#d7c9a5);border-top:1px solid #a18b633d;border-bottom:1px solid #a78e6555;box-shadow:0 1px 0 #fff7df,0 4px 7px #57482c16;isolation:auto}
.ruler-grain{display:block;pointer-events:none;opacity:.17;background:repeating-linear-gradient(0deg,transparent 0 5px,#7e68442a 5px 5.5px,transparent 5.5px 9px)}
.ruler-marks>span{color:#665a43}#ruler-lines i{background:#81725788}#ruler-lines .major{background:#5e513dbb}
.red-thread{width:0;top:0;bottom:0;background:none;box-shadow:none;z-index:5;pointer-events:none}.red-thread:before{display:none}.cat-thumb{position:absolute;top:calc(var(--cat-w) * -.36);left:-100px;width:var(--cat-w);height:calc(var(--cat-w) * .52);cursor:grab;pointer-events:auto;touch-action:none;filter:drop-shadow(0 1px 0 #eae9cbaa) drop-shadow(1px 3px 2px #29302340)}.cat-thumb svg{display:block;width:100%;height:100%;overflow:visible}.cat-hairline{position:absolute;top:calc(var(--cat-w) * .088);bottom:-2px;left:-.5px;width:1px;background:#546244;box-shadow:1px 0 0 #fff7dfb3}.is-cat-dragging .cat-thumb{cursor:grabbing;filter:drop-shadow(0 1px 0 #eae9cbaa) drop-shadow(2px 5px 3px #29302345)}
.wood-ruler input{z-index:3}.ruler-dock .reading-line{pointer-events:none}.ruler-bottom{margin-top:2px}.process-tabs button{opacity:1;color:#655b43}.process-tabs button[aria-pressed=true]{color:#362f20}.process-tabs button[aria-pressed=true]:after{background:#8f6843}
.ruler-dock{padding-top:40px}.ruler-dock .reading-line{position:absolute;left:50%;bottom:5px;top:auto;transform:translateX(-50%);width:280px;height:34px;display:flex;align-items:center;justify-content:flex-end}.reading-line #chapter-label{display:none}.reading-line #page-label{font-size:13px;color:#6f6045}.reading-line #gesture-hint,#scene-meter{left:0;transform:none}.ruler-bottom{height:34px}
.image-underlay{position:absolute!important;inset:0;width:100%!important;height:100%!important;object-fit:contain!important;pointer-events:none;z-index:1}.ship-process,.sea-leaf .mounted-art{position:relative}.ship-process>img:not(.image-underlay),.sea-leaf .mounted-art>img:not(.image-underlay){position:relative;z-index:2}
@media(min-width:1800px){.margin-panel{max-width:348px}.opening-body p{font-size:17px;line-height:1.95}.opening-coda blockquote{font-size:18px}.opening-note h2{font-size:36px}.echo-panel blockquote{font-size:23px}.echo-panel .margin-kicker{font-size:34px}.closing-person h2{font-size:47px}.closing-person{margin-bottom:38px}.closing-person button.read-diary{font-size:18px}}
@media(max-width:1100px){.margin-panel{width:calc((100vw - var(--leaf-w))/2 - 52px)}.opening-note{padding-left:15px}.opening-note h2{font-size:23px}.opening-body p{font-size:12px;line-height:1.8}.opening-coda blockquote{font-size:13px}.opening-note .margin-kicker{font-size:9px;margin-bottom:17px}.echo-panel{padding-left:16px}.echo-panel blockquote{font-size:16px}.echo-panel .margin-kicker{font-size:25px}.echo-byline{gap:8px;margin-bottom:12px}.echo-panel:before{top:90px;font-size:36px}.closing-person{padding-left:14px}.closing-person h2{font-size:32px}.closing-person button.read-diary{font-size:13px;gap:16px;min-width:0}.closing-person button.read-dialogue{font-size:10px}.closing-note .margin-kicker{font-size:9px}.closing-note .margin-kicker span{display:none}}
@media(max-width:800px){:root{--cat-w:94px}.edge-mist{width:14%;opacity:1;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}.appbar nav>button{font-size:18px;gap:6px}.appbar nav>button span{writing-mode:horizontal-tb;font-size:9px}.mobile-intro{color:#62583f}.cover-leaf .cover-cat{height:23%}.reading-line #gesture-hint{font-size:9px}#scene-meter{font-size:9px;gap:7px}#scene-meter>i{width:35px}.last-night .last-cat{height:23%}}
@media(max-width:1100px){.ruler-bottom .chapter-nav{display:none}.ruler-dock .reading-line{left:5vw;transform:none;width:calc(100% - 180px)}.ruler-bottom{justify-content:flex-end}.ruler-dock{padding-top:34px}}
@media(max-width:420px){.ruler-dock .reading-line{width:calc(100% - 150px)}#scene-meter>i{width:23px}.reading-line #page-label{font-size:11px}}
@media(max-height:700px) and (min-width:801px){.opening-note{top:7%}.opening-note h2{font-size:23px;margin-bottom:16px;line-height:1.45}.opening-note .margin-kicker{margin-bottom:15px}.opening-body p{font-size:12px;line-height:1.75;margin-bottom:12px}.opening-coda{margin-top:13px;padding-top:10px}.opening-coda blockquote{font-size:12px}.opening-coda button{margin-top:3px}.echo-panel{top:23%}.echo-right{top:45%}.echo-panel blockquote{font-size:15px}.echo-byline{margin-bottom:14px;padding-bottom:9px}.echo-panel:before{top:54px}.echo-folio{font-size:100px;top:-48px}.echo-panel .echo-source{margin-top:12px}.closing-note{top:7%}.closing-person{margin:14px 0 16px;padding-bottom:9px}.closing-person h2{font-size:31px}.closing-quote{font-size:11px}.closing-note .margin-kicker{margin-bottom:13px}.closing-person:before{font-size:77px}.thought-thread{margin-top:0}}
@media(prefers-reduced-motion:reduce){.edge-mist{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.thought-thread path,.read-diary span{transition:none}}
@media(max-height:650px){.ruler-dock{padding-top:30px}.ruler-dock .reading-line{bottom:0}}