/* the main navigation, the same on every page (assets/nav.js builds it): the bar's logo, search and section words, which fold
   into [ MENU ] once you move into the page, and the menu sheet. Each page places the bar itself (header.navbar). */
:root{--m-out:cubic-bezier(.2,.8,.2,1);--m-settle:cubic-bezier(.3,1.35,.5,1)}
.navbar{display:flex;justify-content:space-between;align-items:center}
.navbar a{text-decoration:none;color:var(--ink)}
.navbar .quick a.brk{color:var(--ink);cursor:var(--cur-press);font-family:inherit;font-weight:inherit;line-height:inherit}   /* the words that are links match the ones that are buttons */
.navbar button{font:inherit;color:var(--ink);background:none;border:0;padding:0;cursor:var(--cur-press)}
.tools{display:flex;align-items:center;gap:clamp(6px,1.4vw,18px)}
.find{width:44px;height:44px;display:grid;place-items:center;transition:transform .12s var(--m-out)}
.find svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.find svg{transition:transform .35s var(--m-settle)}
.find:hover svg,.find:focus-visible svg{transform:rotate(-12deg) scale(1.06)}
.find:active{transform:scale(.9)}
/* the search field: folded away beside the button, it slides out to the left while the page's search is open */
.findbox{width:0;overflow:hidden;visibility:hidden;transition:width .35s var(--m-out),visibility 0s .35s}
/* .finding: set by nav.js while the results panel is open */
.navbar.finding .findbox{width:min(300px,46vw);visibility:visible;transition:width .45s var(--m-out),visibility 0s}
@media (max-width:700px){ .navbar.finding .findbox{width:calc(100vw - 280px)} }   /* clear of the logo */
.findbox input{display:block;width:100%;min-width:0;margin:0;padding:6px 2px 5px;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;outline:none;
  font:500 1rem/1.2 var(--f-display);color:var(--ink);-webkit-appearance:none;appearance:none}
.findbox input::placeholder{color:var(--ink-2);opacity:.8}
.findbox input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* the results drop under it only once there's something to show: no suggestions panel for an empty field */
.search-card:has(> .hits:empty){display:none}
.navbar .mark .logo{display:block;height:28px;aspect-ratio:200/68;background:var(--ink);-webkit-mask:url(/assets/logo.png) center/contain no-repeat;mask:url(/assets/logo.png) center/contain no-repeat}
.mark{background:none;border:0;padding:0;cursor:var(--cur-press)}
.brk{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:5px 12px 4px;font:400 .8rem/1 var(--f-type);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brk::before,.brk::after{content:"";position:absolute;top:0;bottom:0;width:6px;border:1px solid currentColor;transition:transform .4s var(--m-settle)}
.brk::before{left:0;border-right:0}.brk::after{right:0;border-left:0}
.navslot{display:grid;justify-items:end;align-items:center;transition:width .45s var(--m-out)}
.navslot > *{grid-area:1/1}
.quick{display:flex;align-items:center;gap:clamp(2px,1vw,14px)}
.quick .brk{height:44px;padding:0 12px;font-size:.8rem}
.quick .brk span{display:inline-block;min-width:.01em}
.quick .brk::before,.quick .brk::after{top:12px;bottom:12px;opacity:0;transform:scaleY(.3);transition:opacity .2s,transform .4s var(--m-settle)}
.quick .brk:hover::before,.quick .brk:focus-visible::before,.quick .brk[aria-current]::before,.quick.typing .brk::before{opacity:1;transform:translateX(-3px)}
.quick .brk:hover::after,.quick .brk:focus-visible::after,.quick .brk[aria-current]::after,.quick.typing .brk::after{opacity:1;transform:translateX(3px)}
.quick .brk:active{translate:0 1px}
.quick .brk:focus-visible{outline:none}
.quick .brk{transition:transform .35s var(--m-out),opacity .3s}
.quick.gone .brk{opacity:0;pointer-events:none}
.quick.gone .brk:nth-child(1){transform:translateX(160%)}.quick.gone .brk:nth-child(2){transform:translateX(90%)}.quick.gone .brk:nth-child(3){transform:translateX(30%)}
.quick.gone{visibility:hidden;transition:visibility 0s .4s}
.menu-btn{height:44px;min-width:92px;display:grid;place-items:center;visibility:hidden;transition:visibility 0s .35s}
.menu-btn .brk{transition:opacity .25s}
.menu-btn:not(.shown) .brk{opacity:0}
.menu-btn:not(.shown) .brk::before{transform:translateX(26px)}.menu-btn:not(.shown) .brk::after{transform:translateX(-26px)}
.menu-btn.shown{visibility:visible;transition:visibility 0s}
/* opened from the words (Get in touch): the words step aside and [ CLOSE ] stands where they were */
.navbar.mopen .quick{display:none}   /* gone from the layout too, so search sits right beside [ CLOSE ] */
.menu-btn.force{visibility:visible;transition:visibility 0s}.menu-btn.force .brk{opacity:1}.menu-btn.force .brk::before,.menu-btn.force .brk::after{transform:none}
.menu-btn .brk{overflow:visible}
.menu-btn .w{display:grid;overflow:hidden;height:1em}
.menu-btn .w span{grid-area:1/1;transition:transform .45s var(--m-out)}
.menu-btn .w span + span{transform:translateY(110%)}
.menu-btn[aria-expanded="true"] .w span:first-child{transform:translateY(-110%)}
.menu-btn[aria-expanded="true"] .w span + span{transform:none}
.menu-btn:hover .brk::before,.menu-btn:focus-visible .brk::before{transform:translateX(-5px)}
.menu-btn:hover .brk::after,.menu-btn:focus-visible .brk::after{transform:translateX(5px)}
.menu-btn:active .brk::before{transform:translateX(2px)}.menu-btn:active .brk::after{transform:translateX(-2px)}

/* the menu: the room blurs behind a sheet of the page's own paper; on the right, big links ruled off like an index,
   each with its sub-links beside it. Hovering a link drags a highlighter over its words (below). */
/* closing, the big words slide back down out of sight, last row first, on a sheet that stays solid; only once they're gone
   does the sheet fade, so nothing of the menu ever sits over the page underneath */
.menu{position:fixed;inset:0;z-index:38;display:flex;justify-content:flex-end;visibility:hidden;transition:visibility 0s .76s}
/* a solid sheet: nothing behind shows through, and no full-screen blur for the browser to redraw every frame */
.menu::before{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;transition:opacity .26s ease .5s}
.menu.open{visibility:visible;transition:visibility 0s}
/* pressing the nav's words and links (often twice, or dragging) shouldn't paint a text selection over them */
.navbar a,.navbar button,.menu-in a,.menu-in button{-webkit-user-select:none;user-select:none}
.menu.snap,.menu.snap::before,.menu.snap *{transition:none!important;animation:none!important}   /* shut at once when a link is followed */
.menu.open::before{opacity:1;transition:opacity .25s ease}
/* covered (nav.js): the page under the sheet isn't drawn, and the bar's frosted glass has nothing to blur but plain paper */
html.menu-cover body > :not(.navbar,.menu,.search,.cur,svg){visibility:hidden!important}   /* inherited down; nothing in a page turns it back on */
html.menu-cover .navbar,html.menu-cover .navbar::before{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.menu-in{position:relative;width:min(820px,100%);min-height:100%;max-height:100%;overflow:auto;display:flex;flex-direction:column;gap:32px;padding:calc(92px + env(safe-area-inset-top,0px)) clamp(16px,3vw,40px) calc(28px + env(safe-area-inset-bottom,0px))}
.m-rows{list-style:none;margin:0;padding:0}
.m-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19rem);gap:12px 28px;padding:12px 0 22px}
.m-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.5,0,.75,0) calc((2 - var(--i)) * 50ms)}
.menu.open .m-row::before{transform:scaleX(1);transition:transform .5s var(--m-out) calc(var(--i) * 50ms)}
.m-head{display:flex;align-items:flex-start;gap:12px;overflow:hidden;padding-bottom:4px}
.m-big{position:relative;display:inline-block;padding:2px 10px 0 6px;font:600 clamp(2.3rem,min(6vw,7vh),5rem)/.95 var(--f-display);letter-spacing:-.02em;text-transform:uppercase;text-decoration:none;color:var(--ink);cursor:var(--cur-press);background:none;border:0;text-align:left;
  transform:translateY(105%);transition:transform .4s cubic-bezier(.5,0,.75,0) calc((2 - var(--i)) * 50ms)}
.menu.open .m-big{transform:none;transition:transform .5s var(--m-out) calc(40ms + var(--i) * 50ms)}
.m-big:active{translate:0 2px}
.m-big:focus-visible{outline:none}
.m-sub{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding-top:10px;opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .3s ease-in}
.menu.open .m-sub{opacity:1;transform:none;transition:opacity .35s ease calc(140ms + var(--i) * 50ms),transform .4s var(--m-out) calc(140ms + var(--i) * 50ms)}
.m-sub a,.m-sub button,.m-sub span{font:400 .8rem/1.3 var(--f-type);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;background:none;border:0;padding:3px 10px;margin-left:-10px;cursor:var(--cur-press);text-align:left}
.m-sub a.brk,.m-sub button.brk{padding:4px 10px 3px;white-space:normal}
.m-sub .brk::before,.m-sub .brk::after{display:none}   /* the highlighter marks these instead of the brackets */
.m-sub a{position:relative}
.m-sub a:focus-visible{outline:none}
.m-sub .hl,.m-sub .ln{padding:0;margin:0}   /* not the padded, unpainted spans of the rule above */
.m-sub small{display:block;font:400 .72rem/1.35 var(--f-display);letter-spacing:0;text-transform:none;color:var(--ink-2);margin-top:2px}
.m-sub .n{color:var(--ink-2);margin-right:8px}
.m-sub .row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-sub .ico{width:30px;height:30px;padding:0;margin:0;display:grid;place-items:center;border-radius:6px}
.m-sub .ico:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.m-sub .ico svg{width:17px;height:17px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.m-sub .ico[aria-disabled]{opacity:.45;cursor:var(--cur-locked)}
.m-sub .mail{user-select:all;cursor:text;min-width:0;overflow-wrap:anywhere}
.m-sub .row:has(.mail){flex-wrap:nowrap}   /* the copy button stays beside the address, which breaks after the @ when it must */
.m-foot{display:flex;justify-content:flex-end;align-items:flex-end;margin-top:auto;opacity:0;transition:opacity .22s ease}
.menu.open .m-foot{opacity:1;transition:opacity .4s ease .25s}
.m-foot img{width:min(220px,40vw);height:auto;transform:rotate(-3deg);transition:opacity .25s;opacity:.9}
html.lights-off .m-foot img{filter:invert(1)}
@media (max-height:820px){ .m-foot img{display:none} }   /* on a short screen the doodle would only peek in, cut off at the bottom */
@media (max-width:700px){ .quick{display:none} .m-row{grid-template-columns:1fr;padding-bottom:16px} .m-sub{padding-top:0;padding-left:6px} .m-foot img{display:none} }

/* the highlighter: hovering (or keyboard-focusing) a menu link drags a marker over its words, multiplied so the type shows
   through it. The pen lands in the bottom-left corner, the chisel tip rises to full height, then it drags right, rising a
   little; each line of text gets its own stroke. nav.js lays the strokes and changes shape, tilt, height and overshoot on
   every pass. On leave it fades; it never un-draws. On dark paper it's screened, so the light type stays bright. */
:root{--hl-ink:#D9824F;--hl-here:#E9C53F;--hl-a:.5;--hl-blend:multiply}   /* orange under the pointer, yellow for the page you're on */
html.lights-off{--hl-ink:#E58350;--hl-here:#D8B43A;--hl-a:.55;--hl-blend:screen}
.hl{position:absolute;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:var(--hl-blend);
  -webkit-mask:var(--mask) 0 0/100% 100% no-repeat;mask:var(--mask) 0 0/100% 100% no-repeat;
  transform:rotate(var(--tilt,-.8deg));transform-origin:0 100%;transition:opacity .28s ease}
.hl,.m-sub .hl{background:var(--hl-ink)}
/* at rest a stroke is only its start, so the dab a hover left fades out as it is, not as the whole stroke flashing up;
   a pressed link (.drawn once the pointer leaves it) and the page you're on keep the full stroke */
.hl{clip-path:polygon(0 -20%,var(--tip,100%) -20%,calc(var(--tip,100%) - 3%) 120%,0 120%)}
.hl:not([data-line="0"]){display:none}
:is([aria-current],.pressed,.drawn) > .hl{clip-path:none;display:block}
[aria-current] > .hl{opacity:var(--hl-a);transition:none;background:var(--hl-here)}   /* the page you're on keeps its mark after the pointer leaves */
.lit .hl{opacity:var(--hl-a);transition:none;animation:hl-stroke var(--dur,.46s) cubic-bezier(.32,.72,.28,1) var(--delay,0s) both}
@keyframes hl-stroke{
  0%{clip-path:polygon(0 120%,0 120%,0 120%,0 120%)}
  7%{clip-path:polygon(0 55%,2% 55%,1% 120%,0 120%)}
  16%{clip-path:polygon(0 -20%,9% -20%,5% 120%,0 120%)}
  100%{clip-path:polygon(0 -20%,108% -20%,104% 120%,0 120%)}}
/* hovering only lands the pen at the start of the words; pressing (or being the page you're on) draws the whole stroke */
.lit:not([aria-current]):not(.pressed) .hl{animation-name:hl-tip;animation-duration:.24s}
@keyframes hl-tip{
  0%{clip-path:polygon(0 120%,0 120%,0 120%,0 120%)}
  30%{clip-path:polygon(0 55%,2% 55%,1% 120%,0 120%)}
  100%{clip-path:polygon(0 -20%,var(--tip) -20%,calc(var(--tip) - 3%) 120%,0 120%)}}
@media (prefers-reduced-motion: reduce){ .lit .hl{animation:none}
  .lit:not([aria-current]):not(.pressed) .hl{animation:none;clip-path:polygon(0 -20%,var(--tip) -20%,calc(var(--tip) - 3%) 120%,0 120%)} }