@font-face{font-family:"Neue Haas Display";src:url(/assets/artist/fonts/NeueHaasDisplayLight.woff2) format("woff2");font-weight:300;font-display:swap}
/* Über page */
.about-page{display:flex;flex-direction:column;justify-content:space-between;align-self:stretch}
.about-content{display:flex;align-items:flex-start;gap:32px;align-self:stretch}
.ab-col{flex:1 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.ab-col--flip{align-items:flex-end;text-align:right}
.about-title{font:500 20px/121.1% var(--sans);color:#000}
.about-text{font:400 16px/140% var(--sans);color:#000;max-width:300px;overflow-wrap:anywhere}
.about-text li{display:block}

.about-footer{position:relative;display:flex;flex-direction:column;align-items:stretch;align-self:stretch;margin-top:80px}
.about-footer-content{display:flex;flex-direction:column;align-items:flex-start;gap:32px;width:100%}
.social-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px;position:relative;z-index:2}
.big-logo{position:relative;z-index:0;width:100%;display:flex;justify-content:center;align-items:center;user-select:none}
#big-name{display:block;font-family:"Neue Haas Display",var(--sans);font-weight:300;line-height:.9;white-space:nowrap;font-size:var(--big-size,18vw);letter-spacing:-.035em;color:#000;padding-bottom:.02em;margin-inline:-.04em}

/* photo trail that follows the cursor over the footer */
/* lives at document level (moved by JS) so stickers are never clipped by the footer */
.about-trail{display:none;position:absolute;left:0;top:0;width:100%;height:0;z-index:1;pointer-events:none;overflow:visible}
.trail-item{position:absolute;width:min(4.45vw,64px);height:min(4.45vw,64px);object-fit:contain;transform-origin:50%;will-change:transform;pointer-events:none;user-select:none}

@media (min-width:801px){
  .about-page{justify-content:flex-start;min-height:0}
  .about-footer{flex:1 1 0;min-height:0;margin-top:0;overflow-x:visible;overflow-y:clip}
  .about-footer-content{flex:auto;justify-content:flex-end;min-height:0;padding-top:120px}
}
@media (min-width:801px) and (any-hover:hover){.about-trail{display:block}}
@media (min-width:481px) and (max-width:1099px){.about-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){
  .about-content{display:grid;grid-template-columns:minmax(0,1fr)}
  .ab-col--flip{align-items:flex-start;text-align:left}
}

/* hand drawn doodles, bottom right, sitting on the wordmark */
.doodles{position:absolute;right:clamp(-22px,-1.2vw,-8px);bottom:calc(var(--name-h,200px) * .5);transform-origin:50% 100%;width:min(clamp(170px,18vw,300px),calc(var(--doodle-h,360px) * .843));aspect-ratio:607/720;z-index:2;cursor:pointer;animation:doodle-boil .45s steps(1) infinite}
.doodle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:scale(.55) rotate(calc(var(--r) - 14deg));transition:transform .6s var(--spring),opacity .18s linear;pointer-events:none;user-select:none}
.doodle.is-on{opacity:1;transform:scale(1) rotate(var(--r))}
.doodle.is-out{opacity:0;transform:scale(.8) rotate(calc(var(--r) + 12deg));transition:transform .32s cubic-bezier(.87,0,.13,1),opacity .28s linear}
@keyframes doodle-boil{0%{translate:0 0;rotate:-.7deg}33%{translate:1px -1px;rotate:.5deg}66%{translate:-1px 1px;rotate:0deg}}
@media (max-width:800px){.doodles{width:76px;right:-8px}}
@media (prefers-reduced-motion:reduce){.doodles{animation:none}.doodle,.doodle.is-out{transition:opacity .4s linear;transform:rotate(var(--r))}}