/* Firedance: a full-height hero with a full-width wordmark (after romemichal.pl's footer), then
   that site's "Selected works" list, on the same side margins and column split. */

:root {
  --bg: #fff;
  --ink: #0a0a0a;
  --muted: #8a8a8a;
  --line: #e7e7e7;
  --pill: #f0f0f0;
  --radius: 10px;
  --px: 20px;
  --sans: 'Geist', 'Helvetica Neue', Arial, sans-serif;
  --blackletter: 'UnifrakturCook', 'Old English Text MT', serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Side margins follow the reference: 20px, then 64px, then 120px, then a centred 1600px column. */
@media (min-width: 768px) { :root { --px: 64px; } }
@media (min-width: 1280px) { :root { --px: max(120px, calc((100vw - 1600px) / 2)); } }

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 15px/1.5 var(--sans);
  letter-spacing: -0.02em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 0 var(--px);
}

.hero__mark { display: block; width: 100%; height: auto; overflow: visible; }
.hero__mark text {
  fill: currentColor;
  font: 700 278px/1 var(--blackletter);
}

/* Multiplayer cursors: a solid pointer with a rounded name tag in its colour (--c, set inline),
   each wandering its own loop with pauses, as if people were working on the page. Positions
   are in viewport units across the hero. */
.cursors { position: absolute; inset: 0; pointer-events: none; }
.cursor {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--c);
  animation: var(--path) var(--time) cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.cursor svg { display: block; width: 20px; height: 20px; }
.cursor span {
  position: absolute;
  top: 17px;
  left: 15px;
  padding: 7px 13px;
  border-radius: 999px;
  background: var(--c);
  color: var(--c-ink, #fff);
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cursor--1 { --path: wander-1; --time: 14s; }
.cursor--2 { --path: wander-2; --time: 17s; }
.cursor--3 { --path: wander-3; --time: 19s; }
.cursor--4 { --path: wander-4; --time: 16s; }

@keyframes wander-1 {
  0%, 12% { transform: translate(14vw, 22svh); }
  30%, 42% { transform: translate(31vw, 30svh); }
  60% { transform: translate(22vw, 37svh); }
  72% { transform: translate(24vw, 36svh); }
  88% { transform: translate(12vw, 26svh); }
  100% { transform: translate(14vw, 22svh); }
}
@keyframes wander-2 {
  0%, 15% { transform: translate(74vw, 70svh); }
  35%, 47% { transform: translate(62vw, 58svh); }
  65% { transform: translate(78vw, 50svh); }
  77% { transform: translate(76vw, 53svh); }
  100% { transform: translate(74vw, 70svh); }
}
@keyframes wander-3 {
  0%, 18% { transform: translate(44vw, 80svh); }
  40%, 50% { transform: translate(55vw, 74svh); }
  70%, 82% { transform: translate(38vw, 69svh); }
  100% { transform: translate(44vw, 80svh); }
}
@keyframes wander-4 {
  0%, 14% { transform: translate(66vw, 16svh); }
  34%, 46% { transform: translate(54vw, 27svh); }
  64% { transform: translate(72vw, 31svh); }
  76% { transform: translate(70vw, 29svh); }
  100% { transform: translate(66vw, 16svh); }
}

@media (max-width: 720px) {
  .cursor--3,
  .cursor--4 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
  .cursor--1 { transform: translate(14vw, 22svh); }
  .cursor--2 { transform: translate(74vw, 70svh); }
  .cursor--3 { transform: translate(44vw, 80svh); }
  .cursor--4 { transform: translate(66vw, 16svh); }
}

/* ---------- Selected work ---------- */

.work { padding: 0 var(--px) clamp(48px, 8vw, 120px); }

.work__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding: 24px 0 40px;
}

.work__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.work__title {
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
  text-wrap: pretty;
}
.work__title span { color: var(--muted); }
.work__arrow { display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.15em; vertical-align: 0.35em; }

.work__summary { max-width: 34em; }
.work__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--pill);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.pill--status { background: none; box-shadow: inset 0 0 0 1px var(--line); }

.work__media {
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  background: var(--pill);
}
.work__media img { width: 100%; height: 100%; object-fit: cover; }

/* Two columns as in the reference: text in a third, image in two thirds, 80px apart. */
@media (min-width: 1024px) {
  .work__row {
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    align-items: start;
    padding: 32px 0;
  }
  .work__text { gap: 24px; padding-right: 64px; }
}

/* ---------- 404 ---------- */

.missing { padding: 20vh var(--px); font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.03em; }
.missing a { text-decoration: underline; text-underline-offset: 0.15em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}