:root{
  --cream:#f1d9b5; --paper:#fbf1de; --ink:#1b2442; --navy:#24345e; --dark:#16213f;
  --red:#b3261e; --flame:#ff7a1a; --yellow:#ffc93c;
  --airmail:repeating-linear-gradient(-45deg,var(--red) 0 18px,var(--paper) 18px 30px,var(--navy) 30px 48px,var(--paper) 48px 60px);
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:hidden}
main{overflow-x:clip}
body{
  min-width:1180px; color:var(--ink); font-family:"Special Elite","Courier New",monospace; font-size:18px; line-height:1.5;
  background:var(--cream) radial-gradient(rgba(27,36,66,.13) 1.2px,transparent 1.4px) 0 0/14px 14px;
  overflow-x:hidden;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='26' viewBox='0 0 34 26'%3E%3Crect x='2' y='2' width='30' height='22' rx='3' fill='%23fff6e4' stroke='%231b2442' stroke-width='2.5'/%3E%3Cpath d='M3 4l14 11L31 4' fill='none' stroke='%231b2442' stroke-width='2.5'/%3E%3Ccircle cx='17' cy='15' r='3.5' fill='%23b3261e'/%3E%3C/svg%3E") 4 4,auto;
}
a,button{cursor:pointer}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* doodles */
.doodles{position:fixed;inset:0;z-index:-1;pointer-events:none}
.dd{position:absolute;width:56px;opacity:.55;animation:drift 14s ease-in-out infinite}
.d1{left:4%;top:18%} .d2{left:90%;top:24%;width:38px;animation-delay:-3s}
.d3{left:12%;top:72%;animation-delay:-6s} .d4{left:52%;top:86%;width:34px;animation-delay:-9s}
.d5{left:80%;top:62%;animation-delay:-2s} .d6{left:30%;top:40%;width:30px;animation-delay:-11s}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(26px,-34px) rotate(10deg)}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:64px;display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;background:var(--navy);color:var(--paper)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:var(--airmail)}
.nav__brand{display:flex;align-items:center;gap:12px;font-family:"Alfa Slab One",serif;font-size:20px;letter-spacing:.04em}
.nav__brand img{width:40px;height:40px;border-radius:50%;border:2px solid var(--paper);object-fit:cover;transition:transform .4s}
.nav__brand:hover img{transform:rotate(-14deg) scale(1.1)}
.nav__links{display:flex;gap:30px;font-size:16px;text-transform:uppercase;letter-spacing:.08em}
.nav__links a:hover{color:var(--yellow)}
.nav__cta{display:flex;gap:10px}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border:2.5px solid var(--ink);border-radius:6px;
  font-family:"Alfa Slab One",serif;font-size:15px;letter-spacing:.03em;box-shadow:3px 3px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px) rotate(-1.5deg);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn--red{background:var(--red);color:var(--paper)}
.btn--navy{background:var(--navy);color:var(--paper)}
.btn--cream{background:var(--paper);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--paper);border-color:var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.btn--big{padding:14px 26px;font-size:19px}
.nav .btn--red{border-color:var(--paper);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.btn--red:hover{animation:jiggle .4s}
@keyframes jiggle{0%,100%{rotate:0deg}25%{rotate:-3deg}75%{rotate:3deg}}

/* stamps */
.stamp{display:inline-block;font-family:"Alfa Slab One",serif;color:var(--red);border:4px solid var(--red);border-radius:8px;
  padding:4px 14px;letter-spacing:.08em;text-transform:uppercase;mix-blend-mode:multiply;
  -webkit-mask:radial-gradient(circle at 30% 40%,#000 60%,rgba(0,0,0,.75) 61%) ;}

/* hero */
.hero{padding-top:70px}
.banner{position:relative;aspect-ratio:3/1;overflow:hidden;border-bottom:4px solid var(--ink)}
.banner img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease-out;transform-origin:center}
.rebus{position:absolute;top:81%;transform:translateX(-50%) rotate(-4deg);font-family:"Alfa Slab One",serif;font-size:clamp(20px,2.2vw,34px);
  color:var(--paper);background:var(--ink);padding:2px 14px 4px;border-radius:4px;box-shadow:3px 3px 0 var(--red);animation:bob 2.8s ease-in-out infinite}
.rebus em{font-style:normal;color:var(--yellow)}
.r1{left:22.4%} .r2{left:41.4%;top:77%;transform:translateX(-50%) rotate(3deg);animation-delay:-1.4s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
.hero-stamp{position:absolute;left:35%;top:9%;font-size:26px;transform:rotate(-12deg);background:rgba(251,241,222,.35)}

.airmail{padding:12px;background:var(--airmail);border-bottom:4px solid var(--ink)}
.airmail__in{background:var(--paper);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding:26px 44px 28px}
.kicker{font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--red)}
.kicker--light{color:var(--yellow)}
h1{font-family:"Alfa Slab One",serif;font-weight:400;font-size:clamp(52px,5.4vw,80px);line-height:.95;color:var(--navy);margin:8px 0 10px;
  text-shadow:4px 4px 0 var(--red)}
.sub{font-size:20px;max-width:560px}
.sub b{color:var(--red);font-weight:400}
.hero__ca{display:flex;flex-direction:column;gap:14px}
.tick{font-family:"Alfa Slab One",serif;font-size:34px;color:var(--red);line-height:1}
.cabox{display:flex;align-items:center;gap:12px;background:#fff;border:2.5px solid var(--ink);border-radius:8px;padding:8px 8px 8px 14px;box-shadow:4px 4px 0 var(--navy)}
.cabox__lbl{font-family:"Alfa Slab One",serif;font-size:14px;background:var(--navy);color:var(--paper);padding:3px 8px;border-radius:4px}
.cabox code{flex:1;min-width:0;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:17px;word-break:break-all}
.copy{font-family:"Alfa Slab One",serif;font-size:14px;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:5px;padding:8px 16px;transition:transform .15s}
.copy:hover{transform:rotate(-3deg) scale(1.06)}
.copy.done{background:#3fa34d;color:#fff}
.hero__btns{display:flex;gap:14px;flex-wrap:wrap}

/* drop letters */
.drop .ch{display:inline-block;opacity:0;transform:translateY(-70px) rotate(-12deg);animation:drop .55s cubic-bezier(.3,1.6,.5,1) forwards}
.drop .sp{display:inline-block;width:.28em}
.drop .w{display:inline-block;white-space:nowrap}
@keyframes drop{to{opacity:1;transform:none}}
.drop .ch:hover{animation:none;opacity:1;transform:translateY(-6px) rotate(6deg);color:var(--flame)}

/* marquee */
.marquee{background:var(--red);color:var(--paper);border-block:4px solid var(--ink);transform:rotate(-1.4deg);margin:34px -20px 40px;overflow:hidden;white-space:nowrap}
.marquee__track{display:inline-flex;animation:mq 34s linear infinite}
.marquee span{font-family:"Alfa Slab One",serif;font-size:30px;padding:12px 0;letter-spacing:.03em}
@keyframes mq{to{transform:translateX(-50%)}}

/* scenes */
.scene{position:relative;border-block:5px solid var(--ink);margin-bottom:56px;overflow:hidden;background:var(--dark)}
.scene img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.tele{position:absolute;width:min(470px,34%);background:#f7ecd0;color:var(--ink);padding:16px 22px 18px;border:2px solid var(--ink);
  box-shadow:8px 8px 0 rgba(22,33,63,.75);background-image:repeating-linear-gradient(transparent 0 29px,rgba(27,36,66,.1) 29px 30px)}
.tele::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px;background:var(--airmail)}
.tele__head{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:12px;letter-spacing:.2em;color:var(--red);border-bottom:2px dashed var(--ink);padding-bottom:6px;margin-bottom:8px}
.tele h2{font-family:"Alfa Slab One",serif;font-weight:400;font-size:46px;line-height:1.02;color:var(--navy)}
.tele p{font-size:17px;margin-top:8px;letter-spacing:.03em}
.tr{top:6%;right:4%;rotate:2deg} .bl{bottom:6%;left:4%;rotate:-2deg} .br{bottom:6%;right:4%;rotate:-1.5deg}
.scene-stamp{position:absolute;font-size:44px;background:rgba(247,236,208,.5);opacity:0;transform:scale(2.4) rotate(-14deg);transition:opacity .25s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.scene.in .scene-stamp{opacity:1;transform:scale(1) rotate(-14deg)}
.st-bl{left:5%;bottom:8%} .st-tr{right:5%;top:8%} .st-tl{left:5%;top:8%}

/* reveal */
.reveal{opacity:0;translate:0 40px;transition:opacity .6s,translate .6s cubic-bezier(.2,1.4,.4,1)}
.reveal.in{opacity:1;translate:0 0}

/* take two */
.pair{padding:30px 48px 80px;text-align:center}
.pair__h{font-family:"Alfa Slab One",serif;font-weight:400;font-size:84px;color:var(--navy);text-shadow:4px 4px 0 var(--red)}
.pair__sub{font-size:20px;margin-bottom:40px}
.pair__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.photo{background:#fffaf0;padding:16px 16px 20px;border:2px solid var(--ink);box-shadow:10px 10px 0 var(--navy);position:relative;transition:rotate .3s,scale .3s}
.photo::before{content:"";position:absolute;top:-16px;left:50%;width:120px;height:32px;margin-left:-60px;background:rgba(255,201,60,.75);rotate:-3deg}
.p1{rotate:-2.2deg} .p2{rotate:1.8deg}
.photo:hover{rotate:0deg;scale:1.025}
.photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border:2px solid var(--ink)}
.photo figcaption{font-size:20px;margin-top:14px}

/* agent file */
.agent{background:var(--navy);border-block:5px solid var(--ink);padding:90px 48px;position:relative}
.agent::before,.agent::after{content:"";position:absolute;left:0;right:0;height:12px;background:var(--airmail)}
.agent::before{top:0} .agent::after{bottom:0}
.agent__in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:70px;align-items:center}
.seal{position:relative;aspect-ratio:1}
.seal img{position:absolute;inset:13%;width:74%;height:74%;border-radius:50%;object-fit:cover;object-position:50% 20%;border:6px solid var(--paper);box-shadow:0 0 0 6px var(--red),12px 14px 0 6px rgba(0,0,0,.35)}
.seal__ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 28s linear infinite}
.seal__ring text{font-family:"Alfa Slab One",serif;font-size:15.5px;fill:var(--yellow);letter-spacing:.14em}
@keyframes spin{to{transform:rotate(360deg)}}
.file{position:relative;background:#f3e2bd;border:2px solid var(--ink);border-radius:0 10px 10px 10px;padding:36px 44px 40px;box-shadow:12px 12px 0 rgba(0,0,0,.35)}
.file__tab{position:absolute;top:-38px;left:-2px;background:#f3e2bd;border:2px solid var(--ink);border-bottom:0;border-radius:10px 10px 0 0;padding:6px 20px;font-family:"IBM Plex Mono",monospace;font-weight:700;font-size:13px;letter-spacing:.18em}
.file h2{font-family:"Alfa Slab One",serif;font-weight:400;font-size:54px;color:var(--navy);margin-bottom:18px}
.file dl{display:grid;grid-template-columns:170px 1fr;row-gap:10px;font-size:20px}
.file dt{color:var(--red);text-transform:uppercase;letter-spacing:.06em}
.file dd{border-bottom:1.5px dashed rgba(27,36,66,.4)}
.file-stamp{position:absolute;right:26px;bottom:22px;font-size:24px;rotate:-10deg;opacity:.85}

/* finale */
.finale{background:var(--dark);color:var(--paper);padding:100px 48px 0;overflow:hidden;position:relative}
.finale::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,201,60,.08) 1.4px,transparent 1.6px) 0 0/16px 16px;pointer-events:none}
.finale__in{max-width:1300px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:end;position:relative}
.finale__copy{padding-bottom:100px}
.finale__h{font-family:"Alfa Slab One",serif;font-weight:400;line-height:.9;font-size:clamp(110px,12vw,190px);color:var(--paper);text-shadow:6px 6px 0 var(--red);margin:6px 0 16px}
.finale__sub{font-size:21px;max-width:560px;margin-bottom:26px;color:#e5d6b8}
.cabox--dark{background:#0f1830;border-color:var(--paper);color:var(--paper);box-shadow:4px 4px 0 var(--red);margin-bottom:20px;max-width:640px}
.cabox--dark .cabox__lbl{background:var(--red)}
.finale__art{position:relative;display:flex;justify-content:center;align-items:flex-end}
.finale__cut{width:100%;max-width:520px;height:auto;filter:drop-shadow(10px 10px 0 rgba(0,0,0,.4));animation:bounce 3s ease-in-out infinite}
.finale__stamp{position:relative;width:440px;margin-bottom:100px;animation:bounce 3s ease-in-out infinite}
.finale__stamp img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 20%;border:14px solid var(--paper);
  outline:4px dashed var(--paper);outline-offset:8px;rotate:4deg}
.finale__stamp .stamp{position:absolute;left:-30px;bottom:40px;font-size:40px;rotate:-16deg;background:rgba(251,241,222,.85);mix-blend-mode:normal}
@keyframes bounce{0%,100%{translate:0 0}50%{translate:0 -14px}}

.foot{background:#0d1428;color:#bfb39b;text-align:center;padding:34px 48px;font-size:15px;border-top:12px solid transparent;border-image:var(--airmail) 12}
.foot b{color:var(--yellow);font-weight:400}
.foot__s{margin-top:8px;font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}

/* confetti */
.fly{position:fixed;z-index:999;pointer-events:none;width:30px;height:30px;will-change:transform}
.fly svg{width:100%;height:100%}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .drop .ch,.reveal{opacity:1;transform:none;translate:0 0}
}