/* Marker marks — a small kit of hand-drawn marks that can be dropped on any
   word, heading, number or button on the site.

   HOW TO USE ONE

     <span class="mk mk-underline">not enough time?</span>

   Two classes: `mk` sets the anchor, and `mk-<name>` picks the mark. That is
   the whole API. Nothing else on the page has to change.

   HOW IT WORKS

   Each mark is an SVG carried in CSS as a mask rather than as an image, and
   the shape is filled with a color the class sets. Two things follow from
   that, and both matter:

     - the color is CSS, not baked into the file, so `--mk` recolors any mark
       without touching the drawing;
     - there are no extra tags in the HTML. A mark can be added to a word by
       adding a class to it, and removed by deleting the class.

   THE ONE RULE WHEN PLACING THEM

   Marks that reach above their own line -- the sparkle, the star, the circle
   -- will land on the line above if the type is set tight. The headline on
   this site runs at a line-height of 1.04, so those marks are kept inside
   the line box and given their room sideways instead. If you set something
   looser, they have more to play with. */

/* ---------------------------------------------------------------- base */

.mk {
  position: relative;
  /* Held on one line so a mark drawn across it stays in one piece. */
  white-space: nowrap;
}

.mk::after,
.mk::before {
  content: "";
  position: absolute;
  background-color: var(--mk, #0f7d8c);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  pointer-events: none;
}

/* The colors already in the Cairn stylesheet. */
.mk-teal  { --mk: #0f7d8c; }
.mk-moss  { --mk: #1f8a5f; }
.mk-clay  { --mk: #c2571a; }
.mk-rose  { --mk: #c23b63; }
.mk-ink   { --mk: #101010; }

/* Marks are NOT hidden on small screens. A mark that only shows on a desktop
   is not a design language, it is a desktop flourish.

   What a mark needs instead is for its phrase to fit on one line, since it is
   drawn across the whole span in one piece. So the page using this kit is
   responsible for setting type small enough on a phone that the marked phrase
   still fits. That is a font-size decision, not a decision to hide the mark.

   If a marked phrase genuinely cannot fit -- a long one in a big headline --
   add `mk-off` at that breakpoint rather than switching the marks off
   everywhere. */
.mk-off { white-space: normal; }
.mk-off::after, .mk-off::before { display: none; }

/* ------------------------------------------------------------ the marks */

/* One swipe of a marker: thick in the middle, tapered at both ends, with a
   dry fleck where the pen lifted. This is the workhorse. */
.mk-underline::after {
  left: -.04em; right: -.06em; bottom: -.26em; height: .2em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M5 11c48-6 118-8 176-6 30 1 60 3 92 5-34 5-74 7-118 7-54 0-102-2-150-6z'/%3E%3Cpath fill='%23000' d='M282 8c8 0 14 1 18 2-6 2-12 3-18 3z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M5 11c48-6 118-8 176-6 30 1 60 3 92 5-34 5-74 7-118 7-54 0-102-2-150-6z'/%3E%3Cpath fill='%23000' d='M282 8c8 0 14 1 18 2-6 2-12 3-18 3z'/%3E%3C/svg%3E");
}

/* Two quick passes, neither of them straight. */
.mk-underline-2::after {
  left: -.04em; right: -.04em; bottom: -.32em; height: .3em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M5 9c44-5 90 7 136 3 44-4 88 5 154-2'/%3E%3Cpath d='M12 19c48-4 96 6 146 2 42-3 84 5 136-1'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 26' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M5 9c44-5 90 7 136 3 44-4 88 5 154-2'/%3E%3Cpath d='M12 19c48-4 96 6 146 2 42-3 84 5 136-1'/%3E%3C/g%3E%3C/svg%3E");
}

/* A wave, for something lighter than a straight line. */
.mk-wave::after {
  left: -.04em; right: -.04em; bottom: -.28em; height: .24em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' d='M5 13c18-12 36 10 54 0s36-12 54 0 36 12 54 0 36-12 54 0 36 10 54-2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' d='M5 13c18-12 36 10 54 0s36-12 54 0 36 12 54 0 36-12 54 0 36 10 54-2'/%3E%3C/svg%3E");
}

/* Three dashes radiating off the top right, the way you would mark something
   worth noticing. Sits outside the words, so it needs a little room. */
.mk-sparkle::after {
  right: -.5em; top: -.12em; width: .46em; height: .46em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M6 26 18 13'/%3E%3Cpath d='M24 8 26 22'/%3E%3Cpath d='M33 27 43 22'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M6 26 18 13'/%3E%3Cpath d='M24 8 26 22'/%3E%3Cpath d='M33 27 43 22'/%3E%3C/g%3E%3C/svg%3E");
}

/* A loop that overshoots where it closes, the way a real one does. Kept
   inside the line box on purpose -- see the note at the top. */
.mk-circle::after {
  left: -.14em; right: -.14em; top: -.01em; bottom: -.01em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M382 42C362 12 250 4 190 7 92 12 14 32 16 64c2 34 106 54 206 52 100-2 172-22 166-56-4-24-56-42-136-46'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M382 42C362 12 250 4 190 7 92 12 14 32 16 64c2 34 106 54 206 52 100-2 172-22 166-56-4-24-56-42-136-46'/%3E%3C/svg%3E");
}

/* A rectangle drawn badly on purpose. */
.mk-box::after {
  left: -.12em; right: -.12em; top: .01em; bottom: .01em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linejoin='round' d='M8 12c98-6 300-4 386 2 5 32 4 72 0 104-96 6-292 4-380-2-5-32-6-72-6-104z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linejoin='round' d='M8 12c98-6 300-4 386 2 5 32 4 72 0 104-96 6-292 4-380-2-5-32-6-72-6-104z'/%3E%3C/svg%3E");
}

/* Crossed out. */
.mk-strike::after {
  /* Tall enough that the stroke inside it survives. At .12em the box was
     about two pixels, and a 5-unit stroke in a 12-unit viewBox came out at
     one -- drawn, but invisible. */
  left: -.06em; right: -.06em; top: 34%; height: .22em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' d='M4 8c62-6 132 4 196-2 44-4 68 2 96-1'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' d='M4 8c62-6 132 4 196-2 44-4 68 2 96-1'/%3E%3C/svg%3E");
}

/* An arrow curving up from below, pointing at the words. */
.mk-arrow::after {
  left: 4%; width: 56%; bottom: -.66em; height: .58em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 54C40 40 96 22 168 12'/%3E%3Cpath d='M146 4l24 8-16 18'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 54C40 40 96 22 168 12'/%3E%3Cpath d='M146 4l24 8-16 18'/%3E%3C/g%3E%3C/svg%3E");
}

/* A tick, for something already true. Sits after the words. */
.mk-check::after {
  right: -.62em; bottom: .02em; width: .5em; height: .42em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' d='M5 22c6 4 12 9 16 15C28 24 36 12 46 5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 42'%3E%3Cpath fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round' stroke-linejoin='round' d='M5 22c6 4 12 9 16 15C28 24 36 12 46 5'/%3E%3C/svg%3E");
}

/* A small burst, for the one number that matters. */
.mk-star::after {
  right: -.56em; top: -.06em; width: .44em; height: .44em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M22 4v14'/%3E%3Cpath d='M22 26v14'/%3E%3Cpath d='M4 22h14'/%3E%3Cpath d='M26 22h14'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cg fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M22 4v14'/%3E%3Cpath d='M22 26v14'/%3E%3Cpath d='M4 22h14'/%3E%3Cpath d='M26 22h14'/%3E%3C/g%3E%3C/svg%3E");
}

/* Held between two drawn marks. This is the only one that uses both sides,
   so it takes ::before as well. */
.mk-bracket { padding: 0 .26em; }
.mk-bracket::before,
.mk-bracket::after {
  top: -.02em; bottom: -.02em; width: .22em;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.mk-bracket::before {
  left: -.04em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M25 6C10 12 5 36 5 60c0 24 5 48 20 54'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M25 6C10 12 5 36 5 60c0 24 5 48 20 54'/%3E%3C/svg%3E");
}
.mk-bracket::after {
  right: -.04em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M5 6c15 6 20 30 20 54 0 24-5 48-20 54'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 120' preserveAspectRatio='none'%3E%3Cpath fill='none' stroke='%23000' stroke-width='6' stroke-linecap='round' d='M5 6c15 6 20 30 20 54 0 24-5 48-20 54'/%3E%3C/svg%3E");
}

/* Three dots after the words, for something still being decided. */
.mk-dots::after {
  right: -.78em; bottom: .04em; width: .62em; height: .16em;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Ccircle cx='31' cy='8' r='7'/%3E%3Ccircle cx='54' cy='8' r='7'/%3E%3C/g%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 16'%3E%3Cg fill='%23000'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Ccircle cx='31' cy='8' r='7'/%3E%3Ccircle cx='54' cy='8' r='7'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------- the two fills

   These two are the ones already chosen for the hero. They are fills rather
   than drawn marks, so they do not use the mask above. */

/* The highlighter. It used to be a flat gradient, which gave it two dead
   vertical edges and made it read as a rectangle rather than a stroke.

   It is now a drawn shape: the left end starts on an angle where the nib
   lands, the body is slightly uneven top and bottom, and the right end thins
   out and breaks into a fleck where the pen lifted. The shape is a mask over
   a colored block rather than a colored image, so `--mk-fill` still recolors
   it, and it sits on ::before behind the text so the letters stay sharp. */
.mk-highlight {
  position: relative;
  isolation: isolate;
  padding: 0 .12em;
}
.mk-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: -.06em;
  bottom: .03em;
  height: .64em;
  background-color: var(--mk-fill, #f7e369);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 48' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M4 12c50-7 132-9 208-6 30 1 55 5 74 10-16 10-45 16-83 20-76 8-152 6-192-2-5-6-9-15-7-22z'/%3E%3Cpath fill='%23000' d='M290 18c6 2 9 5 6 9-3 4-9 6-15 8 5-6 8-11 9-17z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 48' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M4 12c50-7 132-9 208-6 30 1 55 5 74 10-16 10-45 16-83 20-76 8-152 6-192-2-5-6-9-15-7-22z'/%3E%3Cpath fill='%23000' d='M290 18c6 2 9 5 6 9-3 4-9 6-15 8 5-6 8-11 9-17z'/%3E%3C/svg%3E");
}

.mk-punchout {
  display: inline-block;
  background: var(--mk, #101010);
  color: #fff;
  padding: 0 .14em .06em;
  border-radius: .06em;
}