/* One character, from room-scale scenes to small guided moments. */
.site-character{position:relative;flex:none;width:var(--character-size,180px);max-width:100%;aspect-ratio:1;pointer-events:none;user-select:none;isolation:isolate}
.site-character img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;max-height:none;margin:0;object-fit:contain}
.site-character .character-dark{display:none}
html[data-theme=night] .site-character .character-light{display:none}
html[data-theme=night] .site-character .character-dark{display:block}
.character-heading{display:flex;align-items:center;justify-content:center;gap:12px;max-width:100%;margin:0 0 22px}
.character-heading-copy{text-align:center;min-width:0}
html[data-theme] main .character-heading h2{margin:0 0 18px}
html[data-theme] main .character-heading p{margin:0}
.character-work{--character-size:185px}
.character-workbench{--character-size:290px}
.character-sidequest{--character-size:150px}
#services .bench-character-heading,#playground .quest-character-heading{margin:0}
.character-monitor{position:absolute;left:67.5%;top:27.25%;width:23%;height:15.5%;display:grid;place-items:center;background:#f2f2f2;color:#fa6771;border-radius:1px;opacity:0;transition:opacity .2s ease}
.character-monitor svg{position:static;inset:auto;width:47%;height:75%;max-width:100%;max-height:100%;margin:0;transform:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bench-character-heading h2{text-transform:none}
.character-workbench[data-screen] .character-monitor{opacity:1}
html[data-theme=night] .character-monitor{background:#1b2230}
.about-portrait{position:relative}
.character-about{--character-size:135px;margin:6px auto -24px}
.contact-invite{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;gap:24px;text-align:left}
.character-contact{--character-size:205px;margin:-22px 0 -8px}
.character-document{--character-size:175px;float:right;margin:-16px -12px 8px 22px}
.resume-document .resume-headline{clear:both}
.character-future{--character-size:210px;margin:0 auto 16px}
.site-character.character-entered{animation:character-arrive .65s cubic-bezier(.16,1,.3,1) both}
@keyframes character-arrive{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(min-width:1000px){
 .hero-dude-img{height:clamp(285px,22.5vw,330px);max-height:330px;max-width:400px}
 .entry-dude-link:hover .hero-dude-img{filter:drop-shadow(0 9px 26px rgba(77,93,122,.16))}
}
@media(min-width:769px) and (max-width:999px){.hero-dude-img{height:215px;max-height:215px}}
@media(min-width:769px) and (max-width:999px) and (max-height:500px){.hero-dude-img{height:160px;max-height:160px}}
@media(min-width:1000px) and (max-height:740px){.hero-dude-img{height:285px}.character-workbench{--character-size:245px}.character-work{--character-size:155px}.character-heading{margin-bottom:14px}.character-contact{--character-size:160px}}
@media(max-width:768px){
 .character-heading{gap:4px;margin-bottom:16px}
 .character-work{--character-size:90px}
 .character-workbench{--character-size:140px}
 .character-sidequest{--character-size:85px}
 html[data-theme] main .character-heading h2{margin-bottom:12px;font-size:24px;padding:12px 16px}
 .character-heading-copy{max-width:calc(100% - 85px)}
 .bench-character-heading .character-heading-copy{max-width:calc(100% - 140px)}
 .character-about{--character-size:90px;margin:0 auto -18px}
 .character-contact{--character-size:115px;margin:0 -8px 0 0}
 .contact-invite{gap:8px}
 .contact-invite-copy{min-width:0}
 .contact-invite h3{font-size:clamp(23px,5vw,28px)}
 .character-document{--character-size:100px;margin:-6px -8px 0 10px}
 .character-future{--character-size:145px;margin-bottom:10px}
}
@media(max-width:380px){
 .character-workbench{--character-size:100px}
 .bench-character-heading .character-heading-copy{max-width:calc(100% - 100px)}
 html[data-theme] main .character-heading h2{font-size:21px;padding:11px 12px}
 .character-contact{--character-size:90px}
 .character-document{--character-size:74px;margin-left:4px}
}
@media(prefers-reduced-motion:reduce){.site-character.character-entered{animation:none}.character-monitor{transition:none}}
html[data-motion=reduce] .site-character.character-entered{animation:none}
html[data-motion=reduce] .character-monitor{transition:none}
@media print{.site-character{display:none!important}}

/* The stronger composition is the production scale. */
.character-work{--character-size:232px}.character-workbench{--character-size:363px}.character-sidequest{--character-size:188px}
.character-about{--character-size:170px}.character-contact{--character-size:256px}.character-document{--character-size:220px}.character-future{--character-size:263px}
@media(min-width:769px) and (max-width:999px){.character-workbench{--character-size:310px}}
@media(min-width:1000px) and (max-height:740px){.character-workbench{--character-size:300px}.character-work{--character-size:200px}.character-contact{--character-size:220px}}
@media(max-width:768px){
 .character-work{--character-size:125px}.character-workbench{--character-size:195px}.character-sidequest{--character-size:120px}
 .character-about{--character-size:125px}.character-contact{--character-size:150px}.character-document{--character-size:135px}.character-future{--character-size:190px}
 .character-heading-copy{max-width:calc(100% - 125px)}.bench-character-heading .character-heading-copy{max-width:calc(100% - 195px)}
 .bench-character-heading{flex-direction:column;gap:0}.bench-character-heading .character-heading-copy{max-width:100%}
 .character-workbench{margin-block:-12px -8px}
}
@media(max-width:380px){.character-work{--character-size:105px}.character-contact{--character-size:115px}.character-document{--character-size:100px}.character-heading-copy{max-width:calc(100% - 105px)}}