/* V2.1: a persistent menu and a restrained response to scrolling. */
.header{position:sticky;top:0;background:var(--yellow);isolation:isolate}
.header.is-scrolled{box-shadow:0 5px 22px #1b20230d}
.header nav a{position:relative;min-height:44px;display:inline-flex;align-items:center}
.header nav a::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.header nav a[aria-current="location"]::after{transform:scaleX(1)}
.header nav a:hover{text-decoration:none}
.reading-line{position:absolute;bottom:-1px;left:0;width:100%;height:2px;background:#7152b0;transform:scaleX(0);transform-origin:left;pointer-events:none}
html{scroll-padding-top:112px}
.section-sketch{display:inline-block;position:relative;width:76px;height:76px;flex:none;pointer-events:none;vertical-align:middle}
.section-sketch>svg,.section-sketch-player{position:absolute;inset:0;width:100%;height:100%}
.section-sketch.is-ready>svg{visibility:hidden}
.sketch-label{display:flex;align-items:center;gap:24px}
.tools .eyebrow{display:flex;align-items:center;gap:24px}
.tools .section-sketch{width:60px;height:60px;margin:-20px 0}
@keyframes jona-scroll-enter{from{transform:translateY(16px);opacity:.82}to{transform:translateY(0);opacity:1}}
html[data-motion="on"] .motion-enter{animation-name:jona-scroll-enter;animation-duration:1s;animation-delay:var(--enter-delay,0ms)}
.work-grid>.project:nth-child(3),.tool-row:nth-child(2){--enter-delay:90ms}
.tool-row:nth-child(3){--enter-delay:180ms}
html[data-motion="on"] .section-sketch{transform:translateY(var(--sketch-drift,0px))}
@media(max-width:1050px) and (min-width:721px){.header nav{gap:14px;font-size:12px}.hello{gap:16px;padding:12px 15px}}
@media(max-width:720px){html{scroll-padding-top:100px}.header #mobile-nav{max-height:calc(100dvh - 76px);overflow-y:auto}.header #mobile-nav a{width:fit-content}.section-sketch{width:62px;height:62px}.tools .section-sketch{width:48px;height:48px;margin:-14px 0}.sketch-label{gap:18px}}
@media(prefers-reduced-motion:reduce){.section-sketch{transform:none!important}.reading-line{transition:none}}

/* Deliberately visible status for the current personal website. */
.hero-heading-note{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:18px}
.hero-heading-note .eyebrow{margin:0}
.work-in-progress{display:inline-block;padding:9px 12px;background:var(--ink);color:var(--yellow);font-size:clamp(12px,1vw,16px);font-weight:900;letter-spacing:.02em;line-height:1.2;transform:rotate(-3deg);border:1px solid var(--ink);box-shadow:3px 3px 0 var(--paper)}
@media(max-width:720px){.hero-heading-note{gap:12px;margin-bottom:20px}.work-in-progress{font-size:12px;padding:8px 10px}}