/* ---------------------------------------------------------------
   draft.css — notes from the field

   The page is the drawing. This is what somebody wrote on it: notes
   in both margins, a dotted line where one needs to point at
   something, a word struck out and thought better of, and the odd
   sketch where words were not enough.

   RULE: this layer only ever adds. It never hides, moves, or
   replaces a word of the page's own content, and every note is a
   real link that works with JavaScript switched off.
   --------------------------------------------------------------- */

:root{
  --pencil:#8FDCE9;
  --pencil-dim:rgba(143,220,233,.55);
}

i.scrib{display:none}

/* ---- the note ------------------------------------------------- */
a.mnote{
  display:block;
  font-family:"Architects Daughter","Bradley Hand","Comic Sans MS",cursive;
  font-size:15.5px;
  line-height:1.54;
  color:var(--pencil);
  text-decoration:none;
  opacity:.9;
}
a.mnote:hover,a.mnote:focus-visible{color:#BDEEF6;opacity:1;outline:none}
a.mnote:focus-visible{outline:2px solid var(--cyan,#2ED6ED);outline-offset:4px}

/* a word thought better of. The strike is drawn, not styled, so it
   wobbles like the rest of the hand. */
a.mnote s{text-decoration:none;opacity:.7;margin-right:3px}

/* the overlay everything is drawn into — pointer-transparent */
svg.annot{
  position:absolute;
  top:0;left:0;
  overflow:visible;
  pointer-events:none;
  z-index:1;
}
svg.annot circle,svg.annot path{fill:none;stroke:var(--pencil-dim);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
svg.annot circle{fill:var(--pencil-dim);stroke:none}
svg.annot path.head{stroke:var(--pencil);stroke-width:1.9;opacity:.9}
svg.annot path.stain{stroke:rgba(201,152,74,.17);stroke-width:4}
svg.annot path.strike{stroke:var(--pencil);stroke-width:1.5;opacity:.8}
html.js svg.annot .ink{opacity:0}
html.js svg.annot.in .ink{opacity:1;transition:opacity .22s ease}

/* ---- wide enough for a margin: the note goes out into it ------ */
@media (min-width:1180px){
  a.mnote{
    position:absolute;
    width:186px;
    transform:rotate(-1.5deg);
    z-index:2;
  }
  a.mnote.lean{transform:rotate(1.3deg)}
  html.js a.mnote{opacity:0;transform:rotate(-1.5deg) translateY(8px)}
  html.js a.mnote.lean{opacity:0;transform:rotate(1.3deg) translateY(8px)}
  html.js a.mnote.in{
    opacity:.9;
    transform:rotate(-1.5deg) translateY(0);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.3,1);
  }
  html.js a.mnote.lean.in{transform:rotate(1.3deg) translateY(0)}
  html.js a.mnote.in:hover{opacity:1}

  /* no margin wide enough to write in: sit in the column instead */
  a.mnote.flow{
    position:static;
    align-self:start;
    width:auto;
    max-width:44ch;
    margin:4px 0 22px;
    padding:2px 0 2px 15px;
    border-left:2px solid var(--pencil-dim);
    transform:none;
  }
  html.js a.mnote.flow,html.js a.mnote.flow.lean{opacity:.9;transform:none}
  a.mnote.flow.points::after{content:" \2193";letter-spacing:.04em}
  a.mnote.flow s{text-decoration:line-through}
}

/* ---- narrow: no margin to write in, so it folds in ------------ */
@media (max-width:1179.98px){
  a.mnote{
    position:static !important;
    align-self:start;
    width:auto !important;
    max-width:44ch;
    margin:4px 0 24px;
    padding:2px 0 2px 15px;
    border-left:2px solid var(--pencil-dim);
    font-size:16px;
    transform:none !important;
  }
  a.mnote.points::after{content:" \2193";letter-spacing:.04em}
  a.mnote s{text-decoration:line-through}
}

/* ---- no motion for anyone who turned it off ------------------- */
@media (prefers-reduced-motion:reduce){
  html.js a.mnote,html.js a.mnote.in{opacity:.9;transition:none}
  html.js svg.annot .ink,html.js svg.annot.in .ink{opacity:1;transition:none}
}

@media print{
  svg.annot{display:none}
  a.mnote{position:static!important;opacity:1!important;transform:none!important;color:#555}
  a.mnote s{text-decoration:line-through}
}