:root {
  --ink: #221f1c;
  --cream: #f4ecd8;
  --fiber: #fbf7ea;
  --wall: #e4d9bd;
  --red: #e8472b;
  --pink: #ee7fa6;
  --yellow: #efc23d;
  --blue: #7aa6d8;
  --royal: #2745c7;
  --marker: 'Rock Salt', 'Marker Felt', cursive;
  --hand: 'Mansalva', 'Bradley Hand', cursive;
  --mono: 'DM Mono', 'Courier New', monospace;

  --grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

body {
  margin: 0;
  background-color: var(--wall);
  background-image: var(--grain);
  color: var(--ink);
  font-family: var(--mono);
}
a { color: var(--ink); }

.wall { min-height: 100vh; padding: 64px 28px 96px; display: flex; flex-direction: column; align-items: center; }

.poster {
  width: 100%;
  max-width: 940px;
  filter: drop-shadow(0 6px 10px rgba(60, 40, 10, 0.25));
}

.sheet {
  container-type: inline-size;
  background-color: var(--cream);
  background-image: var(--grain);
  padding: 4cqw 5% 3%;
}
@supports not (width: 1cqw) { .sheet { font-size: 1vw; } }

/* ---------- collage ---------- */
.collage { position: relative; width: 100%; aspect-ratio: 900 / 560; }
.collage > * { position: absolute; }

.label {
  top: 1%; left: 0; margin: 0;
  font-family: var(--hand);
  font-size: 2.6cqw; line-height: 1.25; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--royal);
}
.label::after { content: ''; display: block; width: 100%; height: 2px; margin-top: 0.6cqw; background: var(--royal); }

.crayon {
  top: -4%; left: 13%; width: 27%; height: 15%;
  background: repeating-linear-gradient(176deg, var(--pink) 0 5px, #f3a2bf 5px 7px, var(--pink) 7px 11px);
  clip-path: polygon(0 12%, 6% 0, 100% 6%, 97% 100%, 8% 94%);
  opacity: .95;
}

.star { top: 30%; left: -3%; width: 22%; height: auto; transform: rotate(-8deg); }

.blob { display: flex; align-items: center; justify-content: center; }
.blob.red {
  top: 5%; left: 23%; width: 51%; height: 50%;
  background: var(--red);
  clip-path: polygon(7% 12%, 52% 0, 100% 24%, 96% 80%, 58% 100%, 10% 91%, 0 48%);
  z-index: 1;
}
.blob.pink {
  top: 39%; left: 21%; width: 53%; height: 43%;
  background: var(--pink);
  clip-path: polygon(0 30%, 11% 0, 88% 9%, 100% 62%, 78% 100%, 18% 95%);
  z-index: 2;
}
h1 { margin: 0; font-weight: 400; }
h1 span, .tip {
  display: block;
  font-family: var(--marker);
  text-transform: uppercase;
  color: var(--ink);
  filter: url(#rough);
  line-height: 1;
}
h1 span { font-size: 12.5cqw; transform: rotate(-5deg); }
.tip { font-size: 9.6cqw; transform: rotate(-2.5deg); position: relative; padding-bottom: 1.4cqw; }
.tip::after {
  content: ''; position: absolute; left: 4%; right: 4%; bottom: 0;
  height: 1.7cqw; border-top: 0.7cqw solid var(--ink); border-bottom: 0.7cqw solid var(--ink);
  border-radius: 2px; transform: rotate(-1deg);
}

.dot {
  top: 6%; left: 79%; width: 17%; aspect-ratio: 1; border-radius: 50%;
  background: var(--yellow); display: flex; align-items: center; justify-content: center;
}
.dot, .chip { color: var(--ink); text-decoration: none; transition: transform .15s ease; }
.dot { box-shadow: 0 0 0 .7cqw var(--fiber), 0 .5cqw 1cqw rgba(60, 40, 10, .3); transform: rotate(-6deg); }
.dot:hover, .chip:hover { transform: rotate(0deg) scale(1.08); }
.dot:focus-visible, .chip:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.dot span {
  font-family: var(--hand); font-size: 3.4cqw; line-height: 1;
  border-bottom: 3px solid var(--ink); padding: 0 .4cqw .3cqw;
}

.chip {
  top: 27%; left: 77%; width: 21%; height: 27%;
  background: var(--blue); transform: rotate(2deg);
  clip-path: polygon(0 2%, 98% 0, 100% 97%, 3% 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw;
  text-align: center;
}
.chip span { font-family: var(--hand); font-size: 4cqw; line-height: 1; border-bottom: 3px solid var(--ink); padding-bottom: .3cqw; }
.chip b { font-size: 4cqw; font-weight: 400; line-height: 1; }

.scribble { top: 56%; left: 78%; width: 21%; height: auto; }

/* ---------- paragraph ---------- */
.lower {
  position: relative; z-index: 3;
  display: flex; align-items: flex-start; gap: 4cqw;
  margin-top: -6cqw;
}
.note {
  flex: 0 1 56%;
  background: var(--yellow);
  clip-path: polygon(0 3%, 40% 0, 100% 2%, 98% 55%, 100% 100%, 55% 97%, 2% 100%, 3% 50%);
  padding: 4cqw 4.6cqw 4.4cqw;
  transform: rotate(-0.8deg);
}
.note p { margin: 0; font-size: max(17px, 2.4cqw); line-height: 1.6; }

.circled {
  margin: 4cqw 0 0 2cqw; padding: 1.4cqw 3cqw;
  font-family: var(--hand); font-size: max(20px, 3cqw); line-height: 1;
  border: 3px solid var(--royal); border-radius: 50% 46% 52% 48% / 60% 50% 58% 46%;
  color: var(--royal); transform: rotate(-3deg); white-space: nowrap;
}

.target { height: 0; }

@media (max-width: 700px) {
  .wall { padding: 36px 14px 64px; }
  .lower { flex-direction: column; margin-top: -3cqw; gap: 2cqw; }
  .note { flex-basis: auto; width: 100%; padding: 6cqw; }
  .note p { font-size: 17px; }
  .circled { margin: 2cqw 0 0 4cqw; }
}

/* ---------- tissue paper: see-through shapes that darken where they overlap ---------- */
.blob, .dot, .chip, .note, .crayon, .star, .scribble { mix-blend-mode: multiply; }

.blob.red  { background-color: rgba(232, 71, 43, 0.74);  background-image: var(--grain); }
.blob.pink { background-color: rgba(238, 127, 166, 0.72); background-image: var(--grain); }
.dot       { background-color: rgba(239, 194, 61, 0.78); background-image: var(--grain); }
.chip      { background-color: rgba(122, 166, 216, 0.74); background-image: var(--grain); }
.note      { background-color: rgba(239, 194, 61, 0.72); background-image: var(--grain); }
.crayon    { opacity: 0.8; }
.star      { opacity: 0.82; }
.scribble  { opacity: 0.85; }
.dot { box-shadow: none; }

/* no backing sheet: the shapes sit straight on the page */
.poster { filter: none; }
.sheet { background: none; }
body { background-color: #f1e8d3; }

.tip::after { display: none; }
.tip { padding-bottom: 0; }

/* ---------- newsprint scraps: torn bits of old paper for texture ---------- */
.scrap {
  z-index: 0;
  overflow: hidden;
  padding: 1cqw 1.1cqw;
  background-color: #dcd5c0;
  background-image: var(--grain);
  color: #3f3b34;
  font-family: Georgia, 'Times New Roman', serif;
  mix-blend-mode: multiply;
  opacity: 0.92;
  pointer-events: none;
}
.scrap h2 {
  margin: 0 0 .5cqw; padding-bottom: .4cqw;
  font-size: 1.9cqw; line-height: 1; font-weight: 700; letter-spacing: .02em;
  border-bottom: 1px solid rgba(63, 59, 52, .6);
}
.scrap p { margin: 0; font-size: 1.15cqw; line-height: 1.3; text-align: justify; hyphens: auto; }
.scrap.dots {
  background-image: radial-gradient(rgba(63, 59, 52, .28) 28%, transparent 30%), var(--grain);
  background-size: .7cqw .7cqw, auto;
}

.s1 { top: 55%; left: -1%; width: 17%; height: 22%; transform: rotate(-6deg);
  clip-path: polygon(0 4%, 18% 0, 55% 3%, 100% 0, 97% 38%, 100% 70%, 94% 100%, 40% 96%, 3% 100%, 0 60%, 3% 30%); }
.s2 { top: -3%; left: 57%; width: 18%; height: 16%; transform: rotate(5deg);
  clip-path: polygon(2% 0, 60% 5%, 100% 0, 96% 50%, 100% 100%, 50% 94%, 0 100%, 4% 48%); }
.s3 { top: 78%; left: 66%; width: 14%; height: 18%; transform: rotate(-4deg);
  clip-path: polygon(0 8%, 30% 0, 100% 6%, 94% 55%, 100% 96%, 60% 100%, 8% 94%, 4% 50%); }
.s4 { top: 43%; left: 71%; width: 14%; height: 18%; transform: rotate(8deg);
  clip-path: polygon(6% 0, 100% 4%, 95% 52%, 100% 100%, 40% 95%, 0 100%, 4% 46%); }
.s5 { top: 10%; left: 9%; width: 13%; height: 21%; transform: rotate(-3deg);
  clip-path: polygon(0 0, 52% 4%, 100% 0, 96% 60%, 100% 100%, 46% 96%, 4% 100%, 0 52%); }

/* uneven scatter: different sizes, some bleeding off the edges, a couple clustered */
.s1 { top: 61%; left: -5%; width: 25%; height: 31%; transform: rotate(-9deg); }
.s1 p { font-size: 1.35cqw; }
.s2 { top: -7%; left: 45%; width: 27%; height: 13%; transform: rotate(2deg); }
.s3 { top: 71%; left: 41%; width: 11%; height: 15%; transform: rotate(11deg); }
.s3 h2 { font-size: 1.5cqw; }
.s3 p { font-size: 1cqw; }
.s4 { top: 37%; left: 90%; width: 13%; height: 31%; transform: rotate(4deg); }
.s5 { top: 13%; left: 14%; width: 9%; height: 13%; transform: rotate(7deg); }
.s5 h2 { font-size: 1.5cqw; }
.s5 p { font-size: .95cqw; }

/* Rock Salt only comes in one weight, so the bold is a stroke around each letter */
h1 span, .tip { -webkit-text-stroke: 0.04em currentColor; paint-order: stroke fill; letter-spacing: 0.01em; }
h1 span { font-size: 9.6cqw; }
.tip { font-size: 7.2cqw; }

/* headline in Mansalva */
h1 span, .tip { font-family: var(--hand); -webkit-text-stroke: 0.025em currentColor; letter-spacing: 0.02em; }
h1 span { font-size: 13cqw; }
.tip { font-size: 10cqw; }

/* headline sits on top of the shapes (not inside them) so it can spill past their edges */
.title { top: 10%; left: 11%; width: 78%; z-index: 5; margin: 0; pointer-events: none; }
.title span { white-space: nowrap; }
.title .loc { font-size: 17cqw; margin-left: 12%; transform: rotate(-5deg); }
.title .tip { font-size: 13.5cqw; margin: -1cqw 0 0 4%; padding: 0; transform: rotate(-2.5deg); }

/* lowercase headline */
.title span { text-transform: lowercase; font-family: 'Mansalva', 'Bradley Hand', cursive; }

/* each word centered on its own shape */
.title { top: 0; left: 0; width: 100%; height: 100%; }
.title span { position: absolute; display: block; text-align: center; margin: 0; line-height: 1; }
.title .loc { left: 23%; width: 51%; top: 30%; transform: translateY(-50%) rotate(-5deg); }
.title .tip { left: 21%; width: 53%; top: 61%; transform: translateY(-50%) rotate(-2.5deg); }