/* A footnote where the question arises: any page of stanza.pictures can carry one (tools/footnotes.py draws it from [fn <id> <n>]word[/fn];
   site/footnotes/footnotes.json holds its words). His words, 2026-11-01, through Verso: "an on-hover exposure of a footnote with a link to a
   project footnote page we can use universally throughout our site" (about 3:10 pm) · "perfect on the footnote! ship it" (about 4:09 pm):
   the word itself and a small numbered chip, one button; a paper card above it with what we did, a switch where the picture can show itself
   as photographed, and the link to its entry on /footnotes.
   - Only the trigger opens it: nothing invisible round the word (his first look, about 3:50 pm: a card had opened "when I rolled over a
     random area of the leaves of grass title", then "I can't get it back"). A short pause before it opens under a resting pointer, so a
     pointer passing by doesn't; at once on a click, a tap or keyboard focus. A click pins it; a second click closes it, even under the
     pointer; leaving, Escape or a click outside closes it; the same move opens it again every time (footnote.js).
   - Without a script: a pointer over it, or keyboard focus, opens it, and the switch works (:has).
   - Its place: above the element that holds it, which the page makes position:relative (footnote.js points the card at the word and
     keeps it on the screen; without a script, it stands centred over that element).
   - Its colors: the chip is the text's own color (--fn-chip) with its number in the ground's (--fn-chip-ink); the card is the site's
     paper and ink. */

.fn{display:inline}
.fn-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* the trigger: exactly the word and its chip, a little padding so it is at least 30 px tall */
.fn-mark{appearance:none; -webkit-appearance:none; display:inline; margin:0 -.12em; padding:.3em .12em; border:0; border-radius:3px; background:none;
  color:inherit; font:inherit; letter-spacing:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  -webkit-box-decoration-break:clone; box-decoration-break:clone}
.fn-mark:focus{outline:none}
.fn-mark:focus-visible{outline:2px solid currentColor; outline-offset:1px}
.fn-word{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.24em; text-decoration-color:transparent;
  transition:text-decoration-color .15s}
.fn-chip{display:inline-block; margin-left:.28em; min-width:1.45em; padding:0 .32em; box-sizing:border-box; border-radius:.75em;
  background:var(--fn-chip, currentColor); color:var(--fn-chip-ink, #f3eee3);
  font:600 .66rem/1.6 "Libre Caslon Text",Georgia,serif; font-style:normal; letter-spacing:0; text-align:center; vertical-align:.2em}
.fn:is(:hover, .open) .fn-word{text-decoration-color:color-mix(in srgb,var(--fn-chip, currentColor) 80%,transparent)}

/* the card: hidden until asked for; after a short pause under a resting pointer (.12 s), at once on a click, a tap or the keyboard; gone
   after a short grace (.35 s), so the pointer can travel into it */
.fn-card{position:absolute; z-index:40; bottom:calc(100% + 16px); left:var(--fn-x, 50%); width:min(380px, calc(100vw - 32px)); margin-left:calc(min(380px, calc(100vw - 32px)) / -2);
  box-sizing:border-box; padding:14px 16px 13px; background:#f3eee3; color:#211d18; border-radius:3px;
  box-shadow:0 1px 2px rgba(0,0,0,.22), 0 12px 34px rgba(0,0,0,.34);
  font:400 .95rem/1.48 "Libre Caslon Text","Iowan Old Style",Georgia,serif; font-style:normal; letter-spacing:0; text-align:left; text-wrap:pretty;
  visibility:hidden; opacity:0; translate:0 4px; transition:opacity .15s ease .2s, translate .15s ease .2s, visibility 0s linear .35s}
.fn:hover:not(.hush) .fn-card{visibility:visible; opacity:1; translate:0 0; transition:opacity .14s ease .12s, translate .14s ease .12s, visibility 0s linear .12s}
.fn:is(.open, :has(:focus-visible)):not(.hush) .fn-card{visibility:visible; opacity:1; translate:0 0; transition:opacity .12s ease, translate .12s ease, visibility 0s}
@media (prefers-reduced-motion:reduce){ .fn .fn-card{translate:none !important; transition-property:visibility !important} }
@media (hover:none){ html.fn-js .fn:hover:not(.open):not(:has(:focus-visible)) .fn-card{visibility:hidden; opacity:0} }   /* a tap's lingering hover: the tap decides */
/* its point at the word; the bridge from its foot down to the top of the word, never over it (footnote.js measures both) */
.fn-card::after{content:""; position:absolute; left:calc(50% + var(--fn-nudge, 0px)); top:100%; margin-left:-7px; border:7px solid transparent; border-top-color:#f3eee3}
.fn-card::before{content:""; position:absolute; left:0; right:0; top:100%; height:var(--fn-bridge, 16px)}
.fn-text{display:block; margin:0 0 10px}
/* the card's own colors hold on any page, whatever its links and words wear (a page's "a" rule outranks a single class) */
.fn .fn-card .fn-text{color:#211d18}
.fn .fn-card a.fn-more{color:#9a3324}
.fn-more{display:inline-block; color:#9a3324; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; font:400 .9rem/1.3 "Libre Caslon Text",Georgia,serif}
.fn-more:focus-visible{outline:2px solid #9a3324; outline-offset:2px}

/* the switch: As shown · As photographed, laying the picture as photographed (img.fn-photo, over the page's own) while the card is open */
.fn-swap{display:flex; margin:0 0 11px; border:1px solid color-mix(in srgb,#211d18 22%,transparent); border-radius:3px; overflow:hidden; width:max-content}
.fn-swap label{position:relative; display:block; cursor:pointer}
.fn-swap input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.fn-swap span{display:block; padding:6px 12px 7px; font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.08em; text-transform:uppercase; color:#6d6457}
.fn-swap label + label span{border-left:1px solid color-mix(in srgb,#211d18 22%,transparent)}
.fn-swap input:checked + span{background:#211d18; color:#f3eee3}
.fn-swap input:focus-visible + span{outline:2px solid #9a3324; outline-offset:-3px}
.fn-photo{position:absolute; inset:0; width:100%; height:100%; max-width:none; opacity:0; pointer-events:none; transition:opacity .35s ease}
body:has(.fn:is(:hover, .open, :has(:focus-visible)):not(.hush) .fn-swap input[value="photo"]:checked) .fn-photo{opacity:1}
body:has(.fn:is(:hover, .open, :has(:focus-visible)):not(.hush) .fn-swap input[value="photo"]:checked) .fn-swap-hide{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .fn-photo{transition:none} }

@media (max-width:700px){ .fn-card{padding:13px 15px 12px; font-size:.93rem} }
@media print{ .fn-card{display:none} }