/* The zine kit for markup: what dom.js builds, dressed. Needs tokens.css.

   Legibility first, as everywhere on the page: a doodle, a stamp's wear and
   a copier's toner never sit under running text, a handle or a number; a
   hand note is a few words at no less than its hand's least size; and
   nothing moves for a reader who asked for less motion. */

/* Something the kit has drawn on or fastened to. A rule of the page's own
   that places it already wins. */
:where(.z-host) { position: relative; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- inks ---- */

.z-ink-pen { color: var(--z-pen); }
.z-ink-marker { color: var(--z-marker); }
.z-ink-stamp { color: var(--z-stamp); }
.z-ink-toner { color: var(--z-toner); }
.z-ink-pencil { color: var(--z-pencil); }
.z-ink-fluoro { color: var(--z-fluoro); }

/* ---- doodles ---- */

.z-doodle {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.z-tool-pen { --z-pad: 3.2px; stroke-width: 1.6; }
.z-tool-marker { --z-pad: 6.4px; stroke-width: 3.2; mix-blend-mode: multiply; }
.z-doodle path { stroke-dasharray: 1; }

/* Laid over a host: round it, under it, or through it. */
.z-ring, .z-under, .z-through { position: absolute; z-index: 1; }
.z-ring { left: 50%; top: 50%; translate: -50% -50%; }
.z-under { left: calc(-1 * var(--z-pad)); top: calc(100% - var(--z-pad) - 2px); }
.z-through { left: calc(-1 * var(--z-pad)); top: calc(-1 * var(--z-pad)); opacity: 0.8; }

/* Drawn on as it appears, a stroke at a time, the way a hand would. */
.z-draw path { animation: z-draw 0.45s cubic-bezier(0.3, 0.6, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 0.14s); }
@keyframes z-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* ---- hand notes ---- */

.z-note {
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  rotate: var(--z-tilt, 0deg);
  pointer-events: none;
}
/* A ballpoint presses: its hairline face, inked a little heavier. */
.z-hand-pen { font: max(var(--z-hand-pen-least), 1.6em) / 1 var(--z-hand-pen); -webkit-text-stroke: 0.5px currentColor; }
.z-hand-marker { font: max(var(--z-hand-marker-least), 1.3em) / 1 var(--z-hand-marker); }
/* The arrow leaves from the note's edge or corner on its subject's side. */
.z-arrow {
  position: absolute;
  left: var(--z-from-x, 50%);
  top: var(--z-from-y, 50%);
  z-index: -1;
  translate: calc(var(--z-tail-x) - var(--z-pad)) calc(var(--z-tail-y) - var(--z-pad));
}

/* ---- stamps ---- */

/* Inked, not printed: multiplied into the paper, worn where the pad ran dry. */
.z-stamp {
  display: inline-block;
  padding: 3px 8px 2px;
  font: 700 15px/1.15 var(--z-typed);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 2.5px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 0 0 0 2px transparent, inset 0 0 0 3px currentColor;
  rotate: var(--z-tilt, 0deg);
  mix-blend-mode: multiply;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -7 5.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E");
}
/* A postmark: a ring with the words round its top and the date across it,
   and the cancellation's waves running off to the right. */
.z-postmark {
  position: relative;
  display: inline-grid;
  place-content: center;
  width: 78px;
  height: 78px;
  padding: 0;
  border-radius: 50%;
  border-width: 2px;
  box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 8px currentColor;
  text-align: center;
  letter-spacing: 0.04em;
}
.z-postmark-rim { font-size: 8.5px; margin-bottom: 4px; }
.z-postmark-date { font-size: 10.5px; }
.z-postmark::after {
  content: "";
  position: absolute;
  left: 82%;
  top: 22%;
  width: 70px;
  height: 56%;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Cpath d='M0 3.5q5-3 10 0t10 0M0 10.5q5-3 10 0t10 0' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E") 0 0 / 20px 14px;
}

/* ---- tallies ---- */

.z-tally { display: inline-flex; align-items: center; vertical-align: -0.2em; }

/* ---- fasteners ---- */

/* Masking tape: translucent, its ends torn rather than cut. */
.z-tape {
  position: absolute;
  z-index: 2;
  top: -11px;
  left: var(--z-along, 40%);
  width: 76px;
  height: 22px;
  translate: -50% 0;
  rotate: var(--z-tilt, -3deg);
  background: var(--z-tape);
  box-shadow: 0 1px 2px rgba(31, 29, 58, 0.18);
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='22'%3E%3Cpath d='M6 0H2l1 3-2 3 2 4-3 3 2 4-1 2 2 3h4z'/%3E%3C/svg%3E") left / 6px 22px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='22'%3E%3Cpath d='M0 0h3l2 4-2 3 3 3-2 4 1 3-2 5H0z'/%3E%3C/svg%3E") right / 6px 22px no-repeat,
    linear-gradient(#000 0 0) center / calc(100% - 12px) 100% no-repeat;
}
/* A staple through the top edge: two legs of wire, seen from the front. */
.z-staple {
  position: absolute;
  z-index: 2;
  top: -4px;
  left: var(--z-along, 40%);
  width: 28px;
  height: 7px;
  rotate: var(--z-tilt, -3deg);
  border-radius: 2px;
  background: linear-gradient(#8a8a95, #d4d4dc 40%, #6d6d78);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}
/* A paper clip over the top edge. */
.z-clip {
  position: absolute;
  z-index: 2;
  top: -32px;
  left: var(--z-along, 40%);
  width: 18px;
  height: 48px;
  rotate: var(--z-tilt, 4deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 48'%3E%3Cpath d='M6 14v22a3 3 0 0 0 6 0V8a5 5 0 0 0-10 0v30a7 7 0 0 0 14 0V16' fill='none' stroke='%236d6f7c' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(1px 1px 0 rgba(31, 29, 58, 0.3));
}

/* ---- photocopies ---- */

/* A panel that came off a copier: toner speckle and the darkening a lid
   left round its edge, in a band of the padding only, so never under its
   words. dom.js gives each panel its own toner and burn. */
/* Positioned only if nothing else places it: a fixed panel stays fixed. */
:where(.z-copy) { position: relative; }
.z-copy { isolation: isolate; }
.z-copy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: var(--z-band, 10px);
  border-radius: inherit;
  pointer-events: none;
  background:
    url(../xerox.png) var(--z-toner-x, 0) var(--z-toner-y, 0) / 256px 256px,
    linear-gradient(rgba(21, 21, 21, var(--z-burn, 0.08)) 0 0);
  opacity: var(--z-toner, 0.8);
  mix-blend-mode: multiply;
  mask: linear-gradient(#000 0 0) border-box, linear-gradient(#000 0 0) content-box;
  mask-composite: exclude;
}

/* A cut-out picture lifts off the page a little. */
.z-xerox { display: block; filter: drop-shadow(1px 2px 0 var(--z-shadow)); }

/* ---- papers ---- */

/* A paper's sheet is drawn behind its contents, in ::before, so the torn
   edges cut the paper and never what is fastened to it or written on it. */
:where(.z-notebook, .z-receipt) { position: relative; }
.z-notebook, .z-receipt { isolation: isolate; }
.z-notebook::before, .z-receipt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Notebook paper: blue rules a line apart, a red margin, and a top torn off
   the pad. Words sit on the rules: line-height is the rule. */
.z-notebook {
  --z-line: 24px;
  --z-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10'%3E%3Cpath d='M0 10V4l4 2 5-3 6 3 4-4 7 4 5-2 6 3 5-4 6 3 6-2 6 3v3z'/%3E%3C/svg%3E");
  padding: 14px 14px var(--z-line) 46px;
  line-height: var(--z-line);
}
.z-notebook :where(*) { line-height: var(--z-line); }
.z-notebook::before {
  background:
    linear-gradient(90deg, transparent 36px, var(--z-margin) 36px 37.5px, transparent 37.5px),
    repeating-linear-gradient(transparent 0 calc(var(--z-line) - 1px), var(--z-ruled) calc(var(--z-line) - 1px) var(--z-line)) 0 calc(14px + var(--z-line) * 0.2),
    var(--z-notebook);
  mask:
    var(--z-torn) top / 60px 10px repeat-x,
    linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat;
}
/* Punched for a ring binder: what is behind shows through the holes. */
.z-notebook.z-punched::before {
  mask:
    radial-gradient(circle 7px at 18px 60px, transparent 96%, #000) 0 0 / 100% 120px repeat-y,
    var(--z-torn) top / 60px 10px repeat-x,
    linear-gradient(#000 0 0) 0 9px / 100% calc(100% - 9px) no-repeat;
  mask-composite: intersect, add, add;
}

/* A till receipt: thermal paper, typed, its ends torn on the cutter's teeth. */
.z-receipt {
  padding: 16px 14px;
  font: 700 13px/1.5 var(--z-typed);
  color: var(--z-toner);
}
.z-receipt::before {
  background: linear-gradient(transparent 70%, rgba(31, 29, 58, 0.04)), var(--z-receipt);
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 6L6 0l6 6z'/%3E%3C/svg%3E") top / 12px 6px repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6'%3E%3Cpath d='M0 0l6 6 6-6z'/%3E%3C/svg%3E") bottom / 12px 6px repeat-x,
    linear-gradient(#000 0 0) center / 100% calc(100% - 12px) no-repeat;
}
.z-receipt hr { border: 0; border-top: 2px dashed currentColor; margin: 8px 0; opacity: 0.6; }
.z-receipt .z-line-item { display: flex; justify-content: space-between; gap: 1em; }

/* A Polaroid: white frame, a deep lip at the bottom for a caption in pen. */
.z-polaroid {
  display: inline-block;
  padding: 9px 9px 0;
  background: var(--z-polaroid);
  box-shadow: 0 1px 0 rgba(31, 29, 58, 0.12), 3px 5px 0 var(--z-shadow);
  rotate: var(--z-tilt, -2deg);
}
.z-polaroid > :first-child { display: block; }
.z-polaroid figcaption {
  min-height: 34px;
  padding: 4px 2px 6px;
  font: var(--z-hand-pen-least) / 1.1 var(--z-hand-pen);
  color: var(--z-pen);
  text-align: center;
}

/* A sticky note: square, yellow, curling up off the page at its foot. */
.z-sticky {
  padding: 12px 14px 16px;
  background: linear-gradient(transparent 82%, rgba(31, 29, 58, 0.05)), var(--z-sticky);
  box-shadow: 0 10px 8px -8px var(--z-shadow);
  rotate: var(--z-tilt, 1.5deg);
}

@media (prefers-reduced-motion: reduce) {
  .z-draw path { animation: none; }
}