:root{
  --room:#12100e; --room-deep:#0b0a09; --paper:#f4ead6; --paper-edge:#e7d9c0; --ink:#1c1712; --ink-soft:#4a4036;
  --muted:#7a6e60; --rule:#c9b89a; --oxblood:#6e2c2c; --cloth:#2a2320; --gilt:#c4b59a;
  --board:#3f131b; --board-hi:#561f27; --board-lo:#250910; --foil:#d8b86c; --foil-hi:#f6e7b6; --foil-lo:#8d6b2e; --fg:#f4ead6; --fg-muted:#b7aa98;
  --display:"Cormorant Garamond","Noto Serif","Times New Roman",serif;
  --body:"Source Serif 4","Noto Serif","Times New Roman",serif;
  --ease:cubic-bezier(.22,1,.36,1); --quick:150ms; --fast:250ms; --emph:700ms;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--room-deep);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html,body{min-height:100dvh}
body{margin:0;font-family:var(--body);background:var(--room-deep);color:var(--fg);overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);text-wrap:balance;margin:0;font-weight:500}
.kick{font-family:var(--display);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

/* room */
.room{position:relative;min-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.room::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,rgb(42 35 32/.95) 0%,var(--room-deep) 68%)}
.chrome{position:relative;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:max(.9rem,env(safe-area-inset-top)) max(1.25rem,env(safe-area-inset-right)) 0 max(1.25rem,env(safe-area-inset-left))}
.wordmark{font-family:var(--display);font-size:.85rem;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
.wordmark:hover{color:var(--gilt)}
.langs{display:flex;gap:.15rem;padding:.3rem;border-radius:12px;background:rgb(18 16 14/.7);box-shadow:0 0 0 1px rgb(244 234 214/.1)}
.langs a{display:flex;align-items:center;justify-content:center;min-width:2.25rem;min-height:2.25rem;padding:0 .5rem;border-radius:4px;
  font-family:var(--display);font-size:.7rem;letter-spacing:.18em;color:var(--fg-muted);transition:color var(--quick),background-color var(--quick)}
.langs a:hover{color:var(--fg)}
.langs a.on{background:var(--paper);color:var(--ink)}
.chrome-bottom{position:fixed;left:0;right:0;bottom:max(.9rem,env(safe-area-inset-bottom));z-index:40;display:flex;justify-content:center;gap:.75rem;align-items:center;pointer-events:none}
.chrome-bottom>*{pointer-events:auto}
.chrome-bottom[hidden]{display:none}
.btn-toc{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 .9rem;border-radius:12px;background:rgb(18 16 14/.7);
  font-family:var(--display);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg);box-shadow:0 0 0 1px rgb(244 234 214/.1);transition:transform var(--quick)}
.btn-toc:hover{background:rgb(18 16 14/.9)}.btn-toc:active{transform:scale(.96)}
.folio-ind{min-width:3rem;text-align:center;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}

/* stage */
.stage-wrap{position:relative;z-index:10;flex:1;display:flex;align-items:center;justify-content:center;padding:4.5rem .75rem 5rem}
@media(min-width:640px){.stage-wrap{padding:5.5rem 2rem 5.5rem}}
.stage-wrap{--th:min(68dvh,700px);--tw:min(26rem,86vw,calc(var(--th)*2/3))}
.stage{position:relative;margin:0 auto;perspective:2200px;transition:width var(--emph) var(--ease),height var(--emph) var(--ease),perspective var(--emph) var(--ease)}
.stage.closed{height:var(--th);width:var(--tw);perspective:1300px}
.stage.closed .tome{touch-action:none;-webkit-user-select:none;user-select:none}
.stage.open{width:min(68.75rem,calc(100vw - 2rem));height:min(76vh,760px)}
@media(max-width:767px){.stage.open{width:min(26.5rem,92vw);height:min(74dvh,700px)}}
.book{position:relative;height:100%;width:100%;overflow:hidden;border-radius:4px;background:var(--cloth);
  box-shadow:0 24px 80px -24px rgb(0 0 0/.72),0 8px 24px -8px rgb(0 0 0/.5);transition:opacity .45s ease .3s,visibility 0s linear .3s}
.stage.closed .book{opacity:0;visibility:hidden;transition:none}
@media(min-width:640px){.book{border-radius:8px}}
.spine{position:absolute;top:0;bottom:0;left:0;z-index:10;width:10px;background:linear-gradient(90deg,rgb(28 23 18/.4),transparent)}
@media(min-width:640px){.spine{width:12px}}
.ribbon{position:absolute;top:0;right:18%;z-index:20;height:2.5rem;width:.625rem;
  background:linear-gradient(180deg,#8a3a3a 0%,#6e2c2c 55%,#4f1f1f 100%);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),50% 100%,0 calc(100% - 8px))}
@media(min-width:640px){.ribbon{height:3.5rem}}
.spread{display:grid;height:100%;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
@media(min-width:768px){.spread{grid-template-columns:1fr 1fr}}
.leafwrap{position:relative;height:100%;min-height:0}
.leafwrap.left{display:none}
@media(min-width:768px){.leafwrap.left{display:block}}
.turnzone{position:absolute;top:0;bottom:0;z-index:20;width:18%;background:transparent}
.turnzone.prev{left:0;cursor:w-resize}.turnzone.next{right:0;cursor:e-resize}
.turnzone[hidden]{display:none}

/* leaf */
.leaf{position:relative;display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden;color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  padding:2.25rem 1.75rem 2rem 2rem;transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}
.leafwrap.right .leaf{padding:2.25rem 2rem 2rem 1.75rem}
@media(min-width:640px){.leaf{padding:2.75rem 2.5rem 2.5rem 3rem}.leafwrap.right .leaf{padding:2.75rem 3rem 2.5rem 2.5rem}}
.leafwrap.left .leaf{box-shadow:inset -28px 0 36px -28px rgb(28 23 18/.18),inset 0 0 0 1px rgb(28 23 18/.04)}
.leafwrap.right .leaf{box-shadow:inset 28px 0 36px -28px rgb(28 23 18/.18),inset 0 0 0 1px rgb(28 23 18/.04)}
.leaf.endpaper{padding:0}
.leaf.endpaper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.leaf.endpaper::after{content:"";position:absolute;inset:0;background:rgb(28 23 18/.55);mix-blend-mode:multiply}
.leaf-body{min-height:0;flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;position:relative}
.leaf.more::after{content:"";position:absolute;left:0;right:0;bottom:2.4rem;height:2.5rem;pointer-events:none;background:linear-gradient(180deg,transparent,var(--paper))}
.leaf.more .leaf-foot::before{content:"⌄";position:absolute;left:50%;transform:translateX(-50%);bottom:.55rem;color:var(--muted);font-size:.9rem}
.leaf-foot{position:relative}
.leaf-foot{margin-top:.75rem;padding-top:.5rem;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.leaf-foot .n{font-variant-numeric:tabular-nums;letter-spacing:.12em}
.turning[data-dir="next"] .leafwrap.right .leaf{transform:rotateY(-10deg);opacity:0}
.turning[data-dir="prev"] .leafwrap.left .leaf{transform:rotateY(10deg);opacity:0}

/* page kinds */
.center{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.orn{color:var(--oxblood);display:block}
.orn.staff{width:6rem;height:2.25rem}.orn.rule{width:10rem;height:.75rem;color:var(--rule)}.orn.light{width:2.75rem;height:4rem}.orn.bfly{width:3.5rem;height:2.5rem}
.epi{font-family:var(--display);font-style:italic;font-size:1.9rem;line-height:1.25;color:var(--ink);margin:2.5rem 0 0}
@media(min-width:640px){.epi{font-size:2.25rem}}
.epi-by{margin-top:2rem;font-family:var(--display);font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.epi-tr{margin-top:2.5rem;max-width:22ch;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ink-soft)}
.ht-main{margin-top:1.5rem;font-size:2.4rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:640px){.ht-main{font-size:3rem}}
.ht-sub{margin-top:.75rem;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--ink-soft)}
.frontis{display:flex;height:100%;align-items:center;justify-content:center}
.frontis img{max-height:100%;width:100%;object-fit:contain;outline:1px solid rgb(28 23 18/.1);outline-offset:-1px}
.tp-main{margin-top:1.5rem;font-size:3rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:640px){.tp-main{font-size:3.75rem}}
.tp-sub{margin-top:1rem;font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--ink-soft)}
.tp-count{margin-top:.75rem;font-family:var(--display);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.tp-author{margin-top:2rem;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--ink-soft)}
.tp-house{margin-top:2rem;font-family:var(--display);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.copyright{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding-bottom:1.5rem;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}
.copyright p{margin:0}.copyright .kick{margin-bottom:1.25rem;font-size:.78rem;font-weight:600;line-height:1.35;letter-spacing:.26em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.copyright .note{max-width:38ch}.copyright .c{margin-top:2rem;color:var(--ink)}.copyright .m{margin-top:1rem}
.dedic{max-width:16rem;font-family:var(--display);font-style:italic;font-size:1.6rem;line-height:1.3;color:var(--ink)}
@media(min-width:640px){.dedic{font-size:1.9rem}}
.dedic-tr{margin-top:2rem;max-width:16rem;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ink-soft)}
.plate-num{margin-top:2rem;font-family:var(--display);font-size:.75rem;letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}
.plate-title{margin-top:1rem;max-width:18ch;font-size:2.4rem;letter-spacing:-.01em}
.sec-title{max-width:16ch;font-size:2.4rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:640px){.sec-title{font-size:3rem}}
.sec-sub{margin-top:1.25rem;font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--ink-soft)}
.orn.staff+.sec-title,.orn.staff+.epi{margin-top:2.5rem}
.colo{margin-top:2rem;max-width:32ch;font-family:var(--display);font-style:italic;font-size:1.1rem;line-height:1.6;color:var(--ink-soft)}
.portrait{display:flex;height:100%;flex-direction:column;margin:0}
.portrait img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:50% 25%;outline:1px solid rgb(28 23 18/.12);outline-offset:-1px;box-shadow:0 1px 0 rgb(255 255 255/.4)}
.portrait figcaption{margin-top:.75rem;text-align:center;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--ink-soft)}
.about{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.about-name{margin:1rem 0 1.25rem;font-size:2.2rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:640px){.about-name{font-size:2.6rem}}
.about-text{margin:1.5rem 0 0;max-width:34ch;font-size:.98rem;line-height:1.7;color:var(--ink-soft)}
.colo-house{margin:2rem 0;font-family:var(--display);font-size:.75rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}

/* contents page */
.toc{display:flex;height:100%;flex-direction:column;padding:.5rem .25rem 0}
.toc h2{text-align:center;font-size:1.9rem;letter-spacing:-.01em}
.toc .kick{text-align:center;margin-top:.5rem;letter-spacing:.22em}
.toc .orn{margin:1rem auto 0}
.toc ol{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;min-height:0;flex:1;flex-direction:column;overflow-y:auto}
.toc li.sec{margin:1.25rem 0 .25rem}.toc li.sec:first-child{margin-top:0}
.toc li.sec p{margin:0;font-family:var(--display);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.toc li.p a{display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgb(201 184 154/.5)}
.toc li.p a:hover .t{color:var(--oxblood)}
.toc .r{width:2rem;flex-shrink:0;font-family:var(--display);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.toc .t{font-family:var(--display);font-style:italic;font-size:1.05rem;line-height:1.3;color:var(--ink)}
@media(min-width:640px){.toc .t{font-size:1.15rem}}

/* poem */
.poem{margin:0 auto;display:flex;max-width:38ch;flex-direction:column}
.poem .kick{letter-spacing:.2em;font-size:.72rem}
.poem h2{margin-top:.25rem;font-size:1.6rem;letter-spacing:-.01em;color:var(--ink)}
@media(min-width:640px){.poem h2{font-size:1.9rem}}
.poem h2.cont{font-size:1.25rem;font-style:italic;color:var(--ink-soft)}
.poem .orn.rule{width:7rem;margin:.75rem 0 1rem}
.verse{display:flex;flex-direction:column;gap:1rem}
.stanza{margin:0;font-family:var(--display);font-style:italic;font-weight:400;font-size:1.05rem;line-height:1.5;letter-spacing:.01em;color:var(--ink)}
@media(min-width:640px){.stanza{font-size:1.15rem}}
@media(max-height:700px) and (max-width:767px){.stanza{font-size:1rem;line-height:1.42}.verse{gap:.75rem}.leaf{padding-top:1.6rem;padding-bottom:1.4rem}.poem h2{font-size:1.4rem}}
.stanza .l{display:block;white-space:pre-wrap}
.stanza.drop::first-letter{font-family:var(--display);float:left;font-size:3.2em;line-height:.72;padding:.12em .08em 0 0;font-style:normal;font-weight:500;color:var(--oxblood)}
.stanza .note{display:block;margin-top:.5rem;font-size:.85em;color:var(--ink-soft)}

/* closed book: a hardcover in 3-D. --tw/--th book size, --t thickness, --b board, --o the boards' overhang (the "square") */
.tome{--t:calc(var(--tw)*.15);--b:calc(var(--tw)*.012);--o:calc(var(--tw)*.016);--ry:-26deg;--rx:7deg;--open:0deg;--mx:50%;--my:32%;
  position:absolute;left:50%;top:50%;z-index:30;width:var(--tw);height:var(--th);margin:calc(var(--th)/-2) 0 0 calc(var(--tw)/-2);
  transform-style:preserve-3d;transform:rotateY(var(--ry)) rotateX(var(--rx))}
.tome .f{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:opacity .45s ease .3s}
.tome[data-open="true"]{--open:-150deg;pointer-events:none;visibility:hidden;transition:transform .8s var(--ease),visibility 0s linear .95s}
.tome[data-open="true"] .f{opacity:0}
.bd{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:left center}
.bd.front{transform:translateZ(calc(var(--t)/2 - var(--b))) rotateY(var(--open));transition:transform .9s var(--ease)}
.bd.back{transform:translateZ(calc(var(--t)/-2))}
.bd .fr,.bd .fi,.bd .bk,.bd .bi{inset:0;border-radius:2px 5px 5px 2px}
.bd.front .fr{transform:translateZ(var(--b))}
.bd.front .fi{transform:rotateY(180deg);background:#5a4a3e url("img/endpaper.jpg") center/cover;box-shadow:inset 0 0 0 1px rgb(0 0 0/.25)}
.bd.front .fi::after{content:"";position:absolute;inset:0;background:rgb(28 23 18/.5);mix-blend-mode:multiply}
.bd.back .bk{transform:rotateY(180deg);background:linear-gradient(165deg,var(--board-hi),var(--board) 50%,var(--board-lo));box-shadow:0 40px 90px -20px rgb(0 0 0/.9)}
.bd.back .bi{transform:translateZ(var(--b));background:#3a1a1f}
.be{background:linear-gradient(180deg,#5e272c,#3a1519)}
.be.et{left:0;right:0;top:0;height:var(--b);transform-origin:center top;transform:rotateX(90deg);background:#65292f}
.be.er{right:0;top:0;bottom:0;width:var(--b);transform-origin:right center;transform:rotateY(90deg);background:linear-gradient(180deg,#5e272c,#2e1015)}
.be.eb{left:0;right:0;bottom:0;height:var(--b);transform-origin:center bottom;transform:rotateX(-90deg);background:#280d12}
/* page block, inset by the overhang */
/* page block edges are gilt */
.pg{background-color:#b8964a;background-image:linear-gradient(90deg,rgb(70 40 10/.5),transparent 24%,rgb(255 240 200/.38) 50%,transparent 76%,rgb(70 40 10/.5)),
  repeating-linear-gradient(90deg,rgb(95 65 20/.4) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,transparent 0 6px,rgb(255 250 225/.3) 6px 7px)}
.pt,.pb{background-image:linear-gradient(0deg,rgb(70 40 10/.5),transparent 24%,rgb(255 240 200/.38) 50%,transparent 76%,rgb(70 40 10/.5)),
  repeating-linear-gradient(0deg,rgb(95 65 20/.4) 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,transparent 0 6px,rgb(255 250 225/.3) 6px 7px)}
.pt{left:0;right:var(--o);top:var(--o);height:calc(var(--t) - 2*var(--b));transform-origin:center top;transform:translateZ(calc(var(--t)/-2 + var(--b))) rotateX(90deg);background-color:#cfae5e}
.pr{right:var(--o);top:var(--o);bottom:var(--o);width:calc(var(--t) - 2*var(--b));transform-origin:right center;transform:translateZ(calc(var(--t)/-2 + var(--b))) rotateY(90deg)}
.pr::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(255 250 225/.28),transparent 30%,transparent 70%,rgb(40 20 5/.35))}
.pb{left:0;right:var(--o);bottom:var(--o);height:calc(var(--t) - 2*var(--b));transform-origin:center bottom;transform:translateZ(calc(var(--t)/-2 + var(--b))) rotateX(-90deg);background-color:#8f7034}
.fly{left:0;right:var(--o);top:var(--o);bottom:var(--o);background:var(--paper);transform:translateZ(calc(var(--t)/2 - var(--b) - .6px))}
.rib3{left:64%;top:calc(100% - var(--o) - 2px);width:.55rem;height:2.4rem;transform:translateZ(0);
  background:linear-gradient(180deg,#4f1f1f 0%,#6e2c2c 45%,#8a3a3a 100%);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),50% 100%,0 calc(100% - 8px))}
@media(max-width:639px){.rib3{height:1.8rem;width:.45rem}}
/* spine */
.spine3{left:0;top:0;bottom:0;width:var(--t);transform-origin:left center;transform:translateZ(calc(var(--t)/-2)) rotateY(-90deg);
  display:flex;flex-direction:column;align-items:center;padding:calc(var(--th)*.045) 0;color:var(--foil);
  background:linear-gradient(90deg,#2a0d13 0%,#4a1c22 16%,#66292e 50%,#4a1c22 84%,#2a0d13 100%);box-shadow:inset 0 0 0 1px rgb(216 184 108/.1)}
.spine3::before,.spine3::after{content:"";position:absolute;left:8%;right:8%;height:4px;border-radius:2px;
  background:repeating-linear-gradient(90deg,#d8b86c 0 3px,#4c1d22 3px 5px,#f6e7b6 5px 6px,#4c1d22 6px 8px);box-shadow:0 1px 2px rgb(0 0 0/.6)}
.spine3::before{top:3px}.spine3::after{bottom:3px}
.spine3 .band{display:block;width:62%;height:4px;border-top:1.5px solid rgb(216 184 108/.85);border-bottom:1px solid rgb(216 184 108/.55);flex:none}
.spine3 .sp-t{margin-top:calc(var(--th)*.035);writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;font-family:var(--display);font-weight:500;font-size:calc(var(--t)*.34);letter-spacing:.08em;line-height:1}
.spine3 .sp-a{margin-top:auto;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;font-family:var(--display);font-style:italic;font-size:calc(var(--t)*.27);letter-spacing:.04em;line-height:1;color:rgb(216 184 108/.85)}
.spine3 .sp-m{margin:calc(var(--th)*.03) 0 calc(var(--th)*.025);font-family:var(--display);font-weight:600;font-size:calc(var(--t)*.4);line-height:1}
/* front board face: bordeaux cloth, gilt double-rule frame, tipped-in arched plate, gold-foil stamping. All cover type scales with --tw via em */
.fr{display:block;margin:0;padding:0;overflow:hidden;text-align:left;cursor:pointer;font-size:calc(var(--tw)*.04);
  background-color:var(--board);
  background-image:radial-gradient(85% 60% at 32% 16%,rgb(255 226 200/.08),transparent 62%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.03 1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.22' intercept='.39'/%3E%3CfeFuncG type='linear' slope='.22' intercept='.39'/%3E%3CfeFuncB type='linear' slope='.22' intercept='.39'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1 .03' numOctaves='2' stitchTiles='stitch' seed='7'/%3E%3CfeColorMatrix type='matrix' values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.22' intercept='.39'/%3E%3CfeFuncG type='linear' slope='.22' intercept='.39'/%3E%3CfeFuncB type='linear' slope='.22' intercept='.39'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(165deg,var(--board-hi) 0%,var(--board) 48%,var(--board-lo) 100%);
  background-size:auto,200px 200px,200px 200px,auto;background-blend-mode:screen,soft-light,soft-light,normal}
.fr .frame{position:absolute;inset:1.5em;pointer-events:none;border:1.35em solid transparent;
  border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cg fill='none' stroke='%23d8b86c'%3E%3Cpath d='M6 6H84V84H6Z' stroke-width='1.6'/%3E%3Cpath d='M11 11H79V79H11Z' stroke-width='.8' opacity='.55'/%3E%3C/g%3E%3Cg id='k' fill='%23d8b86c'%3E%3Cpath d='M6 2.2l3.8 3.8L6 9.8 2.2 6z'/%3E%3Cpath d='M21 12.5q0 8.5 8.5 8.5-8.5 0-8.5 8.5 0-8.5-8.5-8.5 8.5 0 8.5-8.5z' fill='%23ecd48f'/%3E%3C/g%3E%3Cuse href='%23k' transform='rotate(90 45 45)'/%3E%3Cuse href='%23k' transform='rotate(180 45 45)'/%3E%3Cuse href='%23k' transform='rotate(270 45 45)'/%3E%3C/svg%3E") 30 / 1.35em / 0 stretch;filter:drop-shadow(0 1px 0 rgb(0 0 0/.55))}
.fr .type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4.1em 3em 3.9em;text-align:center}
.type p{margin:0}
.fr .gilt{color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:radial-gradient(55% 90% at var(--mx) var(--my),rgb(255 250 228/.9),transparent 70%),
    linear-gradient(100deg,var(--foil-lo) 0%,var(--foil) 22%,var(--foil-hi) 42%,var(--foil) 58%,var(--foil-lo) 80%,var(--foil) 100%)}
.fr .k{font-family:var(--display);font-weight:500;font-size:.66em;letter-spacing:.3em;text-transform:uppercase;line-height:1.3;padding-left:.3em}
.fr .plate{position:relative;flex:1 1 auto;width:11em;min-height:8em;max-height:20em;margin-top:.9em;overflow:hidden;border-radius:5.5em 5.5em .25em .25em;background:var(--board-lo);
  box-shadow:0 0 0 1px rgb(0 0 0/.55),0 0 0 .16em rgb(216 184 108/.92),0 0 0 .26em var(--board-lo),0 0 0 .32em rgb(216 184 108/.45),0 .9em 1.8em -.5em rgb(0 0 0/.9)}
.fr .plate img{position:absolute;inset:0;height:100%;width:100%;object-fit:cover;object-position:50% 62%}
.fr .plate::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(0deg,rgb(20 10 8/.35),transparent 45%),radial-gradient(90% 70% at 50% 40%,transparent 55%,rgb(20 10 8/.45)),
    linear-gradient(112deg,transparent 42%,rgb(255 246 230/.07) 50%,transparent 58%);box-shadow:inset 0 0 0 1px rgb(255 240 210/.12)}
.fr .orn.staff{width:6.2em;height:2.3em;margin-top:1.1em;color:var(--foil);opacity:.92;filter:drop-shadow(0 1px 0 rgb(0 0 0/.5))}
.fr .orn.rule{width:9em;height:.6em;margin:.55em 0 .1em;color:var(--foil);opacity:.8}
.fr h1{margin-top:.15em;font-weight:600;font-size:2.5em;line-height:1.05;letter-spacing:-.005em;padding:0 .04em}
.fr .s{margin-top:.1em;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.35em;line-height:1.2}
.fr .a{margin-top:.55em;font-family:var(--display);font-style:italic;font-weight:500;font-size:1.1em;line-height:1.3}
.fr .c{margin-top:.7em;font-family:var(--display);font-size:.6em;letter-spacing:.24em;text-transform:uppercase;color:rgb(216 184 108/.72);padding-left:.24em}
.fr .ll{margin-top:1.05em;font-family:var(--display);font-size:.56em;letter-spacing:.14em;color:rgb(216 184 108/.62);white-space:nowrap}
@media(max-height:640px),(max-width:360px){.fr .ll{display:none}}
.fr .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(55% 42% at var(--mx) var(--my),rgb(255 236 214/.075),transparent 65%)}
.fr .joint{position:absolute;top:0;bottom:0;left:0;width:10%;pointer-events:none;background:linear-gradient(90deg,rgb(0 0 0/.6),rgb(0 0 0/.2) 45%,transparent 75%,rgb(255 255 255/.06) 92%,transparent)}
.fr .bevel{position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgb(255 220 190/.1),inset -3px 0 8px rgb(0 0 0/.35),inset 0 -2px 6px rgb(0 0 0/.3),inset 0 2px 4px rgb(255 230 210/.05)}
.fr:hover .sheen{background:radial-gradient(55% 42% at var(--mx) var(--my),rgb(255 236 214/.12),transparent 65%)}
/* floor shadow + the button under the book */
.tome-shadow{position:absolute;left:50%;top:50%;z-index:20;width:calc(var(--tw)*1.2);height:calc(var(--th)*.1);margin:calc(var(--th)*.44) 0 0 calc(var(--tw)*-.58);border-radius:50%;
  background:radial-gradient(closest-side,rgb(0 0 0/.9),rgb(0 0 0/.45) 50%,transparent);filter:blur(12px);transition:opacity .4s ease}
.stage.open .tome-shadow{opacity:0}
.tome-cta{position:absolute;left:50%;top:calc(50% + var(--th)/2 + 1.5rem);transform:translateX(-50%);z-index:12;display:inline-flex;min-height:2.75rem;align-items:center;gap:.6rem;padding:0 1.25rem;border-radius:8px;
  background:var(--paper);color:var(--ink);font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 30px -10px rgb(0 0 0/.8);transition:background-color var(--quick),opacity var(--fast) ease,visibility 0s linear var(--fast)}
.tome-cta:hover{background:var(--paper-edge)}.tome-cta:active{transform:translateX(-50%) scale(.96)}
.tome-cta[hidden]{display:none}
.stage.open+.tome-cta{opacity:0;visibility:hidden;pointer-events:none}
/* contents overlay */
.overlay{position:fixed;inset:0;z-index:60;display:flex;justify-content:flex-end;background:rgb(11 10 9/.6);backdrop-filter:blur(4px)}
.overlay[hidden]{display:none}
.sheet{position:relative;height:100%;width:min(30rem,100%);overflow-y:auto;background:var(--paper);color:var(--ink);padding:2.5rem 2rem 3rem;box-shadow:-24px 0 60px rgb(0 0 0/.5)}
.sheet .close{position:absolute;top:1rem;right:1rem;min-width:2.75rem;min-height:2.75rem;border-radius:8px;font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.sheet .close:hover{color:var(--ink);background:var(--paper-edge)}
.sheet h2{margin-top:.5rem;font-size:1.9rem}
.sheet ol{list-style:none;margin:1.5rem 0 0;padding:0}
.sheet li.sec{margin:1.25rem 0 .25rem}.sheet li.sec p{margin:0;font-family:var(--display);font-size:.7rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.sheet li.p a{display:flex;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgb(201 184 154/.5)}
.sheet li.p a:hover .t{color:var(--oxblood)}
.sheet .r{width:2rem;flex-shrink:0;font-family:var(--display);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sheet .t{font-family:var(--display);font-style:italic;font-size:1.1rem;line-height:1.3}
.sheet .fm{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.sheet .fm a{padding:.35rem .7rem;border:1px solid var(--rule);border-radius:999px;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.sheet .fm a:hover{border-color:var(--oxblood);color:var(--oxblood)}
.toc-modes{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin:1.35rem 0 .75rem;padding:.25rem;border:1px solid var(--rule);border-radius:999px;background:rgb(201 184 154/.12)}
.toc-modes button{min-height:2.4rem;padding:.45rem .7rem;border-radius:999px;font-family:var(--display);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.toc-modes button.on{background:var(--oxblood);color:var(--paper);box-shadow:0 2px 8px rgb(28 23 18/.12)}
.toc-panel[hidden]{display:none}
.curated-intro{margin:.75rem 0 1.1rem;font-family:var(--display);font-size:1rem;line-height:1.55;color:var(--ink-soft)}
.theme-groups{border-top:1px solid var(--rule)}
.theme-group{border-bottom:1px solid var(--rule)}
.theme-group summary{display:flex;align-items:baseline;gap:.75rem;cursor:pointer;padding:1rem 0;list-style:none;font-family:var(--display);font-size:1.2rem;line-height:1.25;color:var(--ink)}
.theme-group summary::-webkit-details-marker{display:none}
.theme-group summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:1rem;font-style:normal}
.theme-group[open] summary::after{content:"−"}
.theme-group summary small{margin-left:auto;font-size:.65rem;letter-spacing:.15em;color:var(--muted)}
.theme-group summary::after{margin-left:0}
.theme-desc{margin:-.35rem 0 .8rem;font-size:.94rem;line-height:1.5;color:var(--ink-soft)}
.theme-group ol{margin:.25rem 0 .9rem}
.theme-group li.p a{padding:.42rem 0}

@media(prefers-reduced-motion:reduce){.leaf,.stage{transition:opacity var(--quick) linear;transform:none}
  .tome{--ry:-14deg!important;--rx:4deg!important}.tome[data-open="true"]{--open:0deg;transition:none}.tome[data-open="true"] .f{transition:opacity var(--quick) linear}.bd.front{transition:none}}

/* order page */
.chrome-right{display:flex;align-items:center;gap:.75rem}
.order-link{font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-muted);padding:.5rem .6rem}
.order-link:hover{color:var(--gilt)}
.order-room{min-height:100dvh}
.order{position:relative;z-index:10;display:grid;gap:2.5rem;max-width:56rem;margin:0 auto;padding:3rem 1.25rem 5rem;align-items:center}
@media(min-width:768px){.order{grid-template-columns:20rem 1fr;padding-top:4rem}}
.order-cover{width:100%;max-width:20rem;height:auto;border-radius:6px;box-shadow:0 24px 80px -24px rgb(0 0 0/.8),0 8px 24px -8px rgb(0 0 0/.5);justify-self:center}
.order-text h1{font-size:2.6rem;margin-top:.5rem;color:var(--fg)}
.order-author{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--fg);margin:.25rem 0 1.5rem}
.order-desc{font-size:1rem;line-height:1.65;color:var(--fg-muted);max-width:38rem}
.btn-order{display:inline-flex;min-height:3rem;align-items:center;margin-top:1.5rem;padding:0 1.5rem;border-radius:8px;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.btn-order:hover{background:var(--paper-edge)}
.soon{margin-top:1.5rem;padding:1rem 1.25rem;border:1px solid rgb(244 234 214/.15);border-radius:8px;font-family:var(--display);font-style:italic;color:var(--fg-muted)}
.order-back{margin-top:2rem;font-family:var(--display);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
.order-back a{color:var(--fg-muted)}.order-back a:hover{color:var(--gilt)}
@media(max-width:480px){.order-link{display:none}}

/* listen */
.poem-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:1.6rem}
.poem-head p{margin:0}
.poem-head{flex-wrap:wrap}.poem-tools{display:inline-flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
.listen,.about-btn{position:relative;z-index:25;display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border:1px solid var(--rule);border-radius:999px;
  font-family:var(--display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);background:transparent;transition:color var(--quick),border-color var(--quick),background-color var(--quick)}
.listen:hover,.about-btn:hover{color:var(--oxblood);border-color:var(--oxblood)}
.listen.playing{background:var(--oxblood);border-color:var(--oxblood);color:var(--paper)}
.listen.playing svg{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* the edition page (/<lang>/order.html): the closed book as a still object, price, specs, the jacket laid flat */
.ed-hero{position:relative;z-index:10;display:grid;gap:1.5rem;max-width:64rem;margin:0 auto;padding:1rem 1.25rem 2rem;align-items:center}
@media(min-width:768px){.ed-hero{grid-template-columns:minmax(0,22rem) 1fr;gap:3.5rem;padding:1.5rem 2rem 3rem}}
.ed-stage{flex:none;padding:2.5rem 0 3rem;--th:min(50vh,430px);--tw:calc(var(--th)*2/3)}
.ed-stage .stage.closed{perspective:1500px}
.ed-stage .tome{--ry:-30deg;--rx:6deg}
.ed-stage .fr{cursor:default}
.ed-kick{color:var(--foil)}
.ed-text h1{font-size:2.5rem;margin-top:.5rem;color:var(--fg)}
@media(min-width:768px){.ed-text h1{font-size:3rem}}
.ed-lead{font-size:1.05rem}
.ed-buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:1.75rem}
.ed-price{margin:0;font-family:var(--display);color:var(--fg)}
.ed-num{display:block;font-size:2.5rem;font-weight:500;line-height:1}
.ed-plus{display:block;margin-top:.3rem;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
.ed-buy .btn-order,.ed-buy .soon{margin-top:0}
.ed-ship{margin-top:1.25rem;max-width:36rem;font-size:.9rem;line-height:1.6;color:var(--fg-muted)}
.ed-specs{position:relative;z-index:10;max-width:64rem;margin:0 auto;padding:0 1.25rem 2.5rem}
@media(min-width:768px){.ed-specs{padding:0 2rem 3rem}}
.ed-specs h2{margin:0 0 .75rem;color:var(--foil)}
.ed-specs dl{margin:0;border-top:1px solid rgb(216 184 108/.25)}
.ed-specs dl>div{display:grid;grid-template-columns:10rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid rgb(216 184 108/.16)}
@media(max-width:560px){.ed-specs dl>div{grid-template-columns:1fr;gap:.2rem}}
.ed-specs dt{padding-top:.2rem;font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-muted)}
.ed-specs dd{margin:0;font-size:.98rem;line-height:1.55;color:var(--fg)}
.ed-jacket{position:relative;z-index:10;max-width:72rem;margin:0 auto;padding:0 1.25rem 1.5rem}
.ed-jacket img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 30px 80px -30px rgb(0 0 0/.9)}
.ed-jacket figcaption{margin-top:.8rem;text-align:center;font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--fg-muted)}
.ed-back{position:relative;z-index:10;margin-top:1rem;padding:0 1.25rem 4rem;text-align:center}

/* facsimile plates: the sheet lies on the leaf, with a catalogue caption */
.leaf.plate{padding:1.5rem 1.25rem 1.25rem}
@media(min-width:640px){.leaf.plate{padding:2rem 1.75rem 1.5rem}}
.leaf.plate .leaf-body{display:flex;flex-direction:column;overflow:hidden}
.ms{display:flex;flex-direction:column;flex:1;min-height:0;margin:0}
.ms-sheet{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;padding:.5rem 0 0;cursor:zoom-in}
.ms-sheet img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  box-shadow:0 1px 2px rgb(28 23 18/.18),0 10px 28px -8px rgb(28 23 18/.35),0 0 0 1px rgb(28 23 18/.06);transition:transform var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
.ms-sheet:hover img{transform:translateY(-2px);box-shadow:0 2px 3px rgb(28 23 18/.2),0 18px 36px -10px rgb(28 23 18/.4),0 0 0 1px rgb(28 23 18/.06)}
.ms-more{position:absolute;right:.35rem;bottom:.35rem;padding:.2rem .5rem;border-radius:999px;background:rgb(28 23 18/.72);color:var(--paper);font-family:var(--display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
.ms figcaption{flex:none;display:flex;align-items:baseline;gap:.75rem;margin-top:1rem;padding-top:.6rem;border-top:1px solid rgb(201 184 154/.55);
  font-family:var(--display);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.ms figcaption .r{flex:none;font-size:.8rem;letter-spacing:.18em;color:var(--oxblood)}
.ms figcaption .c{min-width:0}
.ms.art figcaption{justify-content:center;text-align:center;border-top:0;padding-top:0}
.ms.art figcaption .c{font-style:italic;text-transform:none;letter-spacing:.04em;font-size:.95rem;color:var(--ink-soft)}
.leaf.plate.art .ms-sheet{padding:0}
.leaf.plate.art .ms-sheet img{box-shadow:0 1px 2px rgb(28 23 18/.12),0 14px 32px -12px rgb(28 23 18/.35)}
.toc .ms-mark,.sheet .ms-mark{margin-left:.45em;font-size:.72em;font-style:normal;color:var(--muted);vertical-align:.1em}
.leaf.endpaper.folder img{opacity:1;object-position:center 30%}
.leaf.endpaper.folder::after{background:linear-gradient(180deg,rgb(28 23 18/.12),rgb(28 23 18/.42));mix-blend-mode:multiply}
@media(max-height:700px) and (max-width:767px){.leaf.plate{padding:1.1rem 1rem 1rem}.ms figcaption{margin-top:.6rem;font-size:.62rem}}

/* lightbox: dark room, the sheet at reading size; tap to zoom into that spot */
.lightbox{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;background:rgb(11 10 9/.94);backdrop-filter:blur(6px);color:var(--fg)}
.lightbox[hidden]{display:none}
body.lb-open{overflow:hidden}
.lb-stage{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:max(3.25rem,env(safe-area-inset-top)) 1rem 1rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.lb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;cursor:zoom-in;box-shadow:0 30px 80px -20px rgb(0 0 0/.9);user-select:none}
.lightbox.zoomed .lb-stage{display:block;padding:3.25rem 0 0}
.lightbox.zoomed .lb-stage img{max-width:none;max-height:none;width:auto;height:auto;min-width:100%;cursor:zoom-out;margin:0 auto}
@media(min-width:640px){.lightbox.zoomed .lb-stage img{min-width:0;width:max(100%,1400px)}}
.lb-close{position:absolute;top:max(.6rem,env(safe-area-inset-top));right:max(.6rem,env(safe-area-inset-right));z-index:2;width:2.75rem;height:2.75rem;border-radius:999px;background:rgb(244 234 214/.1);font-size:1.6rem;line-height:1;color:var(--fg)}
.lb-close:hover{background:rgb(244 234 214/.2)}
.lb-bar{flex:none;display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.5rem 1rem max(.9rem,env(safe-area-inset-bottom))}
.lb-cap{margin:0;text-align:center;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-muted)}
.lb-nav{width:2.75rem;height:2.75rem;border-radius:999px;background:rgb(244 234 214/.1);font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--fg)}
.lb-nav:hover{background:rgb(244 234 214/.2)}.lb-nav[hidden]{display:none}

/* headnote: the title plate before every poem carries a short introduction; the same text opens in the sheet from the "About" button */
.center.plate-page{height:auto;min-height:100%;padding-bottom:.5rem}
.plate-page .plate-num{margin-top:1rem}
.plate-page .plate-title{margin-top:.75rem;font-size:2.2rem}
.plate-orig{margin-top:.4rem;font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--ink-soft)}
.plate-tools{margin:1rem 0 0}
.plate-page .orn.rule{margin-top:.9rem}
.plate-kick{margin-top:.7rem;letter-spacing:.24em}
.plate-note{margin:.5rem 0 0;max-width:48ch;text-align:left;font-family:var(--display);font-style:italic;font-size:1.04rem;line-height:1.45;color:var(--ink-soft);hyphens:auto}
@media(min-width:640px){.plate-note{font-size:1.06rem;line-height:1.46}}
.plate-note em{font-style:normal}
.sheet-tools{margin:1rem 0 0}.sheet .listen{font-size:.66rem}
.sheet-orig{margin:.4rem 0 0;font-family:var(--display);font-style:italic;font-size:1.15rem;color:var(--ink-soft)}
.sheet-note{margin:1.5rem 0 0;font-size:1.02rem;line-height:1.7;color:var(--ink-soft)}
.headnote{margin-top:1.5rem;color:var(--ink-soft)}.headnote summary{cursor:pointer;font-family:var(--display);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}.headnote p{margin:.5rem 0 0;font-size:.95rem;line-height:1.6}

/* songs */
.plate-song{margin-top:1rem;font-family:var(--display);font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.plate-links{margin-top:.5rem;font-family:var(--display);font-size:.9rem;color:var(--ink-soft)}
.plate-links a{border-bottom:1px solid var(--rule)}.plate-links a:hover{color:var(--oxblood);border-color:var(--oxblood)}

/* ---------- codex: the author's hand and drawings as ink on the leaf; Leonardo-notebook marginalia ----------
   tools/codex.py lifts the ink off the photographed sheets (white = the leaf); .cx-ink multiplies it onto the paper.
   Studies (.cx-study) are sanguine line drawings; .mirror is mirror script, the way Leonardo annotated his sheets. */
:root{--sang:#8f3f2a;--sepia:#5b4231}
.cx-ink{display:block;mix-blend-mode:multiply;max-width:100%;max-height:100%;width:auto;height:auto}
.leaf.plate::before,.leaf.study::before,.leaf.codex-plate::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:6;mix-blend-mode:multiply;
  background:
    radial-gradient(circle at 17% 74%,rgb(150 105 55/.09) 0,rgb(150 105 55/0) 1.4%),
    radial-gradient(circle at 81% 21%,rgb(150 105 55/.08) 0,rgb(150 105 55/0) 1.1%),
    radial-gradient(circle at 63% 88%,rgb(150 105 55/.07) 0,rgb(150 105 55/0) .9%),
    radial-gradient(circle at 28% 12%,rgb(150 105 55/.06) 0,rgb(150 105 55/0) 1.6%),
    radial-gradient(ellipse at 50% 42%,rgb(255 250 240/0) 58%,rgb(135 100 55/.09) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g' color-interpolation-filters='sRGB'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='11' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feColorMatrix values='.06 0 0 0 .94 0 .06 0 0 .94 0 0 .06 0 .94 0 0 0 0 1'/></filter><rect width='240' height='240' filter='url(%23g)'/></svg>");
  background-size:auto,auto,auto,auto,auto,240px 240px}
/* the manuscript leaf */
.ms.codex{position:relative}
/* no transform / opacity / z-index between .leaf and .cx-ink — each would isolate the image and break the multiply blend */
.ms.codex .ms-sheet{padding:0}
.ms.codex .ms-sheet img,.ms.codex .ms-sheet:hover img{box-shadow:none;transform:none;transition:opacity var(--fast) var(--ease)}
.ms.codex .ms-sheet:hover .cx-main{opacity:.86}
.ms.codex .ms-more{right:auto;left:.35rem;bottom:.35rem}
.cx-mark{position:absolute;left:0;top:0;z-index:2;display:flex;align-items:center;gap:.35rem;color:var(--sang);opacity:.7;pointer-events:none;
  font-family:var(--display);font-size:.7rem;letter-spacing:.2em}
.cx-mark svg{width:1.6rem;height:1.6rem}.cx-mark b{font-weight:500}
.mirror{margin:0;font-family:var(--display);font-style:italic;font-weight:400;color:var(--sepia);opacity:.42;transform:scaleX(-1);
  white-space:pre-line;line-height:1.3;pointer-events:none;user-select:none}
.ms-mirror{position:absolute;right:0;top:.15rem;z-index:2;max-width:70%;font-size:.95rem;text-align:left;opacity:.34}
.ms.codex figcaption{position:relative;z-index:2}
/* the drawings facing the part and section plates */
.ms.art.codex .ms-sheet{padding:.5rem 0 0}
.ms.art.codex .ms-sheet img{max-height:100%}
.cx-study{position:absolute;pointer-events:none;color:var(--sang);opacity:.24}
.cx-study svg{display:block;width:100%;height:100%}
.art-study{right:-5%;top:1%;width:34%;aspect-ratio:1;opacity:.18;transform:rotate(-6deg)}
.art-mirror{position:absolute;left:0;top:0;z-index:2;font-size:.95rem;text-align:left;opacity:.3}
.ms.art.codex figcaption{position:relative;z-index:2}
.ms.art.codex.sketch .ms-sheet{display:flex;justify-content:center;max-width:22rem;margin:0 auto;padding:1.5rem 0 .5rem;cursor:default}
/* the recto plates of parts and sections: a study low on the page, under the title */
.sec-study{right:5%;bottom:10%;width:38%;aspect-ratio:1;opacity:.22}
.leaf.codex-plate .center{position:relative;z-index:1}
/* the empty verso before a title plate: a study in the margin and the opening lines in mirror script */
.study-page{position:relative;height:100%;min-height:100%}
.study-page .cx-study{width:56%;aspect-ratio:1;left:22%;top:12%;opacity:.2}
.study-page[data-v="1"] .cx-study{width:48%;left:8%;top:20%;transform:rotate(8deg)}
.study-page[data-v="2"] .cx-study{width:50%;left:38%;top:8%;transform:rotate(-7deg)}
.study-page .mirror{position:absolute;left:6%;right:6%;bottom:16%;font-size:1.15rem;text-align:left}
.study-page[data-v="1"] .mirror{bottom:auto;top:66%}
.study-page .study-num{position:absolute;left:0;bottom:6%;margin:0;font-family:var(--display);font-size:.75rem;letter-spacing:.3em;color:var(--sang);opacity:.55}
@media(max-width:767px){.study-page .mirror{font-size:1.05rem}.ms-mirror{font-size:.85rem}.art-study{width:40%}}
@media(max-height:700px) and (max-width:767px){.ms.codex .cx-detail{width:42%}}
@media(prefers-reduced-motion:reduce){.ms.codex .ms-sheet{transform:none}}

/* vignettes: a small drawing on the verso before a poem's title plate — not a full-page plate; it sits centred with air around it */
.ms.art.vig .ms-sheet img{max-width:82%;max-height:78%}
.ms.art.vig figcaption{margin-top:.8rem}
@media(max-width:767px){.ms.art.vig .ms-sheet img{max-width:90%;max-height:84%}}

/* Collection search: unobtrusive in the chrome, readable as a book index. */
.btn-search{display:inline-flex;align-items:center;justify-content:center;gap:.48rem;min-height:2.75rem;padding:.45rem .75rem;border:1px solid rgb(244 234 214/.16);border-radius:10px;color:var(--fg);background:rgb(18 16 14/.58);font-family:var(--display);font-size:.77rem;letter-spacing:.07em;transition:background var(--quick),border-color var(--quick)}
.btn-search:hover,.btn-search:focus-visible{background:rgb(244 234 214/.12);border-color:var(--gilt)}
.btn-search svg{flex-shrink:0}
.search-field{display:flex;align-items:center;margin-top:1.4rem;border:1px solid var(--rule);border-radius:12px;background:rgb(255 255 255/.43)}
.search-field:focus-within{outline:2px solid var(--oxblood);outline-offset:2px}
.search-field svg{flex-shrink:0;margin-left:1rem;color:var(--muted)}
.search-field input{display:block;width:100%;min-width:0;padding:.9rem 1rem;border:0;outline:0;background:transparent;color:var(--ink);font:400 1rem var(--body);border-radius:12px}
.search-field input::placeholder{color:var(--muted);opacity:1}
.search-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .75rem}
.search-filters button{min-height:2.4rem;padding:.45rem .95rem;border:1px solid var(--rule);border-radius:999px;font:600 .8rem var(--display);color:var(--ink-soft)}
.search-filters button[aria-pressed="true"]{background:var(--oxblood);border-color:var(--oxblood);color:var(--paper)}
.search-status{min-height:1.4rem;margin:1rem 0 .3rem;color:var(--muted);font-size:.84rem;line-height:1.5}
.search-results{list-style:none;margin:.3rem 0 1rem!important;padding:0!important}
.search-results li{border-bottom:1px solid rgb(201 184 154/.5)}
.search-results a{display:block;padding:.85rem .3rem .95rem;border-radius:4px}
.search-results a:hover,.search-results a:focus-visible{background:rgb(201 184 154/.18)}
.search-result-meta{display:flex;gap:.5rem;align-items:center;color:var(--muted);font:600 .69rem var(--display);letter-spacing:.13em;text-transform:uppercase}
.search-result-title{display:block;margin:.25rem 0 .3rem;font:italic 500 1.35rem/1.24 var(--display);color:var(--ink)}
.search-result-snippet{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:.88rem;line-height:1.42;color:var(--ink-soft);overflow-wrap:anywhere}
.search-hint{margin:.55rem 0 1rem;font-size:.76rem;line-height:1.5;color:var(--muted)}
@media(max-width:720px){.btn-search{width:2.75rem;padding:.5rem}.btn-search span{display:none}}
@media(max-width:420px){.chrome{gap:.3rem;padding-left:max(.6rem,env(safe-area-inset-left));padding-right:max(.6rem,env(safe-area-inset-right))}.chrome-right{gap:.3rem}.wordmark{font-size:.78rem;letter-spacing:.16em}.langs{gap:0;padding:.17rem}.langs a{min-width:2rem;padding:0 .28rem}.btn-search{width:2.6rem;min-height:2.6rem}.sheet[data-mode="search"]{padding:2.6rem 1.1rem 3rem}.search-field input{font-size:16px}}
@media(prefers-reduced-motion:reduce){.btn-search{transition:none}}