/* ============================================================================
   makeandupdate.org — maximalist Y2K scrapbook (rebuilt 2026-09-18)

   A studio scrapbook: cream paper, torn seams, washi tape, polaroids of real
   client sites, pushpinned sticky notes, die-cut stickers, a legal-pad form.
   Maximal on the page, disciplined underneath:
     - every text/background pair clears WCAG AA (ink on persimmon, not white)
     - tilt uses the `rotate` property and entrance motion uses `translate`,
       so the two never overwrite each other's `transform`
     - ambient motion only runs under prefers-reduced-motion: no-preference
     - decoration is aria-hidden; nothing meaningful is decoration-only

   21st.dev sources, ported to plain CSS (no React, no GSAP):
     - hand-drawn underline paths: "Draw Random Underline" by Osmo (osmo.supply)
     - heart + star doodle paths:  "Line Draw SVG" by @pulkitxm
     - shuffle-stack mechanics:    "Draggable Photo Stack" by @laziekiki

   Generated from scratchpad build tooling; edit here, the shapes are baked.
   ============================================================================ */

@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/inter-latin-var.woff2") format("woff2")}
@font-face{font-family:"Unbounded";font-style:normal;font-weight:500 900;font-display:swap;src:url("fonts/unbounded-normal-500-900.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;src:url("fonts/caveat-normal-500-700.woff2") format("woff2")}
@font-face{font-family:"Silkscreen";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/silkscreen-normal-400.woff2") format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/instrument-serif-italic-400.woff2") format("woff2")}

:root{
  --paper:#f5f0e6; --paper-2:#ece3d0; --white:#fffdf7; --fibre:#fffcf2;
  --cork:#c8a376; --grid:rgba(88,132,205,.17); --line:#bcd3f2; --margin:#ef9a9a;
  --ink:#141210; --ink-2:#433f38; --ink-3:#655f56; --rule:#d8cebb; --rule-2:#bfb39c;
  --signal:#e84e10; --signal-ink:#a83608; --signal-soft:#ffd9c7;
  --navy:#14245f; --navy-2:#1d2f70; --gold:#ffc915; --thon-text:#e8ecf6;
  --pink:#ff9fd2; --sky:#9fd6ff; --lime:#d7ff45; --lilac:#cdbbff; --butter:#fff08a;

  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-hand:"Caveat","Comic Sans MS",cursive;
  --f-pixel:"Silkscreen",ui-monospace,monospace;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 2px 2px rgba(20,18,16,.08), 0 20px 34px -16px rgba(20,18,16,.42);

  --tear-a:polygon(0% 100%, 0% 33.3%, 1.56% 43.7%, 3.12% 33.7%, 4.69% 23.6%, 6.25% 10.6%, 7.81% 11.9%, 9.38% 12.8%, 10.94% 19.8%, 12.50% 23.8%, 14.06% 9.7%, 15.62% 12.9%, 17.19% 11.0%, 18.75% 15.5%, 20.31% 14.1%, 21.88% 20.7%, 23.44% 21.2%, 25.00% 24.9%, 26.56% 8.0%, 28.12% 8.0%, 29.69% 17.6%, 31.25% 8.0%, 32.81% 16.9%, 34.38% 2.0%, 35.94% 19.1%, 37.50% 16.0%, 39.06% 35.3%, 40.62% 33.6%, 42.19% 28.7%, 43.75% 28.5%, 45.31% 40.1%, 46.88% 56.0%, 48.44% 52.7%, 50.00% 30.9%, 51.56% 30.3%, 53.12% 40.8%, 54.69% 27.7%, 56.25% 9.6%, 57.81% 8.0%, 59.38% 19.7%, 60.94% 13.7%, 62.50% 20.9%, 64.06% 24.6%, 65.62% 30.2%, 67.19% 17.7%, 68.75% 9.3%, 70.31% 16.1%, 71.88% 8.0%, 73.44% 8.0%, 75.00% 8.0%, 76.56% 7.4%, 78.12% 14.2%, 79.69% 8.0%, 81.25% 2.0%, 82.81% 23.4%, 84.38% 34.7%, 85.94% 39.4%, 87.50% 26.8%, 89.06% 10.2%, 90.62% 26.2%, 92.19% 33.8%, 93.75% 43.2%, 95.31% 29.9%, 96.88% 41.8%, 98.44% 54.8%, 100% 29.2%, 100% 100%);
  --tear-b:polygon(0% 100%, 0% 38.7%, 1.56% 33.8%, 3.12% 29.1%, 4.69% 17.8%, 6.25% 28.9%, 7.81% 15.6%, 9.38% 26.4%, 10.94% 17.5%, 12.50% 18.9%, 14.06% 13.6%, 15.62% 33.9%, 17.19% 47.1%, 18.75% 38.7%, 20.31% 46.1%, 21.88% 38.5%, 23.44% 33.5%, 25.00% 39.1%, 26.56% 33.4%, 28.12% 38.9%, 29.69% 35.7%, 31.25% 33.6%, 32.81% 48.3%, 34.38% 56.7%, 35.94% 64.0%, 37.50% 64.0%, 39.06% 52.8%, 40.62% 44.2%, 42.19% 36.4%, 43.75% 24.1%, 45.31% 28.8%, 46.88% 19.2%, 48.44% 33.4%, 50.00% 37.3%, 51.56% 31.4%, 53.12% 44.0%, 54.69% 40.6%, 56.25% 22.9%, 57.81% 27.9%, 59.38% 19.8%, 60.94% 22.0%, 62.50% 12.4%, 64.06% 10.6%, 65.62% 20.7%, 67.19% 2.0%, 68.75% 9.0%, 70.31% 14.1%, 71.88% 8.0%, 73.44% 14.5%, 75.00% 8.0%, 76.56% 8.0%, 78.12% 8.0%, 79.69% 4.7%, 81.25% 8.0%, 82.81% 15.5%, 84.38% 20.5%, 85.94% 28.8%, 87.50% 14.1%, 89.06% 22.7%, 90.62% 15.9%, 92.19% 25.7%, 93.75% 13.6%, 95.31% 26.5%, 96.88% 14.8%, 98.44% 15.1%, 100% 61.8%, 100% 100%);
  --tear-c:polygon(0% 100%, 0% 27.7%, 1.56% 25.5%, 3.12% 17.7%, 4.69% 27.1%, 6.25% 20.0%, 7.81% 18.3%, 9.38% 20.5%, 10.94% 18.6%, 12.50% 25.6%, 14.06% 27.4%, 15.62% 36.7%, 17.19% 16.6%, 18.75% 24.9%, 20.31% 29.7%, 21.88% 25.6%, 23.44% 24.1%, 25.00% 36.2%, 26.56% 32.9%, 28.12% 25.6%, 29.69% 39.8%, 31.25% 43.2%, 32.81% 39.4%, 34.38% 37.6%, 35.94% 24.2%, 37.50% 33.0%, 39.06% 44.4%, 40.62% 49.7%, 42.19% 60.3%, 43.75% 55.3%, 45.31% 45.0%, 46.88% 32.1%, 48.44% 25.2%, 50.00% 17.0%, 51.56% 12.8%, 53.12% 8.2%, 54.69% 13.5%, 56.25% 8.9%, 57.81% 15.1%, 59.38% 28.6%, 60.94% 40.7%, 62.50% 36.8%, 64.06% 22.6%, 65.62% 26.2%, 67.19% 27.8%, 68.75% 29.8%, 70.31% 44.3%, 71.88% 58.6%, 73.44% 60.4%, 75.00% 67.1%, 76.56% 64.0%, 78.12% 59.8%, 79.69% 64.0%, 81.25% 64.0%, 82.81% 67.4%, 84.38% 64.0%, 85.94% 64.0%, 87.50% 44.6%, 89.06% 45.6%, 90.62% 61.9%, 92.19% 58.9%, 93.75% 56.1%, 95.31% 63.5%, 96.88% 63.9%, 98.44% 64.0%, 100% 53.7%, 100% 100%);
  --tear-d:polygon(0% 100%, 0% 35.8%, 1.56% 39.0%, 3.12% 32.3%, 4.69% 22.4%, 6.25% 19.5%, 7.81% 18.7%, 9.38% 29.0%, 10.94% 28.4%, 12.50% 33.2%, 14.06% 42.3%, 15.62% 33.3%, 17.19% 24.2%, 18.75% 35.6%, 20.31% 20.0%, 21.88% 25.0%, 23.44% 25.3%, 25.00% 12.8%, 26.56% 8.0%, 28.12% 11.7%, 29.69% 14.1%, 31.25% 11.4%, 32.81% 8.0%, 34.38% 12.3%, 35.94% 22.5%, 37.50% 13.8%, 39.06% 26.8%, 40.62% 29.7%, 42.19% 29.1%, 43.75% 29.8%, 45.31% 20.5%, 46.88% 23.8%, 48.44% 19.9%, 50.00% 33.6%, 51.56% 48.1%, 53.12% 51.6%, 54.69% 48.3%, 56.25% 60.3%, 57.81% 64.0%, 59.38% 64.0%, 60.94% 63.0%, 62.50% 64.0%, 64.06% 64.0%, 65.62% 70.9%, 67.19% 62.2%, 68.75% 64.0%, 70.31% 64.0%, 71.88% 68.2%, 73.44% 63.4%, 75.00% 58.9%, 76.56% 60.2%, 78.12% 57.0%, 79.69% 59.1%, 81.25% 64.0%, 82.81% 64.0%, 84.38% 64.0%, 85.94% 64.0%, 87.50% 53.4%, 89.06% 51.6%, 90.62% 64.0%, 92.19% 71.2%, 93.75% 53.1%, 95.31% 37.8%, 96.88% 26.6%, 98.44% 18.0%, 100% 56.6%, 100% 100%);
  --burst:polygon(50.00% 0.00%, 56.95% 10.61%, 67.10% 3.02%, 70.00% 15.36%, 82.14% 11.70%, 80.64% 24.29%, 93.30% 25.00%, 87.59% 36.32%, 99.24% 41.32%, 90.00% 50.00%, 99.24% 58.68%, 87.59% 63.68%, 93.30% 75.00%, 80.64% 75.71%, 82.14% 88.30%, 70.00% 84.64%, 67.10% 96.98%, 56.95% 89.39%, 50.00% 100.00%, 43.05% 89.39%, 32.90% 96.98%, 30.00% 84.64%, 17.86% 88.30%, 19.36% 75.71%, 6.70% 75.00%, 12.41% 63.68%, 0.76% 58.68%, 10.00% 50.00%, 0.76% 41.32%, 12.41% 36.32%, 6.70% 25.00%, 19.36% 24.29%, 17.86% 11.70%, 30.00% 15.36%, 32.90% 3.02%, 43.05% 10.61%);
  --tape-edge:polygon(2% 0,98% 0,100% 18%,97% 34%,100% 52%,96% 70%,100% 86%,98% 100%,2% 100%,0 84%,3% 66%,0 48%,4% 30%,0 14%);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--paper);overflow-x:clip}
body{margin:0;font-family:var(--f-body);font-size:1.0625rem;line-height:1.65;color:var(--ink-2);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p,ul,ol,figure,blockquote{margin:0}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--f-display);font-weight:800;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:3px}
::selection{background:var(--lime);color:var(--ink)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.wrap{padding:0 2.5rem}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--lime);color:var(--ink);font-weight:700;padding:.6rem 1rem;border:2px solid var(--ink);border-radius:8px;text-decoration:none}
.skip:focus{top:1rem}

/* ---------- type accents ---------- */
.hand{font-family:var(--f-hand);font-weight:700;letter-spacing:0;line-height:1.1}
.serif{font-family:var(--f-serif);font-style:italic;font-weight:400;letter-spacing:0;font-size:1.1em}
.dot{color:var(--signal)}

/* highlighter sweep — mark.js adds .is-marked when the phrase scrolls in */
.mark{background-image:linear-gradient(var(--hl,var(--lime)),var(--hl,var(--lime)));background-repeat:no-repeat;background-position:0 88%;background-size:0% 46%;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .14em;margin:0 -.06em;color:var(--ink);transition:background-size .95s var(--ease)}
.mark.is-marked{background-size:100% 46%}
/* on navy: a solid gold marker with navy text, but the text only turns navy once
   the highlight is actually painted, so a failed/absent script leaves white text */
.mark--gold{--hl:var(--gold);color:#fff;background-position:0 72%;transition:background-size .95s var(--ease),color .35s ease .45s}
.mark--gold.is-marked{background-size:100% 80%;color:var(--navy)}

/* hand-drawn underlines (paths: Osmo's Draw Random Underline) */
.scrawl{position:relative;white-space:nowrap;display:inline-block}
.scrawl>svg{position:absolute;left:-3%;width:106%;height:.42em;bottom:-.24em;overflow:visible;pointer-events:none}
.scrawl path{fill:none;stroke:var(--scrawl,var(--signal));stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.15s var(--ease) .3s}
.is-revealed .scrawl path,.scrawl.is-drawn path{stroke-dashoffset:0}
.ring{position:relative;white-space:nowrap;display:inline-block}
.ring>svg{position:absolute;left:-13%;top:-24%;width:126%;height:150%;overflow:visible;pointer-events:none}
.ring path{fill:none;stroke:var(--signal);stroke-width:3.4;stroke-linecap:round;vector-effect:non-scaling-stroke}

/* sparkles and doodles */
.spark{position:absolute;width:var(--s,26px);height:var(--s,26px);fill:var(--c,var(--gold));pointer-events:none;z-index:4}
.doodle{position:absolute;pointer-events:none;z-index:4;overflow:visible}
.doodle path{fill:var(--c,var(--pink));stroke:var(--ink);stroke-width:3.2;stroke-linejoin:round}

/* ---------- washi tape ---------- */
.tape{position:absolute;z-index:6;width:var(--tw,118px);height:30px;clip-path:var(--tape-edge);rotate:var(--tr,-4deg);opacity:.92;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,143,200,.92) 0 7px,rgba(255,218,238,.92) 7px 14px)}
.tape--sky{background:radial-gradient(circle,rgba(255,255,255,.95) 2px,transparent 2.6px) 0 0/11px 11px,rgba(143,206,255,.9)}
.tape--lime{background:linear-gradient(rgba(255,255,255,.6) 1px,transparent 1px) 0 0/9px 9px,linear-gradient(90deg,rgba(255,255,255,.6) 1px,transparent 1px) 0 0/9px 9px,rgba(215,255,69,.9)}
.tape--gold{background:repeating-linear-gradient(90deg,rgba(255,201,21,.94) 0 11px,rgba(255,228,128,.94) 11px 22px)}
.tape--kraft{background:repeating-linear-gradient(0deg,rgba(214,190,150,.92) 0 2px,rgba(204,178,136,.92) 2px 4px)}
.tape--lilac{background:repeating-linear-gradient(45deg,rgba(205,187,255,.94) 0 6px,rgba(236,228,255,.94) 6px 12px)}
.tape--top{top:-14px;left:50%;margin-left:calc(var(--tw,118px) / -2)}
.tape--tl{top:-8px;left:-26px;--tr:-38deg}
.tape--tr{top:-8px;right:-26px;--tr:38deg}

/* a washi strip that is itself a label */
.tape-label{display:inline-block;rotate:var(--r,-2deg);margin-bottom:1.1rem}
.tape-label>span{display:inline-block;clip-path:var(--tape-edge);padding:.62em 1.4em;font-family:var(--f-pixel);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);
  background:repeating-linear-gradient(-45deg,rgba(255,143,200,.95) 0 7px,rgba(255,218,238,.95) 7px 14px)}
.tape-label--lime>span{background:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px) 0 0/9px 9px,linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px) 0 0/9px 9px,var(--lime)}
.tape-label--sky>span{background:radial-gradient(circle,rgba(255,255,255,.9) 2px,transparent 2.6px) 0 0/11px 11px,var(--sky)}
.tape-label--gold>span{background:repeating-linear-gradient(90deg,var(--gold) 0 11px,#ffe27a 11px 22px)}
.tape-label--lilac>span{background:repeating-linear-gradient(45deg,var(--lilac) 0 6px,#ece4ff 6px 12px)}

/* ---------- stickers ---------- */
.sticker{--r:-7deg;display:inline-grid;place-items:center;text-align:center;rotate:var(--r);font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;line-height:1.05;color:var(--ink);background:var(--sb,var(--lime));
  box-shadow:0 0 0 4px #fff,0 12px 20px -10px rgba(20,18,16,.5);transition:rotate .4s var(--ease),scale .4s var(--ease);text-decoration:none}
.sticker--round{width:var(--s,112px);aspect-ratio:1;border-radius:50%;font-size:.74rem;padding:.7rem}
.sticker--pill{border-radius:999px;padding:.5em 1.05em;font-size:.72rem}
.sticker--burst{background:none;box-shadow:none;position:relative;isolation:isolate;width:var(--s,124px);aspect-ratio:1;font-size:.78rem;padding:1.2rem;filter:drop-shadow(0 10px 10px rgba(20,18,16,.32))}
.sticker--burst::before,.sticker--burst::after{content:"";position:absolute;clip-path:var(--burst);z-index:-1}
.sticker--burst::before{inset:-6px;background:#fff}
.sticker--burst::after{inset:0;background:var(--sb,var(--gold))}
a.sticker:hover,a.sticker:focus-visible,button.sticker:hover,button.sticker:focus-visible{rotate:calc(var(--r) * -1);scale:1.06}
.sticker small{display:block;font-family:var(--f-body);font-weight:700;text-transform:none;letter-spacing:0;font-size:.74em;margin-top:.2em}

/* ---------- paper objects ---------- */
.polaroid{position:relative;margin:0;rotate:var(--r,0deg);background:var(--white);padding:12px 12px 18px;box-shadow:var(--lift);transition:rotate .45s var(--ease),translate .45s var(--ease)}
.polaroid img{width:100%;aspect-ratio:1100/619;object-fit:cover;object-position:top center;background:var(--paper-2);outline:1px solid rgba(20,18,16,.08);outline-offset:-1px}
.polaroid figcaption{font-family:var(--f-hand);font-weight:700;font-size:1.55rem;line-height:1.1;color:var(--ink);padding:.7rem .15rem 0}

.note{--lh:30px;position:relative;rotate:var(--r,-2deg);background-color:var(--white);
  background-image:linear-gradient(90deg,transparent 36px,var(--margin) 36px 38px,transparent 38px),repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),var(--line) calc(var(--lh) - 1px) var(--lh));
  background-position:0 0,0 18px;padding:18px 20px 16px 50px;line-height:var(--lh);box-shadow:var(--lift)}

.sticky{position:relative;rotate:var(--r,1deg);background:var(--sb,var(--butter));padding:2.4rem 1.45rem 1.6rem;box-shadow:0 1px 1px rgba(20,18,16,.1),0 18px 26px -16px rgba(20,18,16,.5)}
.sticky::before{content:"";position:absolute;top:12px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:radial-gradient(circle at 35% 32%,#fff 0 2px,var(--pin,var(--signal)) 3.5px 100%);box-shadow:0 3px 3px rgba(20,18,16,.38)}
.sticky::after{content:"";position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 50%,rgba(20,18,16,.1) 50%,rgba(255,255,255,.45) 78%)}

/* ---------- torn seams: a section paints the NEXT section's paper, ripped ---------- */
.torn{position:relative}
.torn::before,.torn::after{content:"";position:absolute;left:0;right:0;height:30px;pointer-events:none;z-index:3;clip-path:var(--tear,var(--tear-a))}
.torn::before{bottom:4px;background:var(--fibre)}
.torn::after{bottom:-1px;background:var(--next,var(--paper))}
.tear-b{--tear:var(--tear-b)}
.tear-c{--tear:var(--tear-c)}
.tear-d{--tear:var(--tear-d)}

/* ---------- surfaces ---------- */
.grid-paper{background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
.cork{background-color:var(--cork);background-image:radial-gradient(rgba(92,58,24,.36) 1px,transparent 1.7px),radial-gradient(rgba(255,238,205,.3) 1px,transparent 1.7px),radial-gradient(rgba(120,80,40,.2) 2px,transparent 2.8px);background-size:11px 11px,17px 17px,29px 29px;background-position:0 0,5px 8px,13px 3px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font-family:var(--f-display);font-weight:800;font-size:.95rem;line-height:1;letter-spacing:.005em;padding:1rem 1.45rem;border:2.5px solid var(--ink);border-radius:999px;text-decoration:none;cursor:pointer;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:translate .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.btn:active{translate:2px 2px;box-shadow:1px 1px 0 var(--ink)}
.btn svg{width:17px;height:17px;flex:none}
.btn--primary{background:var(--signal)}
.btn--ghost{background:var(--white)}
.btn--gold{background:var(--gold);box-shadow:4px 4px 0 #070d2b}
.btn--gold:hover{box-shadow:6px 6px 0 #070d2b}
.btn--sm{padding:.72rem 1.05rem;font-size:.8rem;box-shadow:3px 3px 0 var(--ink)}

/* ---------- THON pledge bar ---------- */
.thonbar{position:relative;z-index:41;background:var(--navy);color:var(--thon-text);font-size:.86rem;text-align:center}
.thonbar a{display:block;padding:.62rem 1rem;text-decoration:none}
.thonbar b{color:var(--gold)}
.thonbar .spark{position:static;display:inline-block;vertical-align:-3px;margin:0 .45rem;--s:14px}
.thonbar__cta{font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:2px dashed var(--rule-2)}
.nav__in{display:flex;align-items:center;gap:1.4rem;min-height:66px}
.nav__logo img{width:150px;height:auto}
.nav__links{display:flex;gap:1.35rem;margin-left:auto;font-weight:600;font-size:.93rem}
.nav__links a{text-decoration:none;color:var(--ink);background:linear-gradient(var(--lime),var(--lime)) no-repeat 0 90%/0 40%;transition:background-size .3s var(--ease)}
.nav__links a:hover{background-size:100% 40%}
.nav__lang{font-family:var(--f-pixel);font-size:.72rem;letter-spacing:.05em;color:var(--ink-3)}
.nav__lang a{text-decoration:none;color:var(--ink-3)}
.nav__lang a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--signal)}
@media(max-width:900px){.nav__links{display:none}.nav__lang{margin-left:auto}}
@media(max-width:420px){.nav__logo img{width:116px}.nav__in{gap:.75rem}}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(4.6rem,9vw,7.6rem)}
.sec-head{position:relative;max-width:46rem;margin-bottom:clamp(2.4rem,4.4vw,3.6rem)}
.sec h2{font-size:clamp(1.95rem,4vw,3.2rem)}
.sec-sub{margin-top:1.1rem;font-size:1.1rem;max-width:54ch;color:var(--ink-2)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.4rem,6vw,5.2rem) clamp(5.4rem,8vw,7rem)}
.hero__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.hero__h1{font-size:clamp(2.2rem,4.6vw,3.95rem);font-weight:800;line-height:1.06;letter-spacing:-.03em;max-width:15ch}
.hero__hi{display:block;width:fit-content;font-family:var(--f-hand);font-weight:700;font-size:.82em;letter-spacing:0;line-height:1;color:var(--signal-ink);rotate:-3deg;margin:0 0 .14em -.04em}
.hero__h1 .serif{font-size:1.14em;line-height:.9}
.hero__aside{display:inline-flex;align-items:flex-start;gap:.4rem;margin-top:1rem;font-size:1.55rem;color:var(--signal-ink);rotate:-2deg}
.hero__aside svg{width:46px;height:34px;flex:none;margin-top:-.4rem}
.hero__aside svg path{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hero__lede{margin-top:1rem;font-size:1.13rem;max-width:44ch}
.facts{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.7rem}
.fact{display:inline-flex;align-items:baseline;gap:.45rem;padding:.5rem .9rem;background:var(--sb);border:2px solid var(--ink);border-radius:999px;font-size:.84rem;font-weight:600;color:var(--ink);rotate:var(--r,0deg)}
.fact b{font-family:var(--f-display);font-weight:800;font-size:.98rem}
.facts li:nth-child(1){--sb:var(--lime);--r:-2deg}
.facts li:nth-child(2){--sb:var(--sky);--r:1.5deg}
.facts li:nth-child(3){--sb:var(--pink);--r:-1deg}
.hero__cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.9rem}

/* hero collage: shuffle-stack of real client polaroids + the promises note */
.collage{position:relative;display:grid;grid-template-columns:minmax(0,1fr);padding:18px 0 8px}
.stack{position:relative;z-index:1;width:84%;justify-self:end;aspect-ratio:1200/831}
.stack__card{position:absolute;top:0;left:0;width:100%;margin:0;rotate:var(--r);translate:var(--x,0) var(--y,0);transition:translate .55s var(--ease),rotate .55s var(--ease)}
.stack__card.is-thrown{animation:throw .62s var(--ease)}
@keyframes throw{0%,44%{z-index:20}45%{translate:64% -6%;rotate:13deg;z-index:20}46%,100%{z-index:0}}
.stack__card figcaption{font-size:1.35rem}
.stack__btn{position:absolute;z-index:3;left:2%;top:0;border:0;cursor:pointer;font-size:.66rem;--sb:var(--pink);--r:-10deg;--s:86px}
.promises{position:relative;z-index:2;width:78%;margin-top:16px;justify-self:start;--r:-2.5deg}
.promises__t{font-family:var(--f-hand);font-weight:700;font-size:1.75rem;color:var(--ink);line-height:var(--lh)}
.checks{list-style:none;padding:0;margin:0}
.checks li{position:relative;font-size:.92rem;color:var(--ink);padding-left:1.75rem}
.checks li::before{content:"";position:absolute;left:0;top:7px;width:18px;height:15px;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 11.5 8.6 17 22 2.5' fill='none' stroke='%23e84e10' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.promises__sign{font-family:var(--f-hand);font-weight:700;font-size:1.7rem;color:var(--signal-ink);text-align:right;line-height:var(--lh)}
.collage .sticker--human{position:absolute;z-index:3;right:-14px;top:-4px;--sb:var(--lime);--r:12deg;--s:92px;font-size:.66rem}
.collage .sticker--bbb{position:absolute;z-index:3;right:-4px;bottom:28px;--sb:var(--gold);--r:11deg;--s:104px}
.collage .spark--a{top:-18px;left:9%;--s:30px;--c:var(--pink)}
.collage .spark--b{bottom:34%;right:-22px;--s:22px}

/* ---------- marquee band ---------- */
.marquee{position:relative;z-index:9;width:110vw;margin:-2rem 0 -2rem -5vw;rotate:-2.2deg;background:var(--signal);border-block:3px solid var(--ink);overflow:hidden;box-shadow:0 10px 0 rgba(20,18,16,.12)}
.marquee__track{display:flex;width:max-content;animation:marq 46s linear infinite}
.marquee__track span{flex:none;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:clamp(1rem,2.1vw,1.7rem);letter-spacing:.02em;color:var(--ink);padding:.62rem 0;white-space:nowrap}
.marquee--lime{background:var(--lime);rotate:1.6deg}
.marquee--lime .marquee__track{animation-direction:reverse;animation-duration:52s}
@keyframes marq{to{translate:-50% 0}}

/* ---------- THON spread ---------- */
.thon{background:var(--navy);color:var(--thon-text);padding-top:clamp(6.6rem,11vw,9rem);--next:var(--paper-2)}
.thon__in{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(2.4rem,5vw,4.6rem);align-items:center}
.print{position:relative;margin:0;rotate:var(--r,-2.5deg);background:#fff;padding:11px;box-shadow:0 26px 44px -18px rgba(0,0,0,.65)}
.print img{width:100%}
.print figcaption{position:absolute;left:18px;bottom:-40px;font-size:1.5rem;color:var(--gold);rotate:-3deg}
.thon h2{color:#fff;font-size:clamp(2rem,4.1vw,3.3rem)}
.gold{color:var(--gold)}
.thon p{color:var(--thon-text)}
.thon__lead{margin-top:1.1rem;font-size:1.13rem}
.thon__body{margin-top:1rem;font-size:1rem}
.stamp{display:inline-block;rotate:-3deg;margin-bottom:1.3rem;padding:10px;background:var(--gold);
  -webkit-mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4.2px at 5px 5px,transparent 98%,#000) -5px -5px/10px 10px round;
  mask:linear-gradient(#000 0 0) content-box,radial-gradient(circle 4.2px at 5px 5px,transparent 98%,#000) -5px -5px/10px 10px round}
.stamp span{display:block;padding:.55rem .9rem;border:2px dashed var(--navy);font-family:var(--f-pixel);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.thon__aside{margin-top:1.2rem;font-size:1.55rem;color:var(--gold);rotate:-2deg;display:flex;align-items:center;gap:.55rem}
.thon__aside svg{width:30px;height:30px;flex:none}
.thon__aside svg path{fill:var(--pink);stroke:#fff;stroke-width:5;stroke-linejoin:round}
/* Stats: always one row of three. Each <li> is a size container and the sticker's
   type is set in cqi, so a number that fits a 120px circle fits at any circle size. */
.thon__stats{list-style:none;padding:0;margin:1.9rem 0 2.1rem;display:grid;grid-template-columns:repeat(3,minmax(0,120px));gap:1.1rem}
.thon__stats li{container-type:inline-size;display:grid}
.thon__stats .sticker{--sb:var(--gold);width:100%;font-size:.58rem;font-size:7.6cqi;letter-spacing:0;padding:.8rem;padding:11cqi}
.thon__stats .sticker b{display:block;font-size:1rem;font-size:13.4cqi;font-weight:900;letter-spacing:-.03em;margin-bottom:.25em}
.thon__stats li:nth-child(1) .sticker{--r:-6deg}
.thon__stats li:nth-child(2) .sticker{--sb:#fff;--r:5deg}
.thon__stats li:nth-child(3) .sticker{--sb:var(--sky);--r:-3deg}
.thon__fine{margin-top:1.3rem;font-size:.86rem;max-width:46ch;opacity:.86}
.thon .spark--a{top:12%;right:4%;--s:34px}
.thon .spark--b{bottom:16%;left:2.5%;--s:24px;--c:#fff}

/* ---------- services: pushpinned sticky notes ---------- */
.services{background:var(--paper-2);--next:var(--cork)}
.stickies{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.3rem,2.6vw,2.1rem)}
.stickies img{width:64px;height:64px;margin-bottom:.85rem;mix-blend-mode:multiply}
.stickies h3{font-size:1.08rem;margin-bottom:.5rem;letter-spacing:-.015em}
.stickies p{font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.stickies li:nth-child(1){--sb:var(--pink);--r:-2.2deg;--pin:var(--navy)}
.stickies li:nth-child(2){--sb:var(--sky);--r:1.6deg}
.stickies li:nth-child(3){--sb:var(--lime);--r:-1.2deg;--pin:var(--navy)}
.stickies li:nth-child(4){--sb:var(--lilac);--r:2.2deg}
.services .doodle{top:-6px;right:4%;width:58px;height:58px;--c:var(--butter);rotate:14deg}

/* ---------- work: polaroid corkboard ---------- */
.work{--next:var(--paper)}
.card-head{background:var(--white);padding:1.7rem 1.9rem 1.8rem;--r:-1.2deg;rotate:var(--r);box-shadow:var(--lift);max-width:42rem}
.polaroids{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2.6rem,5vw,4rem) clamp(1.8rem,4vw,3.4rem)}
.polaroids li:nth-child(1) .polaroid{--r:-2.4deg}
.polaroids li:nth-child(2) .polaroid{--r:1.8deg;margin-top:2.2rem}
.polaroids li:nth-child(3) .polaroid{--r:1.2deg}
.polaroids li:nth-child(4) .polaroid{--r:-1.8deg;margin-top:2.2rem}
.polaroids .polaroid:hover{rotate:0deg;translate:0 -4px}
.polaroid__place{display:block;font-family:var(--f-pixel);font-weight:400;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:.35rem}
.polaroid__desc{display:block;font-family:var(--f-body);font-weight:400;font-size:.95rem;line-height:1.55;color:var(--ink-2);margin-top:.5rem}
.polaroid__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.75rem;font-family:var(--f-body);font-weight:700;font-size:.9rem;color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.polaroid__link svg{width:15px;height:15px;flex:none}
.polaroid__link:hover{color:var(--signal-ink)}
.also{margin:clamp(3.2rem,5vw,4.4rem) auto 0;max-width:36rem;--sb:var(--butter);--r:-1.4deg;text-align:center}
.also p{font-size:1rem;color:var(--ink)}
.also a{font-weight:700;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- reviews: letters on white ---------- */
.reviews{--next:var(--ink)}
.letters{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2.2rem,4.6vw,3.8rem);align-items:start}
.letter{position:relative;rotate:var(--r);background:#fff;padding:2.1rem 1.9rem 1.7rem;box-shadow:var(--lift)}
.letter:nth-child(1){--r:-1.2deg}
.letter:nth-child(2){--r:1.6deg;margin-top:2.4rem}
.letter__head{display:flex;align-items:center;gap:.8rem}
.g-badge{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--signal);flex:none}
.letter__who b{display:block;font-family:var(--f-display);font-weight:800;font-size:1rem;color:var(--ink);letter-spacing:-.01em}
.letter__who small{font-size:.8rem;color:var(--ink-3)}
.stars{margin-left:auto;display:flex;gap:2px;flex:none}
.stars svg{width:18px;height:18px}
.stars path{fill:var(--signal)}
.letter__date{margin-top:.85rem;font-family:var(--f-pixel);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.letter blockquote{margin-top:.75rem;font-family:var(--f-serif);font-style:italic;font-size:1.32rem;line-height:1.42;color:var(--ink)}
.letter--short blockquote{font-size:2rem;line-height:1.15}
.reply{margin-top:1.5rem;--sb:var(--sky);--r:1.4deg;padding:2rem 1.2rem 1.1rem}
.reply b{font-size:.86rem;color:var(--ink)}
.reply b span{font-weight:500;color:var(--ink-2);margin-left:.3rem}
.reply p{font-size:.9rem;color:var(--ink-2);margin-top:.25rem}
.letters .sticker--bbb{position:absolute;z-index:8;right:2%;bottom:-44px;--sb:var(--gold);--r:10deg;--s:118px}

/* ---------- agency vs studio of one ---------- */
.vs{background:var(--ink);color:#d9d3c6;--next:var(--paper)}
.vs h2{color:#fff}
.vs h2 .serif{color:var(--lime)}
.vs .sec-sub{color:#cfc9bc}
.scraps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.3rem);align-items:start}
.scraps>li{filter:drop-shadow(0 16px 18px rgba(0,0,0,.5))}
.scrap{position:relative;rotate:var(--r);background:var(--white);color:var(--ink-2);padding:2.3rem 1.7rem 1.9rem;clip-path:var(--clip)}
.scraps>li:nth-child(1) .scrap{--r:-1.4deg;--clip:polygon(0.0% 1.00%, 7.1% 1.19%, 14.3% 1.27%, 21.4% 1.51%, 28.6% 1.18%, 35.7% 1.48%, 42.9% 0.05%, 50.0% 0.74%, 57.1% 1.51%, 64.3% 1.04%, 71.4% 1.44%, 78.6% 0.18%, 85.7% 0.75%, 92.9% 0.39%, 100.0% 0.87%, 99.08% 7.1%, 99.98% 14.3%, 99.65% 21.4%, 99.55% 28.6%, 98.53% 35.7%, 98.77% 42.9%, 99.74% 50.0%, 98.72% 57.1%, 99.78% 64.3%, 99.01% 71.4%, 99.80% 78.6%, 100.00% 85.7%, 98.61% 92.9%, 99.66% 100.0%, 92.9% 99.66%, 85.7% 98.43%, 78.6% 98.60%, 71.4% 99.54%, 64.3% 98.46%, 57.1% 99.14%, 50.0% 98.92%, 42.9% 99.67%, 35.7% 98.49%, 28.6% 98.89%, 21.4% 98.45%, 14.3% 98.57%, 7.1% 99.52%, 0.0% 99.42%, 0.27% 92.9%, 0.23% 85.7%, 0.10% 78.6%, 0.48% 71.4%, 0.96% 64.3%, 0.01% 57.1%, 1.08% 50.0%, 0.54% 42.9%, 0.50% 35.7%, 1.31% 28.6%, 0.77% 21.4%, 0.51% 14.3%, 0.77% 7.1%)}
.scraps>li:nth-child(2) .scrap{--r:1.3deg;--clip:polygon(0.0% 0.84%, 7.1% 1.29%, 14.3% 1.54%, 21.4% 0.46%, 28.6% 1.23%, 35.7% 1.13%, 42.9% 1.06%, 50.0% 0.18%, 57.1% 0.04%, 64.3% 0.61%, 71.4% 1.19%, 78.6% 0.40%, 85.7% 0.80%, 92.9% 0.51%, 100.0% 1.35%, 98.49% 7.1%, 99.36% 14.3%, 98.40% 21.4%, 99.90% 28.6%, 98.70% 35.7%, 98.60% 42.9%, 99.76% 50.0%, 98.87% 57.1%, 99.11% 64.3%, 98.47% 71.4%, 99.66% 78.6%, 99.14% 85.7%, 98.59% 92.9%, 98.98% 100.0%, 92.9% 99.51%, 85.7% 99.87%, 78.6% 98.50%, 71.4% 99.24%, 64.3% 98.41%, 57.1% 99.77%, 50.0% 98.70%, 42.9% 98.70%, 35.7% 98.53%, 28.6% 99.97%, 21.4% 99.40%, 14.3% 99.92%, 7.1% 98.80%, 0.0% 99.43%, 1.54% 92.9%, 0.60% 85.7%, 1.24% 78.6%, 1.39% 71.4%, 0.38% 64.3%, 0.89% 57.1%, 1.53% 50.0%, 0.84% 42.9%, 0.58% 35.7%, 0.43% 28.6%, 1.26% 21.4%, 0.31% 14.3%, 0.97% 7.1%);background:#ddd6c8;margin-top:1.4rem}
.scraps>li:nth-child(3) .scrap{--r:-.9deg;--clip:polygon(0.0% 1.48%, 7.1% 1.52%, 14.3% 1.43%, 21.4% 0.13%, 28.6% 0.95%, 35.7% 0.68%, 42.9% 0.85%, 50.0% 0.21%, 57.1% 0.31%, 64.3% 0.71%, 71.4% 0.35%, 78.6% 0.73%, 85.7% 0.04%, 92.9% 0.14%, 100.0% 1.14%, 99.33% 7.1%, 99.18% 14.3%, 98.83% 21.4%, 99.43% 28.6%, 99.91% 35.7%, 98.75% 42.9%, 99.06% 50.0%, 98.95% 57.1%, 99.01% 64.3%, 98.45% 71.4%, 99.42% 78.6%, 98.78% 85.7%, 99.41% 92.9%, 99.08% 100.0%, 92.9% 98.94%, 85.7% 99.50%, 78.6% 99.86%, 71.4% 99.24%, 64.3% 98.85%, 57.1% 99.06%, 50.0% 99.28%, 42.9% 98.97%, 35.7% 99.71%, 28.6% 99.71%, 21.4% 99.48%, 14.3% 98.69%, 7.1% 99.69%, 0.0% 99.82%, 0.16% 92.9%, 0.06% 85.7%, 0.44% 78.6%, 0.92% 71.4%, 1.31% 64.3%, 0.53% 57.1%, 0.59% 50.0%, 0.46% 42.9%, 0.49% 35.7%, 1.24% 28.6%, 0.88% 21.4%, 0.41% 14.3%, 0.17% 7.1%);background:#d3ccbd;margin-top:.6rem}
.scrap h3{font-size:1.2rem;letter-spacing:-.015em}
.scrap .sticker{margin-bottom:.9rem;--sb:var(--lime);--r:-4deg}
.scrap__sub{font-family:var(--f-hand);font-weight:700;font-size:1.5rem;color:var(--signal-ink);margin:.25rem 0 .7rem}
.ticks,.crosses{list-style:none;padding:0;margin:.6rem 0 0}
.ticks li,.crosses li{position:relative;padding-left:1.9rem;margin:.6rem 0;font-size:.95rem;line-height:1.5;color:var(--ink)}
.ticks li::before,.crosses li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:18px;background:no-repeat center/contain}
.ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 11.5 8.6 17 22 2.5' fill='none' stroke='%23e84e10' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.crosses li{color:var(--ink-2)}
.crosses li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4.5c5 4.6 10.8 10.6 16 15.4M19.5 4C14 9 9 14.6 4.5 20' fill='none' stroke='%23433f38' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---------- process: numbered stickers ---------- */
.process{--next:var(--paper-2)}
.steps-wrap{position:relative}
.steps{position:relative;list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.6rem,3vw,2.6rem)}
.steps__path{position:absolute;left:5%;top:14px;width:90%;height:60px;z-index:0;pointer-events:none;overflow:visible}
.steps__path path{fill:none;stroke:var(--ink-3);stroke-width:2.4;stroke-dasharray:3 9;stroke-linecap:round}
.step{position:relative;z-index:1}
.step__num{display:grid;place-items:center;width:88px;aspect-ratio:1;border-radius:50%;background:var(--sb);font-family:var(--f-display);font-weight:900;font-size:1.65rem;color:var(--ink);box-shadow:0 0 0 4px #fff,5px 6px 0 var(--ink);rotate:var(--r);margin-bottom:1.3rem}
.steps li:nth-child(1){--sb:var(--pink);--r:-8deg}
.steps li:nth-child(2){--sb:var(--sky);--r:6deg}
.steps li:nth-child(3){--sb:var(--lime);--r:-5deg}
.steps li:nth-child(4){--sb:var(--gold);--r:9deg}
.step h3{font-size:1.14rem;margin-bottom:.45rem;letter-spacing:-.015em}
.step p{font-size:.97rem;line-height:1.55}

/* ---------- FAQ: spiral notebook ---------- */
.faq{background:var(--paper-2);--next:var(--paper)}
.faq__in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.notebook{position:relative;rotate:.7deg;padding:.6rem 1.6rem .6rem 3.6rem;background-color:var(--white);
  background-image:linear-gradient(90deg,transparent 2.35rem,var(--margin) 2.35rem calc(2.35rem + 2px),transparent calc(2.35rem + 2px));box-shadow:var(--lift)}
.notebook::before{content:"";position:absolute;left:.7rem;top:0;bottom:0;width:16px;background:radial-gradient(circle at 8px 14px,var(--paper-2) 0 6px,rgba(20,18,16,.28) 6.5px 7.5px,transparent 8px) 0 0/16px 30px repeat-y}
.qa{border-bottom:1.5px dashed var(--rule-2)}
.qa:last-child{border-bottom:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;background:var(--lime);font-family:var(--f-display);font-weight:800;font-size:1.1rem;line-height:1;transition:rotate .3s var(--ease),background-color .3s}
.qa[open] summary::after{rotate:45deg;background:var(--pink)}
.qa__a{padding:0 2.6rem 1.3rem 0;color:var(--ink-2);font-size:1rem}
.faq .doodle{bottom:-22px;left:-18px;width:58px;height:58px;--c:var(--pink);rotate:-14deg}

/* ---------- talk: the .exe window ---------- */
.talk{--next:var(--ink)}
.talk__in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2.2rem,5vw,4.2rem);align-items:start}
.talk__p{margin-top:1.1rem;font-size:1.1rem;max-width:44ch}
.lang-note{margin-top:1.2rem;font-size:.93rem;line-height:1.55;padding:.85rem 1rem;background:var(--white);border:2px solid var(--ink);border-radius:10px;box-shadow:3px 3px 0 var(--sky);color:var(--ink)}
.avatar{flex:none;width:54px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--signal-soft);color:var(--signal-ink);font-family:var(--f-display);font-weight:800;font-size:1rem;border:2px solid var(--signal)}
/* the email, on a yellow legal pad: glued maroon binding, a perforation, the red
   double margin and blue rules. line-height equals the rule spacing so every
   line of text sits on a rule, like handwriting on a real pad. */
/* "Prefer email?" is a torn scrap of paper. The wrapper carries the tilt, the shadow, the tape and the
   sticker; the torn clip-path lives on the inner paper, so it can't crop any of them. The outline came
   from a seeded random walk (rough top, gentler bottom, near-straight sides); edit it as a value. */
.scrapnote{--r:-2deg;position:relative;margin-top:2.2rem;max-width:23rem;rotate:var(--r);filter:drop-shadow(0 12px 12px rgba(20,18,16,.2)) drop-shadow(0 1px 1px rgba(20,18,16,.16))}
.scrapnote__paper{padding:1.95rem 1.6rem 1.45rem;color:var(--ink);background-color:var(--white);
  background-image:linear-gradient(97deg,transparent 62%,rgba(20,18,16,.05) 62.3%,rgba(255,255,255,.85) 62.9%,transparent 63.8%),linear-gradient(-2deg,transparent 54%,rgba(20,18,16,.04) 54.3%,rgba(255,255,255,.75) 54.9%,transparent 55.8%),radial-gradient(130% 100% at 15% 0%,rgba(255,255,255,.9),transparent 55%),linear-gradient(rgba(20,18,16,0) 55%,rgba(20,18,16,.035));
  clip-path:polygon(0% 4.1%, 3.7% 2.4%, 7.4% 1.6%, 11.1% 1.3%, 14.8% 1.2%, 18.5% 1.4%, 22.2% 2.6%, 25.9% 2.9%, 29.6% 1%, 33.3% 2.9%, 37% 4.1%, 40.7% 3.4%, 44.4% 4.6%, 48.1% 3.6%, 51.9% 3.4%, 55.6% 2.6%, 59.3% 3.7%, 63% 4%, 66.7% 3.9%, 70.4% 3.2%, 74.1% 4.7%, 77.8% 4.5%, 81.5% 3.4%, 85.2% 3.8%, 88.9% 5%, 92.6% 5%, 96.3% 3.5%, 100% 3.3%, 98.6% 12.5%, 98.6% 25%, 98.9% 37.5%, 99.3% 50%, 98.6% 62.5%, 98.6% 75%, 99% 87.5%, 100% 99%, 95.2% 99.7%, 90.5% 98.2%, 85.7% 97.2%, 81% 97.3%, 76.2% 97.5%, 71.4% 97.7%, 66.7% 97.6%, 61.9% 98.1%, 57.1% 98.7%, 52.4% 98.1%, 47.6% 99%, 42.9% 97.7%, 38.1% 97.4%, 33.3% 98.4%, 28.6% 99.1%, 23.8% 99.1%, 19% 98.3%, 14.3% 97.8%, 9.5% 98%, 4.8% 97.7%, 0% 97.6%, 0.7% 87.5%, 1% 75%, 0.6% 62.5%, 0.5% 50%, 0.5% 37.5%, 0.3% 25%, 0.3% 12.5%)}
.scrapnote p{margin:0}
.scrapnote__hand{font-family:var(--f-hand);font-weight:700;font-size:1.6rem;line-height:1.1;margin-bottom:.3rem}
.scrapnote__hand--sm{margin:.4rem 0 0;font-size:1.35rem;color:var(--signal-ink)}
.scrapnote__mail{font-weight:700;font-size:1.02rem;line-height:1.5;color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}
.scrapnote__mail:hover{color:var(--signal-ink)}
.scrapnote .tape{--tw:86px;--tr:-3deg;top:-12px}
.scrapnote .avatar{position:absolute;z-index:7;right:-14px;top:-16px;rotate:9deg;box-shadow:0 6px 10px -4px rgba(20,18,16,.4)}
.talk__sticky{margin-top:2.2rem;max-width:17rem;--sb:var(--lime);--r:3deg}
.talk__sticky p{font-family:var(--f-hand);font-weight:700;font-size:1.55rem;line-height:1.15;color:var(--ink)}

/* ---------- the mockup form, on a yellow legal pad ----------
   Glued binding, perforation, the red double margin, blue rules and a few
   sheets showing underneath. It's a pad you write on: fields are fill-in lines,
   not boxes. Everything above the button keeps a 34px rhythm (--lh), so each
   label, field line and textarea line lands on a printed rule. Field lines are
   ink, not rule-blue, so they still read as fields (non-text contrast >= 3:1). */
.formpad{--lh:34px;--m1:44px;position:relative;rotate:var(--r,-.8deg);color:var(--ink);padding:34px 26px 28px 70px;line-height:var(--lh);
  background-color:#fff38f;
  background-image:linear-gradient(90deg,transparent var(--m1),#e2807f var(--m1) calc(var(--m1) + 1.5px),transparent calc(var(--m1) + 1.5px) calc(var(--m1) + 5px),#e2807f calc(var(--m1) + 5px) calc(var(--m1) + 6.5px),transparent calc(var(--m1) + 6.5px)),
    repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px),#93b3e6 calc(var(--lh) - 1px) var(--lh));
  background-position:0 0,0 34px;
  box-shadow:0 3px 0 -1px #f4e574,0 6px 0 -2px #eadb6a,0 9px 0 -3px #e0cf5f,var(--lift)}
.formpad::before{content:"";position:absolute;left:0;right:0;top:0;height:26px;background:linear-gradient(#7b2320,#5e1715);box-shadow:inset 0 -2px 0 rgba(0,0,0,.18)}
.formpad::after{content:"";position:absolute;left:0;right:0;top:27px;height:6px;background:radial-gradient(circle,rgba(20,18,16,.3) 1.2px,transparent 1.7px) 0 50%/7px 6px repeat-x}
.formpad__title{font-family:var(--f-hand);font-weight:700;font-size:1.8rem;line-height:var(--lh);color:var(--ink)}
/* align-items:end: if a label wraps (it does in French), both fields in the row
   still share one line, and the shorter label simply starts a rule lower */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:1.6rem;row-gap:var(--lh);margin-top:var(--lh)}
.form-grid .full{grid-column:1/-1}
.form-grid label{display:grid;grid-template-rows:auto auto;align-content:start}
.form-grid label>span{font-family:var(--f-hand);font-weight:700;font-size:1.32rem;line-height:var(--lh);color:var(--ink)}
.form-grid .opt{font-weight:500;color:var(--ink-3)}
.form-grid input,.form-grid textarea{display:block;width:100%;margin:0;padding:0 .15rem;font-family:var(--f-body);font-size:1rem;font-weight:400;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);border-radius:0;box-shadow:none}
.form-grid input{height:var(--lh);line-height:calc(var(--lh) - 2px)}
.form-grid textarea{height:calc(var(--lh) * 3);min-height:calc(var(--lh) * 3);line-height:var(--lh);resize:vertical}
.form-grid input:focus-visible,.form-grid textarea:focus-visible{outline:3px solid var(--signal);outline-offset:3px;background:rgba(255,255,255,.45)}
.form-grid ::placeholder{color:#6b655b;opacity:1}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:var(--lh)}
.form-note{display:flex;align-items:center;gap:.45rem;font-size:.84rem;font-weight:700;line-height:1.4;color:var(--ink-2)}
.form-note svg{width:15px;height:15px;flex:none}
.form-error{display:none;margin-top:1rem;font-weight:650;color:var(--signal-ink)}
.form-card.is-error .form-error{display:block}
.form-card [data-state="success"]{display:none;text-align:center;padding:1.4rem .4rem .6rem}
.form-card.is-success [data-state="form"]{display:none}
.form-card.is-success [data-state="success"]{display:block}
.success__badge{--sb:var(--lime);--r:-6deg;--s:96px;margin:0 auto 1.1rem;font-size:1.9rem}
.success h3{font-size:1.6rem}
.success p{margin:.7rem auto 0;max-width:40ch}
.success .hand{margin-top:.6rem;font-size:1.6rem;color:var(--signal-ink)}

/* ---------- footer ---------- */
.foot{position:relative;background:var(--ink);color:#cfc9bc;padding:clamp(4rem,7vw,5.4rem) 0 2rem}
.foot__grid{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));gap:2.2rem}
.foot__brand img{width:156px}
.foot__brand p{margin-top:1rem;font-size:.95rem;max-width:30ch}
.foot__h{font-family:var(--f-pixel);font-weight:400;font-size:.74rem;letter-spacing:.07em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.foot ul{list-style:none;padding:0}
.foot li{margin:.45rem 0}
.foot a{color:#f5f0e6;text-decoration:none}
.foot a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.foot__card{--sb:var(--butter);--r:2deg;color:var(--ink)}
.foot__card p{color:var(--ink);font-size:.95rem}
.foot__card .hand{font-size:1.45rem;margin-top:.3rem}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3.2rem;padding-top:1.4rem;border-top:1px dashed rgba(255,255,255,.22);font-size:.82rem;color:#b3ad9f}
.foot__legal nav{display:flex;gap:1.2rem}
.foot .spark{top:2.2rem;right:6%;--s:34px}

/* ---------- secondary pages (privacy, terms, error pages) ----------
   These pages predate the rebuild and use a handful of the old class names.
   Rather than rewrite nine pages, the names are mapped onto scrapbook parts. */
:root{--color-ink:var(--ink);--color-ink-2:var(--ink-2);--color-ink-3:var(--ink-3);--color-signal:var(--signal);--color-paper:var(--paper)}
.container-page{width:100%;max-width:1180px;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container-page{padding:0 2.5rem}}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:66px}
.nav-inner img{width:150px;height:auto}
.section{padding-block:clamp(3.4rem,8vw,6rem)}
.link-inline{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.eyebrow{display:inline-block;rotate:-2deg;clip-path:var(--tape-edge);padding:.62em 1.4em;font-family:var(--f-pixel);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink);background:repeating-linear-gradient(-45deg,rgba(255,143,200,.95) 0 7px,rgba(255,218,238,.95) 7px 14px)}
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:800;font-size:.95rem;line-height:1;padding:1rem 1.45rem;border:2.5px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);box-shadow:4px 4px 0 var(--ink);transition:translate .18s var(--ease),box-shadow .18s var(--ease)}
.btn-primary{background:var(--signal)}
.btn-secondary{background:var(--white)}
.btn-primary:hover,.btn-secondary:hover{translate:-2px -2px;box-shadow:6px 6px 0 var(--ink)}
.btn-primary svg{width:17px;height:17px}
.legal{max-width:46rem}
.legal h1{margin-top:.4rem}
.legal h2{font-size:1.3rem;margin:2.4rem 0 .6rem;letter-spacing:-.015em}
.legal p,.legal li{font-size:1.02rem}
.legal ul{padding-left:1.2rem;margin:.6rem 0 0}
.legal li{margin:.35rem 0}
.legal a:not([class]){color:var(--ink);text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- entrance motion (reveal.js adds .is-revealed) ---------- */
.js [data-reveal]{opacity:0;translate:0 28px;transition:opacity .75s var(--ease),translate .85s var(--ease)}
.js [data-reveal].is-revealed{opacity:1;translate:0 0}
.js [data-reveal-stagger]>*{opacity:0;translate:0 30px;transition:opacity .75s var(--ease),translate .85s var(--ease)}
.js [data-reveal-stagger].is-revealed>*{opacity:1;translate:0 0}
.js [data-reveal-stagger].is-revealed>*:nth-child(2){transition-delay:.09s}
.js [data-reveal-stagger].is-revealed>*:nth-child(3){transition-delay:.18s}
.js [data-reveal-stagger].is-revealed>*:nth-child(4){transition-delay:.27s}

/* ---------- ambient motion: only for people who haven't asked for less ---------- */
@media(prefers-reduced-motion:no-preference){
  .spark{animation:twinkle 3.4s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes twinkle{0%,100%{scale:1;rotate:0deg}50%{scale:.7;rotate:28deg}}
  .sticker--burst{animation:bob 5s ease-in-out infinite}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .marquee__track{animation:none}
  .js [data-reveal],.js [data-reveal-stagger]>*{opacity:1!important;translate:none!important;transition:none!important}
  .mark,.mark--gold{transition:none}
  .scrawl path{stroke-dashoffset:0;transition:none}
  .stack__card,.stack__card.is-thrown{transition:none;animation:none}
}

/* ---------- responsive: calmer tilt, no overlaps, stacked collage ---------- */
@media(max-width:1020px){
  .stickies{grid-template-columns:repeat(2,minmax(0,1fr))}
  .scraps{grid-template-columns:minmax(0,1fr)}
  .scraps>li:nth-child(n) .scrap{margin-top:0}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2.8rem}
  .steps__path{display:none}
  .foot__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hero__in,.thon__in,.faq__in,.talk__in{grid-template-columns:minmax(0,1fr)}
  .collage{margin-top:.8rem;padding:26px .2rem 40px}
  .stack{width:92%;max-width:520px}
  .promises{width:92%;max-width:460px;margin-top:-6px}
  .collage .sticker--bbb{bottom:-28px;right:-2px;--s:94px}
  .print figcaption{position:static;margin-top:.5rem}
  .letters{grid-template-columns:minmax(0,1fr)}
  .letter:nth-child(2){margin-top:0}
  .letters .sticker--bbb{position:relative;right:auto;bottom:auto;margin:.4rem 0 0 auto;display:grid}
}
@media(max-width:640px){
  .polaroids{grid-template-columns:minmax(0,1fr)}
  .polaroids li:nth-child(n) .polaroid{margin-top:0}
  .stickies{grid-template-columns:minmax(0,1fr)}
  .steps{grid-template-columns:minmax(0,1fr)}
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .foot__grid{grid-template-columns:minmax(0,1fr)}
  .hero__aside{font-size:1.35rem}
  .letter{padding:1.8rem 1.4rem 1.5rem}
  .letter--short blockquote{font-size:1.6rem}
  .formpad{--m1:28px;padding:34px 18px 24px 50px}
  .scrapnote__mail{font-size:.96rem}
  /* halve every tilt on small screens: legible first, playful second */
  .polaroid,.sticky,.letter,.scrap,.note,.print,.card-head,.notebook,.scrapnote,.formpad{rotate:calc(var(--r,0deg) * .5)}
}
/* too narrow for three legible circles: two up, one centred beneath */
@media(max-width:440px){
  .thon__stats{grid-template-columns:repeat(2,minmax(0,120px));gap:.9rem 1.1rem}
  .thon__stats li:nth-child(3){grid-column:1/-1;justify-self:center;width:calc(50% - .55rem)}
}