@font-face {
  font-family: 'Higuen';
  src: url('../assets/fonts/Higuen-Regular.woff2') format('woff2'),
       url('../assets/fonts/Higuen-Regular.woff') format('woff'),
       url('../assets/fonts/Higuen-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html { background: #f6f4f0; overflow-anchor: none; }
body { margin: 0; overflow-anchor: none; }

/* Bisection found this -2px overlap (added to hide a hairline seam between
   stacked full-bleed sections) is the actual cause of trackpad scroll
   stickiness: overlapping every section boundary forces the compositor to
   resolve paint order between adjacent section layers continuously, and
   trackpad's fine-grained scroll deltas cross far more of those boundaries
   per second than a mouse wheel's coarse jumps. Removed. If the hairline
   seam reappears on a high-DPI screen, fix it a different way (e.g. matching
   background colors at the seam) rather than overlapping layers. */
#page > section { margin-bottom: 0; }

/* backdrop-filter:blur() panels were replaced sitewide with solid,
   higher-opacity backgrounds (see index.html caption/reveal panels) --
   it was one of the most expensive things a mobile GPU can paint across
   ~10 stacked panels. No element on the page uses backdrop-filter anymore,
   so no override is needed here. */

::selection { background: #8a1414; color: #f0e2d0; }

@keyframes ret2-drift { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }
@keyframes ret2-spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes ret2-spinr { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes jt2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(.4px,-.4px)} }
@keyframes jt3 { 0%{transform:translate(0,0)} 25%{transform:translate(-.6px,.4px)} 50%{transform:translate(.6px,-.5px)} 75%{transform:translate(-.4px,.5px)} 100%{transform:translate(0,0)} }
@keyframes jt4 { 0%{transform:translate(0,0) skewX(0)} 20%{transform:translate(-1px,.6px) skewX(.4deg)} 40%{transform:translate(1.2px,-.7px) skewX(-.3deg)} 60%{transform:translate(-.9px,.5px)} 80%{transform:translate(1px,.4px) skewX(.5deg)} 100%{transform:translate(0,0)} }
@keyframes jt5 { 0%{transform:translate(0,0)} 15%{transform:translate(-2px,1px) skewX(-.8deg)} 30%{transform:translate(2px,-1.2px)} 45%{transform:translate(-1.6px,-1px) skewX(.7deg)} 60%{transform:translate(2px,1px)} 75%{transform:translate(-2px,.6px) skewX(-.6deg)} 100%{transform:translate(0,0)} }
@keyframes jt6 { 0%,35%{transform:translate(0,0) skewX(0)} 40%{transform:translate(-2px,1.2px) skewX(-.9deg)} 45%{transform:translate(1px,-.6px)} 50%{transform:translate(0,0)} 78%,100%{transform:translate(0,0) skewX(0)} 83%{transform:translate(2px,-1.2px) skewX(.8deg)} 88%{transform:translate(-1px,.6px)} 93%{transform:translate(0,0)} }
@keyframes jslice { 0%,100%{clip-path:inset(0 0 0 0); transform:translateX(0)} 12%{clip-path:inset(0 0 0 0); transform:translateX(0)} 15%{clip-path:inset(18% 0 46% 0); transform:translateX(-5px)} 18%{clip-path:inset(0 0 0 0); transform:translateX(0)} 52%{clip-path:inset(0 0 0 0); transform:translateX(0)} 55%{clip-path:inset(58% 0 12% 0); transform:translateX(5px)} 58%{clip-path:inset(0 0 0 0); transform:translateX(0)} }
@keyframes jflk { 0%,100%{opacity:1} 47%{opacity:1} 49%{opacity:.55} 51%{opacity:1} 68%{opacity:.82} 70%{opacity:1} 92%{opacity:.6} 94%{opacity:1} }