@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;500&family=Permanent+Marker&family=VT323&display=swap');

:root { --yellow:#f9d64a; }
*{box-sizing:border-box}

body{ background:#fff; margin:0; font-family:'Inter',sans-serif; color:#111; }

.poster{
  position:relative; width:100%;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.photo-strip{ display:flex; flex-direction:column; gap:0; width:100%; }
.photo{ position:relative; width:100%; display:flex; justify-content:center; }
.photo img{ width:min(350px,85vw); display:block; filter:grayscale(100%) contrast(115%); object-fit:cover; }

.word{
  position:absolute; font-family:'Permanent Marker',cursive; color:var(--yellow);
  font-size:clamp(2.8rem,10vw,6rem); letter-spacing:.1em; text-transform:capitalize;
  mix-blend-mode:multiply; pointer-events:none; z-index:2;
}
.excited{ top:-15%; left:50%; transform:translateX(-50%); }
.happy{ top:50%; left:105%; transform:translateY(-50%); }
.inspired{ top:50%; left:50%; transform:translate(-50%,-50%); }

.note{
  position:absolute; right:6vw; bottom:5vh; width:min(42ch,80vw); text-align:right;
  font-family:'VT323',monospace; font-size:clamp(.85rem,1.5vw,1rem); line-height:1.5; color:#111; z-index:3;
}

@media (max-width:768px){
  .photo img{ width:90vw; }
  .word{ font-size:clamp(2rem,9vw,4.5rem); }
  .happy{ left:98%; }
}