/* Red ink: the stopgap "2026 mode" (temporary, meant to last about a week).
 *
 * The 2014 page is treated as a printed sheet that an editor has marked up in red pen.
 * Rules of the game:
 *   - the 2014 content and layout stay EXACTLY as they were; ink never takes up space,
 *     it is only drawn on top (absolute positioning / zero-width anchors)
 *   - edits use HTML's own editing tags, so the page means "edited", not just looks it:
 *       <del class="ink-strike">word</del>                  a pen slash through a word
 *       <ins class="ink-insert">new words</ins>             a caret at the insertion point,
 *                                                           with the new words written above
 *   - everything is switched on by one class, <body class="red-ink">. Without it, del/ins
 *     render as the plain 2014 text (strike removed, insertions hidden), so taking the
 *     class off (or tying it to the mode toggle later) restores the untouched page.
 * Handwriting: "Caveat" from Google Fonts (linked in index.html), falling back to cursive. */

/* --- Off state: plain 2014 page ------------------------------------------------------ */
del.ink-strike { text-decoration: none; }
ins.ink-insert { display: none; }

/* --- On state: the editor's pen -------------------------------------------------------- */
.red-ink {
    --ink: #ff4b4b;                              /* red pen, bright enough to read on the dark blue sections */
    --ink-font: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}

/* Pen slash: two quick, slightly crooked strokes over the word, like a real pen pass.
   Drawn by pseudo-elements, so the word itself is untouched and keeps its width. */
.red-ink del.ink-strike {
    position: relative;
    color: inherit;
}
.red-ink del.ink-strike::before,
.red-ink del.ink-strike::after {
    content: "";
    position: absolute;
    left: -.15em;
    right: -.2em;
    height: .09em;
    border-radius: .05em;
    background: var(--ink);
    pointer-events: none;
}
.red-ink del.ink-strike::before { top: 48%; transform: rotate(-5deg); }                /* main stroke */
.red-ink del.ink-strike::after  { top: 56%; transform: rotate(-2deg); opacity: .6; }   /* lighter second pass */

/* Insertion: taken out of the flow entirely, so nothing around it moves.
   `position: absolute` with no top/left keeps it at its "static position", i.e. right at the
   insertion point, while taking up no space (a zero-width inline-block was not enough: the
   handwriting font's taller line box still pushed the heading down). A transform then lifts
   the words above the line, between lines; the caret (::before) stays down on the line. */
.red-ink ins.ink-insert {
    display: inline;                             /* undoes the off state's display: none. Must be inline: the
                                                    static position is worked out from the original display, so
                                                    inline = right after the struck word, block = next line */
    position: absolute;
    white-space: nowrap;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--ink-font);
    font-weight: 700;
    font-style: normal;
    text-transform: none;                        /* section headings are uppercase; handwriting isn't */
    letter-spacing: 0;
    font-size: .6em;                             /* of the heading it's written into */
    line-height: 1;
    translate: -.2em -1em;                       /* lift the words above the line */
    rotate: -4deg;                               /* nobody writes perfectly level in a margin */
    transform-origin: left bottom;
}
.red-ink ins.ink-insert::before {               /* the caret, back down on the original line */
    content: "^";
    position: absolute;
    left: -.15em;
    top: .85em;                                  /* tip of the ^ at the base of the struck word */
    font-size: 1.3em;
}

/* Phones: no room to the right of the struck word, so the insertion is written above the
   word instead, ending at the caret (kept last so it overrides the rules above). */
@media (max-width: 600px) {
    .red-ink ins.ink-insert { translate: calc(-100% + .3em) -1em; }
    .red-ink ins.ink-insert::before { left: auto; right: -.15em; }   /* caret stays at the insertion point */
}