/* Preview-only illustrated lettering; original About 291 CSS is untouched. */
.handwritten .nav .ink-label{display:block;position:relative;width:clamp(210px,27vw,360px);height:clamp(36px,4.6vw,62px);margin:0;font-size:0!important;letter-spacing:0;background-image:url('assets/rough-lettering-study.webp');background-repeat:no-repeat;background-size:100% 808.42%;mix-blend-mode:multiply;overflow:hidden}
.handwritten .nav{mix-blend-mode:multiply}
.handwritten .nav.hello .ink-label,.handwritten .nav.work .ink-label,.handwritten .nav.poke .ink-label{margin-left:auto}
.handwritten .nav .ink-0{background-position:50% 7.43%}
.handwritten .nav .ink-1{background-position:50% 28.6%}
.handwritten .nav .ink-2{background-position:50% 50.5%}
.handwritten .nav .ink-3{background-position:50% 72.2%}
.handwritten .nav .ink-4{background-position:50% 93.2%}
@media(max-width:650px){.handwritten .nav .ink-label{width:44vw;height:7.5vw}.handwritten .nav.hello .ink-label{width:42vw}.handwritten .nav span:not(.ink-label){font-size:11px}}
/* Optical alignment: compensate for each lettering row's blank image margins.
   Percentages track the label width, preserving size at every breakpoint. */
.handwritten .nav.about .ink-label{transform:translateX(-12.109375%)}
.handwritten .nav.stuff .ink-label{transform:translateX(-10.3515625%)}
.handwritten .nav.hello .ink-label{transform:translateX(15.91796875%)}
.handwritten .nav.work .ink-label{transform:translateX(10.7421875%)}
.handwritten .nav.poke .ink-label{transform:translateX(10.44921875%)}
/* Enlarge the avatar around its existing center without moving the navigation. */
.handwritten .portrait{transform:translateX(-50%) scale(1.3);transform-origin:50% 50%}
/* Move the enlarged portrait down about 5.5% of the cover height. */
.handwritten .portrait{margin-top:5.5svh}
/* Give the click response breathing room below the enlarged chin. */
.handwritten #reaction{top:89.5%;text-align:center}
@media(max-width:650px){.handwritten #reaction{top:80%}}

/* Show changing text instead of the static lettering sprite during interaction. */
.handwritten .nav.work.showing-role .title-main{background-image:none;font-size:clamp(19px,2.15vw,34px)!important;overflow:visible;transform:none;display:flex;align-items:center;justify-content:flex-end;white-space:nowrap;letter-spacing:0;min-width:0}
@media(max-width:650px){.handwritten .nav.work.showing-role .title-main{font-size:clamp(12px,3.1vw,20px)!important}}

/* Keep the mobile portrait clear of the two middle navigation labels. */
@media(max-width:650px){.handwritten .portrait{transform:translateX(-50%);margin-top:2svh}}
/* The cover is a fixed composition, not a hidden scroll container. */
.handwritten .cover{overflow:clip}