/* Runlings. One stylesheet for every page. */

:root {
  --bg: #ffffff;
  --ink: #0b0b0c;
  --muted: #64748b;
  --quiet: #cbd5e1;      /* nav at rest */
  --tile: #f2f4f7;
  --tile-mark: #cfd5de;  /* the ? on a mystery tile */
  --rule: #f1f5f9;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --ink: #ffffff;
    --muted: #94a3b8;
    --quiet: #475569;
    --tile: #111317;
    --tile-mark: #2e333b;
    --rule: #16191e;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Past the end of the page (under iOS Safari's toolbar, and scrolled past
   the bottom) the browser shows html's background, so it is the footer's
   black; the page itself is body's. */
html { background: #000; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Google Sans Flex", ui-sans-serif, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; }

/* The brand face: Google Sans Flex at weight 900, slant 10. iOS Safari
   doesn't turn `oblique` into the font's slant axis, so the axis is also set
   directly. */
.black-italic,
.wordmark,
.site-header nav { font-style: oblique 10deg; font-variation-settings: "slnt" -10; }
.black-italic { font-weight: 900; }

/* ---------- Header ---------- */

.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(28px, env(safe-area-inset-top)) clamp(20px, 4vw, 48px) 0;
}

.site-header nav {
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 420px) {
  .site-header nav { gap: 12px; font-size: 13px; }
}

.site-header nav a {
  color: var(--quiet);
  text-decoration: none;
  transition: color .2s;
}

.site-header nav a:hover,
.site-header nav a[aria-current="page"] { color: var(--ink); }

/* ---------- Wordmark ---------- */

.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}

/* The paw-R, sized to the font's cap height with a hair of side bearing,
   as RunlingsRGlyph sets it in the app. */
.wordmark svg {
  height: .72em;
  width: .757em;
  margin-inline: .0072em;
  fill: currentColor;
  overflow: visible;
}

/* The launch title's reveal: each letter slides in from slightly behind the
   one before it, 50 ms apart, on the app's spring. */
.wordmark .letter {
  display: inline-block;
  opacity: 0;
  transform: translateX(-.28em);
  transition: opacity .35s ease-out, transform .45s cubic-bezier(.22, 1.12, .4, 1);
  transition-delay: calc(.15s + var(--i) * .05s);
}

.wordmark.revealed .letter { opacity: 1; transform: none; }

/* ---------- Home ---------- */

/* The hero fills the first screen; the footer waits below it. */
.home { overscroll-behavior-y: none; }

.hero {
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 96px clamp(20px, 5vw, 80px) 72px;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 5.6vw, 76px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.hero p {
  margin: 24px 0 40px;
  max-width: 30em;
  font-size: clamp(17px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.35;
  color: var(--muted);
}

.hero p strong { color: var(--ink); font-weight: 500; }

.hero-copy > * {
  opacity: 0;
  transform: translateY(12px);
  animation: rise .7s cubic-bezier(.2, .9, .3, 1) forwards;
}
.hero-copy > :nth-child(1) { animation-delay: .55s; }
.hero-copy > :nth-child(2) { animation-delay: .7s; }
.hero-copy > :nth-child(3) { animation-delay: .85s; }

@keyframes rise { to { opacity: 1; transform: none; } }

/* The video: 9:16, transparent around the phone, so it sits on white or
   black without a box. Sized by the screen's height so the page never
   scrolls. */
.hero-video {
  display: block;
  height: min(calc(100dvh - 150px), 900px);
  aspect-ratio: 9 / 16;
  width: auto;
  max-width: 44vw;
  object-fit: contain;
  pointer-events: none;   /* no tap-to-fullscreen, no long-press menu */
  /* Compressing the alpha leaves a faint line along the bottom edge. The
     phone ends well above it. */
  clip-path: inset(0 0 .5% 0);
  opacity: 0;
  animation: rise .9s cubic-bezier(.2, .9, .3, 1) .6s forwards;
}

/* iOS draws a play button over a video it refused to autoplay (Low Power
   Mode). The poster frame shows instead. */
.hero-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.hero-video::-webkit-media-controls { display: none !important; }

/* On a phone the page scrolls: the copy first, then the video at the
   screen's full width. */
@media (max-width: 760px) {
  .home { height: auto; overflow: visible; }
  .hero {
    height: auto;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 20px;
    padding: 197px 20px 24px;
  }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero h1 { font-size: clamp(32px, 9vw, 44px); }
  .hero p { margin: 12px auto 20px; font-size: 16px; }
  .hero-video { width: 100%; height: auto; max-width: none; }
}

/* ---------- App Store button ---------- */

.store {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: 15px 28px 15px 24px;
  font-size: 18px;
  line-height: 1;
  white-space: nowrap;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .45);
  transition: transform .3s, opacity .3s;
}

.store:hover { transform: scale(1.04); }
.store:focus-visible { outline: 3px solid var(--quiet); outline-offset: 3px; }

.store svg { width: 1em; height: 1em; fill: currentColor; flex: none; margin-top: -.15em; }
.store span { font-weight: 500; opacity: .7; }
.store b { font-weight: 700; }

/* ---------- Home, the forest design (index-b.html) ---------- */

/* The A/B test's second home page: the menu's forest fills the first
   screen, the compsognathus stands in it facing the copy, and the copy sits
   over the open floor on the left. White on the scene in light and dark. */
.forest { background: #000; }
.forest .site-header .wordmark,
.forest .site-header nav a { color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.forest .site-header nav a { opacity: .8; }
.forest .site-header nav a:hover { opacity: 1; }

.scene {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #6f8f5a url(/media/forest.webp) 68% 60% / cover no-repeat;
}

/* The loop, over its own first frame (the background above). */
.scene-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 60%;
  pointer-events: none;
}
.scene-video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
.scene-video::-webkit-media-controls { display: none !important; }

/* A soft shade behind the copy, so white text reads on bright leaves. */
.scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 24, 8, .55) 0%, rgba(10, 24, 8, .25) 38%, rgba(10, 24, 8, 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 18%);
}

.forest .hero {
  position: relative;
  z-index: 2;
  height: 100dvh;
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  padding: 96px clamp(24px, 6vw, 112px) 72px;
}

.forest .hero-copy { max-width: 620px; }
.forest .hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .3); }
.forest .hero p { color: rgba(255, 255, 255, .82); }
.forest .hero p strong { color: #fff; }
.forest .store { background: #fff; color: #0b0b0c; box-shadow: 0 14px 34px -12px rgba(0, 0, 0, .55); }
.forest .store:focus-visible { outline-color: #fff; }

/* On a phone the portrait render stands in for the wide one. The words stay
   at the top and the button drops below the creature, a little up from the
   bottom of the first screen, so nothing covers it and nothing needs a
   scroll. */
@media (max-width: 760px) {
  .scene { background-image: url(/media/forest-portrait.webp); background-position: 50% 0; }
  .scene-video { object-position: 50% 0; }
  .scene::before {
    background:
      linear-gradient(180deg, rgba(10, 24, 8, .6) 0%, rgba(10, 24, 8, .3) 40%, rgba(10, 24, 8, 0) 60%),
      linear-gradient(0deg, rgba(10, 24, 8, .35) 0%, rgba(10, 24, 8, 0) 22%);
  }
  .forest .hero {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    padding: 120px 20px calc(env(safe-area-inset-bottom) + max(72px, 11dvh));
  }
  .forest .hero-copy { flex: 1; max-width: none; }
  .forest .store { margin-top: auto; }
}

/* ---------- Inner pages ---------- */

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 128px clamp(20px, 5vw, 80px) 140px;
}

.page h1 {
  margin: 0 0 clamp(28px, 4vw, 44px);
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

/* Creatures */

.known {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 20px);
}

.tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: clamp(14px, 2vw, 24px);
  background: var(--tile);
  display: flex;
  align-items: center;
  justify-content: center;
}

.known .tile { margin: 0; flex-direction: column; padding-bottom: 12%; }
.known img { width: 78%; height: auto; }
.known .name {
  position: absolute;
  bottom: 7%;
  left: 8px;
  right: 8px;
  text-align: center;
  font-size: clamp(11px, 1.9vw, 22px);
  line-height: 1.1;
  text-transform: uppercase;
}

.discover {
  margin: clamp(40px, 6vw, 64px) 0 clamp(24px, 3vw, 32px);
  text-align: center;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.2;
}

.discover span {
  display: block;
  margin-top: 6px;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 500;
  font-style: normal;
  font-variation-settings: normal;
  color: var(--muted);
}

.mystery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: clamp(8px, 1.2vw, 14px);
}

.mystery .tile {
  border-radius: clamp(12px, 1.4vw, 18px);
  font-size: clamp(40px, 5vw, 60px);
  color: var(--tile-mark);
  user-select: none;
}

@media (max-width: 560px) {
  .mystery { grid-template-columns: repeat(4, 1fr); }
}

/* About and privacy */

.prose p {
  max-width: 680px;
  margin: 0 0 20px;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--muted);
}
.prose h2 {
  max-width: 680px;
  margin: 44px 0 14px;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.25;
}
.prose ul {
  max-width: 680px;
  margin: 0 0 20px;
  padding-left: 1.2em;
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--muted);
}
.prose li { margin-bottom: 6px; }
.prose p a, .prose li a { color: inherit; text-underline-offset: 3px; }
.prose p a:hover, .prose li a:hover { color: var(--ink); }
.prose .updated { font-size: 15px; }
.prose .small-link { font-size: 14px; color: var(--muted); text-underline-offset: 3px; }
.prose .small-link:hover { color: var(--ink); }

/* Rush: the page a challenge link lands on anywhere but an iPhone. */

.prose .rush-who { margin: 0 0 4px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; line-height: 1.25; color: var(--ink); }
.prose .rush-tries { font-size: 15px; }
.rush .store { margin-top: 12px; }

/* ---------- Press ---------- */

/* The press kit: a sticky list of sections beside the content, which lights
   up the section being read. On a phone the list goes and its Download all
   button sits under the fact sheet instead. */
.press {
  max-width: 1180px;
  margin: 0 auto;
  padding: 128px clamp(20px, 5vw, 80px) 140px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
}

.press h1 {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(44px, 7vw, 88px);
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

.press-lede {
  grid-column: 1 / -1;
  margin: -8px 0 0;
  max-width: 36em;
  font-size: clamp(18px, 1.9vw, 22px);
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.press-side { position: sticky; top: 32px; align-self: start; display: grid; gap: 4px; }

.press-side a:not(.btn) {
  position: relative;
  padding: 8px 0 8px 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--quiet);
  text-decoration: none;
  transition: color .2s;
}

.press-side a:not(.btn)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: currentColor;
  transform: scale(.5);
  transition: transform .3s cubic-bezier(.2, .9, .3, 1.4);
}

.press-side a.on, .press-side a:not(.btn):hover { color: var(--ink); }
.press-side a.on::before { transform: scale(1.2); }
.press-side .btn { margin-top: 20px; justify-content: center; padding: 12px 16px; font-size: 14px; }
.press-side-note { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; margin-top: 4px; }

.press-body section { padding-top: 8px; margin-bottom: clamp(56px, 8vw, 96px); scroll-margin-top: 32px; }
.press-body section:last-child { margin-bottom: 0; }

.press-body h2 {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.press-sub { margin: 28px 0 12px; font-size: 15px; font-weight: 800; }

.press-intro { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 32px; align-items: start; }
.press-intro img { width: 168px; height: 168px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .18)); }

.press-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 1px solid var(--rule); }
.press-facts div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.press-facts dt { font-size: 13px; font-weight: 700; color: var(--muted); }
.press-facts dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.press-facts a { text-underline-offset: 3px; }

.press .press-all-phone { display: none; }

.press-desc { position: relative; padding: 24px 24px 20px; border-radius: 20px; background: var(--tile); margin-bottom: 14px; }
.press-desc h3 { margin: 0 0 10px; font-size: 14px; font-weight: 800; }
.press-desc .copy { position: absolute; top: 18px; right: 18px; background: var(--bg); }
.press-desc p { margin: 0 0 12px; font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--muted); }
.press-desc p:last-child { margin: 0; }

.press-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; }
.press-features h3 { margin: 0 0 6px; font-size: 19px; font-weight: 800; }
.press-features p { margin: 0; font-weight: 500; line-height: 1.5; color: var(--muted); }

.press-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.press-raw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.press-shots .shot, .press-raw .shot { background: var(--tile); }

.press-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.press-row .btn { white-space: nowrap; }

/* The marks sit on their own white and black, whatever the page's theme. */
.press-brand { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.press-brand figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--tile);
}
.press-brand figure.light { background: #fff; box-shadow: inset 0 0 0 1px #e8ecf1; }
.press-brand figure.dark { background: #000; }
.press-brand figure img { width: 42%; height: auto; }
.press-brand figure.icon img { width: 46%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2)); }
.press-brand figure.art { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.press-brand figure.art img { width: 100%; height: 100%; object-fit: cover; }
.press-brand figcaption { position: absolute; left: 16px; bottom: 12px; font-size: 12px; font-weight: 700; color: #94a3b8; }
.press-brand figure.art figcaption { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 8px rgba(0, 0, 0, .4); }

.press-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  padding: 36px;
  border-radius: 24px;
  background: var(--ink);
  color: var(--bg);
}
.press-contact p { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.2; }
.press-contact span { display: block; margin-top: 6px; font-size: 16px; font-weight: 500; opacity: .6; }
.press-contact .btn { background: var(--bg); color: var(--ink); }

@media (max-width: 860px) {
  .press { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 112px; }
  .press-side { display: none; }
  .press-intro { grid-template-columns: 1fr; gap: 20px; }
  .press-intro img { width: 112px; height: 112px; }
  .press-facts, .press-features { grid-template-columns: 1fr; }
  .press .press-all-phone { display: flex; justify-content: center; width: 100%; margin-top: 24px; padding: 16px 24px; }
  .press-shots { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .press-raw { grid-template-columns: repeat(2, 1fr); }
  .press-brand { grid-template-columns: 1fr 1fr; }
  .press-brand figure.icon { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .press-brand figure.art { aspect-ratio: 16 / 10; }
  .press-contact { padding: 28px; }
}

/* ---------- Buttons, copy, lightbox, toast ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: 14px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.3), box-shadow .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .5); }
.btn:focus-visible { outline: 3px solid var(--quiet); outline-offset: 3px; }
.btn.ghost { background: var(--tile); color: var(--ink); }
.btn small { font-size: 13px; font-weight: 500; opacity: .6; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--tile);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.copy:hover { background: var(--tile-mark); }
.copy svg { width: 14px; height: 14px; }
.copy svg * { fill: none; stroke: currentColor; stroke-width: 2; }

.shot { display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; transition: transform .5s cubic-bezier(.2, .9, .3, 1); }
.shot:hover img { transform: scale(1.03); }
.shot:focus-visible { outline: 3px solid var(--quiet); outline-offset: 3px; }

.lightbox { padding: 0; border: 0; background: transparent; max-width: 92vw; max-height: 92vh; overflow: visible; }
.lightbox::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(6px); }
.lightbox img { display: block; max-width: 92vw; max-height: 88vh; border-radius: 18px; }
.lightbox[open] img { animation: pop .35s cubic-bezier(.2, .9, .3, 1.15); }
.lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
@keyframes pop { from { opacity: 0; transform: scale(.94); } }

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 60;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* Sections rise in as they scroll into view (site.js adds .in). */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2, .9, .3, 1), transform .7s cubic-bezier(.2, .9, .3, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Footer ---------- */

/* Solid black in both themes. Bottom padding clears the running creatures. */
.site-footer {
  position: relative;
  background: #000;
  color: #fff;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 48px) calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid #16191e;
}

.site-footer .footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px 48px;
}

.site-footer .footer-mark {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 900;
  line-height: 1;
  font-style: oblique 10deg;
  font-variation-settings: "slnt" -10;
  color: #fff;
  text-decoration: none;
}

.site-footer .footer-mark + p { margin: 12px 0 0; }

.site-footer p { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: rgba(255, 255, 255, .55); }

.site-footer nav {
  display: grid;
  grid-auto-flow: row;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.site-footer nav a,
.site-footer .footer-legal a { color: rgba(255, 255, 255, .55); text-decoration: none; transition: color .2s; }
.site-footer nav a:hover,
.site-footer .footer-legal a:hover { color: #fff; }

.site-footer .footer-legal {
  flex-basis: 100%;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
}

.site-footer .footer-legal .owner { color: #fff; }

/* ---------- Running creatures ---------- */

.runners {
  position: absolute;
  left: 0;
  bottom: env(safe-area-inset-bottom);
  width: 100%;
  height: 64px;
  overflow: hidden;
  pointer-events: none;
  z-index: 20;
}

.runners div { position: absolute; bottom: 0; width: 64px; height: 64px; }

.runners img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;   /* frames are wider than tall: feet on the edge, not centered */
  image-rendering: pixelated;
  filter: brightness(0) invert(1);   /* white on the footer's black */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark .letter, .hero-copy > *, .hero-video, .reveal { transition: none; animation: none; opacity: 1; transform: none; }
}