:root {
  --grass: #3ba776;
  --mustard: #f7c548;
  --tomato: #f25c3b;
  --sky: #6ec6f0;
  --pink: #ff9ec4;
  --ink: #1d1b19;
  --white: #fffdf6;
  --hard: 6px 6px 0 rgba(20, 30, 20, .35);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grass);
  color: var(--ink);
  font: 400 17px/1.55 Figtree, system-ui, sans-serif;
  overflow-x: hidden;
}
/* construction-paper grain over everything */
body::after { content: ""; position: fixed; inset: 0; background-image: var(--grain); opacity: .28; mix-blend-mode: multiply; pointer-events: none; z-index: 50; }
img { display: block; max-width: 100%; height: auto; }
main { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
section { position: relative; }

/* ---------- paper ---------- */
.mustard { background: var(--mustard); }
.tomato { background: var(--tomato); }
.sky { background: var(--sky); }
.pink { background: var(--pink); }
.white { background: var(--white); }
.paper { position: absolute; z-index: 0; }

.torn-big { clip-path: polygon(0.0% 0.7%, 4.5% 2.8%, 9.1% 2.5%, 13.6% 1.9%, 18.2% 0.9%, 22.7% 3.2%, 27.3% 3.2%, 31.8% 2.0%, 36.4% 2.0%, 40.9% 0.9%, 45.5% 0.0%, 50.0% 1.5%, 54.5% 2.3%, 59.1% 0.3%, 63.6% 3.2%, 68.2% 0.9%, 72.7% 0.9%, 77.3% 0.2%, 81.8% 4.0%, 86.4% 3.0%, 90.9% 3.5%, 95.5% 2.5%, 100.0% 0.1%, 98.7% 4.5%, 98.0% 9.1%, 99.5% 13.6%, 96.2% 18.2%, 98.5% 22.7%, 99.4% 27.3%, 96.7% 31.8%, 99.5% 36.4%, 96.3% 40.9%, 98.2% 45.5%, 97.8% 50.0%, 98.6% 54.5%, 98.1% 59.1%, 99.3% 63.6%, 99.9% 68.2%, 96.5% 72.7%, 99.1% 77.3%, 96.9% 81.8%, 99.2% 86.4%, 96.1% 90.9%, 96.4% 95.5%, 97.0% 100.0%, 95.5% 96.9%, 90.9% 97.7%, 86.4% 97.1%, 81.8% 99.5%, 77.3% 98.1%, 72.7% 96.7%, 68.2% 99.2%, 63.6% 96.3%, 59.1% 96.4%, 54.5% 98.4%, 50.0% 98.5%, 45.5% 98.2%, 40.9% 98.5%, 36.4% 96.0%, 31.8% 98.5%, 27.3% 99.9%, 22.7% 99.6%, 18.2% 97.1%, 13.6% 96.0%, 9.1% 98.0%, 4.5% 98.0%, 0.0% 97.8%, 3.0% 95.5%, 0.9% 90.9%, 2.4% 86.4%, 2.2% 81.8%, 2.5% 77.3%, 0.7% 72.7%, 0.7% 68.2%, 1.4% 63.6%, 3.7% 59.1%, 1.4% 54.5%, 2.4% 50.0%, 1.2% 45.5%, 0.4% 40.9%, 0.3% 36.4%, 3.3% 31.8%, 3.1% 27.3%, 1.5% 22.7%, 2.7% 18.2%, 2.7% 13.6%, 3.6% 9.1%, 3.8% 4.5%); }

/* white paper strips (captions, body text) */
.strip { display: inline-block; background: var(--white); padding: 8px 16px; margin: 0; box-shadow: 4px 4px 0 rgba(20, 30, 20, .3); transform: rotate(var(--r, -1.5deg)); font-weight: 600; }

/* ---------- ransom-note lettering ---------- */
.ransom { margin: 0; line-height: 1.25; }
.r { display: inline-block; padding: .02em .16em .06em; margin: 0 .03em .12em 0; box-shadow: 6px 6px 0 rgba(20, 30, 20, .45); vertical-align: middle; }
.r1 { font-family: "Abril Fatface", serif; background: var(--white); color: var(--ink); transform: rotate(-4deg); }
.r2 { font-family: "Rubik Mono One", sans-serif; background: var(--ink); color: var(--mustard); transform: rotate(3deg); font-size: .78em; }
.r3 { font-family: "Permanent Marker", cursive; background: var(--sky); color: var(--ink); transform: rotate(2deg); }
.r4 { font-family: "Bagel Fat One", sans-serif; background: var(--pink); color: var(--ink); transform: rotate(-3deg); }
.ransom:not(.small-ransom) { font-size: clamp(3.6rem, 9vw, 7.4rem); }
.small-ransom { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 26px; }

/* ---------- photo stickers ---------- */
.sticker { position: relative; margin: 0; background: var(--white); padding: 10px; box-shadow: var(--hard); transform: rotate(var(--r, 0deg)); transition: transform .25s ease; }
.sticker img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sticker:hover { transform: rotate(0deg) scale(1.03); z-index: 5; }
.pos-left { object-position: 30% 50%; }

/* ---------- doodles ---------- */
.doodle { position: absolute; pointer-events: none; z-index: 4; }
.d1 { width: 64px; height: 64px; color: var(--white); top: 26px; left: 44%; animation: spin 14s linear infinite; }
.d2 { width: 170px; height: 28px; color: var(--mustard); bottom: 30px; left: 6%; }
.d3 { width: 58px; height: 58px; color: var(--mustard); top: 60%; right: -6px; animation: spin 18s linear infinite reverse; }
.d4 { width: 150px; height: 56px; color: var(--white); right: 4%; top: 18px; }
.d5 { width: 50px; height: 50px; color: var(--mustard); top: 20px; right: 16%; }
.d6 { width: 150px; height: 26px; color: var(--white); bottom: 6px; left: 30%; }
.d7 { width: 70px; height: 70px; color: var(--mustard); top: 0; right: 18%; animation: spin 16s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding: 70px 0 90px; min-height: 680px; }
.bg1 { width: 58%; height: 78%; left: -4%; top: 10%; transform: rotate(-3deg); }
.bg2 { width: 34%; height: 46%; right: 2%; top: 4%; transform: rotate(6deg); }
.hero-left { position: relative; z-index: 2; }
.s-tag { display: block; width: fit-content; max-width: 30ch; font-size: 1.2rem; margin-top: 28px; --r: -1.5deg; }
.s-small { margin-top: 14px; margin-left: 30px; --r: 2deg; font-size: .95rem; }
.hero-photos { position: relative; z-index: 2; justify-self: center; width: min(400px, 100%); padding-bottom: 60px; }
.hero-photos .big { width: 86%; }
.hero-photos .small { position: absolute; width: 50%; right: -4%; bottom: 0; }
.c-hero { position: absolute; top: -18px; left: -26px; --r: -6deg; font-size: 1.1rem; z-index: 3; }

/* ---------- section labels ---------- */
.section-label { margin: 0 0 30px; }
.section-label span { display: inline-block; font: 400 clamp(1.8rem, 4vw, 2.6rem) "Permanent Marker", cursive; background: var(--white); padding: 4px 18px; transform: rotate(-2deg); box-shadow: var(--hard); }

/* ---------- topics ---------- */
.topics { padding: 50px 0 80px; }
.labels { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 22px 26px; }
.tear { filter: drop-shadow(5px 5px 0 rgba(20, 30, 20, .35)); transform: rotate(var(--r)); transition: transform .2s; }
.tear:hover { transform: rotate(0) scale(1.04); }
.label { padding: 20px 28px 22px; display: flex; flex-direction: column; gap: 2px; min-width: 250px; }
.label b { font: 400 clamp(1.6rem, 3.4vw, 2.2rem) "Bagel Fat One", sans-serif; line-height: 1.05; }
.label span { font-size: .95rem; font-weight: 600; max-width: 28ch; }
.labels li:nth-child(1) { flex: 1 1 38%; }
.labels li:nth-child(2) { flex: 1 1 42%; }
.labels li:nth-child(3) { flex: 1 1 25%; }
.labels li:nth-child(4) { flex: 1 1 35%; }
.labels li:nth-child(5) { flex: 1 1 30%; }

/* ---------- collage ---------- */
.collage { padding: 40px 0 90px; }
.pile { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
.pile figcaption { position: absolute; left: -8px; bottom: -16px; transform: rotate(-3deg); white-space: nowrap; font-size: .95rem; z-index: 2; }
.p1 { grid-column: 1 / span 4; grid-row: 1; z-index: 2; }
.p2 { grid-column: 4 / span 4; grid-row: 1; margin-top: 90px; z-index: 3; }
.p3 { grid-column: 8 / span 3; grid-row: 1; margin-top: 10px; z-index: 2; }
.p4 { grid-column: 10 / span 3; grid-row: 1; margin-top: 190px; z-index: 4; }
.p5 { grid-column: 6 / span 4; grid-row: 2; margin-top: -40px; z-index: 5; }
.p5 img { aspect-ratio: 5 / 4; }

/* ---------- about ---------- */
.about { padding: 70px 0 90px; }
.bg3 { width: 80%; height: 100%; left: 8%; top: 0; transform: rotate(-1.5deg); }
.about-text { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 10px 20px; }
.about-text .strip { font-size: 1.12rem; font-weight: 500; line-height: 1.55; padding: 14px 20px; }

/* ---------- socials ---------- */
.hi { text-align: center; padding: 50px 0 60px; }
.handle { font: 800 1.6rem Figtree, sans-serif; --r: 2deg; margin-bottom: 26px; }
.buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn { font: 800 1.15rem Figtree, sans-serif; color: var(--ink); text-decoration: none; padding: 14px 28px; box-shadow: var(--hard); transition: transform .15s; }
.btn.tomato { transform: rotate(-3deg); color: var(--white); }
.btn.sky { transform: rotate(2deg); }
.btn:hover { transform: rotate(0) translateY(-3px); }

footer { text-align: center; padding: 10px 20px 50px; }
footer .strip { font-size: .85rem; --r: 1deg; }

@media (prefers-reduced-motion: reduce) {
  .doodle { animation: none !important; }
  .sticker, .tear, .btn { transition: none; }
}

/* ---------- phones ---------- */
@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding: 44px 0 70px; min-height: 0; gap: 44px; }
  .bg1 { width: 100%; height: 44%; left: -6%; top: 4%; }
  .bg2 { width: 60%; height: 34%; right: -8%; top: auto; bottom: 8%; }
  .ransom:not(.small-ransom) { font-size: clamp(3rem, 15vw, 4.6rem); }
  .hero-photos { width: 84%; }
  .d1 { left: auto; right: 6%; top: 10px; width: 44px; height: 44px; }
  .d3 { display: none; }
  .d4, .d6 { display: none; }
  .label { min-width: 0; padding: 16px 22px 18px; }
  .labels li { flex: 1 1 100% !important; }
  .pile { grid-template-columns: 1fr 1fr; gap: 34px 18px; }
  .pile .sticker { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; }
  .p5 { grid-column: 1 / -1 !important; width: 80%; justify-self: center; }
  .pile figcaption { font-size: .82rem; }
  .bg3 { width: 110%; left: -5%; }
  .about-text { padding: 10px 6px; }
}