:root {
  --fg: #000;
  --bg: #fff;
  --muted: #8a8a8a;
  --gutter: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 500 11px/1.18 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
b, strong, h1, h2, .name { font-weight: 700; }
h1, h2 { font-size: 11px; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img { display: block; max-width: 100%; height: auto; }

/* header: three small text blocks, nothing else */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  display: grid; grid-template-columns: auto 1fr auto; gap: 0 24px;
  padding: var(--gutter);
}
.top .role { color: var(--muted); }
.top nav { display: flex; gap: 14px; }

/* floating characters (after lucadepardon.com's falling gifs); positions are driven by site.js */
.snow { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
main, .foot { position: relative; z-index: 1; }   /* they drift behind text and images */
.float { position: absolute; left: 0; top: 0; will-change: transform; transform: translate(-200px, -200px);
  transition: filter .2s; }
.float.hot { filter: drop-shadow(0 6px 10px rgba(0,0,0,.18)); }

/* smiley bouncing off the window edges */
.bouncer { position: fixed; left: 0; top: 0; width: 84px; z-index: 0; pointer-events: none;
  will-change: transform; transform: translate(-200px, -200px); }

/* cursor companion */
.pal { position: fixed; left: 0; top: 0; width: 46px; z-index: 30; pointer-events: none; opacity: 0;
  will-change: transform; transition: opacity .3s; }
.pal.on { opacity: 1; }
.pal.asleep { width: 52px; }

/* hero */
.hero { position: relative; height: 100vh; min-height: 520px; display: grid; place-items: center; overflow: hidden;
  perspective: 900px; }
.runner { height: min(72vh, 820px); width: auto; transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.2,.7,.2,1); cursor: pointer; }
.ground { position: absolute; left: 0; right: 0; bottom: 18px; height: 150px; }
.walker { position: absolute; bottom: 58px; left: 0; height: 70px; width: auto; will-change: transform;
  transform: translateX(-120%); }                     /* back lane: the crowd */
.walker + .walker { bottom: 0; height: 104px; }      /* front lane: Eepy and the cart */
.walker.front { bottom: 0; height: 84px; }           /* front lane too: the red-haired guy from the Gifs page */

/* background characters step aside while the Motion grid is on screen */
.snow, .bouncer { transition: opacity .8s ease; }
body.calm .snow, body.calm .bouncer { opacity: 0; }

/* sections */
.block { padding: 120px var(--gutter) 0; }
.block h2 { margin-bottom: 14px; }
.note { color: var(--muted); margin: -10px 0 14px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px var(--gutter); }
.tile { display: block; }
.tile .frame { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #f2f2f2; }
.tile .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.tile:hover .frame img { transform: scale(1.03); }
.tile .frame-loop { background: #f4f2fb; }
.tile .frame-loop img { object-fit: contain; padding: 6%; }
.tile:hover { text-decoration: none; }
.tile .cap { display: block; padding-top: 6px; }
.tile .cap b { margin-right: 4px; }
.tile:hover .cap b { text-decoration: underline; text-underline-offset: 2px; }

.loops { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px var(--gutter); }
.loop img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.loop figcaption { padding-top: 4px; color: var(--muted); }

.about { max-width: 520px; }
.about p + p { margin-top: 1.2em; }

.foot { display: flex; gap: 14px; padding: 140px var(--gutter) var(--gutter); }
.foot span { margin-right: auto; }

/* project pages */
.project { padding: 72px var(--gutter) 0; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0 var(--gutter); }
.project .meta { position: sticky; top: 72px; align-self: start; }
.project .meta p { color: var(--muted); }
.project .meta p + p { color: var(--fg); margin-top: 1em; }
.project .media { display: flex; flex-direction: column; gap: var(--gutter); max-width: 1100px; }
.project .media img { width: 100%; }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pager { grid-column: 2; display: flex; justify-content: space-between; max-width: 1100px; padding-top: 40px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project { grid-template-columns: minmax(0, 1fr); }
  .project .meta { position: static; margin-bottom: 20px; }
  .pager { grid-column: 1; }
}
@media (max-width: 560px) {
  .top { grid-template-columns: 1fr auto; }
  .top .role { display: none; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .loops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .runner { height: min(60vh, 560px); }
  .walker { height: 48px; bottom: 44px; } .walker + .walker { height: 72px; bottom: 0; } .walker.front { height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .snow, .pal, .bouncer { display: none; }
  .walker { transform: none; left: 25%; } .walker + .walker { left: 60%; }
}
.loops-big { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.loops-big .loop img { background: #f4f2fb; }