/* =========================================================
   YARL — hand-made, on purpose.
   Palette is taken straight out of the 2015 MS Paint files:
   #FFF200 fill, #000000 outline, #FFFFFF paper.
   ========================================================= */

@font-face{
  font-family:'Anton';
  src:url('/fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Shantell';
  src:url('/fonts/shantellsans-latin-var.woff2') format('woff2-variations'),
      url('/fonts/shantellsans-latin-var.woff2') format('woff2');
  font-weight:300 800;font-style:normal;font-display:swap;
}

:root{
  --yolk:#FFF200;
  --ink:#000000;
  --paper:#FFFFFF;
  --blood:#FF0000;
  --drool:#A9DDEE;
  --board:#EEF2FF;
  --greentext:#789922;
  --namegreen:#117743;
  --quotered:#DD0000;

  --scream:'Anton','Haettenschweiler','Arial Narrow',sans-serif;
  --hand:'Shantell',ui-rounded,'Segoe UI',system-ui,sans-serif;
  --board-font:arial,helvetica,sans-serif;

  --stroke:3.5px;
  --wob:255px 15px 225px 15px/15px 225px 15px 255px;
  --wob2:15px 225px 15px 255px/255px 15px 225px 15px;
  --ease-out-back:cubic-bezier(.18,1.34,.42,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M5 3 L5 25 L11 19 L15 27 L19 25 L15 17 L23 17 Z' fill='%23000' stroke='%23fff' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 3,auto;
}
body{
  margin:0;overflow-anchor:none;
  background:var(--yolk);
  color:var(--ink);
  font-family:var(--hand);
  font-size:clamp(1.02rem,.86rem + .5vw,1.28rem);
  line-height:1.5;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--ink);color:var(--yolk)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.defs{position:absolute;width:0;height:0;pointer-events:none}

a,button,[data-copy-ca]{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cpath d='M8 5 C4 12 6 22 14 26 C22 30 29 24 28 16 C27 9 20 3 14 5 Z' fill='%23FFF200' stroke='%23000' stroke-width='2.6'/%3E%3Cpath d='M6 16 L14 15' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 16 16,pointer;
}

/* ---------- paper grain over everything ---------- */
.grain{
  position:fixed;inset:-60px;z-index:9000;pointer-events:none;
  opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
  animation:grainshift .55s steps(1) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}      25%{transform:translate(-14px,9px)}
  50%{transform:translate(11px,-12px)} 75%{transform:translate(-7px,-6px)}
}

/* ---------- the wordmark ---------- */
.wm{width:100%;height:auto;overflow:visible}
.boil{animation:boil .46s steps(1) infinite}
@keyframes boil{
  0%{filter:url(#s1)}34%{filter:url(#s2)}67%{filter:url(#s3)}
}
.wm--tiny{width:clamp(88px,10vw,132px);display:block}
.wm--hero{
  width:min(1320px,91vw);
}
.wm--foot{width:min(1120px,92vw);margin-inline:auto}

/* ---------- rough ink boxes ---------- */
.paper,.polaroid,.reason,.step,.napkin,.ca-box,.evidence,.fam-shot{
  position:relative;background:transparent;
}
.paper::before,.polaroid::before,.reason::before,.step::before,
.napkin::before,.ca-box::before,.evidence::before,.fam-shot::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);
  border:var(--stroke) solid var(--ink);
  border-radius:var(--wob);
  filter:url(#rough);
}
.paper::after,.reason::after{
  content:"";position:absolute;inset:6px 4px 3px 6px;z-index:-1;
  border:2px solid var(--ink);border-radius:var(--wob2);
  opacity:.32;filter:url(#rough);
}

/* tape */
.tape{
  position:absolute;width:clamp(70px,8vw,116px);height:clamp(26px,3vw,38px);
  background:rgba(255,255,255,.72);
  border-left:2px dashed rgba(0,0,0,.35);border-right:2px dashed rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(0,0,0,.25);
  filter:url(#rough);pointer-events:none;z-index:3;
}
.tape--tl{top:-16px;left:-20px;transform:rotate(-27deg)}
.tape--tr{top:-14px;right:-22px;transform:rotate(21deg)}

/* ---------- buttons ---------- */
.btn{
  position:relative;display:inline-block;text-decoration:none;
  padding:.62em 1.25em;font-family:var(--scream);
  font-size:clamp(1rem,.8rem + .7vw,1.5rem);letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);background:none;border:0;
  transform:rotate(var(--r,0deg));
  transition:transform .18s var(--ease-out-back);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);border:var(--stroke) solid var(--ink);
  border-radius:var(--wob);filter:url(#rough);
  box-shadow:5px 6px 0 var(--ink);
  transition:box-shadow .18s ease,transform .18s ease;
}
.btn--ink{color:var(--yolk)}
.btn--ink::before{background:var(--ink)}
.btn--big{padding:.7em 1.5em;font-size:clamp(1.15rem,.9rem + 1vw,2rem)}
.btn:hover{transform:rotate(var(--r,0deg)) translate(2px,3px)}
.btn:hover::before{box-shadow:2px 3px 0 var(--ink)}
.btn:active{transform:rotate(var(--r,0deg)) translate(5px,6px)}
.btn:active::before{box-shadow:0 0 0 var(--ink)}
.btn:focus-visible{outline:4px dashed var(--ink);outline-offset:6px}

/* ---------- nav ---------- */
.nav{
  position:relative;z-index:60;
  display:flex;align-items:center;gap:clamp(12px,2.4vw,34px);
  padding:clamp(14px,2vw,26px) clamp(14px,3.5vw,48px) 0;
}
.nav-mark{display:block;flex:0 0 auto;transform:rotate(-4deg);transform-origin:left center}
.nav-mark:hover{transform:rotate(-1deg) scale(1.04)}
.nav-links{display:flex;flex-wrap:wrap;gap:clamp(8px,1.6vw,24px);margin-left:auto}
.nav-links a{
  font-family:var(--hand);font-weight:700;text-decoration:none;
  font-size:clamp(.86rem,.78rem + .25vw,1.05rem);
  transform:rotate(var(--r,0deg));display:inline-block;
  padding:.15em .1em;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-size:0% 3px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .22s ease;
}
.nav-links a:hover{background-size:100% 3px}
.nav-cta{font-size:clamp(.8rem,.72rem + .3vw,1rem);padding:.45em .9em}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:clamp(640px,94svh,1100px);
  padding:clamp(20px,4vw,60px) clamp(16px,4vw,60px) clamp(80px,10vw,140px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.stamp{
  font-family:var(--board-font);font-size:clamp(.66rem,.6rem + .25vw,.86rem);
  letter-spacing:.12em;text-transform:uppercase;max-width:min(92vw,540px);text-align:center;
  padding:.5em .95em;margin:0 0 clamp(14px,2.5vw,30px);
  transform:rotate(var(--r,0deg));
  position:relative;opacity:.8;
}
.stamp::before{
  content:"";position:absolute;inset:0;z-index:-1;
  border:2.5px solid var(--ink);border-radius:3px 10px 4px 9px;
  filter:url(#rough);
}
.wm-wrap{position:relative;z-index:4;margin:0;line-height:0}
.hero-shot{
  position:absolute;z-index:6;margin:0;pointer-events:none;
  width:clamp(150px,20vw,320px);
  right:clamp(8px,3vw,86px);top:clamp(46px,8vh,120px);
  padding:clamp(8px,.9vw,14px) clamp(8px,.9vw,14px) clamp(24px,2.4vw,38px);
}
.hero-shot::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--paper);
  border:var(--stroke) solid var(--ink);border-radius:var(--wob);
  filter:url(#rough);
}
.hero-shot figcaption{
  position:absolute;left:0;right:0;bottom:clamp(6px,.7vw,11px);text-align:center;
  font-family:var(--board-font);font-size:clamp(.56rem,.5rem + .18vw,.7rem);
  letter-spacing:.16em;text-transform:uppercase;opacity:.55;
}
.hero-pal{
  position:absolute;z-index:1;pointer-events:none;opacity:.9;
  width:clamp(110px,13vw,210px);
  left:clamp(10px,3vw,90px);bottom:clamp(60px,13vh,170px);
  transform:rotate(-13deg) scaleX(-1);
}
.hero-say{
  position:relative;z-index:5;
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.4rem,.9rem + 3vw,3.6rem);
  letter-spacing:.01em;line-height:1;
  margin:clamp(6px,1.4vw,18px) 0 0;
  transform:rotate(var(--r,0deg));
}
.hero-say s{text-decoration:none;position:relative;opacity:.35}
.hero-say s::after{
  content:"";position:absolute;left:-4%;right:-4%;top:52%;height:5px;
  background:var(--ink);border-radius:3px;filter:url(#rough);
  transform:rotate(-2.4deg);
}
.hero-say em{font-style:normal;background:var(--ink);color:var(--yolk);padding:0 .18em;
  display:inline-block;transform:rotate(-1.6deg);filter:url(#rough)}
.hero-note{
  position:relative;z-index:5;max-width:34ch;
  margin:clamp(18px,3vw,34px) 0 0;
  transform:rotate(var(--r,0deg));
  font-size:clamp(.95rem,.85rem + .3vw,1.15rem);
}
.hero-note p{margin:0}
.hero-annot{
  position:absolute;z-index:7;margin:0;pointer-events:none;
  right:clamp(196px,25vw,404px);top:clamp(2px,1.4vh,22px);
  display:flex;align-items:flex-start;gap:8px;
  transform:rotate(4deg);
}
.hero-annot span{
  font-weight:700;font-size:clamp(.9rem,.8rem + .4vw,1.25rem);
  white-space:nowrap;
}
.scrawl-arrow{
  width:clamp(56px,6vw,92px);flex:0 0 auto;transform:scaleY(-1);
  fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;
}
.hero-cta{
  position:relative;z-index:6;display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);
  justify-content:center;margin-top:clamp(26px,4vw,46px);
}
.scrolldown{
  position:absolute;bottom:clamp(18px,3vh,40px);left:50%;
  width:clamp(30px,3vw,44px);translate:-50% 0;
  animation:bob 2.1s ease-in-out infinite;
}
.scrolldown svg{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(12px) rotate(3deg)}}

/* ---------- ticker ---------- */
.ticker-stack{position:relative;z-index:20;margin:clamp(10px,3vw,40px) 0 clamp(50px,8vw,110px)}
.ticker{
  background:var(--ink);color:var(--yolk);
  transform:rotate(var(--r,0deg)) scaleX(1.06);
  padding:clamp(8px,1.1vw,16px) 0;overflow:hidden;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
}
.ticker--b{background:var(--paper);color:var(--ink);margin-top:clamp(-6px,-.4vw,0px)}
.ticker-row{
  display:flex;gap:clamp(18px,2.4vw,40px);align-items:center;
  white-space:nowrap;will-change:transform;
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.1rem,.8rem + 1.6vw,2.6rem);letter-spacing:.015em;
}
.ticker--b .ticker-row{font-family:var(--hand);font-weight:800;text-transform:none}
.ticker-row i{font-style:normal;opacity:.55}

/* ---------- shared type ---------- */
.wrap{width:min(1180px,92vw);margin-inline:auto;position:relative}
.scream{
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(2.6rem,1rem + 8.6vw,8.4rem);
  line-height:.85;letter-spacing:-.005em;
  transform:rotate(var(--r,0deg));
}
.scream--alt{color:var(--paper);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.lede{
  max-width:44ch;margin-top:clamp(16px,2.2vw,28px);
  font-size:clamp(1.05rem,.9rem + .55vw,1.4rem);
  transform:rotate(var(--r,0deg));
}
.strike{text-decoration:none;position:relative}
.strike::after{
  content:"";position:absolute;left:-3%;right:-3%;top:48%;height:9px;
  background:var(--ink);filter:url(#rough);transform:rotate(-3deg);
  transform-origin:left center;
}
.reveal{opacity:0;transform:translateY(46px) rotate(var(--r,0deg)) scale(.97)}
.reveal.is-in{
  opacity:1;transform:translateY(0) rotate(var(--r,0deg)) scale(1);
  transition:opacity .5s ease,transform .78s var(--ease-out-back);
}

/* ---------- origin ---------- */
.origin{padding:clamp(40px,7vw,110px) 0 clamp(70px,11vw,170px)}
.origin .wrap{margin-left:min(9vw,140px)}
.origin .scream .line{display:block}
.origin .scream .line--2{margin-left:clamp(10px,5vw,110px);margin-top:.06em}
.attrib{
  font-family:var(--board-font);font-size:clamp(.7rem,.64rem + .25vw,.86rem);
  letter-spacing:.05em;margin-top:clamp(14px,2vw,26px);opacity:.72;
  transform:rotate(var(--r,0deg));
}
.origin-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,40px);align-items:start;
  margin-top:clamp(44px,7vw,100px);
}
.paper{padding:clamp(22px,2.4vw,38px);transform:rotate(var(--r,0deg))}
.paper h3{
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.3rem,1rem + 1.1vw,2.1rem);line-height:.95;
  margin-bottom:.5em;
}
.paper--a{grid-column:1/7;grid-row:1;margin-top:1.5vw;z-index:3}
.paper--b{grid-column:6/13;grid-row:2;margin-top:-5vw;z-index:3}
.polaroid{
  grid-column:7/12;grid-row:1;margin-top:-3.5vw;z-index:2;
  padding:clamp(12px,1.3vw,20px) clamp(12px,1.3vw,20px) clamp(34px,3.6vw,54px);
  transform:rotate(var(--r,0deg));
}
.polaroid img{width:100%}
.polaroid figcaption{
  position:absolute;left:0;right:0;bottom:clamp(9px,1.1vw,16px);
  text-align:center;font-family:var(--board-font);
  font-size:clamp(.62rem,.58rem + .2vw,.78rem);opacity:.6;
}
.margin-note{
  grid-column:2/6;grid-row:2;margin-top:-1vw;margin-left:5%;align-self:center;
  transform:rotate(var(--r,0deg));position:relative;
  font-weight:700;font-size:clamp(1rem,.85rem + .6vw,1.45rem);line-height:1.15;
}
.margin-note .underline{
  position:absolute;left:0;bottom:-16px;width:min(240px,80%);
  fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;
}

/* ---------- THE THREAD (pinned) ---------- */
.thread{position:relative;background:var(--yolk);transition:background .35s ease}
.thread.is-dark{background:#000}
.thread-stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.thread-chrome{
  position:absolute;top:clamp(14px,2.4vw,34px);left:0;right:0;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:0 clamp(16px,4vw,58px);
  font-family:var(--board-font);font-size:clamp(.66rem,.6rem + .25vw,.84rem);
  letter-spacing:.14em;text-transform:uppercase;opacity:.7;z-index:5;
}
.thread.is-dark .thread-chrome{color:var(--paper)}
.thread-count b{font-size:1.5em;font-family:var(--scream)}
.thread-slides{position:relative;width:min(1240px,94vw);height:100%;overflow-anchor:none}
.tslide{
  position:absolute;inset:0;margin:0;overflow-anchor:none;
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(20px,3.6vw,64px);align-items:center;
  padding:clamp(60px,9vh,110px) 0 clamp(50px,8vh,90px);
  opacity:0;visibility:hidden;pointer-events:none;
}
.tslide.is-on{opacity:1;visibility:visible}
.tslide::before{
  content:attr(data-n);position:absolute;z-index:-2;
  left:-1.5vw;bottom:-2vh;pointer-events:none;
  font-family:var(--scream);font-size:clamp(140px,26vw,420px);line-height:.7;
  color:transparent;-webkit-text-stroke:3px rgba(0,0,0,.17);
  transform:translateY(calc(var(--sub,0) * 26px)) rotate(-3deg);
}
.tslide:nth-child(even)::before{left:auto;right:-1.5vw;transform:translateY(calc(var(--sub,0) * 26px)) rotate(3deg)}
.tslide--dark::before{-webkit-text-stroke-color:rgba(255,255,255,.22)}
.tslide--end::before{content:none}
.tslide:nth-child(even) .tframe{order:-1}
.tslide:nth-child(even) figcaption{text-align:right;justify-self:end}

/* the print */
.tframe{
  position:relative;justify-self:center;
  padding:clamp(10px,1.2vw,20px);
  transform:rotate(-2.6deg) scale(.86) translateY(38px);
  opacity:0;transition:transform .9s var(--ease-out-back),opacity .4s ease;
}
.tframe::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--paper);border:var(--stroke) solid var(--ink);
  border-radius:var(--wob);filter:url(#rough);
}
.tslide.is-on .tframe{transform:rotate(-2.6deg) scale(1) translateY(0);opacity:1}
.tslide:nth-child(2n) .tframe{transform:rotate(3.1deg) scale(.86) translateY(38px)}
.tslide:nth-child(2n).is-on .tframe{transform:rotate(3.1deg) scale(1) translateY(0)}
.tframe--black::before{background:#000;border-color:#000}
.tshot{
  max-height:min(48svh,440px);min-height:min(32svh,300px);
  width:auto;max-width:100%;object-fit:contain;margin-inline:auto;
  transform:translateY(calc(var(--sub,0) * -14px));
}
.pixel{image-rendering:pixelated}

/* the words */
.tslide figcaption{
  transform:translateY(46px) rotate(-1.4deg);opacity:0;
  transition:transform .75s var(--ease-out-back) .08s,opacity .45s ease .08s;
}
.tslide.is-on figcaption{transform:translateY(0) rotate(-1.4deg);opacity:1}
.tsay{
  display:block;font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.9rem,.7rem + 3.9vw,4.6rem);line-height:.87;
  letter-spacing:-.005em;color:var(--ink);
}
.tmeta{
  display:block;margin-top:.9em;font-family:var(--board-font);
  font-size:clamp(.62rem,.58rem + .22vw,.78rem);letter-spacing:.14em;
  text-transform:uppercase;opacity:.6;
}
.tslide--dark .tsay{color:var(--blood)}
.tslide--dark .tmeta{color:var(--paper);opacity:.7}
.tslide--end{grid-template-columns:1fr;place-items:center;text-align:center}
.tslide--end figcaption{text-align:center}
.tsay--huge{
  font-family:var(--hand);font-weight:800;text-transform:none;
  font-size:clamp(2.2rem,1rem + 6.4vw,6.4rem);line-height:.95;
}
.thread.is-dark .tsay--huge{color:var(--paper)}
.thread.is-dark .tmeta{color:var(--paper);opacity:.6}
.thread-bar{
  position:absolute;left:clamp(16px,4vw,58px);right:clamp(16px,4vw,58px);
  bottom:clamp(14px,2.4vw,30px);height:5px;background:rgba(0,0,0,.16);z-index:5;
}
.thread.is-dark .thread-bar{background:rgba(255,255,255,.22)}
.thread-bar-fill{display:block;height:100%;width:0;background:var(--ink);filter:url(#rough)}
.thread.is-dark .thread-bar-fill{background:var(--paper)}

/* ---------- why ---------- */
.why{padding:clamp(60px,10vw,150px) 0 clamp(60px,9vw,130px)}
.why .wrap{margin-right:min(6vw,90px)}
.why .scream{text-align:right}
.reasons{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.4vw,38px);margin-top:clamp(40px,6vw,84px);
}
.reason{padding:clamp(22px,2.4vw,36px);transform:rotate(var(--r,0deg))}
.reason:nth-child(1){grid-column:1/6}
.reason:nth-child(2){grid-column:7/13;margin-top:3.5vw}
.reason:nth-child(3){grid-column:2/7;margin-top:-1vw}
.reason:nth-child(4){grid-column:8/13;margin-top:-2vw}
.num{
  font-family:var(--board-font);font-size:.78rem;letter-spacing:.2em;
  opacity:.5;display:block;margin-bottom:.4em;
}
.reason h3{
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.6rem);line-height:.92;margin-bottom:.35em;
}
.turn{position:relative;margin-top:clamp(60px,9vw,130px);text-align:center}
.turn-small{font-weight:700;font-size:clamp(1rem,.9rem + .4vw,1.3rem);transform:rotate(var(--r,0deg))}
.turn-big{
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(2.4rem,1rem + 7.6vw,7.4rem);line-height:.86;
  color:var(--yolk);text-shadow:
    5px 0 0 var(--ink),-5px 0 0 var(--ink),0 5px 0 var(--ink),0 -5px 0 var(--ink),
    5px 5px 0 var(--ink),-5px 5px 0 var(--ink),5px -5px 0 var(--ink),-5px -5px 0 var(--ink),
    12px 14px 0 rgba(0,0,0,.25);
}
.turn-body{
  max-width:52ch;margin:clamp(24px,3vw,40px) auto 0;
  font-size:clamp(1.05rem,.9rem + .55vw,1.35rem);
  transform:rotate(var(--r,0deg));
}
.turn-head{
  position:absolute;right:-2vw;bottom:-6vw;width:clamp(110px,15vw,250px);
  transform:rotate(11deg);pointer-events:none;z-index:-1;opacity:.85;
}

/* ---------- family ---------- */
.family{padding:clamp(50px,8vw,120px) 0 clamp(60px,9vw,130px)}
.family .wrap{margin-left:min(7vw,110px)}
.fam{
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(18px,2.6vw,44px);align-items:end;margin-top:clamp(36px,5vw,70px);
}
.fam-shot{padding:clamp(14px,1.5vw,22px) clamp(14px,1.5vw,22px) clamp(30px,3vw,44px);
  transform:rotate(var(--r,0deg))}
.fam-shot:first-child{grid-column:1/5}
.fam-shot--wide{grid-column:5/12;margin-bottom:2vw}
.fam-shot img{width:100%}
.fam-shot figcaption{
  position:absolute;left:clamp(14px,1.5vw,22px);right:clamp(14px,1.5vw,22px);
  bottom:clamp(8px,1vw,14px);font-family:var(--board-font);
  font-size:clamp(.6rem,.56rem + .2vw,.76rem);line-height:1.3;opacity:.66;
}
.fam-shot figcaption span{opacity:.6}
.fam-names{
  list-style:none;padding:0;margin:clamp(34px,5vw,70px) 0 0;
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,70px);justify-content:center;
}
.fam-names li{transform:rotate(var(--r,0deg));text-align:center}
.fam-names b{
  display:block;font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(2rem,1rem + 4.4vw,4.6rem);line-height:.9;
}
.fam-names span{font-size:clamp(.9rem,.82rem + .3vw,1.1rem);opacity:.72}

/* ---------- numbers / napkin ---------- */
.numbers{padding:clamp(30px,6vw,90px) 0 clamp(60px,9vw,130px)}
.napkin{
  width:min(880px,92vw);margin-inline:auto;
  padding:clamp(28px,3.6vw,60px);transform:rotate(var(--r,0deg));
}
.napkin::before{filter:url(#torn)}
.napkin-title{
  font-family:var(--scream);text-transform:uppercase;text-align:center;
  font-size:clamp(2rem,1rem + 4.6vw,4.4rem);line-height:.86;
}
.napkin-title span{
  display:block;font-family:var(--hand);text-transform:none;font-weight:400;
  font-size:.3em;opacity:.65;margin-top:.5em;
}
.napkin-list{list-style:none;padding:0;margin:clamp(26px,3.4vw,48px) 0 0;
  display:flex;flex-direction:column;gap:clamp(16px,2vw,30px)}
.napkin-list li{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(12px,1.6vw,24px);flex-wrap:wrap;
  transform:rotate(var(--r,0deg));
  border-bottom:2px dashed rgba(0,0,0,.25);padding-bottom:clamp(10px,1.4vw,18px);
}
.napkin-list b{font-family:var(--scream);font-size:clamp(1.5rem,1rem + 2.4vw,3rem);line-height:.9}
.napkin-list span{font-size:clamp(.92rem,.85rem + .3vw,1.12rem);opacity:.75;text-align:right}
.napkin-foot{margin-top:clamp(22px,2.6vw,36px);text-align:center;font-weight:700;
  font-size:clamp(1rem,.9rem + .4vw,1.25rem)}
.napkin-scribble{position:absolute;right:-3%;bottom:-7%;width:min(300px,42%);
  fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;opacity:.9;
  transform:rotate(-6deg)}

/* ---------- buy ---------- */
.buy{padding:clamp(40px,7vw,110px) 0 clamp(60px,9vw,140px)}
.buy .wrap{margin-left:min(5vw,80px)}
.ca-box{
  margin:clamp(26px,4vw,54px) 0 clamp(40px,6vw,80px);
  padding:clamp(16px,2vw,28px);transform:rotate(var(--r,0deg));
  max-width:min(760px,92vw);
}
.ca-label{font-family:var(--board-font);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:.55;margin-bottom:.5em}
.ca-value{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;background:none;border:0;padding:0;text-align:left;flex-wrap:wrap;
  font-family:inherit;color:inherit;
}
.ca-value code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(.78rem,.6rem + .8vw,1.15rem);
  word-break:break-all;line-height:1.35;
}
.ca-hint{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;opacity:.5;white-space:nowrap}
.ca-value:hover .ca-hint{opacity:1}

/* pre-launch: honest empty state instead of a dead placeholder */
.ca-box.is-empty code{font-style:italic;opacity:.45;letter-spacing:.04em}
.ca-box.is-empty .ca-hint{display:none}
.steps{list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px)}
.step{padding:clamp(22px,2.4vw,36px);transform:rotate(var(--r,0deg))}
.step:nth-child(1){grid-column:1/7}
.step:nth-child(2){grid-column:7/13;margin-top:3vw}
.step:nth-child(3){grid-column:2/8;margin-top:-1.5vw}
.step:nth-child(4){grid-column:8/13;margin-top:-1vw}
.step-n{
  position:absolute;top:-26px;left:-18px;width:58px;height:58px;
  display:grid;place-items:center;background:var(--yolk);
  border:var(--stroke) solid var(--ink);border-radius:52% 48% 46% 54%/48% 52% 48% 52%;
  font-family:var(--scream);font-size:1.6rem;filter:url(#rough);
}
.step h3{font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.3rem,1rem + 1.2vw,2.2rem);margin-bottom:.35em;line-height:.95}
.buy-links{display:flex;flex-wrap:wrap;gap:clamp(12px,2vw,26px);
  margin-top:clamp(36px,5vw,70px);justify-content:center}

/* ---------- archive ---------- */
.archive{padding:clamp(40px,7vw,110px) 0 clamp(70px,10vw,150px)}
.archive .wrap{margin-right:min(8vw,120px)}
.evidence{
  margin:clamp(34px,5vw,70px) auto 0;width:min(760px,92vw);
  padding:clamp(14px,1.6vw,24px) clamp(14px,1.6vw,24px) clamp(46px,4vw,68px);
  transform:rotate(var(--r,0deg));
}
.evidence a{display:block}
.evidence img{width:100%;border:2px solid rgba(0,0,0,.2)}
.evidence a:hover img{outline:4px solid var(--ink);outline-offset:3px}
.evidence figcaption{
  position:absolute;left:clamp(14px,1.6vw,24px);right:clamp(14px,1.6vw,24px);
  bottom:clamp(12px,1.4vw,20px);font-family:var(--board-font);
  font-size:clamp(.62rem,.58rem + .2vw,.78rem);line-height:1.4;opacity:.65;
}

/* ---------- footer ---------- */
.foot{
  background:var(--ink);color:var(--yolk);
  padding:clamp(50px,8vw,110px) clamp(16px,4vw,60px) clamp(34px,4vw,60px);
  text-align:center;position:relative;overflow:hidden;
}
.foot-say{
  font-family:var(--scream);text-transform:uppercase;
  font-size:clamp(1.3rem,.9rem + 2.4vw,3rem);
  margin:clamp(10px,1.6vw,20px) 0 clamp(28px,4vw,50px);
  transform:rotate(var(--r,0deg));
}
.foot-legal{max-width:62ch;margin-inline:auto;font-size:clamp(.78rem,.72rem + .25vw,.95rem);
  line-height:1.55;opacity:.62}
.foot-tiny{margin-top:clamp(20px,2.4vw,34px);font-size:.8rem;opacity:.45}
.foot a{text-decoration:underline;text-underline-offset:3px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:9500;
  background:var(--ink);color:var(--yolk);
  font-family:var(--scream);text-transform:uppercase;letter-spacing:.04em;
  font-size:1.05rem;padding:.6em 1.2em;border-radius:var(--wob);
  opacity:0;pointer-events:none;transform:translateY(18px) rotate(-2deg);
  transition:opacity .2s ease,transform .34s var(--ease-out-back);
}
.toast.is-up{opacity:1;transform:translateY(0) rotate(-2deg)}

/* ---------- responsive: keep the mess, lose the overlap ---------- */
@media (max-width:900px){
  .origin .wrap,.family .wrap,.buy .wrap{margin-left:auto}
  .why .wrap,.archive .wrap{margin-right:auto}
  .origin-grid,.reasons,.steps,.fam{display:flex;flex-direction:column;gap:clamp(34px,7vw,54px)}
  .paper--a,.paper--b,.polaroid,.margin-note,.reason,.step,.fam-shot{
    margin-top:0!important;margin-bottom:0;width:100%;
  }
  .polaroid{width:min(78%,360px);align-self:flex-end;margin-right:4%}
  .margin-note{align-self:flex-start;margin-left:2%}
  .fam-shot:first-child{width:min(70%,320px)}
  .why .scream{text-align:left}
  .napkin-list li{flex-direction:column;align-items:flex-start;gap:.25em}
  .napkin-list span{text-align:left}
  .nav{flex-wrap:wrap;row-gap:10px}
  .nav-links{order:3;width:100%;margin-left:0;justify-content:flex-start}
  .nav-cta{margin-left:auto}
  .hero-shot{width:clamp(104px,25vw,180px);right:-1vw;top:4vh}
  .hero-annot{display:none}
  .hero-pal{width:clamp(90px,20vw,150px);left:-8vw;bottom:16vh}
  .tslide{grid-template-columns:1fr;grid-auto-rows:min-content;align-content:center;
    gap:clamp(16px,3.4vh,34px);padding:clamp(56px,8vh,90px) 0 clamp(56px,8vh,90px)}
  .tslide::before{font-size:clamp(110px,32vw,210px);bottom:1vh;left:-2vw}
  .tslide:nth-child(even)::before{right:-2vw}
  .tslide:nth-child(even) figcaption{text-align:left;justify-self:start}
  .tslide:nth-child(even) .tframe{order:0}
  .tshot{max-height:30svh;min-height:22svh}
  .turn-head{right:-4vw;bottom:-14vw}
}
@media (max-width:560px){
  .wm--hero{width:92vw}
  .stamp{font-size:.62rem;letter-spacing:.07em;padding:.45em .7em}
  .ticker{transform:rotate(var(--r,0deg)) scaleX(1.14)}
  .step-n{width:46px;height:46px;font-size:1.25rem;top:-20px;left:-12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .grain{animation:none}
  .boil{animation:none;filter:url(#s1)}
  .scrolldown{animation:none}
  .reveal{opacity:1;transform:rotate(var(--r,0deg))}
  .tslide img,.tslide figcaption{transition-duration:.001s}
  *{scroll-behavior:auto!important}
}

/* =========================================================
   motion hooks (JS writes --py, --mx, --my)
   ========================================================= */
.ticker-row{gap:0}
.mq-part{
  display:inline-flex;align-items:center;flex:0 0 auto;
  gap:clamp(18px,2.4vw,40px);padding-right:clamp(18px,2.4vw,40px);
}

.float{animation:floaty 7.5s ease-in-out infinite}
.hero-pal.float{animation-duration:9.5s;animation-delay:-2.5s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -16px}}

.hero-shot{
  transform:rotate(7.5deg)
            translate(var(--mx,0px),var(--my,0px))
            translateY(var(--py,0px));
}
.hero-pal{
  transform:rotate(-13deg) scaleX(-1)
            translate(calc(var(--mx,0px) * -1.6),calc(var(--my,0px) * -1.2))
            translateY(var(--py,0px));
}
.turn-head{transform:rotate(11deg) translateY(var(--py,0px))}

/* hero wordmark stamps in on load */
.wm-wrap{filter:drop-shadow(9px 11px 0 rgba(0,0,0,.14))}
.wm--hero{opacity:0;transform:scale(1.16) rotate(-3.4deg)}
.is-ready .wm--hero{
  opacity:1;transform:scale(1) rotate(-1.1deg);
  transition:opacity .35s ease,transform 1s var(--ease-out-back);
}
@media (prefers-reduced-motion:reduce){
  .float{animation:none}
  .wm--hero{opacity:1;transform:rotate(-1.1deg)}
}