/* =========================================================================
   INK
   =========================================================================
   Somebody went over this page with a pen. Words are circled, phrases are
   underlined with one wobbly stroke, and notes in the margin point at the
   thing they are about with a curved arrow.

   Three rules the ink keeps:

   1. It is drawn, not printed. Every stroke starts with its dash offset at
      full length and is pulled to zero when the block it belongs to reveals,
      so the line is being drawn while you read the sentence it is marking.
   2. It is never load-bearing. Remove this file and no word disappears, no
      layout shifts, no meaning is lost. Screen readers never meet any of it:
      every SVG is aria-hidden and every note is ordinary text.
   3. It wobbles. The strokes are clean cubics run through the same
      feTurbulence filter (#ink) the drawings use, so the hand shakes without
      a single extra byte of path data.
   ========================================================================= */

.ink-draw {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#ink);
  stroke-dasharray: var(--len, 520);
  stroke-dashoffset: var(--len, 520);
}

/* The pen draws itself on arrival. Every stroke animates by default, because a
   mark that is waiting for an IntersectionObserver that never fires is a mark
   nobody ever sees: the hero has no reveal wrapper, and half the ink lives
   there. Inside a revealed block the stroke simply starts sooner, timed to the
   paragraph it is marking rather than to page load. */
.ink-draw {
  animation: ink-draw 900ms var(--ease, cubic-bezier(.32, .72, 0, 1)) forwards;
  animation-delay: var(--ink-delay, 700ms);
}
.is-in .ink-draw { animation-delay: 260ms; }
@keyframes ink-draw { to { stroke-dashoffset: 0; } }

/* ---- A word with a ring around it --------------------------------------
   The ellipse is deliberately not closed and the ends overlap, the way a pen
   does when the hand comes back round to where it started. */
.ink-c {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.ink-c__s {
  position: absolute;
  z-index: -1;
  inset-block-start: -30%;
  inset-inline-start: -11%;
  inline-size: 122%;
  block-size: 160%;
  overflow: visible;
  color: var(--accent);
  opacity: 0.85;
  pointer-events: none;
}
.ink-c__s .ink-draw { stroke-width: 2.4; --len: 560; }

/* ---- A phrase with one stroke under it ---------------------------------- */
.ink-u {
  position: relative;
  display: inline-block;
}
.ink-u__s {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: -2%;
  inline-size: 104%;
  block-size: 0.5em;
  overflow: visible;
  color: var(--accent);
  opacity: 0.8;
  pointer-events: none;
}
.ink-u__s .ink-draw { stroke-width: 2.6; --len: 240; }

/* ---- A note in the margin, with an arrow -------------------------------
   On a wide screen it sits out in the left margin where a reader would write
   one. Below that there is no margin to write in, so it becomes an ordinary
   indented line and the arrow is dropped rather than pointed at nothing. */
.ink-note {
  position: relative;
  display: block;
  margin-block: var(--space-s) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t--1);
  line-height: 1.35;
  color: var(--ink-quiet);
  max-inline-size: 26ch;
}
.ink-note__a {
  position: absolute;
  /* Clear of the note's own lines: an arrow drawn through the sentence it
     belongs to reads as a crossing-out rather than a pointer. */
  inset-block-start: -1.15rem;
  inset-inline-end: -4.2rem;
  inline-size: 3.2rem;
  block-size: 3rem;
  overflow: visible;
  color: var(--accent);
  opacity: 0.7;
  pointer-events: none;
}
.ink-note__a .ink-draw { stroke-width: 2.2; --len: 190; }

@media (min-width: 1024px) {
  .ink-note {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 38%;
    inline-size: 19ch;
    text-align: end;
    margin-block: 0;
  }
  .ink-note--right {
    inset-inline: auto 0;
    text-align: start;
  }
  .ink-note--right .ink-note__a { inset-inline: -4.2rem auto; scale: -1 1; }
}
@media (max-width: 1023px) {
  .ink-note__a { display: none; }
  .ink-note { padding-inline-start: 1rem; border-inline-start: 2px solid var(--rule-strong); }
}

/* ---- Marginalia in the corner of a band ---------------------------------
   One loose line drawing per band, bottom right, small enough to be a doodle
   rather than an illustration. */
.ink-doodle {
  position: absolute;
  inset-block-end: var(--space-l);
  inset-inline-end: var(--space-l);
  inline-size: clamp(64px, 7vw, 108px);
  block-size: auto;
  color: var(--ink-quiet);
  opacity: 0.4;
  pointer-events: none;
}
.ink-doodle .ink-draw { stroke-width: 2; --len: 420; }
@media (max-width: 767px) { .ink-doodle { display: none; } }

/* Nothing draws itself in front of somebody who asked for stillness: the ink
   is simply already there. */
@media (prefers-reduced-motion: reduce) {
  .ink-draw { stroke-dashoffset: 0; animation: none; }
}

/* The XP desktop is a different century and does not get annotated. */
:root[data-mode="desktop"] .ink-c__s,
:root[data-mode="desktop"] .ink-u__s,
:root[data-mode="desktop"] .ink-note,
:root[data-mode="desktop"] .ink-doodle { display: none; }