/* Big Man "SEND HELP" sign. Reusable snippet, 3 Nov 2026. PREVIEW ONLY.
   Font: Permanent Marker (Font Diner, Apache 2.0), self-hosted subset, see LICENSE-PermanentMarker-Apache-2.0.txt
   Works under a strict CSP (style-src 'self', no inline styles). All classes start with sh- so nothing clashes. */
@font-face{font-family:'SH Marker';src:url(sh-marker.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}

.sh{--sh-ink:#f0cf7a;--sh-ink2:#D4AF37;--sh-text:#f3ede2;--sh-btn-ink:#111;
  position:relative;box-sizing:border-box;max-width:560px;margin:34px auto 30px;padding:18px 10px 8px;
  font-family:'SH Marker','Permanent Marker','Marker Felt','Comic Sans MS',cursive;text-align:center;color:var(--sh-text);
  -webkit-text-size-adjust:100%;container-type:inline-size;filter:drop-shadow(0 14px 18px rgba(0,0,0,.55)) drop-shadow(0 2px 3px rgba(0,0,0,.5))}
.sh *,.sh *::before,.sh *::after{box-sizing:border-box}
.sh--yellow{--sh-ink:#FFC21A;--sh-ink2:#FFC21A}

/* the bit of card, held up a bit squint */
.sh-card{position:relative;transform:rotate(-2.2deg);transform-origin:50% 0;
  padding:30px 22px 26px;
  background:
    radial-gradient(120% 80% at 20% 10%,rgba(255,236,190,.07),transparent 60%),
    radial-gradient(90% 70% at 85% 95%,rgba(0,0,0,.35),transparent 70%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 9px),
    repeating-linear-gradient(2deg,rgba(0,0,0,.12) 0 1px,transparent 1px 5px),
    #1d1812;
  clip-path:polygon(0 2.5%,6% 0,14% 1.6%,23% .2%,33% 1.8%,44% .4%,52% 1.4%,63% 0,72% 1.9%,81% .3%,90% 1.5%,100% 0,99% 9%,100% 21%,98.8% 34%,100% 47%,99% 61%,100% 74%,98.9% 88%,100% 100%,91% 98.6%,80% 100%,69% 98.4%,57% 99.8%,46% 98.3%,35% 99.7%,24% 98.2%,13% 99.6%,4% 98.5%,0 100%,1.1% 87%,0 73%,.9% 60%,0 46%,1.2% 32%,0 18%)}
/* bit of tape at each top corner (sits outside the torn edge) */
.sh::before,.sh::after{content:"";position:absolute;top:6px;width:96px;height:30px;z-index:2;
  background:linear-gradient(180deg,rgba(255,240,200,.55),rgba(240,215,150,.42));
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  clip-path:polygon(3% 8%,97% 0,100% 50%,96% 100%,2% 92%,0 50%)}
.sh::before{left:10px;transform:rotate(-14deg)}
.sh::after{right:10px;transform:rotate(11deg)}

/* SEND / HELP: big, loud, scribbled in a hurry */
.sh-big{margin:0;padding:0;line-height:.86;font-size:clamp(64px,21vw,132px);font-weight:400;letter-spacing:.01em;
  color:var(--sh-ink);text-transform:uppercase;
  -webkit-text-stroke:1.5px var(--sh-ink);
  text-shadow:0 0 1px var(--sh-ink2),2px 2px 0 rgba(0,0,0,.35),0 0 18px rgba(240,207,122,.18)}
.sh--yellow .sh-big{text-shadow:0 0 1px var(--sh-ink2),2px 2px 0 rgba(0,0,0,.35),0 0 18px rgba(255,194,26,.2)}
.sh-w{display:block;white-space:nowrap}
@supports (font-size:1cqi){.sh-big{font-size:clamp(60px,24cqi,134px)}}
.sh-w1{transform:rotate(-3deg) translateX(-4%)}
.sh-w2{transform:rotate(2.5deg) translateX(2%);margin-top:.02em}
.sh-l{display:inline-block}
.sh-w1 .sh-l:nth-child(1){transform:rotate(-6deg) translateY(2px)}
.sh-w1 .sh-l:nth-child(2){transform:rotate(4deg) translateY(-5px) scale(1.04)}
.sh-w1 .sh-l:nth-child(3){transform:rotate(-2deg) translateY(4px)}
.sh-w1 .sh-l:nth-child(4){transform:rotate(7deg) translateY(-2px) scale(1.06)}
.sh-w2 .sh-l:nth-child(1){transform:rotate(5deg) translateY(-3px) scale(1.05)}
.sh-w2 .sh-l:nth-child(2){transform:rotate(-5deg) translateY(4px)}
.sh-w2 .sh-l:nth-child(3){transform:rotate(3deg) translateY(-4px)}
.sh-w2 .sh-l:nth-child(4){transform:rotate(-8deg) translateY(1px) scale(1.07)}
.sh-bang{display:inline-block;transform:rotate(12deg) translateY(-6px);margin-left:.02em}
/* scribbled underline under HELP */
.sh-scrawl{display:block;width:78%;height:22px;margin:-2px auto 6px;transform:rotate(-1.5deg)}
.sh-scrawl path{fill:none;stroke:var(--sh-ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.92}

.sh-line{margin:12px auto 0;max-width:30em;font-size:clamp(21px,5.6vw,27px);line-height:1.28;color:var(--sh-text);letter-spacing:.01em;transform:rotate(-.6deg)}
.sh-line b{color:var(--sh-ink);font-weight:400}
.sh-link{margin:12px 0 0;font-size:clamp(22px,6vw,28px);line-height:1.2;transform:rotate(.8deg)}
.sh .sh-link a{color:var(--sh-ink);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px;word-break:break-word}

/* marker-drawn buttons */
.sh-acts{display:flex;flex-direction:column;align-items:center;gap:12px;margin:20px 0 4px}
.sh .sh-btn{display:inline-block;min-width:min(100%,290px);max-width:100%;margin:0;padding:15px 22px 13px;cursor:pointer;
  font:400 clamp(22px,6vw,27px)/1.15 'SH Marker','Permanent Marker',cursive;letter-spacing:.02em;text-decoration:none;text-align:center;
  color:var(--sh-btn-ink);background:var(--sh-ink);border:3px solid var(--sh-btn-ink);
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;
  box-shadow:3px 4px 0 rgba(0,0,0,.55);transform:rotate(1.2deg);-webkit-appearance:none;appearance:none}
.sh .sh-btn:hover{transform:rotate(-.6deg) scale(1.03)}
.sh .sh-btn:active{transform:rotate(0) translate(2px,3px);box-shadow:1px 1px 0 rgba(0,0,0,.55)}
.sh .sh-btn:focus-visible{outline:4px dashed var(--sh-ink);outline-offset:5px}
.sh .sh-btn--ghost{background:transparent;color:var(--sh-ink);border-color:var(--sh-ink);transform:rotate(-1.4deg);box-shadow:none}
.sh .sh-btn[hidden]{display:none}
.sh-done{min-height:1.3em;margin:4px 0 0;font-size:19px;color:var(--sh-ink)}

.sh-ps{margin:18px auto 0;max-width:28em;font-size:clamp(17px,4.6vw,20px);line-height:1.32;color:#d9cfbd;transform:rotate(-.8deg)}
.sh-ps b{color:var(--sh-ink);font-weight:400}
.sh-sig{margin:12px 8% 0 0;text-align:right;font-size:clamp(20px,5.4vw,25px);color:var(--sh-ink);transform:rotate(-3deg)}
.sh-sig::before{content:"\2014\00a0"}
.sh .sh-hide{position:absolute;top:8px;right:16px;z-index:3;margin:0;padding:6px 12px;border:0;border-radius:999px;cursor:pointer;
  font:600 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:#d9cfbd;background:rgba(0,0,0,.45)}
.sh .sh-hide[hidden]{display:none}
.sh-gone{display:none!important}

/* wobble: held up and waved a bit, plus a quick shake now and then */
@media (prefers-reduced-motion:no-preference){
  .sh-card{animation:sh-wave 3.6s ease-in-out infinite}
  .sh-big{animation:sh-shake 4.8s linear infinite}
}
@keyframes sh-wave{0%,100%{transform:rotate(-2.2deg)}30%{transform:rotate(-1deg) translateY(-2px)}60%{transform:rotate(-2.9deg) translateY(1px)}}
@keyframes sh-shake{0%,84%,100%{transform:translate(0,0) rotate(0)}86%{transform:translate(-3px,1px) rotate(-1.4deg)}88%{transform:translate(3px,-1px) rotate(1.2deg)}90%{transform:translate(-2px,0) rotate(-.8deg)}92%{transform:translate(2px,1px) rotate(.8deg)}94%{transform:translate(-1px,0) rotate(-.3deg)}96%{transform:translate(0,0) rotate(0)}}
@media (prefers-reduced-motion:reduce){.sh-card,.sh-big{animation:none!important}}

@media (min-width:700px){.sh{margin:46px auto 40px}.sh-card{padding:38px 40px 30px}.sh::before,.sh::after{width:120px;height:34px}}
@media (max-width:360px){.sh-card{padding:28px 14px 22px}}

/* floating music bar steps aside while the sign is under it (see send-help.js) */
html.sh-spy-tuck .spy{opacity:0!important;visibility:hidden!important;pointer-events:none!important}