/* Contact card (contact.html): a zine poster. Blue marker type, hand-drawn
   doodles, a black-and-white cutout and hot-pink halftone scribbles. */
@font-face{font-family:Marker;src:url('fonts/marker.woff2') format('woff2');font-display:block}
@font-face{font-family:Mono;src:url('fonts/space-mono.woff2') format('woff2');font-display:swap}
:root{
  --paper:#f1eee6;--card:#fbfaf6;--ink:#151515;--muted:#6b6a64;--blue:#1f45ff;--pink:#ff1f8f;
  --marker:Marker,'Comic Sans MS',cursive;--mono:Mono,ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);--pop:cubic-bezier(.3,1.5,.5,1);
}
@supports (transition-timing-function:linear(0,1)){:root{
  /* a spring: fast, one overshoot, settles */
  --pop:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 20%,1.051 22.9%,1.059 26.2%,1.034 33.4%,1.004 42.1%,.996 50.1%,1);
}}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper) url('paper-grain.svg');color:var(--ink);font:15px/1.5 Arial,Helvetica,sans-serif;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
@supports (overflow:clip){body{overflow-x:clip}}
a{color:inherit}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;z-index:60;top:-80px;left:12px;background:var(--blue);color:#fff;padding:12px 16px}
.skip:focus{top:12px}
:focus-visible{outline:2px dashed var(--pink);outline-offset:4px}

/* ---------- hand-drawn ink (draws itself on) ---------- */
.ink{fill:none;stroke:var(--blue);stroke-width:3px;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ink path{vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1}
.ink path{animation:draw .55s cubic-bezier(.6,0,.3,1) var(--d,1.2s) forwards}
.js [data-in] .ink path{animation-play-state:paused}
.js [data-in].in .ink path{animation-play-state:running}
@keyframes draw{to{stroke-dashoffset:0}}
/* line boil: three hand-drawn poses, eight a second */
@keyframes boil{0%{transform:none}33%{transform:translate(.3%,-.4%) rotate(.6deg)}66%{transform:translate(-.35%,.25%) rotate(-.5deg)}}
.scribble{position:absolute;overflow:visible;pointer-events:none}
.scribble path{stroke-dasharray:1 1;stroke-dashoffset:1;animation:draw var(--t,1.1s) cubic-bezier(.55,0,.25,1) var(--d,0s) forwards}

/* ---------- top bar ---------- */
.top{position:absolute;z-index:10;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;padding-top:max(14px,env(safe-area-inset-top))}
.top-back{font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;margin:0}
.top-back{padding:8px 0}

/* ---------- hero poster ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.frame{position:relative;container-type:inline-size;aspect-ratio:1/1.9;width:min(100vw,calc((100vh - 56px)/1.9));width:min(100vw,calc((100svh - 56px)/1.9));margin:0 auto}
@supports not (aspect-ratio:1/1){.frame{height:calc(100vw * 1.9)}}
.word{position:absolute;left:0;right:0;margin:0;text-align:center;font:400 50vw/.78 var(--marker);font-size:50cqw;color:var(--blue);white-space:nowrap;pointer-events:none}
.word-1{top:3%;z-index:1}
.word-2{top:55%;z-index:4;font-size:56vw;font-size:56cqw}
.word span{display:inline-block;rotate:var(--r);translate:0 var(--y);
  animation:slam .75s var(--pop) calc(var(--i) * 75ms + .1s) both,boil 1.1s steps(1) calc(var(--i) * -330ms) infinite}
@keyframes slam{0%{scale:2.6;opacity:0}35%{opacity:1}100%{scale:1;opacity:1}}
.me{position:absolute;z-index:2;left:6%;width:88%;bottom:-2%;margin:0;rotate:1.5deg;transform-origin:50% 100%;animation:rise 1s var(--pop) .3s both;cursor:pointer;-webkit-user-select:none;user-select:none}
.me img{width:100%;height:auto;filter:drop-shadow(0 18px 24px #0000002e);-webkit-user-drag:none}
@keyframes rise{from{translate:0 22%;rotate:-7deg;opacity:0}to{opacity:1}}
.crown{position:absolute;left:34%;top:-6.5%;width:30%;rotate:-8deg;animation:boil 1.1s steps(1) infinite}
.crown path{--d:1.35s}
.crown path+path{--d:1.6s}
.scribble-hero{z-index:3;left:calc(50% - 50vw);width:100vw;top:6%;height:84%}
.doodle{position:absolute;z-index:5;margin:0;animation:boil 1.1s steps(1) infinite}
.d-star1{left:9%;top:21%;width:9%;animation-delay:-.1s}.d-star1 path{--d:1.5s}
.d-star2{left:8%;top:50%;width:8%;stroke-width:2.4px;animation-delay:-.25s}.d-star2 path{--d:1.65s}
.d-hi{left:3%;top:30%;width:25%;font:11cqw/1 var(--marker);color:var(--blue);text-align:center;rotate:-10deg;padding:.25em 0}
.d-hi svg{position:absolute;inset:-12% -6%;width:112%;height:124%}.d-hi path{--d:1.45s}
.d-hi span{display:inline-block;animation:slam .6s var(--pop) 1.3s both}
.d-me{right:1%;top:32%;width:27%;font:7.4cqw/1 var(--marker);color:var(--blue);text-align:center;rotate:6deg}
.d-me span{display:block;animation:slam .6s var(--pop) 1.55s both}
.d-me svg{display:block;width:80%;margin:2% 0 0 4%}.d-me path{--d:1.7s}.d-me path+path{--d:2.1s}
.d-xx{left:5%;top:84%;width:12%;animation-delay:-.3s}.d-xx path{--d:2s}
.d-wave{left:4%;top:44%;width:16%;stroke-width:2.6px;animation-delay:-.2s}.d-wave path{--d:1.85s}
.hero-note{display:none}
.hero-tags{position:absolute;z-index:6;left:50%;bottom:19%;translate:-50% 0;rotate:-2deg;margin:0;padding:6px 12px;background:var(--paper);font:12px var(--mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px -14px #000;animation:tag .6s var(--pop) 2s both}
@keyframes tag{from{opacity:0;scale:.6}}
.hero-down{position:absolute;z-index:6;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:2px;font:26px/1 var(--marker);color:var(--pink);text-decoration:none;rotate:-6deg}
.hero-down span{background:var(--paper);padding:4px 8px 0;animation:tag .6s var(--pop) 2.2s both}
.hero-down svg{width:26px;height:46px;stroke:var(--pink);animation:bob 1.6s ease-in-out 2.6s infinite}
.hero-down path{--d:2.3s}
@keyframes bob{50%{transform:translateY(6px)}}
.burst{position:absolute;z-index:7;pointer-events:none;font:30px/1 var(--marker);color:var(--pink);animation:burst .9s var(--ease) forwards}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--rot)) scale(1.1)}}
@media (min-width:900px){
  .word-1{top:-1%;font-size:min(32vh,28vw)}
  .word-2{font-size:min(40vh,33vw)}
  .hero-note{display:block;position:absolute;z-index:6;left:max(24px,calc(50% - 650px));bottom:24%;margin:0;font:clamp(26px,2.3vw,36px)/1 var(--marker);color:var(--blue);rotate:-7deg;text-transform:uppercase;animation:tag .7s var(--pop) 2.1s both}
  .hero-tags{left:max(28px,calc(50% - 640px));bottom:12%;translate:none;font-size:13px}
  .hero-down{right:auto;left:50%;bottom:92px;translate:-50% 0;rotate:0deg}
}

/* ---------- sections ---------- */
.sec{position:relative;padding:96px 16px 80px;max-width:1120px;margin:0 auto}
.big{position:relative;z-index:2;margin:0 0 8px;text-align:center;font:400 clamp(56px,17vw,150px)/.86 var(--marker);color:var(--blue)}
.big>span{display:inline-block}
.circ{position:relative;display:inline-block;padding:0 .08em}
.circ svg{position:absolute;left:-14%;top:-22%;width:128%;height:144%;stroke:var(--pink);stroke-width:2.6}
.circ svg path{vector-effect:none}
.circ path{--d:.35s}
.js [data-in]{opacity:0;translate:0 34px;transition:opacity .6s var(--ease),translate .9s var(--pop)}
.js [data-in].in{opacity:1;translate:0 0}

/* the card */
.card-wrap{perspective:900px;margin:52px auto 0;width:min(350px,88vw)}
.idcard{position:relative;background:var(--card) url('paper-grain.svg');padding:22px 20px 26px;rotate:-2.5deg;border-radius:3px;
  box-shadow:0 1px 1px #0000001a,0 34px 50px -30px #00000080;transform-style:preserve-3d;transition:transform .5s var(--ease)}
/* a shine sweeps across the card every few seconds: one transform, nothing
   repainted, so it stays smooth on phones */
.shine{position:absolute;inset:0;z-index:2;overflow:hidden;border-radius:inherit;pointer-events:none}
.shine:before{content:'';position:absolute;top:-20%;bottom:-20%;left:0;width:45%;
  background:linear-gradient(100deg,transparent 0%,#ffffff00 20%,#ffffffb3 50%,#ffffff00 80%,transparent 100%);
  transform:translateX(-160%) skewX(-12deg);animation:shine 5.5s cubic-bezier(.45,.05,.3,1) 1.2s infinite;will-change:transform}
@keyframes shine{0%{transform:translateX(-160%) skewX(-12deg)}26%,100%{transform:translateX(330%) skewX(-12deg)}}
html.lite .shine{display:none}
.clip{position:absolute;z-index:3;left:28px;top:-40px;width:34px;fill:none;stroke:var(--pink);stroke-width:3px;stroke-linecap:round;overflow:visible}
.js .card-wrap .clip{translate:0 -60px;opacity:0;transition:translate .7s var(--pop) .45s,opacity .2s .45s}
.js .card-wrap.in .clip{translate:0 0;opacity:1}
.id-top{display:flex;justify-content:space-between;padding-bottom:10px;border-bottom:1.5px dashed #15151540;font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-left:48px}
.id-main{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center;margin:18px 0 12px}
.id-photo{width:104px;height:104px;object-fit:cover;border:5px solid #fff;rotate:-3deg;box-shadow:0 10px 20px -12px #0009;filter:contrast(1.05)}
.id-name{margin:0;font:66px/.8 var(--marker);color:var(--blue)}
.id-facts{margin:0;display:grid;gap:6px}
.id-facts div{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline;border-bottom:1px solid #15151514;padding-bottom:5px}
.id-facts dt{font:9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.id-facts dd{margin:0;font:12px var(--mono);overflow-wrap:anywhere}
.sig{display:block;width:150px;margin:14px 0 0 4px;stroke:var(--ink);stroke-width:2px}
.sig path{--d:.6s;animation-duration:1.2s}
@keyframes spin{to{rotate:360deg}}
.actions{display:grid;justify-items:center;margin-top:46px}
.save{position:relative;display:block;width:min(350px,88vw);padding:16px 0 10px;text-align:center;text-decoration:none;font:36px/1 var(--marker);color:#fff;background:var(--blue);
  border-radius:255px 18px 225px 18px/18px 225px 18px 255px;box-shadow:5px 6px 0 var(--ink);transition:translate .15s,box-shadow .15s}
.save:active{translate:4px 5px;box-shadow:1px 1px 0 var(--ink)}
.scribble-ring{left:-6%;top:-38%;width:112%;height:176%;z-index:-1}
.act-row{display:flex;gap:22px;margin-top:22px}
.act-row>*{background:none;border:0;padding:6px 2px;font:27px/1 var(--marker);text-decoration:underline wavy var(--blue) 1.5px;text-underline-offset:7px}
.act-note{margin:22px 0 0;font:22px/1.1 var(--marker);color:var(--pink);rotate:-3deg}

/* the work: polaroids over a wall of words */
.work{max-width:none;padding:110px 0 90px;overflow:hidden}
.wall{position:absolute;z-index:0;left:-20%;right:-20%;top:50%;translate:0 -50%;rotate:-8deg;pointer-events:none;opacity:.2}
.wall p{margin:0;white-space:nowrap;font:42px/1.08 var(--marker);color:var(--blue);will-change:transform}
.wall p span{display:inline-block}
html.lite .wall p{will-change:auto}
.work .big{display:table;margin:0 auto 6px;background:var(--paper);padding:.06em .22em 0;rotate:-2deg;box-shadow:0 14px 30px -24px #000}
.polas{position:relative;z-index:1;list-style:none;margin:0;display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:46px max(16px,calc(50% - 130px)) 40px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.polas::-webkit-scrollbar{display:none}
.polas li{flex:0 0 min(260px,72vw);scroll-snap-align:center}
.polas a{display:block;background:#fff;padding:10px 10px 14px;text-decoration:none;rotate:var(--r);box-shadow:0 2px 3px #0000001a,0 26px 40px -26px #0000009a;transition:rotate .4s var(--pop),translate .4s var(--pop)}
.polas a:hover,.polas a:focus-visible{rotate:0deg;translate:0 -8px}
.polas img{width:100%;height:auto}
.polas b{display:block;margin-top:10px;font:400 32px/1 var(--marker);color:var(--blue)}
.polas span{display:block;margin-top:4px;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.see-all{position:relative;z-index:1;display:table;margin:0 auto;background:var(--paper);padding:6px 14px 2px;font:30px var(--marker);color:var(--pink);text-decoration:none;rotate:2deg}
@media (min-width:900px){
  .polas{flex-wrap:wrap;justify-content:center;overflow:visible;max-width:1180px;margin:0 auto;padding:56px 24px 50px;gap:30px 26px}
  .polas li{flex:0 0 230px}
  .polas li:nth-child(even){margin-top:46px}
}

/* links, set as big type: a blue fill rises behind the row you point at */
.links .big{margin-bottom:34px}
.biglinks{list-style:none;margin:0 auto;padding:0;max-width:1000px}
.biglinks li{border-top:2px solid var(--ink)}
.biglinks li:nth-child(odd){rotate:-.6deg}.biglinks li:nth-child(even){rotate:.5deg}
.biglinks li:last-child{border-bottom:2px solid var(--ink)}
.biglinks a{position:relative;isolation:isolate;display:grid;grid-template-columns:44px 1fr auto 52px;align-items:center;gap:6px 14px;padding:14px 10px 8px;text-decoration:none}
.biglinks a:before{content:'';position:absolute;inset:0;z-index:-2;background:var(--blue);transform:scaleY(0);transform-origin:50% 100%;transition:transform .45s var(--ease)}
.biglinks .n{align-self:start;padding-top:1.1em;font:11px var(--mono);letter-spacing:.08em;color:var(--muted);transition:color .2s}
.biglinks .t{position:relative;justify-self:start;font:clamp(52px,12vw,124px)/.92 var(--marker);white-space:nowrap;transition:color .2s}
.biglinks .t i{display:inline-block;font-style:normal}
/* halftone highlighter */
.biglinks .t:after{content:'';position:absolute;z-index:-1;left:-2%;right:-4%;bottom:.14em;height:.3em;rotate:-1.5deg;
  background:radial-gradient(circle,var(--pink) 42%,transparent 47%) 0 0/6px 6px;transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease),opacity .2s}
.biglinks li.in .t:after{transform:scaleX(1);transition-delay:.25s}
.biglinks .h{font:12px var(--mono);letter-spacing:.04em;color:var(--muted);text-align:right;overflow-wrap:anywhere;transition:color .2s}
.biglinks .go{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--ink);transition:rotate .45s var(--pop),background .2s,border-color .2s,color .2s}
@media (hover:hover){
  .biglinks a:hover:before,.biglinks a:focus-visible:before{transform:scaleY(1)}
  .biglinks a:hover .t,.biglinks a:focus-visible .t{color:#fff}
  .biglinks a:hover .t:after,.biglinks a:focus-visible .t:after{opacity:0}
  .biglinks a:hover .t i,.biglinks a:focus-visible .t i{animation:wave .5s var(--pop) calc(var(--k) * 35ms)}
  .biglinks a:hover .n,.biglinks a:hover .h,.biglinks a:focus-visible .n,.biglinks a:focus-visible .h{color:#ffffffd0}
  .biglinks a:hover .go,.biglinks a:focus-visible .go{rotate:45deg;background:var(--pink);border-color:var(--pink);color:#fff}
}
.biglinks a:active:before{transform:scaleY(1);transition-duration:.15s}
.biglinks a:active .t{color:#fff}
.arr{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@keyframes wave{40%{transform:translateY(-14%) rotate(-6deg)}}
@media (max-width:640px){
  .biglinks a{grid-template-columns:26px 1fr 42px;gap:2px 10px;padding:12px 4px 10px}
  .biglinks .n{grid-row:1/3;padding-top:.9em}
  .biglinks .t{font-size:clamp(46px,14vw,64px)}
  .biglinks .h{grid-column:2;grid-row:2;margin-top:16px;text-align:left;font-size:11px}
  .biglinks .go{grid-column:3;grid-row:1/3;width:42px;height:42px}
  .biglinks .go .arr{width:18px;height:18px}
}
.copy{display:block;margin:20px auto 0;background:none;border:1.5px solid var(--ink);border-radius:999px;padding:10px 18px;font:11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.note{max-width:620px;margin:64px auto 0}
.note label{display:block;font:34px/1 var(--marker);color:var(--blue);rotate:-2deg;margin-bottom:10px}
.note-line{display:flex;gap:10px;align-items:flex-end;border-bottom:2.5px solid var(--ink)}
.note input{flex:1;min-width:0;border:0;background:none;padding:8px 2px 4px;font:28px/1.1 var(--marker);outline:none}
.note input::placeholder{color:#15151555}
.note button{background:none;border:0;padding:6px 2px;font:28px/1 var(--marker);color:var(--pink)}
.sent{margin:14px 0 0;font:24px/1.15 var(--marker);color:var(--pink);rotate:-1.5deg}

/* footer */
.foot{position:relative;overflow:hidden;padding:30px 0 0;border-top:2px solid var(--ink);margin-top:40px}
.foot-big{display:flex;width:max-content;margin:0;font:clamp(80px,22vw,190px)/1 var(--marker);color:var(--blue);animation:roll 22s linear infinite}
.foot-big span{white-space:nowrap}
@keyframes roll{to{transform:translateX(-50%)}}
.foot-small{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:0;padding:18px 16px calc(90px + env(safe-area-inset-bottom));font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- dialog + toast (assets/contact.js) ---------- */
dialog{border:0;border-radius:4px;background:var(--card);color:var(--ink);padding:22px;width:min(400px,calc(100% - 28px));max-height:88dvh;box-shadow:0 40px 90px -20px #000a}
dialog[open]{animation:tag .45s var(--pop) both}
dialog::backdrop{background:#15151566}
.dialog-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dialog-top h2{margin:0;font:400 40px/1 var(--marker);color:var(--blue)}
.dialog-close{background:none;border:1.5px solid var(--ink);width:36px;height:36px;border-radius:50%;font-size:20px;line-height:1}
.qr-description{font-size:13px;color:var(--muted);margin:4px 0 0}
#qr-code{width:230px;max-width:100%;margin:16px auto;background:#fff;padding:8px;rotate:-1.5deg;box-shadow:0 14px 28px -20px #000}
#qr-code svg{display:block;width:100%;height:auto}
.preview-notice{background:#ffe3f1;padding:10px 12px;font-size:12px;line-height:1.5}
#qr-dialog label{font:9px var(--mono);letter-spacing:.12em;color:var(--muted)}
#card-url{display:block;width:100%;margin:6px 0 14px;padding:12px;border:1.5px solid var(--ink);border-radius:2px;background:#fff;font:11px var(--mono)}
.qr-actions{display:flex;justify-content:center;gap:8px}
.small-button{background:#fff;border:1.5px solid var(--ink);border-radius:999px;padding:9px 16px;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.small-button:disabled{opacity:.5;cursor:default}
.toast{position:fixed;left:50%;bottom:calc(74px + env(safe-area-inset-bottom));z-index:30;transform:translate(-50%,10px);opacity:0;pointer-events:none;
  background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px;font-size:13px;transition:.25s;max-width:90vw;text-align:center}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* sections off screen hold still */
.js .sec:not(.on) *,.js .hero:not(.on) *,.js .foot:not(.on) *{animation-play-state:paused!important}

/* lite mode (old phones, data saver) and reduced motion: everything drawn, nothing looping */
html.lite .word span,html.lite .crown,html.lite .doodle,html.lite .foot-big,html.lite .hero-down svg{animation-name:none}
html.lite .word span{animation:slam .5s var(--pop) calc(var(--i) * 50ms) both}
html.lite .scribble path{animation-duration:.01s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .js [data-in]{opacity:1;translate:none}
}