/* =========================================================
   THE HAND-DRAWN LAYER
   doodles, scrawled margin notes, speech bubble, rubber stamp,
   and the word-placement classes the script throws around.
   ========================================================= */

/* ---------- doodle scatter ---------- */
.p-doodles{
  position:absolute;inset:0 0 30cqw 0;
  z-index:0;pointer-events:none;overflow:hidden;
}
.p-marks{
  position:absolute;inset:0 0 30cqw 0;
  z-index:4;pointer-events:none;overflow:hidden;
}
.dood{position:absolute;color:var(--ink)}
.dood svg{width:100%;height:100%;display:block;overflow:visible}
.dood.is-pop{color:var(--pop)}
.dood.is-faint{opacity:.45}

/* ---------- scrawled margin notes ---------- */
.p-aside{
  position:absolute;z-index:3;
  font-family:"Caveat",cursive;
  font-weight:700;font-size:4.6cqw;line-height:.95;
  white-space:nowrap;color:var(--ink);
}
.p-aside.is-pop{color:var(--pop)}

/* ---------- speech bubble by the QR ---------- */
.p-bubble{
  position:absolute;z-index:4;
  font-family:"Caveat",cursive;
  font-weight:700;font-size:5cqw;line-height:1;
  padding:1.7cqw 3cqw 2cqw;
  background:var(--paper);color:var(--ink);
  border:0.36cqw solid var(--ink);
  border-radius:52% 48% 50% 50% / 62% 66% 58% 60%;
  white-space:nowrap;
}
.p-bubble::before,
.p-bubble::after{
  content:"";position:absolute;width:0;height:0;
  border-left:3.4cqw solid transparent;
  border-right:1cqw solid transparent;
}
.p-bubble::before{
  bottom:-3.6cqw;left:16%;
  border-top:3.8cqw solid var(--ink);
}
.p-bubble::after{
  bottom:-2.5cqw;left:17.5%;
  border-top:3cqw solid var(--paper);
}

/* ---------- rubber stamp ---------- */
.p-stamp{
  position:absolute;z-index:2;
  width:28cqw;height:28cqw;padding:2cqw;
  display:grid;place-content:center;text-align:center;
  border:0.55cqw solid var(--pop);border-radius:50%;
  box-shadow:inset 0 0 0 0.9cqw var(--paper),inset 0 0 0 1.25cqw var(--pop);
  color:var(--pop);
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 88,"wght" 800;
  font-size:2.95cqw;line-height:1.12;letter-spacing:.01em;
  text-transform:uppercase;opacity:.92;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
}

/* ---------- word placement (script sets transforms inline) ---------- */
.p-hook .w{position:relative}
.poster .p-hook .w.is-pop{color:var(--pop) !important;-webkit-text-stroke:0}
.poster .p-hook .w.tiny{font-size:.48em}
.poster .p-hook .w.huge{font-size:1.2em}
.poster .p-hook .w.hand{
  font-family:"Caveat",cursive;font-variation-settings:normal;font-weight:700;
  font-size:1.15em;letter-spacing:0;text-transform:none;
}
.poster .p-hook .w.boxed{
  box-shadow:inset 0 0 0 0.32cqw currentColor;
  padding:0 .1em;
}
.poster .p-hook .w.circled::after{
  content:"";position:absolute;inset:-.16em -.26em;
  border:0.34cqw solid var(--pop);border-radius:50%;
  transform:rotate(-3deg);
}
.poster .p-hook .w.wavy{
  text-decoration:underline wavy var(--pop);
  text-decoration-thickness:.055em;
  text-underline-offset:.06em;
}
.poster .p-hook .w.hollow{
  color:transparent;-webkit-text-stroke:0.32cqw var(--ink);
}

/* keep the hand notes and doodles from printing washed out */
@media print{
  .dood,.p-aside,.p-bubble,.p-stamp{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}