/* /footnotes: every footnote on stanza.pictures, grouped by page, each at its own address (tools/footnotes.py; site/footnotes/footnotes.json),
   in the reading room's manner (paper.css, main.legal), with what a footnote adds: its card's words as the page shows them, the before and
   after to drag across, the close pictures, how it was done (folded), the sources */
.fp-page h1{margin:0 0 10px}
.legal .fp-how{margin:0 0 6px; color:var(--soft); font-size:1rem}
.fp-chip{display:inline-block; min-width:1.45em; padding:0 .32em; box-sizing:border-box; border-radius:.75em; background:var(--ink); color:var(--ground);
  font:600 .66rem/1.6 "Libre Caslon Text",Georgia,serif; text-align:center; vertical-align:.2em}
.fp-toc ul{margin:0; padding:0; list-style:none}
.legal .fp-toc > ul > li{margin:0 0 8px; font-size:1rem}
.fp-toc ul ul{padding-left:1.1em; margin:3px 0 0}
.legal .fp-toc ul ul li{margin:0 0 2px; font-size:.95rem}
.fp-group{margin:46px 0 0; padding-top:18px; border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent)}
.legal .fp-group > h2{margin:0 0 6px; font:500 11px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--soft)}
.legal .fp-group > h2 a{color:inherit; text-decoration:none}
.legal .fp-group > h2 a:hover{text-decoration:underline}
.fp-entry{position:relative; margin:18px -14px 34px; padding:12px 14px 6px; border-radius:4px; scroll-margin-top:24px}
.fp-entry:target{animation:fp-here 2.4s ease-out 1 both}
@keyframes fp-here{from{background:color-mix(in srgb,var(--accent) 11%,transparent)} to{background:transparent}}
@media (prefers-reduced-motion:reduce){ .fp-entry:target{animation:none; background:color-mix(in srgb,var(--accent) 7%,transparent)} }
.legal .fp-entry h3{margin:0 0 4px; font:italic 400 1.5rem/1.25 var(--display)}
.fp-self{position:absolute; left:-.9em; width:.9em; color:var(--soft); text-decoration:none; font-style:normal; opacity:0; transition:opacity .15s}
.fp-entry:hover .fp-self, .fp-self:focus-visible{opacity:.7}
.legal .fp-meta{margin:0 0 12px; font-size:.92rem; color:var(--soft)}
.legal .fp-card{margin:0 0 16px; padding:2px 0 2px 16px; border-left:2px solid color-mix(in srgb,var(--accent) 55%,transparent); font-style:normal;
  font-size:1.02rem; line-height:1.55}
.legal .fp-entry h4{margin:20px 0 4px; font:500 11px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--soft)}
.legal .fp-entry h4 + p{margin-top:0}
/* the before and after: one picture, the line dragged across it (page.js); without a script, the after over the before's right half */
.rr-paper figure.fp-compare{margin:6px -14px 4px}
.fp-wipe{position:relative; line-height:0; border-radius:3px; overflow:hidden; touch-action:pan-y; --pos:50%}
.fp-wipe img{display:block; width:100%; height:auto; -webkit-user-drag:none; user-select:none; -webkit-user-select:none}
.fp-wipe .fp-after{position:absolute; inset:0; height:100%; clip-path:inset(0 0 0 var(--pos))}
.fp-line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; margin-left:-1px; background:#f3eee3; box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.fp-line::after{content:""; position:absolute; top:50%; left:50%; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  background:#f3eee3; box-shadow:0 1px 4px rgba(0,0,0,.4)}
.fp-tag{position:absolute; top:8px; padding:2px 7px 3px; border-radius:2px; background:rgba(243,238,227,.9); color:#211d18;
  font:500 10px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.fp-tag.l{left:8px} .fp-tag.r{right:8px}
.fp-range{display:block; width:100%; margin:8px 0 0; accent-color:var(--accent)}
html:not(.fp-js) .fp-range{display:none}
.rr-paper .fp-compare figcaption{margin-top:4px}
.fp-close{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:6px -14px 0}
.rr-paper .fp-close figure{margin:0}
.fp-close img{display:block; width:100%; aspect-ratio:360/415; object-fit:cover; border-radius:2px}
.rr-paper .fp-close figcaption{font-size:.84rem}
.fp-method{margin:16px 0 0; font-size:.95rem}
.fp-method summary{cursor:pointer; color:var(--soft)}
.fp-method p{margin:6px 0 0}
.legal .fp-sources{margin:0; padding-left:1.4em; font-size:.92rem; line-height:1.5}
.fp-sources li{margin:0 0 6px}
.fp-sources a{word-break:break-word}
@media (max-width:700px){
  .fp-entry{margin-left:-10px; margin-right:-10px; padding-left:10px; padding-right:10px}
  .fp-self{display:none}
  .rr-paper figure.fp-compare, .fp-close{margin-left:-10px; margin-right:-10px}
  .fp-close{gap:6px}
  .rr-paper .fp-close figcaption{font-size:.74rem}
}