/* ============================================
   ANNOTATED ARCHIVE MARGINALIA
   Shared stylesheet for /literature/*.html reader
   pages that carry the marginalia layer. Each
   annotated passage is wrapped in .annot-wrap;
   the passage text carries <mark class="annot">,
   and the sibling <aside class="annot-note">
   floats into the right gutter at wide viewports
   and collapses inline on tablet/mobile.

   Palette matches the tracker's amber/near-black
   tokens. Gutenberg-derived reader pages set
   body { margin: 0 10% } by default; the
   @media (min-width: 1100px) override moves the
   right margin to 360px so the gutter has room.
   ============================================ */

@media (min-width: 1100px) {
    body { margin-right: 360px; }
    .annot-wrap { position: relative; }
    .annot-note {
        position: absolute;
        left: calc(100% + 24px);
        top: 0;
        width: 300px;
        font-size: 12.5px;
        line-height: 1.55;
    }
}
@media (max-width: 1099px) {
    .annot-note {
        display: block;
        margin: 16px 0 20px;
        max-width: 100%;
    }
}

.annot {
    background: rgba(227, 179, 65, 0.16);
    border-bottom: 1px dashed #8A6D2F;
    padding: 0 2px;
    cursor: help;
    transition: background 0.15s ease-out;
}
.annot:hover, .annot:focus-visible {
    background: rgba(227, 179, 65, 0.32);
}

.annot-note {
    font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #2c2e35;
    border-left: 3px solid #E3B341;
    padding: 10px 16px 12px;
    background: #FBF7EE;
    border-radius: 0 3px 3px 0;
    text-indent: 0;
}
.annot-label {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 2px;
    color: #8A6D2F;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-weight: 600;
}
.annot-body {
    margin: 0 0 10px;
    text-align: left;
}
.annot-body p {
    margin: 0 0 8px;
    text-indent: 0;
}
.annot-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.annot-links li { margin: 0; }
.annot-links a {
    font-family: ui-monospace, "SF Mono", Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 1.2px;
    color: #6b4a12;
    text-decoration: none;
    border-bottom: 1px dotted #b58c3a;
    padding-bottom: 1px;
}
.annot-links a:hover, .annot-links a:focus-visible {
    color: #E3B341;
    border-bottom-color: #E3B341;
    background: transparent;
}

/* Reader top nav aligned to amber palette. */
.reader-topnav { background: #0A0C10; border-bottom: 1px solid #232A36; }
.reader-topnav a { color: #E3B341 !important; }
.reader-topnav a:hover { color: #F0C557 !important; }