@font-face{font-family:'Caveat';font-weight:500;font-display:swap;src:url(assets/fonts/caveat-500.woff2) format('woff2')}
body{padding-bottom:96px}
main{padding-top:28px}
nav[aria-label="Main navigation"]{position:fixed;z-index:60;bottom:calc(16px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:auto;min-width:200px;display:flex;flex-direction:column-reverse;padding:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border-radius:26px;background:var(--ink);box-shadow:0 10px 30px rgba(30,32,44,.3)}
@media(min-width:651px){nav[aria-label="Main navigation"]{bottom:24px;font-size:12px;min-width:208px}}
nav[aria-label="Main navigation"] a{position:relative;opacity:1;display:none;color:rgba(243,245,249,.6);text-align:left;padding:14px 20px 14px 34px;line-height:1;background:repeating-linear-gradient(90deg,currentColor 0 4px,transparent 4px 8px) 34px calc(100% - 7px)/0 1px no-repeat;transition:color .2s,background-size .35s cubic-bezier(.2,.8,.2,1),transform .2s}
nav[aria-label="Main navigation"] a::before{font-size:9px;letter-spacing:.06em;opacity:.55;margin-right:10px;transition:color .2s,opacity .2s}
nav[aria-label="Main navigation"] a:nth-child(1)::before{content:"01"}
nav[aria-label="Main navigation"] a:nth-child(2)::before{content:"02"}
nav[aria-label="Main navigation"] a:nth-child(3)::before{content:"03"}
nav[aria-label="Main navigation"] a[aria-current="page"]{order:-1;display:flex;align-items:center;color:#fff;padding-left:20px;background-position:20px calc(100% - 7px)}
nav[aria-label="Main navigation"] a[aria-current="page"]::after{content:"";margin-left:auto;width:34px;height:6px;background:radial-gradient(circle,rgba(255,255,255,.4) 2.5px,transparent 3px) 0 0/12px 6px repeat-x}
nav[aria-label="Main navigation"].open a{display:flex}
nav[aria-label="Main navigation"].open a[aria-current="page"]{padding-left:34px;background-position:34px calc(100% - 7px)}
nav[aria-label="Main navigation"].open a[aria-current="page"]::after{background:radial-gradient(circle,#ff5818 3px,transparent 3.5px) 0 0/12px 6px repeat-x}
/* ruler hashes down the left edge */
nav[aria-label="Main navigation"]::before{content:"";position:absolute;left:12px;top:16px;bottom:16px;width:9px;pointer-events:none;opacity:0;color:rgba(255,255,255,.45);background:repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 7px) 0 0/6px 100% no-repeat,repeating-linear-gradient(180deg,currentColor 0 1px,transparent 1px 28px) 0 0/10px 100% no-repeat}
nav[aria-label="Main navigation"].open::before{opacity:1;animation:nav-ruler .55s .1s cubic-bezier(.3,.7,.2,1) both}
/* opening: rows rise out of the pill, staggered */
nav[aria-label="Main navigation"].open{animation:nav-grow .5s cubic-bezier(.2,.8,.2,1)}
nav[aria-label="Main navigation"].open a:not([aria-current]){animation:nav-row .38s calc(var(--d,0)*1s) cubic-bezier(.2,.9,.25,1) both}
@keyframes nav-marks{0%{opacity:0;transform:scale(1.35)}60%{opacity:1}100%{opacity:1;transform:scale(1)}}
@keyframes nav-ruler{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes nav-row{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes nav-grow{from{clip-path:inset(var(--cut,60%) 0 0 0 round 26px)}to{clip-path:inset(0 0 0 0 round 26px)}}
@media(hover:hover){
nav[aria-label="Main navigation"] a:hover{color:#fff;font-weight:700;background-size:calc(100% - 56px) 1px;transform:translateX(3px)}
nav[aria-label="Main navigation"] a[aria-current="page"]:hover{background-size:calc(100% - 40px) 1px}
nav[aria-label="Main navigation"].open a[aria-current="page"]:hover{background-size:calc(100% - 54px) 1px}
nav[aria-label="Main navigation"] a:hover::before{color:#ff5818;opacity:1}
}
@media(prefers-reduced-motion:reduce){nav[aria-label="Main navigation"],nav[aria-label="Main navigation"] *,nav[aria-label="Main navigation"]::before,nav[aria-label="Main navigation"]::after{animation:none!important;transition:none!important}}
/* ---- loose, handwritten layer ---- */
nav[aria-label="Main navigation"] a,nav[aria-label="Main navigation"] a:hover{background:none!important}
nav[aria-label="Main navigation"] a::before{font-family:'Bradley Hand','Segoe Print','Noteworthy','Chalkboard SE','Comic Sans MS',cursive;font-size:12px;letter-spacing:0;opacity:.7}
nav[aria-label="Main navigation"] .pen{position:absolute;left:20px;right:20px;bottom:4px;height:9px;overflow:visible;pointer-events:none}
nav[aria-label="Main navigation"].open a .pen{left:34px}
nav[aria-label="Main navigation"] .pen path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;opacity:.9;transition:stroke-dashoffset .5s cubic-bezier(.3,.7,.2,1)}
nav[aria-label="Main navigation"] .note{position:absolute;left:calc(100% + 16px);top:50%;display:flex;align-items:center;gap:6px;white-space:nowrap;pointer-events:none;color:#3c3c48;font:400 17px/1 'Bradley Hand','Segoe Print','Noteworthy','Chalkboard SE','Comic Sans MS',cursive;letter-spacing:0;text-transform:none;text-shadow:0 0 4px #fff,0 0 2px #fff,0 0 8px rgba(255,255,255,.9);transform:translateY(-50%) rotate(-3deg);clip-path:inset(-8px 100% -8px 0);transition:clip-path .55s cubic-bezier(.3,.7,.2,1)}
nav[aria-label="Main navigation"] .note svg{width:26px;height:16px;flex:none;overflow:visible}
nav[aria-label="Main navigation"] .note svg path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){
nav[aria-label="Main navigation"] a:hover .pen path{stroke-dashoffset:0}
nav[aria-label="Main navigation"] a:hover .note{clip-path:inset(-8px -12px -8px 0)}
}
@media(hover:none){nav[aria-label="Main navigation"].open a[aria-current="page"] .note{clip-path:inset(-8px -12px -8px 0);transition-delay:.4s}nav[aria-label="Main navigation"].open a[aria-current="page"] .pen path{stroke-dashoffset:0;transition-delay:.45s}}
@media(max-width:650px){nav[aria-label="Main navigation"] .note{white-space:normal;width:84px;font-size:15px;line-height:1.05;left:calc(100% + 10px)}nav[aria-label="Main navigation"] .note svg{display:none}}
nav[aria-label="Main navigation"] .pen path{opacity:0;transition:stroke-dashoffset .5s cubic-bezier(.3,.7,.2,1),opacity .15s}
@media(hover:hover){nav[aria-label="Main navigation"] a:hover .pen path{opacity:.9}}
@media(hover:none){nav[aria-label="Main navigation"].open a[aria-current="page"] .pen path{opacity:.9}}
nav[aria-label="Main navigation"] .note{background:#fff;padding:5px 10px 4px;border-radius:3px;text-shadow:none;box-shadow:0 2px 8px rgba(30,32,44,.18)}

nav[aria-label="Main navigation"] .note{font:500 21px/1 'Caveat',cursive;padding:4px 11px 3px}
nav[aria-label="Main navigation"] a::before{font-family:'Caveat',cursive;font-size:15px}
nav[aria-label="Main navigation"] .note svg{width:30px;height:18px}
@media(max-width:650px){nav[aria-label="Main navigation"] .note{font-size:18px}}
nav[aria-label="Main navigation"] .note{display:none!important}
/* closing */
nav[aria-label="Main navigation"].open.closing{animation:nav-shrink .34s cubic-bezier(.4,0,.2,1) forwards}
nav[aria-label="Main navigation"].open.closing a:not([aria-current]){animation:nav-row-out .24s cubic-bezier(.4,0,1,1) both}
nav[aria-label="Main navigation"].open.closing::before{animation:nav-ruler-out .3s cubic-bezier(.4,0,.6,1) both}
@keyframes nav-shrink{from{clip-path:inset(0 0 0 0 round 26px)}to{clip-path:inset(var(--cut,60%) 0 0 0 round 26px)}}
@keyframes nav-row-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(14px)}}
@keyframes nav-ruler-out{from{clip-path:inset(0)}to{clip-path:inset(100% 0 0 0)}}