:root { --red: #ff1647; --yellow: #fff500; --blue: #00d9ff; --ink: #101010; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: repeating-linear-gradient(17deg, #e9ff00 0 13px, #ff7a00 13px 26px, #ff34a8 26px 39px); font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; overflow-x: hidden; }
.warning-strip, footer { padding: 10px 2vw; border-block: 7px solid var(--ink); background: var(--blue); font: 900 1.1rem/1.2 monospace; letter-spacing: 3px; }
.hero { position: relative; min-height: 580px; display: grid; grid-template-columns: 48% 52%; align-items: center; padding: 5vw; background: var(--red); border-bottom: 12px solid var(--ink); transform: rotate(-1deg) scale(1.02); }
.hero-photo { width: 100%; height: 430px; object-fit: cover; filter: saturate(5) contrast(1.5) hue-rotate(35deg); border: 14px solid var(--ink); box-shadow: 25px 25px 0 var(--yellow), -14px -14px 0 var(--blue); transform: rotate(4deg); }
.hero-copy { padding: 2rem; z-index: 2; }
.tiny { background: var(--yellow); display: inline; padding: 8px; font: 900 .8rem monospace; }
h1 { margin: 10px 0; font-size: clamp(5rem, 14vw, 12rem); line-height: .72; letter-spacing: -5px; text-shadow: 10px 10px var(--blue), -7px -5px var(--yellow); }
h1 span { color: var(--yellow); -webkit-text-stroke: 4px var(--ink); }
.subtitle { max-width: 420px; padding: 12px; background: white; font: 900 1.15rem/1.15 monospace; transform: rotate(3deg); }
button, a { display: inline-block; border: 6px solid var(--ink); padding: 13px 18px; background: var(--yellow); color: var(--ink); font: 900 1rem Impact, sans-serif; text-decoration: none; cursor: pointer; box-shadow: 8px 8px 0 var(--ink); }
button:hover, a:hover { transform: translate(5px, 5px) rotate(-3deg); box-shadow: 2px 2px 0 var(--ink); }
.hero-stamp { position: absolute; top: 35px; right: 8%; z-index: 3; padding: 20px; border: 8px dashed var(--ink); border-radius: 50%; background: var(--yellow); font-size: 2rem; line-height: .8; transform: rotate(18deg); }
marquee { display: block; padding: 12px; background: var(--ink); color: var(--yellow); font: bold 1.4rem monospace; }
main { max-width: 1400px; margin: auto; padding: 60px 4vw; }
.intro { padding: 25px; background: white; border: 9px solid var(--ink); transform: rotate(2deg); box-shadow: 18px 18px 0 var(--blue); }
.intro h2, .guestbook h2 { margin: 0; font-size: clamp(2.5rem, 7vw, 6rem); line-height: .9; text-shadow: 5px 5px var(--red); }
.intro p { font: 900 1.4rem monospace; max-width: 850px; }
.sticker-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sticker-row span { padding: 10px; background: var(--red); border: 4px solid var(--ink); transform: rotate(-4deg); font-size: 1.5rem; }
.sticker-row span:nth-child(even) { background: var(--blue); transform: rotate(5deg); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 80px 0; }
.card { position: relative; padding: 18px; border: 8px solid var(--ink); box-shadow: 14px 14px 0 var(--ink); transform: rotate(-2deg); }
.card:nth-child(2) { transform: rotate(3deg); }.card:nth-child(3) { transform: rotate(-5deg); }
.card-red { background: var(--red); }.card-yellow { background: var(--yellow); }.card-blue { background: var(--blue); }
.card img { width: 100%; height: 220px; object-fit: cover; border: 6px solid var(--ink); filter: grayscale(1) contrast(2); }
.card h2 { margin: 12px 0 0; font-size: 2.6rem; line-height: .8; }.card p { min-height: 95px; font: bold 1rem/1.15 monospace; }
.number { position: absolute; top: -28px; right: -18px; padding: 10px; background: white; border: 5px solid var(--ink); font-size: 1.7rem; transform: rotate(12deg); }
.image-mess { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; align-items: center; margin: 40px -8vw; background: var(--ink); padding: 15px; }
.image-mess img { width: 100%; height: 180px; object-fit: cover; filter: saturate(4); }.image-mess img:nth-child(2) { transform: rotate(9deg) scale(1.2); }.image-mess img:nth-child(3) { transform: rotate(-6deg) scale(.8); }.image-mess img:nth-child(4) { transform: rotate(14deg); }.image-mess img:nth-child(5) { transform: rotate(-11deg) scale(1.15); }
.guestbook { margin: 85px auto 30px; max-width: 800px; padding: 30px; background: white; border: 10px solid var(--ink); transform: rotate(-2deg); }
.guestbook label { display: block; margin-top: 22px; font: bold .9rem monospace; }.guestbook input, .guestbook textarea { width: 100%; display: block; margin-top: 5px; padding: 13px; border: 5px solid var(--ink); background: var(--blue); font: bold 1rem monospace; }.guestbook textarea { min-height: 100px; }.guestbook button { margin-top: 22px; background: var(--red); }.guestbook .sent { background: var(--blue); }
footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--yellow); font-size: .85rem; }
@media (max-width: 760px) { .hero { display: block; padding: 45px 5vw 80px; }.hero-photo { height: 260px; }.hero-copy { padding: 55px 0 0; }.hero-stamp { top: 20px; right: 5%; }.cards { grid-template-columns: 1fr; gap: 55px; }.image-mess { margin-inline: -4vw; grid-template-columns: repeat(3, 1fr); }.image-mess img { height: 120px; }.image-mess img:nth-child(n+4) { display: none; } h1 { font-size: 5rem; } }