/* Menu icons and the mobile menu (loaded after the page stylesheet). */
.nav-ic{flex:none;width:28px;height:28px;overflow:visible}
.nav__link .nav-ic{margin-right:.5rem}
.nav__sublink{display:flex;align-items:center;gap:.85rem}
.nav__sublink .nav-ic{width:54px;height:54px;padding:9px;border-radius:15px;background:rgba(34,201,116,.12);border:1px solid rgba(34,201,116,.22)}
.nav__sublink .tile{flex:none}
.nav__menu{min-width:21.5rem}
.nav__menu--cols{min-width:41rem}
/* Menus of the later items open leftwards, so a wide menu never reaches past the page edge */
.nav__item:nth-child(n+4) .nav__menu{left:auto;right:0}
.nav__subtext{display:flex;flex-direction:column;min-width:0}
.nav__subtext .nav__subnote{display:block;margin:0}

/* Mobile menu */
.drawer__nav{padding:.75rem .75rem 1rem}
.drawer__list,.drawer__sub{list-style:none;margin:0;padding:0}
.drawer__list>li+li{margin-top:.25rem}
.drawer__link{display:flex;align-items:center;justify-content:flex-start;gap:.8rem;min-height:4rem;padding:0 .6rem;border-radius:16px;font-size:1.125rem;font-weight:700;color:inherit;text-decoration:none}
.drawer__link .nav-ic{width:50px;height:50px;padding:8px;border-radius:14px;background:rgba(34,201,116,.12);border:1px solid rgba(34,201,116,.22)}
.drawer__link:hover,.drawer__link:focus-visible{background:rgba(0,135,81,.08)}
.drawer__group>summary{list-style:none;cursor:pointer;user-select:none}
.drawer__group>summary::-webkit-details-marker{display:none}
.drawer__chev{flex:none;display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:rgba(0,135,81,.12);color:#008751;transition:transform .18s ease,background-color .18s ease}
.drawer__chev svg{width:16px;height:16px}
.drawer__group[open]{border-radius:16px;background:rgba(0,135,81,.07)}
.drawer__group[open]>summary{color:#008751}
.drawer__group[open] .drawer__chev{transform:rotate(180deg);background:#FFD21F;color:#0F1A15}
.drawer__sub{margin:.1rem .6rem .2rem 1.65rem;padding:.2rem 0 .7rem .7rem;border-left:2px solid rgba(0,135,81,.28)}
.drawer__sub a{display:flex;align-items:center;gap:.65rem;min-height:3.1rem;padding:0 .6rem;border-radius:11px;font-size:1rem;font-weight:500;color:inherit;text-decoration:none}
.drawer__sub a .nav-ic{width:34px;height:34px}
.drawer__sub a:hover,.drawer__sub a:focus-visible{background:rgba(0,135,81,.10)}
.drawer__sub a[aria-current=page]{background:rgba(255,210,31,.28);font-weight:700}
.drawer__sub .drawer__all{font-weight:700;color:#008751}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .drawer__group[open]>summary,:root:not([data-theme=light]) .drawer__sub .drawer__all,:root:not([data-theme=light]) .drawer__chev{color:#2EDC7A}}
:root[data-theme=dark] .drawer__group[open]>summary,:root[data-theme=dark] .drawer__sub .drawer__all,:root[data-theme=dark] .drawer__chev{color:#2EDC7A}
:root[data-theme=dark] .drawer__group[open] .drawer__chev{color:#0F1A15}

/* Icon motion: each animated part names its own keyframes in --n; they run while the link is hovered or focused, while its menu is open, and in the open mobile menu. */
.nav-ic [class*="a-"]{transform-box:fill-box;transform-origin:50% 50%;animation:2.8s ease-in-out infinite both;animation-delay:calc(var(--li,0s) + var(--dd,0s))}
.nav-ic .a-d2{--dd:.14s}
.nav-ic .a-d3{--dd:.28s}
.a-grow{--n:ic-grow;transform-origin:50% 100%!important}
.a-pop{--n:ic-pop}
.a-hop{--n:ic-hop}
.a-draw{--n:ic-draw;stroke-dasharray:1}
.a-blink{--n:ic-blink}
.a-drop{--n:ic-drop}
.a-spin{--n:ic-spin}
.nav-ic .a-slow{--n:ic-turn;animation-duration:9s;animation-timing-function:linear}
.a-flip{--n:ic-flip}
.a-flash{--n:ic-flash}
.a-slide{--n:ic-slide}
.a-tilt{--n:ic-tilt}
.a-wobble{--n:ic-wobble}
.a-bounce{--n:ic-bounce;transform-origin:50% 100%!important}
.a-swing{--n:ic-swing;transform-origin:22% 22%!important}
:is(.nav__link:hover,.nav__link:focus-visible,.nav__item--menu:hover>.nav__link,.nav__item.is-open>.nav__link,.nav__item:hover .nav__menu,.nav__item:focus-within .nav__menu,.nav__item.is-open .nav__menu,.drawer__nav) .nav-ic [class*="a-"]{animation-name:var(--n)}
.nav__sub li:nth-child(3n+2),.drawer__list>li:nth-child(3n+2),.drawer__sub li:nth-child(3n+2){--li:.35s}
.nav__sub li:nth-child(3n),.drawer__list>li:nth-child(3n),.drawer__sub li:nth-child(3n){--li:.7s}
.nav__sublink .nav-ic,.drawer__link .nav-ic{transition:transform .2s ease,background-color .2s ease}
.nav__sublink:hover .nav-ic,.nav__sublink:focus-visible .nav-ic{transform:scale(1.08);background:rgba(34,201,116,.2)}
@keyframes ic-grow{0%,45%,to{transform:none}12%{transform:scaleY(.3)}30%{transform:scaleY(1.1)}}
@keyframes ic-pop{0%,45%,to{transform:none}15%{transform:scale(1.4) rotate(-14deg)}30%{transform:scale(.9) rotate(8deg)}}
@keyframes ic-hop{0%,45%,to{transform:none}14%{transform:translateY(-2.6px) rotate(-7deg)}28%{transform:none}36%{transform:translateY(-.9px)}}
@keyframes ic-draw{0%{stroke-dashoffset:1}32%,to{stroke-dashoffset:0}}
@keyframes ic-blink{0%,24%,50%,to{opacity:1}12%,36%{opacity:.12}}
@keyframes ic-drop{0%,45%,to{transform:none}14%{transform:translateY(-3px)}28%{transform:translateY(.7px)}}
@keyframes ic-spin{0%{transform:rotate(0)}42%,to{transform:rotate(360deg)}}
@keyframes ic-turn{to{transform:rotate(360deg)}}
@keyframes ic-flip{0%,20%,40%,to{transform:none}10%,30%{transform:scaleX(.06)}}
@keyframes ic-flash{0%,45%,to{transform:none}10%{transform:scale(1.2) rotate(-7deg)}20%{transform:scale(.94)}30%{transform:scale(1.1) rotate(3deg)}}
@keyframes ic-slide{0%,50%,to{transform:none;opacity:1}20%{transform:translateX(-2.5px);opacity:0}21%{transform:translateX(3px);opacity:0}}
@keyframes ic-tilt{0%,50%,to{transform:none}12%{transform:rotate(-10deg)}26%{transform:rotate(8deg)}38%{transform:rotate(-3deg)}}
@keyframes ic-wobble{0%,50%,to{transform:none}12%{transform:rotate(-18deg)}26%{transform:rotate(15deg)}38%{transform:rotate(-6deg)}}
@keyframes ic-bounce{0%,52%,to{transform:none}14%{transform:translateY(-3.6px)}26%{transform:scale(1.06,.88)}36%{transform:translateY(-1.5px)}44%{transform:scale(1.02,.96)}}
@keyframes ic-swing{0%,50%,to{transform:none}12%{transform:rotate(15deg)}26%{transform:rotate(-11deg)}38%{transform:rotate(5deg)}}
@media (prefers-reduced-motion:reduce){.drawer__chev,.nav-ic{transition:none}.nav-ic [class*="a-"]{animation:none!important}}

/* Author pages */
.noavatar{display:grid;place-items:center;width:88px;height:88px;margin-bottom:1rem;border-radius:50%;background:rgba(34,201,116,.14);border:1px solid rgba(34,201,116,.3);color:#16A75C}
.noavatar svg{width:54px;height:54px}
.chero__role{margin:.25rem 0 .6rem;font-weight:700}