/* YVM-79 community: the fridge door and the scrapbook. A loud yellow halftone hero with a torn-paper bottom edge,
   a giant sticker-cut title (white outline, hard ink shadow), notes taped up at jaunty angles and spilling into each
   other, marker-pen underlines and circles (SVG in public/images/templates), and blocks of colour down the page. */

/* Halftone dots on the hero and a torn edge where it meets the page below. */
.vm-t-community .vm-hero{position:relative;padding-bottom:clamp(4rem,9vw,6.5rem);
  background:radial-gradient(color-mix(in srgb,var(--ink) 13%,transparent) 1.4px,transparent 1.6px) 0 0/14px 14px,var(--hero-bg);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),96% 100%,91% calc(100% - 14px),85% calc(100% - 2px),78% calc(100% - 18px),71% 100%,64% calc(100% - 12px),57% calc(100% - 3px),50% calc(100% - 20px),43% calc(100% - 4px),36% calc(100% - 16px),29% 100%,22% calc(100% - 13px),15% calc(100% - 1px),8% calc(100% - 17px),3% calc(100% - 5px),0 calc(100% - 15px))}
/* The title is a cut-out sticker: thick white outline, a hard ink drop, a little tilt. */
.vm-t-community .vm-title{display:inline-block;font-weight:900;font-size:clamp(2.75rem,10vw,6rem);line-height:.95;letter-spacing:-.025em;transform:rotate(-2deg);transform-origin:0 100%;
  text-shadow:.045em .05em 0 #FFFFFF,.09em .1em 0 var(--ink)}
.vm-t-community .vm-eyebrow{display:inline-block;background:var(--ink);color:var(--hero-bg);padding:.25em .65em;border-radius:999px;transform:rotate(2deg);letter-spacing:.08em}
.vm-t-community .vm-hero .vm-lede{margin-top:1.25rem;font-size:1.25rem;font-weight:700;max-width:30rem}
.vm-t-community .vm-how .vm-h2,.vm-t-community .vm-form-card .vm-h2{display:inline-block;margin-bottom:var(--space-step-5);padding-bottom:.12em;
  background:url("/images/templates/marker-underline.svg?v=6e744ff763") 0 100%/100% .32em no-repeat}
.vm-t-community .vm-h2,.vm-t-community .vm-h1-small{font-weight:900}
.vm-t-community .vm-board-head .vm-h2{border:0;padding:.45em .9em .5em;margin-left:-.4em;background:url("/images/templates/marker-circle.svg?v=e986add47a") center/100% 100% no-repeat}

/* The hero notes: big, taped up, tumbling into each other (never over each other's words). */
.vm-t-community .vm-hero-notes{max-width:36rem;gap:1.25rem .5rem;padding:1.75rem .5rem 1rem}
.vm-t-community .vm-hero-note{font-size:1.75rem;padding:1.75rem 1.25rem 1.5rem}
.vm-t-community .vm-hero-note-1{margin-right:-1.25rem;z-index:1}
.vm-t-community .vm-hero-note-2{margin-top:2.75rem;z-index:2}
.vm-t-community .vm-hero-note-3{width:min(100%,19rem);justify-self:start;margin-left:6%;margin-top:.25rem;z-index:3}
@media (min-width:960px){.vm-t-community .vm-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}

/* Torn masking tape holds every note; where it sits turns with the note. */
.vm-t-community .vm-notes{gap:2.75rem 1.5rem;padding-top:1rem}
.vm-t-community .vm-postit,.vm-t-community .vm-hero-note{padding-top:1.6rem}
.vm-t-community .vm-postit::before,.vm-t-community .vm-hero-note::before{content:"";position:absolute;top:-.95rem;left:calc(50% - 3rem);width:6rem;height:1.8rem;z-index:3;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 5px),linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0) 70%),rgba(236,224,186,.92);
  transform:rotate(calc(2deg - var(--a,0deg) * 1.6));
  clip-path:polygon(2% 0,98% 0,100% 18%,96% 36%,100% 54%,97% 72%,100% 90%,98% 100%,2% 100%,0 86%,3% 68%,0 50%,4% 32%,0 14%)}
.vm-t-community .vm-postit:nth-child(3n+2)::before,.vm-t-community .vm-hero-note-2::before{left:-.6rem;top:-.35rem;transform:rotate(-38deg)}
.vm-t-community .vm-postit:nth-child(3n)::before,.vm-t-community .vm-hero-note-3::before{left:auto;right:-.6rem;top:-.35rem;transform:rotate(36deg)}
.vm-t-community .vm-note-text{font-size:1.875rem}

/* Colour blocks down the page, thick ink lines, sticker buttons. */
.vm-t-community .vm-band{background:var(--band);border-block:3px solid var(--ink)}
.vm-t-community .vm-how{background:var(--block-2);border-block:3px solid var(--ink)}
.vm-t-community .vm-points b{font-family:var(--display);font-weight:900;font-size:1.25rem}
.vm-t-community .vm-card,.vm-t-community .vm-safety{border:3px solid var(--ink)}
.vm-t-community .vm-btn,.vm-t-community a.vm-btn{box-shadow:4px 4px 0 var(--ink);border:3px solid var(--ink)}
.vm-t-community .vm-btn:hover,.vm-t-community a.vm-btn:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--ink)}