@font-face{font-family:Casa;src:url("assets/nunito-bold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Firma;src:url("assets/caveat.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:dark;--red:#d81024;--paper:#fff6e7;--ink:#251719;--duration:7s}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--red);color:var(--paper)}
body{font-family:Casa,sans-serif;font-weight:800}
button{font:inherit}
[hidden]{display:none!important}
.poster{position:relative;isolation:isolate;min-height:100svh;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:max(17px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(15px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left));overflow:clip;background-image:radial-gradient(#fff6e717 .7px,transparent .7px);background-size:6px 6px}
.poster::before{content:"";position:absolute;z-index:-1;inset:12% -28% 17%;border:1px solid #fff6e724;border-radius:50%;transform:rotate(-26deg);pointer-events:none}
.masthead,.footer{position:relative;z-index:3;width:min(100%,940px);margin-inline:auto}
.masthead{display:flex;justify-content:space-between;gap:14px;text-transform:uppercase;letter-spacing:.12em;font-size:9px;line-height:1.5;border-bottom:1px solid #fff6e752;padding-bottom:11px}
.edition{white-space:nowrap;opacity:.85}
.stage{position:relative;min-height:0;width:min(100%,760px);margin-inline:auto}
.scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;opacity:0;pointer-events:none}
.scene-three{opacity:1}
.scene-kicker{font-size:10px;letter-spacing:.19em;text-transform:uppercase;margin-bottom:20px}
.peru-logo{display:block;object-fit:contain;filter:brightness(0) invert(1);max-width:100%;height:auto}
.hero-logo{width:clamp(190px,68vw,370px)}
.handwritten{font-family:Firma,cursive;font-weight:400;line-height:.9;margin:0}
.home-line{font-size:clamp(50px,15vw,100px);margin-top:6px;transform:rotate(-5deg)}
.arrival{margin-top:28px;text-transform:uppercase;letter-spacing:.25em;font-size:10px}
.jack{display:block;font-size:clamp(76px,28vw,190px);font-weight:800;letter-spacing:-.075em;line-height:.9}
.final-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:22px}
.final-brand .peru-logo{width:clamp(100px,29vw,160px)}
.final-brand p{font-size:clamp(29px,8vw,45px);transform:rotate(-4deg);margin-top:2px}
.exception{font-size:clamp(48px,14vw,83px);position:relative;z-index:1;transform:rotate(-7deg);margin-bottom:5px}
.punchline{position:relative;max-width:calc(100% - 26px);transform:rotate(-3deg)}
.excluded{position:relative;color:var(--paper);background:var(--ink);padding:10px 17px 15px 9px;font-size:clamp(70px,25vw,166px);box-shadow:6px 7px 0 #890913}
.excluded::after{content:"";position:absolute;inset:45% -8px auto;height:7px;background:var(--red);border-block:1px solid var(--paper);transform:rotate(-13deg)}
.xd{position:absolute;right:-20px;bottom:-16px;background:var(--paper);color:var(--red);font-size:27px;line-height:1;padding:12px 8px;border:2px solid var(--ink);transform:rotate(16deg)}
.last-word{font-size:11px;line-height:1.5;letter-spacing:.02em;margin:27px 0 0}
.timeline{height:2px;background:#fff6e72a;margin-bottom:12px;overflow:hidden}
.timeline-fill{display:block;block-size:100%;background:var(--paper);transform-origin:left;transform:scaleX(1)}
.controls{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px}
button{min-height:44px;border:1px solid #fff6e78a;background:transparent;color:var(--paper);padding:8px 18px;cursor:pointer;font-size:12px;letter-spacing:.02em}
button:hover{background:#fff6e714}
button:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
button.replay{background:var(--paper);color:var(--ink);border-color:var(--paper);padding-inline:24px}
button span{display:inline-block;margin-left:14px;font-size:19px;vertical-align:-1px}
.motion-note{display:none;text-align:center;margin:0 0 8px;font-size:10px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.has-js .poster:not(.is-finished) .scene-three{opacity:0}
.has-js .poster:not(.is-finished) .scene-one{opacity:1}
.poster.is-running .scene-one{animation:scene-one var(--duration) linear both}
.poster.is-running .hero-logo{animation:logo-arrives var(--duration) cubic-bezier(.2,.8,.2,1) both}
.poster.is-running .scene-three{animation:scene-three var(--duration) linear both}
.poster.is-running .punchline{animation:punchline var(--duration) cubic-bezier(.2,.8,.2,1) both}
.poster.is-running .timeline-fill{animation:sequence-clock var(--duration) linear both}
.poster.is-paused *{animation-play-state:paused!important}
@keyframes scene-one{0%,40%{opacity:1;transform:translateY(0)}47%,100%{opacity:0;transform:translateY(-18px)}}
@keyframes logo-arrives{0%{opacity:0;transform:scale(.75) rotate(-7deg)}9%,100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes scene-three{0%,40%{opacity:0}47%,100%{opacity:1}}
@keyframes punchline{0%,44%{transform:translateY(20px) scale(.75) rotate(5deg)}55%,100%{transform:translateY(0) scale(1) rotate(-3deg)}}
@keyframes sequence-clock{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:700px){.poster{padding-inline:40px}.masthead{font-size:11px}.scene-kicker{font-size:12px}.last-word{font-size:13px}}
@media(max-height:650px){.poster{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(9px,env(safe-area-inset-bottom))}.masthead{padding-bottom:7px}.scene-kicker{margin-bottom:10px}.hero-logo{width:clamp(150px,54vw,255px)}.home-line{font-size:clamp(45px,13vw,68px)}.arrival{margin-top:17px}.final-brand{margin-bottom:9px}.final-brand .peru-logo{width:92px}.final-brand p{font-size:28px}.exception{font-size:46px}.excluded{font-size:clamp(65px,23vw,108px);padding-block:7px 11px}.last-word{margin-top:22px;font-size:10px}.timeline{margin-bottom:8px}}
@media(max-height:460px){.masthead{font-size:8px}.edition{display:none}.scene-kicker,.arrival{display:none}.hero-logo{width:135px}.home-line{font-size:44px}.final-brand{flex-direction:row;gap:9px;margin-bottom:4px}.final-brand .peru-logo{width:65px}.final-brand p{font-size:26px}.exception{font-size:34px;margin-bottom:0}.excluded{font-size:68px;padding-block:5px 9px}.xd{font-size:21px;padding:8px;right:-13px;bottom:-9px}.last-word{font-size:9px;line-height:1.3;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.poster *{animation:none!important}.has-js .poster .scene-one{opacity:0!important}.has-js .poster .scene-three{opacity:1!important}.motion-note{display:block}.timeline{display:none}}

.llama-joke{display:flex;flex-direction:column;align-items:center}
.llama-speech{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:24px;padding:4px 25px 20px;color:var(--ink);transform:rotate(-2deg)}
.llama-speech::after{content:"";position:absolute;bottom:-11px;left:43%;width:17px;height:17px;background:var(--paper);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(45deg)}
.llama-speech .exception{font-size:clamp(39px,10vw,62px);margin-bottom:3px}
.llama-speech .excluded{font-size:clamp(66px,21vw,126px);padding:5px 12px 8px 6px}
.llama-speech .punchline{max-width:none}
.llama{display:block;width:100px;height:auto;margin-top:12px;transform:rotate(5deg);transform-origin:50% 100%}
.scene-three .final-brand{margin-bottom:12px}
.scene-three .last-word{margin-top:4px}
.poster.is-running .llama{animation:llama-arrives var(--duration) cubic-bezier(.2,.8,.2,1) both}
@keyframes llama-arrives{0%,40%{opacity:0;transform:translateY(45px) rotate(-12deg)}52%,100%{opacity:1;transform:translateY(0) rotate(5deg)}}
@media(max-height:650px){.scene-three .final-brand{flex-direction:row;gap:12px;margin-bottom:10px}.scene-three .final-brand .peru-logo{width:78px}.llama-speech{padding:0 22px 15px}.llama-speech .exception{font-size:36px}.llama-speech .excluded{font-size:68px}.llama{width:82px;margin-top:11px}.scene-three .last-word{font-size:9px}.scene-three .xd{font-size:22px;padding:8px}}
@media(max-height:460px){.llama-speech{padding:0 16px 10px}.llama-speech .exception{font-size:29px}.llama-speech .excluded{font-size:51px}.llama{width:59px;margin-top:10px}.scene-three .final-brand{margin-bottom:4px}.scene-three .final-brand .peru-logo{width:52px}.scene-three .last-word{display:none}}
