/* demo.rekit.net: RePORT's screenshot tour. Same look as rekit.net; nothing from other sites. */
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

:root { --bg: #111315; --fg: #e6e4de; --muted: #a9a69e; --faint: #8c8981; --accent: #f2b035; --line: #2a2d31; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); }
body { color: var(--fg); font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.5; }
a { color: var(--accent); }
a:hover, a:focus-visible { color: #ffd27a; }

main { max-width: 1080px; margin: 0 auto; padding: 72px 24px 96px; }
.back { margin: 0 0 56px; font-size: 14px; }
h1 { margin: 0; font-size: 24px; font-weight: 600; }
.lede { margin: 8px 0 0; color: var(--muted); }
.note { margin: 4px 0 56px; font-size: 13px; color: var(--faint); }

figure { margin: 0 0 56px; }
figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 8px; }
figure.narrow img { max-width: 540px; }
figcaption { margin-top: 10px; font-size: 14px; color: var(--faint); }

@media (max-width: 480px) { main { padding: 48px 16px 64px; } figure { margin-bottom: 40px; } }