body {
    text-align: left;
    margin-left: 15%;
    margin-right: 15%;
    background: initial;
    color: initial;
}

p {
    margin: 0.5em;
    text-indent: 2em;
    font-size: large;
    }
p.continued, h2 + p, hr + p, p:first-child {
    text-indent: 0
    }

hr {
    border: none;
    border-top: 1px solid;
    height: 0;
    margin: 1.5em auto;
    width: 25%
    }
h1, h2 {
    font-variant: small-caps;
    text-align: center;
    margin: 3em 0
    }

cite {
    display: block;
    font-style: normal;
    font-variant: small-caps;
    margin-top: 1em;
    text-align: right
    }
b {
    font-variant: small-caps;
    font-weight: normal
    }
.toc {
    text-align: center
    }
.toc h2 {
    margin-bottom: 1em
    }
.toc ol {
    display: inline-block;
    list-style: none;
    margin: auto;
    padding-left: 0
    }
ul {
    list-style: none;
    padding: 0
    }
.header {
    font-variant: small-caps;
    text-align: center
    }
.valediction {
    margin-top: 1em;
    text-align: right
    }
.signature {
    font-variant: small-caps;
    text-align: right
    }
table {
    margin: 1em 2em
    }
td {
    padding: 0 0.5em;
    vertical-align: bottom
    }
td.right {
    text-align: center
    }
.dedication {
    font-variant: small-caps;
    text-align: center;
    margin: 3em auto;
    max-width: 80%
    }
.verse p {
    text-indent: 0
    }
.verse p span {
    text-indent: -1em;
    padding-left: 1em
    }
.verse p span.i1 {
    text-indent: -1em;
    padding-left: 2em
    }
.verse p span.i2 {
    text-indent: -1em;
    padding-left: 3em
    }
.epigraph {
    font-style: italic;
    margin: 3em auto;
    max-width: 40em
    }
.fnote {
    /* */
    border: 0px;
    border-radius: 5px;
    background-color: gold;
    /*font-size: x-large;*/
    
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 0.5em;
    padding-right: 0.5em;
    
    /*box-shadow:
      inset 2px 2px 3px rgb(255 255 255 / 0.6),
      inset -2px -2px 3px rgb(0 0 0 / 0.6); */
}
.fnote:hover {
  background-color: goldenrod;
}

.fnote:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(0 0 0 / 0.6);
}

/* https://jakearchibald.com/2025/give-footnotes-the-boot */
.fnote-pop {
    &:not(:popover-open) {
        all: unset;
    }

    --side-margin: 20px;
    --border-radius: 7px;
    @media (width > = 530px) {
        --side-margin: 30px;
    }

    &:popover-open {
        all: unset;
        font-size: 1rem;
        .fnote-popc {
            position: fixed;
            background: #fff;
            padding: 0.9em 1.1em;
            max-width: min(476px, calc(100vw - 60px));
            border-radius: var(--border-radius);
            animation: popover-in 0.2s ease;
        }

        &::backdrop {
            background: rgba(0, 0, 0, 0.3);
            animation: backdrop-in 0.2s ease;
        }
    }

    @supports not (bottom: anchor(top)) {
        .fnote-popc {
            margin: auto;
            inset: 0;
            height: fit-content;
        }
    }

    @supports (bottom: anchor(top)) {
        &:popover-open {
            --arrow-size: 10px;
            .fnote-popc {
                position-anchor: var(--position-anchor);
                bottom: anchor(top);
                justify-self: anchor-center;
                margin: 0 var(--side-margin) var(--arrow-size);
                max-width: 476px;
            }

            &::after {
                position-anchor: var(--position-anchor);
                content: '';
                position: fixed;
                bottom: anchor(top);
                justify-self: anchor-center;
                border: calc(var(--arrow-size) + 1px) solid transparent;
                border-bottom-width: 0;
                border-top-color: #fff;
                width: 0;
                height: 0;
                margin: 0 calc(var(--side-margin) + var(--border-radius));
                animation: popover-in 0.2s ease;
            }
        }
    }
}