/* FullSpeed Games. Paper and ink page chrome (DoorDarius house style) with the
   Donna's Quest title-screen world inside every dark "screen". Pixel art is
   drawn at 1x below 1280px and at 2x from 1280px up; never at a fraction. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Tiny5";
  src: url("/assets/fonts/tiny5-latin.woff2?v=k2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #f4f1ea;
  --paper-shade: #ebe7dd;
  --ink: #0f141d;
  --ink-soft: #2a3140;
  --ink-muted: #62676f;
  --muted: #9aa1ad;
  --accent: #fdd352;
  --gold-on-paper: #7a5f14;
  --hairline: rgba(15, 20, 29, 0.16);
  --hairline-dark: rgba(244, 241, 234, 0.16);

  --night: #1d1b21;
  --couch: #571d1b;
  --window: #182d59;
  --wood: #9b582b;
  --glow: #96f0fe;
  --highlight: #e4f6ef;

  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: "Tiny5", var(--mono);

  --gutter: clamp(20px, 4.5vw, 76px);
  --max: 1280px;
  --measure: 38em;
  --h1: clamp(2.5rem, 5.6vw, 5.5rem);
  --h2: clamp(1.9rem, 3.6vw, 3.5rem);
  --h3: clamp(1.3rem, 1.4vw + 0.6rem, 1.9rem);
  --radius: 14px;
  --ease-sweep: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* Pixel scale and the horizontal shift of the hero room on narrow phones. */
  --px: 1;
  --shift: 0px;
  --stage-left: max(0px, calc(50% - 320px * var(--px)));
}
@media (min-width: 1280px) {
  :root { --px: 2; }
}
@media (max-width: 639px) {
  :root { --shift: -65px; }
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font: 400 1.0625rem/1.55 var(--display);
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.on-night :focus-visible, .on-night:focus-visible { outline-color: var(--glow); }
img { display: block; max-width: 100%; }
.pixel, .pixel img { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: var(--h1); font-weight: 790; line-height: 0.96; letter-spacing: -0.025em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); }
strong, b { font-weight: 600; }
.skip {
  position: absolute; left: var(--gutter); top: -3rem;
  padding: 0.5rem 0.9rem; background: var(--ink); color: var(--paper);
  border-radius: 999px; text-decoration: none; font-weight: 600; z-index: 20;
}
.skip:focus { top: 0.75rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Type helpers */

.lede {
  font-size: clamp(1.125rem, 1.3vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}
.meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}
.meta a { text-decoration-color: var(--hairline); text-underline-offset: 0.2em; }
.meta a:hover { text-decoration-color: var(--ink); }
.px-label {
  font: 16px/16px var(--pixel);
  letter-spacing: 0;
  color: var(--highlight);
  text-shadow: 1px 1px 0 var(--night), -1px -1px 0 var(--night), 1px -1px 0 var(--night), -1px 1px 0 var(--night);
}
.marker {
  background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 94%, transparent 94%);
  color: inherit;
  padding: 0 0.06em;
  margin: 0 -0.06em;
}
.prose p, .prose li { max-width: var(--measure); text-wrap: pretty; }
.prose h2 { margin: 3rem 0 1rem; }
.prose h3 { margin: 2.25rem 0 0.75rem; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 0.35em; }
.prose a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; text-decoration-color: var(--ink-muted); }
.prose a:hover { text-decoration-color: var(--ink); }

/* Links and buttons */

.link {
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 88% / 0% 0.45em, linear-gradient(var(--hairline), var(--hairline)) no-repeat 0 100% / 100% 1px;
  transition: background-size 0.45s var(--ease-sweep);
  padding-bottom: 3px;
}
.link:hover, .link:focus-visible { background-size: 100% 0.45em, 100% 1px; }
.link svg { display: inline-block; vertical-align: -0.1em; margin-left: 0.25em; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 6px 6px 6px 22px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.975rem;
  line-height: 1.2;
  text-decoration: none;
  background: transparent;
  transition: background-color 0.4s var(--ease-sweep), color 0.4s var(--ease-sweep);
}
.btn .disc {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  transition: background-color 0.4s var(--ease-sweep), color 0.4s var(--ease-sweep), transform 0.4s var(--ease-sweep);
}
.btn svg { display: block; }
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--paper); }
.btn:hover .disc, .btn:focus-visible .disc { transform: translateX(2px); }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid .disc { background: var(--accent); color: var(--ink); border-color: transparent; }
.btn-solid:hover, .btn-solid:focus-visible { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.btn-solid:hover .disc, .btn-solid:focus-visible .disc { background: var(--ink); color: var(--paper); }
/* Not a link yet: a quiet status pill, no hover, no arrow */
.btn-soon, .btn-soon:hover { padding: 14px 22px; background: transparent; color: var(--ink-muted); border-color: var(--hairline); cursor: default; }
.btn-sm.btn-soon { padding: 8px 14px; }
.dream .btn.btn-soon, .dream .btn.btn-soon:hover { color: var(--ui-muted); border-color: var(--ui-line); background: transparent; }
.btn-sm { padding: 3px 3px 3px 14px; font-size: 0.875rem; gap: 0.6rem; }
.btn-sm .disc { width: 28px; height: 28px; }
.actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2rem;
}

/* Header */

.site-head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1.75rem;
  max-width: var(--max); margin-inline: auto;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--hairline);
}
.brand {
  display: inline-grid; gap: 4px; flex: 0 0 auto;
  font-family: var(--pixel); font-weight: 400; letter-spacing: 0;
  text-decoration: none; color: var(--ink);
  margin-right: auto;
}
.brand .wm-a { font-size: 24px; line-height: 24px; color: var(--ink); }
.brand .wm-b { font-size: 16px; line-height: 16px; letter-spacing: 2px; color: var(--gold-on-paper); }
.brand:hover .wm-a, .brand:focus-visible .wm-a { color: var(--ink-soft); }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; font-size: 0.95rem; }
.site-nav a { text-decoration: none; padding: 0.25rem 0; }
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.35em; text-decoration-thickness: 1px; }
.site-nav a[aria-current="page"] {
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
/* Brand, nav and button only fit one row from about 740px; below that the nav takes its own row */
@media (max-width: 759px) {
  .site-nav { order: 3; flex-basis: 100%; }
}
@media (max-width: 639px) {
  .site-head { padding-block: 12px 10px; column-gap: 1rem; }
}
/* Narrow phones: short button label and tighter nav so it stays beside the wordmark; screen readers still hear the full label */
@media (max-width: 369px) {
  .site-head .btn-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-nav { font-size: 0.875rem; column-gap: 0.875rem; }
}

.studio-logo-previews { display: grid; align-content: start; gap: 1.5rem; }
.studio-logo-preview { margin: 0; padding: 2rem; background: var(--paper-shade); }
.studio-logo-preview img { width: 218px; height: 49px; max-width: 100%; image-rendering: pixelated; }
@media (min-width: 640px) { .studio-logo-preview img { width: 436px; height: 98px; } }
.studio-logo-preview-dark { background: var(--ui-ink, #142724); }

/* Layout */

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-top: clamp(72px, 11vh, 150px); }
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 2rem;
  border-top: 1px solid var(--hairline);
  padding-top: 1rem;
  margin-bottom: clamp(1.5rem, 3vh, 2.5rem);
}
.cols { display: grid; gap: 1.5rem 3rem; align-items: start; }
.cols > * { min-width: 0; }
@media (min-width: 900px) {
  .cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .cols > .lead { grid-column: 1; }
  .cols > .body { grid-column: 2; }
}
.page-head { padding-top: clamp(56px, 9vh, 120px); }
.page-head h1 { max-width: 14ch; }
.page-head .lede { margin-top: 1.5rem; }

/* Hero: the living room as a screen in the page */

.hero {
  position: relative;
  overflow: hidden;
  height: calc(360px * var(--px));
  background: var(--night);
}
.stage {
  position: absolute; top: 0; left: 50%;
  width: calc(640px * var(--px));
  height: calc(360px * var(--px));
  transform: translateX(calc(-50% + var(--shift)));
}
.stage .room { width: 100%; height: 100%; }
.glow { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.glow-lamp {
  left: calc(183px * var(--px)); top: calc(37px * var(--px));
  width: calc(92px * var(--px)); height: calc(92px * var(--px));
  border-radius: 50%;
  background: radial-gradient(circle, #d08a3a 0%, rgba(176, 106, 40, 0.5) 40%, transparent 70%);
  opacity: 0.32;
  animation: lamp 3.9s ease-in-out infinite alternate;
}
.glow-tv {
  left: calc(490px * var(--px)); top: calc(102px * var(--px));
  width: calc(128px * var(--px)); height: calc(112px * var(--px));
  background: #6fa0ff;
  opacity: 0.06;
  animation: tv 2.9s linear infinite;
}
@keyframes lamp { from { opacity: 0.22; } to { opacity: 0.4; } }
@keyframes tv {
  0%, 100% { opacity: 0.05; }
  48% { opacity: 0.1; }
  95% { opacity: 0.05; }
  96%, 97% { opacity: 0.2; }
  98% { opacity: 0.05; }
}
.ink-col {
  position: absolute; top: 0; bottom: 0;
  left: var(--stage-left);
  width: calc(270px * var(--px));
  background: linear-gradient(90deg, rgba(15, 20, 29, 0.85), rgba(15, 20, 29, 0));
  pointer-events: none;
}
.hero .logo {
  position: absolute;
  left: calc(var(--stage-left) + 26px * var(--px));
  top: calc(16px * var(--px));
  width: calc(176px * var(--px));
  height: calc(98px * var(--px));
}
.donna {
  position: absolute;
  left: calc(354px * var(--px)); top: calc(161px * var(--px));
  width: calc(104px * var(--px)); height: calc(72px * var(--px));
  background: url("/assets/img/donna-title-strip.webp") no-repeat 0 0;
  background-size: calc(1768px * var(--px)) calc(72px * var(--px));
  background-position-x: calc(-832px * var(--px));
  image-rendering: pixelated;
  transform: scaleX(-1);
  animation: sit 1.35s steps(9, jump-none) 0.9s both;
}
.donna::after {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  background-position-x: calc(-728px * var(--px));
  opacity: 0;
  animation: glance 7s linear 3s infinite;
}
@keyframes sit { from { background-position-x: 0; } to { background-position-x: calc(-832px * var(--px)); } }
@keyframes glance { 0%, 92.5% { opacity: 0; } 92.6%, 99.9% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .donna, .donna::after, .glow { animation: none; }
  .donna { background-position-x: calc(-832px * var(--px)); }
  .glow-lamp { opacity: 0.3; }
  .glow-tv { opacity: 0.07; }
}

.intro { padding-top: clamp(48px, 7vh, 96px); }
.intro h1 { max-width: 13ch; }
.intro .lede { margin-top: 1.75rem; }

/* Still strip: one screen per slide, pixel art at integer scale, cropped not scaled */

.strip { background: var(--night); color: var(--highlight); margin-top: clamp(1.5rem, 3vh, 2.5rem); }
.strip-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--muted) var(--night);
  list-style: none; margin: 0; padding: 0;
}
.strip-track:focus-visible { outline: 2px solid var(--glow); outline-offset: -2px; }
.still {
  flex: 0 0 100%;
  position: relative;
  scroll-snap-align: start;
  height: calc(var(--h, 264px) * var(--px));
  overflow: hidden;
  margin: 0;
}
.still img {
  position: absolute; top: 0; left: 50%;
  width: calc(640px * var(--px));
  height: calc(var(--h, 264px) * var(--px));
  max-width: none;
  transform: translateX(-50%);
}
/* Phones: crop from the left so the logo and menu of a title screen stay whole */
@media (max-width: 639px) {
  .still.from-left img { left: 0; transform: none; }
}
.still figcaption { position: absolute; right: 16px; top: 12px; }
.still figcaption.cap-low { top: auto; bottom: 12px; }
.strip-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem;
  padding: 0.7rem var(--gutter);
  border-top: 1px solid var(--hairline-dark);
  color: var(--muted);
  font-family: var(--mono); font-size: 0.8125rem;
}
.strip-foot ol { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; list-style: none; margin: 0; padding: 0; counter-reset: slide; }
.strip-foot li { display: flex; gap: 0.5rem; counter-increment: slide; }
.strip-foot li::before { content: counter(slide) "."; color: var(--muted); }
.strip-foot svg { vertical-align: -0.15em; }

/* Lists and tables of facts */

.features, .facts { margin: 0; padding: 0; list-style: none; }
.features li, .facts > div {
  display: grid; gap: 0.25rem 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--hairline);
}
.features li:last-child, .facts > div:last-child { border-bottom: 1px solid var(--hairline); }
.features b, .facts dt { font-weight: 600; }
.facts dt { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); padding-top: 0.2rem; }
.facts dd { margin: 0; }
.features span, .facts dd { max-width: var(--measure); text-wrap: pretty; }
@media (min-width: 640px) {
  .features li, .facts > div { grid-template-columns: minmax(9rem, 13rem) 1fr; }
}

.downloads { list-style: none; padding: 0; margin: 0; }
.downloads li { padding: 0.9rem 0; border-top: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: baseline; justify-content: space-between; }
.downloads li:last-child { border-bottom: 1px solid var(--hairline); }
.downloads .meta { margin-left: auto; }

.logo-sheet {
  display: grid; gap: 1rem;
  padding: 2rem;
  border-radius: var(--radius);
  background: var(--night);
  place-items: center;
}
.logo-sheet img { width: calc(176px * var(--px)); height: calc(98px * var(--px)); }

.photo { margin: 0; max-width: 420px; }
.photo img { width: 100%; height: auto; border-radius: var(--radius); background: var(--paper-shade); }
.photo figcaption { margin-top: 0.6rem; }
.prose .photo { margin: 2rem 0 2.5rem; }

.desc { border-top: 1px solid var(--hairline); padding: 1.25rem 0 0.5rem; }
.desc h3 { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.desc .meta { font-weight: 500; }

.game-head { display: grid; gap: 2rem; align-items: end; }
.game-head .logo-big { width: calc(176px * var(--px)); height: calc(98px * var(--px)); }
@media (min-width: 900px) {
  .game-head { grid-template-columns: auto 1fr; }
}

/* Calls to action band */

.cta { padding-top: clamp(72px, 11vh, 150px); }
.cta h2 { max-width: 16ch; }

/* Footer */

.site-foot {
  margin-top: clamp(80px, 12vh, 160px);
  max-width: var(--max); margin-inline: auto;
  border-top: 1px solid var(--hairline);
  padding: 2rem var(--gutter) 3rem;
  color: var(--ink-muted);
  font-size: 0.9rem;
  display: grid; gap: 1.25rem 3rem;
}
.site-foot p { margin: 0; max-width: 40em; }
.site-foot a { text-underline-offset: 0.2em; text-decoration-color: var(--hairline); }
.site-foot a:hover { text-decoration-color: var(--ink); color: var(--ink); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@media (min-width: 900px) {
  .site-foot { grid-template-columns: 1fr auto; grid-template-rows: auto auto; }
  .site-foot nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .site-foot .copy { grid-column: 1 / -1; }
}

/* Dream surfaces: the game's own menu material (UI_INK, UI_PANEL, UI_LINE, UI_GOLD, UI_TEXT, UI_MUTED) */

:root {
  --ui-ink: #142724;
  --ui-panel: #1c302c;
  --ui-line: #52604a;
  --ui-gold: #dab979;
  --ui-text: #f3e7ca;
  --ui-muted: #a8b6a0;
  --ico: 2;
}
@media (min-width: 1280px) {
  :root { --ico: 3; }
}
.dream {
  background: var(--ui-ink);
  color: var(--ui-text);
  margin-top: clamp(72px, 11vh, 150px);
  padding-block: clamp(56px, 8vh, 112px);
}
.dream + .dream { margin-top: 0; padding-top: 0; }
.page-head.dream { margin-top: 0; padding-top: clamp(40px, 6vh, 80px); }
.dream h1, .dream h2, .dream h3, .dream .lede { color: var(--ui-text); }
.dream .meta { color: var(--ui-muted); }
.dream :focus-visible { outline-color: var(--ui-gold); }
.dream ::selection { background: var(--ui-gold); color: var(--ui-ink); }
.dream .link {
  color: var(--ui-text);
  background-image: linear-gradient(var(--ui-gold), var(--ui-gold)), linear-gradient(var(--ui-line), var(--ui-line));
  background-size: 0% 2px, 100% 1px;
  background-position: 0 100%, 0 100%;
}
.dream .link:hover, .dream .link:focus-visible { background-size: 100% 2px, 100% 1px; color: var(--ui-gold); }
.dream .btn { border-color: var(--ui-gold); color: var(--ui-text); }
.dream .btn .disc { border-color: var(--ui-line); }
.dream .btn:hover, .dream .btn:focus-visible { background: var(--ui-gold); color: var(--ui-ink); }
.dream .btn-solid { background: var(--ui-gold); color: var(--ui-ink); border-color: var(--ui-gold); }
.dream .btn-solid .disc { background: var(--ui-ink); color: var(--ui-gold); }
.dream .btn-solid:hover, .dream .btn-solid:focus-visible { background: var(--ui-text); color: var(--ui-ink); border-color: var(--ui-text); }
.dream .btn-solid:hover .disc, .dream .btn-solid:focus-visible .disc { background: var(--ui-ink); color: var(--ui-text); }
.dream .facts > div { border-top-color: var(--ui-line); }
.dream .facts > div:last-child { border-bottom-color: var(--ui-line); }
.dream .facts dt { color: var(--ui-muted); }

/* The menu panel frame, 9-sliced from spr_menu_panel at 40 source pixels per side */
.panel {
  --edge: calc(40px * var(--px));
  position: relative;
  background: var(--ui-panel);
  border: var(--edge) solid transparent;
  border-image: url("/assets/img/ui/panel-9slice.webp") 40 / calc(40px * var(--px)) / 0 round;
  image-rendering: pixelated;
  padding: clamp(0.25rem, 1.5vw, 1.25rem) clamp(0.25rem, 1.5vw, 1.25rem) calc(16px * var(--px) + 1.5rem);
}
.panel > * { image-rendering: auto; }
.panel .pixel, .panel .pixel * { image-rendering: pixelated; }
.panel .game-head { margin-top: 0; }
/* Phones: the frame art is only 17px deep outside the corners, so tighten the border and let the frame reach toward the screen edge */
@media (max-width: 639px) {
  .panel { --edge: 24px; margin-inline: calc(8px - var(--gutter)); padding-inline: 0.75rem; }
}

/* Moves and powers: HUD icons and element effects at integer scale */
.moves { list-style: none; margin: 2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; }
.moves li { display: grid; justify-items: center; gap: 0.6rem; min-width: calc(32px * var(--ico)); }
.moves .px-label { text-shadow: none; color: var(--ui-gold); text-align: center; }
.ico {
  display: block;
  width: calc(32px * var(--ico)); height: calc(32px * var(--ico));
  background-repeat: no-repeat;
  background-size: calc(32px * var(--ico)) calc(32px * var(--ico));
  image-rendering: pixelated;
}
.ico-quick { background-image: url("/assets/img/ui/icon-quick.webp"); }
.ico-heavy { background-image: url("/assets/img/ui/icon-heavy.webp"); }
.ico-dash { background-image: url("/assets/img/ui/icon-dash.webp"); }
.ico-jump { background-image: url("/assets/img/ui/icon-jump.webp"); }
.ico-fire, .ico-frost, .ico-storm {
  background-size: calc(160px * var(--ico)) calc(32px * var(--ico));
  animation: fx 0.75s steps(5) infinite;
}
.ico-fire { background-image: url("/assets/img/ui/fx-fire.webp"); }
.ico-frost { background-image: url("/assets/img/ui/fx-frost.webp"); animation-delay: 0.25s; }
.ico-storm { background-image: url("/assets/img/ui/fx-lightning.webp"); animation-delay: 0.5s; }
@keyframes fx { to { background-position-x: calc(-160px * var(--ico)); } }
.features .ico { --ico: 2; align-self: start; }
@media (min-width: 640px) {
  .features li.has-ico { grid-template-columns: 64px minmax(8rem, 12rem) 1fr; }
}
@media (max-width: 639px) {
  .features li.has-ico { grid-template-columns: 64px 1fr; }
  .features li.has-ico span { grid-column: 2; }
}

/* Donna runs along the inner bottom edge of a panel */
.track {
  position: absolute; left: 0; right: 0;
  bottom: calc(14px * var(--px) - var(--edge));
  height: calc(42px * var(--px));
  overflow: hidden;
  pointer-events: none;
}
.runner {
  position: absolute; top: 0; left: 1rem;
  width: calc(74px * var(--px)); height: calc(42px * var(--px));
  background: url("/assets/img/ui/donna-run-strip.webp") 0 0 / calc(1258px * var(--px)) calc(42px * var(--px)) no-repeat;
  image-rendering: pixelated;
  animation: run-cycle 1.1s steps(17) infinite, run-cross 18s linear infinite;
}
@keyframes run-cycle { to { background-position-x: calc(-1258px * var(--px)); } }
@keyframes run-cross { from { left: calc(-80px * var(--px)); } to { left: 100%; } }

/* Donna lies down and sleeps on the edge of the wishlist band */
.cta.dream { padding-bottom: 0; }
main:has(> .dream:last-child) + .site-foot { margin-top: 0; padding-top: 2.5rem; }
.cta-grid { display: grid; gap: 2rem 3rem; align-items: end; }
.cta-grid > div:first-child { padding-bottom: clamp(56px, 8vh, 112px); }
@media (max-width: 899px) {
  .cta-grid > div:first-child { padding-bottom: 0; }
}
@media (min-width: 900px) {
  .cta-grid { grid-template-columns: 1fr auto; }
}
.sleeper {
  --s: 3;
  position: relative;
  width: calc(74px * var(--s)); height: calc(42px * var(--s));
  background: url("/assets/img/ui/donna-sleep-strip.webp") 0 0 / calc(666px * var(--s)) calc(42px * var(--s)) no-repeat;
  background-position-x: calc(-592px * var(--s));
  image-rendering: pixelated;
  justify-self: end;
  animation: lie-down 1.6s steps(9, jump-none) 1s both;
}
@keyframes lie-down { from { background-position-x: 0; } to { background-position-x: calc(-592px * var(--s)); } }
.sleeper .z {
  position: absolute; left: 66%; top: 38%;
  font: 16px/16px var(--pixel);
  color: var(--ui-gold);
  opacity: 0;
  animation: zz 3s steps(12) 3s infinite;
}
.sleeper .z:nth-child(2) { animation-delay: 4s; left: 74%; top: 30%; }
.sleeper .z:nth-child(3) { animation-delay: 5s; left: 82%; top: 20%; font-size: 24px; line-height: 24px; }
@keyframes zz {
  0% { opacity: 0; transform: translate(0, 0); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translate(12px, -48px); }
}

/* Small portrait next to a heading */
.with-portrait { display: flex; align-items: center; gap: 1rem; }
.portrait { width: 96px; height: 96px; image-rendering: pixelated; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .ico-fire, .ico-frost, .ico-storm, .sleeper .z { animation: none; }
  .sleeper .z:nth-child(2) { opacity: 1; }
  .runner {
    animation: none;
    left: 1rem;
    background-image: url("/assets/img/ui/donna-idle-strip.webp");
    background-size: calc(518px * var(--px)) calc(42px * var(--px));
  }
  .sleeper { animation: none; }
}

/* Darius as a sprite: three outfits on About, and standing next to Donna on home */
.duo img { width: 128px; height: 128px; }
.duo figcaption { margin-top: 0.6rem; }
.duo { margin: 1.75rem 0 0; }
.duo .stand { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0 0.5rem; border-bottom: 1px solid var(--hairline); width: max-content; max-width: 100%; }
.donna-idle {
  width: 148px; height: 84px;
  background: url("/assets/img/ui/donna-idle-strip.webp") 0 0 / 1036px 84px no-repeat;
  image-rendering: pixelated;
  transform: scaleX(-1);
  margin-bottom: 2px;
  animation: idle 1.05s steps(7) infinite;
}
@keyframes idle { to { background-position-x: -1036px; } }
@media (prefers-reduced-motion: reduce) { .donna-idle { animation: none; } }