/*
 * Marginalia component (see technical/design-philosophy.md, the marginalia
 * entry, for the design reasoning)
 *
 * A small slip of paper resting just off the sheet's right edge, anchored
 * beside the passage it relates to. Authored as raw HTML in markdown,
 * placed immediately AFTER the paragraph it annotates:
 *
 *   <aside class="marginalia">
 *   <p class="marginalia-label">Note</p>
 *   <p>...</p>
 *   </aside>
 *
 * Tilt: on wide screens every slip rests at a slight angle, as if placed
 * by hand. The angle varies per slip (direction and amount) via an
 * nth-of-type cycle — stable across visits, different between notes.
 * On hover the slip straightens to be read, then settles back.
 *
 * Layout: on wide screens the slip is floated out of the reading column
 * to sit just beyond the sheet's right edge (Tufte-style float + negative
 * margin — pure CSS, no JS). The slip's top edge sits level with the end
 * of the paragraph it follows — the note appears where the reader
 * finishes the annotated passage. Successive slips clear each other and
 * stack. On narrower screens the slip sits inline in the body flow.
 *
 * Weak-default rule: when an article contains marginalia, the standard
 * sidebar (Part of / Related / Tagged / New here) is not rendered at all —
 * the right column belongs to the marginalia. Enforced at build time
 * (page_renderer.py + marginalia_detector.py), not in CSS.
 */

/* The slip itself — a small piece of paper, distinct from the sheet.
   Note register: serif italic, as if written by hand in the margin.
   Default (narrow screens): an inline block in the body flow. */
.article-body .marginalia {
    background-color: var(--color-slip);
    background-image: var(--texture-paper);
    box-shadow: var(--shadow-slip);
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin: var(--space-md) 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-ink);
}

.article-body .marginalia p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.article-body .marginalia p:last-child {
    margin-bottom: 0;
}

/* Label — same register as the in-body aside label: small caps in the
   signature colour, upright sans against the italic note text. */
.article-body .marginalia .marginalia-label {
    font-family: var(--font-sans);
    font-style: normal;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 0.35rem;
}

/* Wide screens: pull the slip out of the reading column so it rests just
   beyond the sheet's right edge. Pull distance = sheet padding + a small
   gap + slip width, so the slip's left edge sits one --space-sm off the
   sheet. The negative top margin tucks the slip up against the end of
   the paragraph it follows (compensating for paragraph spacing). */
@media (min-width: 1000px) {
    .article-body .marginalia {
        float: right;
        clear: right;
        width: 220px;
        margin: calc(-1 * var(--space-sm)) calc(-1 * (var(--space-xl) + var(--space-sm) + 220px)) var(--space-md) 0;
        /* Resting tilt — hand-placed. The settle-back transition lives
           here (slower); the straightening transition lives on :hover
           (quicker), so reading feels responsive and resting feels lazy. */
        transform: rotate(var(--marginalia-tilt, -1.2deg));
        transition: transform 0.45s ease;
    }

    /* Hand-placed variance: successive slips take different angles and
       directions. Overlapping nth-of-type patterns (later rule wins)
       spread the cycle so adjacent slips never share an angle. Counts
       <aside> siblings within the article body. */
    .article-body .marginalia:nth-of-type(2n) {
        --marginalia-tilt: 1deg;
    }

    .article-body .marginalia:nth-of-type(3n) {
        --marginalia-tilt: -0.7deg;
    }

    .article-body .marginalia:nth-of-type(4n) {
        --marginalia-tilt: 1.4deg;
    }

    .article-body .marginalia:nth-of-type(5n) {
        --marginalia-tilt: -1.5deg;
    }

    /* Hover: the slip straightens to be read, then settles back to its
       resting angle when the reader moves on. */
    .article-body .marginalia:hover {
        transform: rotate(0deg);
        transition: transform 0.25s ease-out;
    }
}

/* Respect reduced-motion preferences: slips keep their resting tilt and
   straighten instantly on hover, with no animation. */
@media (prefers-reduced-motion: reduce) {
    .article-body .marginalia,
    .article-body .marginalia:hover {
        transition: none;
    }
}