/* fieldguide.css: only what the field guide page needs on top of style.css.
   No animation anywhere on this page, so there is nothing for reduced-motion to switch off. */

.lede { font-size: 1.1rem; }

.caution {
    margin: 1.4rem 0;
    padding: .55rem .95rem;
    border-left: 3px solid var(--honey);
    background: rgba(230, 194, 122, .07);
}
.caution strong { color: var(--honey); font-weight: normal; font-variant: small-caps; letter-spacing: .05em; }

/* the plates: a ruled card, like a leaf pasted into a notebook */
.plate {
    margin: 1.8rem -.5rem 2rem;
    padding: .6rem .6rem 0;
    border: 1px solid #2b4656;
    background: rgba(11, 18, 36, .6);
    box-shadow: 3px 4px 0 rgba(7, 12, 26, .55);
}
.plate svg { display: block; width: 100%; height: auto; }
.plate figcaption {
    margin-top: .4rem;
    padding: .5rem .3rem .6rem;
    border-top: 1px dotted #2b4656;
    font-size: .9rem;
    line-height: 1.5;
    font-style: italic;
    color: #c3ccc9;
}
.plate .pl { font-style: normal; font-variant: small-caps; letter-spacing: .06em; color: var(--honey); margin-right: .35rem; }

/* the three marks, and the look-alikes */
.marks { list-style: none; padding-left: 0; counter-reset: mark; }
.marks li { counter-increment: mark; position: relative; padding-left: 2rem; margin: .6rem 0; }
.marks li::before {
    content: counter(mark, lower-roman) ".";
    position: absolute; left: 0; top: 0;
    color: var(--honey); font-style: italic;
}
.marks b, .hl, .alike dt { font-weight: normal; color: var(--honey); }
.alike dt { margin-top: 1rem; }
.alike dt i { color: var(--teal); }
.alike dd { margin: .2rem 0 0 1.2rem; }

/* footnote numbers */
sup { font-size: .68em; line-height: 0; }
sup a { text-decoration: none; padding: 0 .08em; }
sup a:hover, sup a:focus { text-decoration: underline; }

.unsure { color: #c3ccc9; }

.sources { font-size: .86rem; line-height: 1.5; color: #c3ccc9; padding-left: 1.6rem; }
.sources li { margin: .45rem 0; overflow-wrap: anywhere; }
.sources li:target { color: var(--cream); outline: 1px dotted var(--honey); outline-offset: 3px; }

@media print {
    html, body { background: #fff; color: #000; }
    .plate { background: #0b1224; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}