/* Pokeable Binoki on the homepage forest hero (dist/binoki-poke.js).
   The layer stays hidden until the script has placed it, so without JS the
   painted Binoki in forest.jpg is what people see. */
.binoki-poke{position:static}
/* Plate and felt body sit under the hero scrim, like the painting they replace. */
.binoki-scene{position:absolute;inset:0;z-index:-2;pointer-events:none;user-select:none;-webkit-user-select:none}
.binoki-plate{position:absolute;left:0;top:0;max-width:none}
.binoki-figure{position:absolute;left:0;top:0;transform-origin:50% 100%;will-change:transform}
.binoki-felt,.binoki-face{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.binoki-face{overflow:visible}
.binoki-eye-white{fill:var(--binoki-color-white)}
.binoki-pupil,.binoki-mouth{fill:var(--binoki-color-black)}

/* Interactive parts sit above the scrim and the hero content. */
.binoki-hit{position:absolute;z-index:1;left:0;top:0;min-width:var(--binoki-size-touch-min);min-height:var(--binoki-size-touch-min);padding:0;border:0;border-radius:40% 40% 24% 24%;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
.binoki-hit:focus-visible{background:transparent!important;outline:var(--binoki-focus-width) solid var(--binoki-color-white)!important;outline-offset:var(--binoki-focus-offset);box-shadow:0 0 0 calc(var(--binoki-focus-offset) + var(--binoki-focus-width)) var(--binoki-color-ink)!important}
.binoki-floaters{position:absolute;z-index:2;inset:0;pointer-events:none;overflow:hidden}
.binoki-floater{position:absolute;left:0;top:0;padding:var(--binoki-spacing-4) var(--binoki-spacing-12);border-radius:999px;background:var(--binoki-color-paper);color:var(--binoki-color-ink);font:var(--binoki-weight-semibold) var(--binoki-size-body)/var(--binoki-line-body) var(--binoki-family-latin),var(--binoki-family-tc),sans-serif;white-space:nowrap;opacity:0;will-change:transform,opacity}
.binoki-bubble{position:absolute;z-index:3;left:0;top:0;margin:0;transform-origin:0 50%}
.binoki-bubble[hidden]{display:none}
.binoki-bubble[data-side="top"]{transform-origin:50% 100%}
.binoki-mail{position:relative;display:inline-flex;align-items:center;gap:var(--binoki-spacing-8);min-height:var(--binoki-size-touch-min);padding:var(--binoki-spacing-10) var(--binoki-spacing-16);border-radius:var(--binoki-radius-control);background:var(--binoki-color-paper);color:var(--binoki-color-ink);font:var(--binoki-weight-semibold) var(--binoki-size-body)/var(--binoki-line-body) var(--binoki-family-latin),var(--binoki-family-tc),sans-serif;text-decoration:none;white-space:nowrap;box-shadow:0 2px 8px var(--binoki-color-detailed-shadow)}
.binoki-mail::before{content:"";position:absolute;left:-5px;top:50%;width:12px;height:12px;margin-top:-6px;background:inherit;border-radius:0 0 0 3px;transform:rotate(45deg)}
.binoki-bubble[data-side="top"] .binoki-mail::before{left:var(--tail-x,50%);top:auto;bottom:-5px;margin:0 0 0 -6px;border-radius:0 0 3px 0}
.binoki-mail .icon{flex:none;width:var(--binoki-size-icon-small);height:var(--binoki-size-icon-small)}
.binoki-mail:hover{background:color-mix(in srgb,var(--binoki-color-paper) 92%,var(--binoki-color-ink))}
.personal-hero .binoki-mail:focus-visible{background:var(--binoki-color-ink)!important;color:var(--binoki-color-white)!important}

@media print{.binoki-poke{display:none}}
@media(forced-colors:active){
  .binoki-hit{border:1px dashed ButtonText}
  .binoki-mail,.binoki-floater{border:1px solid ButtonText;forced-color-adjust:auto}
}