/* ---------------------------------------------------------------------------
   moneysha.art — shared foundations
   Every section draws on a fixed design frame: 1672 x 941 on desktop,
   530 x 941 on phones. 1 unit (--u) = 1 px of that frame, so positions can be
   read straight off the layout references.
   --------------------------------------------------------------------------- */
@font-face{font-family:'JetBrains Mono';src:url(../assets/fonts/jetbrains-mono.woff2) format('woff2-variations');
  font-weight:100 800;font-style:normal;font-display:block}
@font-face{font-family:'Playfair Display';src:url(../assets/fonts/playfair-display.woff2) format('woff2-variations');
  font-weight:400 900;font-style:normal;font-display:block}
@font-face{font-family:'Caveat';src:url(../assets/fonts/caveat.woff2) format('woff2-variations');
  font-weight:400 700;font-style:normal;font-display:block}

:root{
  --u: min(calc(100vw / 1672), calc(100svh / 941));
  --stage-w: calc(1672 * var(--u));
  --stage-h: calc(941 * var(--u));

  --paper-0:#F0E3D0; --paper-1:#EEE1CD; --paper-2:#E7D6BC; --paper-3:#E1CFB4;
  --ink:#241A0E; --ink-soft:#5A4A36; --ink-faint:#8E7C63;
  --accent:var(--brand-accent,#FF4D1A); --dot:var(--brand-dot,#D6794F); --rust:#A8492B; --brown:var(--brand-brown,#644026);
  --rule:rgba(36,26,14,.40);

  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --serif:'Playfair Display',Georgia,serif;
  --hand:'Caveat',cursive;
}
@media (max-width:860px){
  :root{
    --u: min(calc(100vw / 530), calc(100svh / 941));
    --stage-w: calc(530 * var(--u));
    --stage-h: calc(941 * var(--u));
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%}
body{font-family:var(--mono);color:var(--ink);overflow-x:hidden;
  /* one sheet of paper for the whole site: the gradient only runs left to
     right, so sections stack without a seam between them */
  background:linear-gradient(92deg,var(--paper-0) 0%,var(--paper-1) 38%,var(--paper-2) 76%,var(--paper-3) 100%)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

/* paper tooth and a soft lens falloff, fixed to the viewport so they never
   tile visibly at a section boundary */
.site-grain{position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:multiply;opacity:.17;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='220' height='220' filter='url(%23n)' opacity='.42'/></svg>")}
.site-vignette{position:fixed;inset:0;z-index:30;pointer-events:none;
  background:radial-gradient(124% 104% at 48% 44%,rgba(0,0,0,0) 58%,rgba(64,44,20,.12) 100%)}

/* the per-section paper, grain and vignette layers are replaced by the ones above */
section .paper,section .grain,section .vignette{display:none !important}
main > section{position:relative;z-index:1}

/* One section per screen: each section is at least a full viewport tall and
   its content band (design px trimmed from the top and bottom of the 941
   frame) sits centred in it. */
main > section.trim{--band:calc((941 - var(--ct) - var(--cb)) * var(--u));--view:max(var(--band), calc(100svh - 120px));
  height:var(--view) !important}
main > section.trim > .stage{top:calc((var(--view) - var(--band)) / 2 - var(--ct) * var(--u)) !important;transform:translateX(-50%) !important}
#about{--ct:70;--cb:8}
#work{--ct:24;--cb:40}
#services{--ct:96;--cb:84}
#process{--ct:100;--cb:96}
#contact{--ct:64;--cb:60}
@media (max-width:860px){
  /* phones: each section takes a little less than a full screen, so the
     breathing room between chapters doesn't turn into dead space */
  main > section.trim{--view:max(var(--band), calc(100svh - 160px))}
  #about{--ct:84;--cb:40}
  #work{--ct:80;--cb:72}
  #services{--ct:56;--cb:70}
  #process{--ct:64;--cb:8;margin-top:calc(72 * var(--u))}
  #contact{--ct:44;--cb:30;margin-top:calc(56 * var(--u))}
  #thanks{margin-top:calc(64 * var(--u))}
}

/* shared reveal: elements tagged .rv ease in when their section arrives */
.rv{opacity:0;transform:translateY(calc(18 * var(--u)));
  transition:opacity .9s ease var(--rd,0s),transform 1.1s cubic-bezier(.16,.84,.3,1) var(--rd,0s)}
.rv.rv-r{transform:translateX(calc(24 * var(--u)))}
.rv.rv-s{transform:scale(.6)}
.in .rv{opacity:1;transform:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shared hand-drawn bits */
.doodle{position:absolute;pointer-events:none;overflow:visible;fill:none;stroke:#1C150C;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.handnote{position:absolute;font-family:var(--hand);color:#20170D;font-weight:500;
  white-space:nowrap;pointer-events:none}

/* doodles draw themselves in when their section arrives */
.draw{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 1.25s cubic-bezier(.65,.05,.25,1) var(--dd,.3s)}
.in .draw,html:not(.boot) #hero .draw{stroke-dashoffset:0}

/* hand-written notes breathe, a few pixels, out of step with each other */
.handnote{animation:breathe 5.5s ease-in-out infinite alternate}
.handnote:nth-of-type(2n){animation-duration:6.8s;animation-delay:-2s}
.handnote:nth-of-type(3n){animation-duration:7.6s;animation-delay:-4s}
@keyframes breathe{from{translate:0 0}to{translate:calc(1.5 * var(--u)) calc(-3.5 * var(--u))}}


@media (prefers-reduced-motion:reduce){
  .draw{stroke-dashoffset:0;transition:none}
  .handnote{animation:none}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

/* the hero's foreground plant: pinned to the bottom-left of the screen so it
   carries across the hero into About, then sinks away (js/hero.js) */
.plant-fx{position:fixed;left:0;bottom:0;width:0;height:0;z-index:5;pointer-events:none}
.plant-fx .plant{position:absolute;left:calc(-30 * var(--u));bottom:calc((var(--lift, 0) - var(--sink, 0)) * 1px);
  width:calc(430 * var(--u));max-width:none;height:auto;transform-origin:-27.91% 101.40%;will-change:transform;
  filter:drop-shadow(calc(16 * var(--u)) calc(10 * var(--u)) calc(16 * var(--u)) rgba(70,50,22,.13))}
@media (max-width:860px){
  /* phones: same pinned-then-sink behaviour as desktop, just a smaller plant */
  .plant-fx .plant{left:calc(-56 * var(--u));width:calc(196 * var(--u))}
}

/* ================= scroll motion (js/scrollfx.js) ================= */
/* headings: letters rise out of a mask, one after another */
.fx .fx-split .fx-w{display:inline-block;white-space:nowrap;overflow:clip;overflow-clip-margin:.18em;
  padding:0 .04em;margin:0 -.04em;vertical-align:top}
.fx .fx-split .fx-c{display:inline-block;translate:0 115%;rotate:9deg;transform-origin:0 100%;
  transition:translate 1.05s cubic-bezier(.16,.9,.3,1) calc(var(--k) * 32ms + .12s),
             rotate 1.05s cubic-bezier(.16,.9,.3,1) calc(var(--k) * 32ms + .12s)}
.fx .fx-on .fx-split .fx-c{translate:0 0;rotate:0deg}
/* labels wipe in from the left */
.fx .fx-eye{clip-path:inset(-30% 100% -30% 0);transition:clip-path 1s cubic-bezier(.65,.05,.25,1) .05s,
  opacity .9s ease,transform 1.1s cubic-bezier(.16,.84,.3,1)}
.fx .fx-on .fx-eye{clip-path:inset(-30% -4% -30% 0)}
/* body copy pulls into focus, word by word */
.fx .fx-words .fx-word{display:inline-block;opacity:0;filter:blur(6px);translate:0 .45em;
  transition:opacity .7s ease calc(var(--k) * 22ms + .35s),filter .8s ease calc(var(--k) * 22ms + .35s),
             translate .9s cubic-bezier(.16,.84,.3,1) calc(var(--k) * 22ms + .35s)}
.fx .fx-on .fx-words .fx-word{opacity:1;filter:blur(0);translate:0 0}
/* rules draw across */
.fx .fx-line{scale:0 1;transform-origin:0 50%;transition:scale 1.2s cubic-bezier(.65,.05,.25,1) .3s}
.fx .fx-on .fx-line{scale:1 1}
/* polaroids are tossed onto the table */
.fx .fx-toss{opacity:0;scale:.82;rotate:calc(-14deg + var(--k) * 12deg);
  transition:opacity .6s ease calc(var(--k) * 140ms + .2s),
             scale 1.1s cubic-bezier(.3,1.35,.5,1) calc(var(--k) * 140ms + .2s),
             rotate 1.2s cubic-bezier(.3,1.25,.5,1) calc(var(--k) * 140ms + .2s)}
.fx .fx-on .fx-toss{opacity:1;scale:1;rotate:0deg}
/* work prints drop onto their pegs */
.fx .fx-drop{opacity:0;translate:0 calc(-70 * var(--u));rotate:-6deg;transform-origin:50% 0;
  transition:opacity .5s ease calc(var(--i) * 110ms + .25s),
             translate 1.1s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * 110ms + .25s),
             rotate 1.5s cubic-bezier(.3,1.6,.45,1) calc(var(--i) * 110ms + .25s)}
.fx .fx-on .fx-drop{opacity:1;translate:0 0;rotate:0deg}
/* 3D scenes settle in */
.fx .fx-scene{scale:.9;transition:scale 1.6s cubic-bezier(.16,.84,.3,1) .1s}
.fx .fx-on .fx-scene{scale:1}
/* small things rise in turn */
.fx .fx-up{opacity:0;translate:0 calc(14 * var(--u));
  transition:opacity .7s ease calc(var(--k) * 90ms + .5s),translate .9s cubic-bezier(.16,.84,.3,1) calc(var(--k) * 90ms + .5s)}
.fx .fx-on .fx-up{opacity:1;translate:0 0}
/* the same transitions, merged with the ones these elements already carry */
.fx #about .print.fx-toss{transition:box-shadow .45s ease,opacity .6s ease calc(var(--k) * 140ms + .2s),
  scale 1.1s cubic-bezier(.3,1.35,.5,1) calc(var(--k) * 140ms + .2s),rotate 1.2s cubic-bezier(.3,1.25,.5,1) calc(var(--k) * 140ms + .2s)}
.fx #work .ln-paper.fx-drop{transition:transform .45s cubic-bezier(.2,.8,.3,1),box-shadow .45s ease,
  opacity .5s ease calc(var(--i) * 110ms + .25s),translate 1.1s cubic-bezier(.3,1.4,.5,1) calc(var(--i) * 110ms + .25s),
  rotate 1.5s cubic-bezier(.3,1.6,.45,1) calc(var(--i) * 110ms + .25s)}
.fx #gl-about.fx-scene{transition:opacity .8s ease,scale 1.6s cubic-bezier(.16,.84,.3,1) .1s}
.fx #gl-services.fx-scene,.fx #gl-process.fx-scene,.fx #gl-contact.fx-scene{
  transition:opacity .9s ease .1s,scale 1.6s cubic-bezier(.16,.84,.3,1) .1s}
/* handwriting writes itself on */
.fx .fx-write{clip-path:inset(-25% 100% -25% -12%);
  transition:clip-path 1.5s cubic-bezier(.55,.1,.35,1) calc(var(--k) * 180ms + .7s),opacity .9s ease,transform 1.1s cubic-bezier(.16,.84,.3,1)}
.fx .fx-on .fx-write{clip-path:inset(-25% -12% -25% -12%)}
/* threads, tally marks and the work string draw themselves */
.fx .fx-path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s cubic-bezier(.65,.05,.25,1) .25s}
.fx .fx-on .fx-path{stroke-dashoffset:0}
.fx #work .fx-path{transition-duration:2.2s;transition-delay:.1s}
/* work pegs pop onto the string */
.fx #work .peg{scale:0;transition:scale .6s cubic-bezier(.3,1.7,.5,1) calc(var(--i) * 110ms + .15s)}
.fx #work.fx-on .peg{scale:1}
/* the services card lands like a pinned sheet, then the tape slaps on */
.fx #services .card.fx-land{opacity:0;rotate:-5deg;scale:1.06;translate:0 calc(-26 * var(--u));
  transition:opacity .6s ease .15s,rotate 1.2s cubic-bezier(.3,1.3,.5,1) .15s,scale 1.1s cubic-bezier(.3,1.3,.5,1) .15s,
             translate 1.1s cubic-bezier(.3,1.3,.5,1) .15s}
.fx #services.fx-on .card.fx-land{opacity:1;rotate:0deg;scale:1;translate:0 0}
.fx #services .tape{opacity:0;scale:1.7;transition:opacity .25s ease .95s,scale .45s cubic-bezier(.2,1.5,.4,1) .95s}
.fx #services.fx-on .tape{opacity:1;scale:1}
/* children arriving in turn */
.fx .fx-stagger > *{opacity:0;translate:0 calc(16 * var(--u));
  transition:opacity .6s ease,translate .9s cubic-bezier(.16,.84,.3,1)}
.fx .fx-on .fx-stagger > *{opacity:1;translate:0 0}
.fx .fx-stagger > :nth-child(1){transition-delay:.45s}  .fx .fx-stagger > :nth-child(2){transition-delay:.53s}
.fx .fx-stagger > :nth-child(3){transition-delay:.61s}  .fx .fx-stagger > :nth-child(4){transition-delay:.69s}
.fx .fx-stagger > :nth-child(5){transition-delay:.77s}  .fx .fx-stagger > :nth-child(6){transition-delay:.85s}
.fx .fx-stagger > :nth-child(7){transition-delay:.93s}  .fx .fx-stagger > :nth-child(n+8){transition-delay:1s}
.fx #services .list.fx-stagger > *{transition-delay:.9s}
.fx #services .list.fx-stagger > :nth-child(2){transition-delay:.98s} .fx #services .list.fx-stagger > :nth-child(3){transition-delay:1.06s}
.fx #services .list.fx-stagger > :nth-child(4){transition-delay:1.14s}
/* the big step number rises out of its own baseline */
.fx #process .bignum.fx-rise{clip-path:inset(100% -5% -5% -5%);
  transition:clip-path 1.3s cubic-bezier(.65,.05,.25,1) .35s,opacity .35s ease,transform .6s cubic-bezier(.2,.8,.3,1)}
.fx #process.fx-on .bignum.fx-rise{clip-path:inset(-5% -5% -5% -5%)}
.fx #work .btn.fx-up{transition:background-color .34s ease,border-color .34s ease,color .34s ease,
  opacity .7s ease calc(var(--k) * 90ms + .5s),translate .9s cubic-bezier(.16,.84,.3,1) calc(var(--k) * 90ms + .5s)}
.fx #contact .form.fx-stagger > .send{transition:transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease,background .35s ease,
  opacity .6s ease .77s,translate .9s cubic-bezier(.16,.84,.3,1) .77s}

/* ---- dashboard hooks ----
   brand colours set in the dashboard reach the inline wordmark too */
svg [fill="#644026"]{fill:var(--brand-brown,#644026)}
svg [fill="#D6794F"]{fill:var(--brand-dot,#D6794F)}
/* an uploaded wordmark keeps its own proportions inside the space the built-in one uses */
.cms-mark #hero .mark svg{max-height:calc(159 * var(--u))}
.cms-mark .logo svg{max-height:calc(37 * var(--u))}