/* The sum — "idea + studio + me = company" — moved here from the homepage when the
   homepage became just the door. Same drawing, but on a+ it plays once when it scrolls
   into view (assets/aplus.js drives --k over time) instead of being pinned to the scroll.
   Every selector is scoped under .sum; its handwritten notes are .nt, not .lbl, because
   .lbl is a+'s label style. */
.sum{position:relative;--es:1;--paper:#F3EFE6;--mute:#5b5852;background:var(--paper);color:var(--ink)}
.sum .mono{font-family:'Geist',system-ui,sans-serif;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.sum .scene{background:var(--paper);display:flex;align-items:center;justify-content:center}
.sum .sk{position:absolute;left:40px;top:120px;margin:0;color:var(--mute);--k:0;opacity:var(--k)}
.sum .sk b,.sum .k b{color:var(--acc);font-weight:500;margin-right:10px}
.sum .eq{position:relative;display:flex;align-items:baseline;gap:.28em;white-space:nowrap;font:italic 600 148px/1 'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 60;letter-spacing:-.03em;transform:scale(var(--es));transform-origin:center;margin-top:-70px}
.sum .brk{display:none}
.sum .tm{position:relative;display:inline-block;--k:0}
.sum .w{display:inline-block;clip-path:inset(-20% calc((1 - var(--k)) * 100%) -20% 0);transform:translateY(calc((1 - var(--k)) * .12em))}
.sum .op{--k:0;display:inline-block;color:var(--acc);font-style:normal;font-weight:500;font-size:.75em;position:relative;top:-.06em;transform:scale(var(--k)) rotate(calc((1 - var(--k)) * -90deg))}
.sum .hand{font-family:'Caveat',cursive;font-weight:700;font-style:normal;letter-spacing:0}
.sum .mk{--k:0;position:absolute;overflow:visible;fill:none;stroke:var(--acc);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sum .mk path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--k));opacity:clamp(0,calc(var(--k) * 30),1);transition:stroke-width .3s}
.sum .mk.m{display:none}
.sum .nt{--k:0;position:absolute;white-space:nowrap;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 10px)) rotate(var(--r,-4deg));pointer-events:none}
.sum .roll{--k:0;position:absolute;left:6px;top:calc(100% + 4px);height:1.2em;overflow:hidden;font:700 36px/1.2 'Caveat',cursive;letter-spacing:0;color:var(--mute);font-style:normal;opacity:var(--k);pointer-events:none}
.sum .rl{display:flex;flex-direction:column;animation:roll 16s cubic-bezier(.7,0,.2,1) infinite}
.sum .rl i{display:block;height:1.2em;font-style:normal}
@keyframes roll{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(-1.2em)}50%,68%{transform:translateY(-2.4em)}75%,93%{transform:translateY(-3.6em)}100%{transform:translateY(-4.8em)}}
.sum .ul{left:-2%;top:90%;width:104%;height:22px}
.sum .la{left:-30px;top:calc(100% + 40px);font:700 50px/1 'Caveat',cursive;color:var(--acc);--r:-6deg}
.sum .ara{left:34px;top:calc(100% + 2px);width:72px;height:44px}
.sum .circ{left:-14%;top:-16%;width:128%;height:132%}
.sum .circ2{left:-18%;top:-22%;width:136%;height:144%;stroke-width:2.5;opacity:.85}
.sum .circ2 path{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s cubic-bezier(.7,0,.3,1) .1s,opacity .2s .1s,stroke-width .3s}
.sum.open .circ2 path{stroke-dashoffset:0;opacity:1}
.sum .lb{right:-112px;top:-66px;font:700 58px/1 'Caveat',cursive;color:var(--acc);--r:-8deg}
.sum .arb{right:-44px;top:-30px;width:72px;height:43px}
.sum .me .w{transition:color .35s}
.sum .me:hover .w,.sum .me:focus-visible .w{color:var(--acc)}
.sum .me:hover .circ path{stroke-width:4.5}
.sum .res{position:absolute;right:-.15em;top:1.22em;display:flex;align-items:center;gap:18px}
.sum .res .arc{position:static;width:84px;height:50px;flex:0 0 auto}
.sum .res .arc path{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .9s cubic-bezier(.7,0,.3,1),opacity .2s}
.sum.open .res .arc path{stroke-dashoffset:0;opacity:1}
.sum .ans{font:700 110px/1 'Caveat',cursive;color:#3a3630;font-style:normal;clip-path:inset(-15% 100% -15% 0);transition:clip-path 1s cubic-bezier(.7,0,.3,1) .35s,color .35s}
.sum.open .ans{clip-path:inset(-15% -6% -15% 0)}
.sum .me:hover ~ .res .ans{color:var(--acc)}
.sum .what,.sum .who{position:absolute;bottom:44px;margin:0;--k:0;opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 16px));font:400 17px/1.55 'Geist',sans-serif}
.sum .what{left:40px;max-width:520px;color:#3a3630;text-wrap:balance}
.sum .what p{margin:0}
/* The page explains a+ here and then, until now, offered nothing to click. This is the only
   labelled route to the studio between the hero and the footer. */
.sum .seeap{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:11px 20px;border-radius:999px;background:var(--acc);color:#fff;font:500 15px/1 'Geist',sans-serif;transition:transform .5s cubic-bezier(.34,1.56,.64,1),box-shadow .4s}
.sum .seeap:hover{transform:scale(1.05) rotate(-2deg);box-shadow:0 14px 32px -12px rgba(255,61,0,.75)}
.sum .what strong{color:var(--ink);font-weight:500}
.sum .what b{color:var(--acc);font-weight:500}
.sum .who{right:40px;max-width:400px;text-align:right;color:var(--mute)}
.sum .who .rk{vertical-align:-.42em;color:var(--acc);margin-left:.1em;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.sum .who:hover .rk{transform:translate(3px,-3px)}
/* a+ is not pinned: the scene is one screen that the section sits in */
.sum{height:auto}
.sum .scene{position:relative;min-height:min(100vh,860px);padding:150px 40px 230px;display:flex;align-items:center;justify-content:center;overflow:hidden}
@media (max-width:767px){
  .sum{height:auto}
  .sum .scene{position:relative;height:auto;min-height:0;flex-direction:column;justify-content:flex-start;align-items:stretch;padding:110px 20px 90px}
  .sum .sk{position:static;margin:0 0 44px;--k:1}
  .sum .eq{flex-wrap:wrap;column-gap:.24em;row-gap:.95em;font-size:52px;margin-top:0;padding-top:0;transform:none;white-space:nowrap}
  .sum .tm,.sum .op{--k:1}
  .sum .mk{--k:0}
  .sum .mk path{transition:stroke-dashoffset 1s cubic-bezier(.7,0,.3,1) var(--md,0s),opacity .2s var(--md,0s)}
  .sum.go .mk{--k:1}
  .sum .ul{--md:.05s}.sum .ara{--md:.3s}.sum .circ{--md:.15s}.sum .arb{--md:.4s}
  .sum .nt{--k:0;transition:opacity .6s var(--md,.5s),transform .8s cubic-bezier(.16,1,.3,1) var(--md,.5s)}
  .sum.go .nt{--k:1}
  .sum .la{--md:.5s}.sum .lb{--md:.6s}
  .sum .roll{--k:0;transition:opacity .6s .25s}
  .sum.go .roll{--k:1}
  .sum .brk{display:block;flex-basis:100%;height:0}
  .sum .mk{stroke-width:2.5}
  .sum .mk.d{display:none}
  .sum .mk.m{display:block}
  .sum .roll{left:3px;font-size:23px}
  .sum .ul{height:8.5px}
  .sum .la{left:34px;top:-56px;font-size:32px}
  .sum .ara{left:56px;top:-28px;width:40px;height:24px}
  .sum .lb{right:auto;left:-4px;top:calc(100% + 34px);font-size:34px;--r:-6deg}
  .sum .arb{right:auto;left:36px;top:calc(100% + 4px);width:26px;height:30px}
  .sum .me:active .w{color:var(--acc)}
  .sum .res{position:static;flex-basis:auto;display:inline-flex;align-items:baseline;gap:0;margin:0 0 0 .12em}
  .sum .res .arc{display:none}
  .sum .ans{font-size:1.08em;line-height:1;transition-delay:.1s}
  .sum .what,.sum .who{position:static;max-width:none;text-align:left;font-size:17px;--k:1;opacity:1;transform:none}
  .sum .what{margin-top:112px}
  .sum .who{margin-top:18px;font-size:11px;line-height:1.8}
}
@media (prefers-reduced-motion:reduce){
  .sum [data-at]{--k:1!important}
  .sum .rl{animation:none}
  .sum .circ2 path,.sum .res .arc path,.sum .ans{transition:none}
}