:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #000;
  color: #f2f2f2;
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 517px; margin: 0 auto; padding: 32px 16px 48px; }
main.page { max-width: 640px; }

a { color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }

/* strona główna */
.profile { text-align: center; }
.logo { width: 112px; height: 112px; margin: 0 auto 24px; border: 4px solid #fff; border-radius: 50%; }
h1 { margin: 0; font-size: 1.75rem; font-weight: 300; line-height: 1.25; }
.tagline { margin: 8px 0 0; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }

.about { max-width: 42ch; margin: 16px auto 0; color: #aaa; font-size: .875rem; }

.icons { display: flex; justify-content: center; gap: 16px; margin: 20px 0 28px; padding: 0; list-style: none; }
.icons a { display: block; padding: 8px; }
.icons img { display: block; height: 22px; width: auto; }

.links { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.btn {
  display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 12px 16px;
  background: #1c1c1c; border-radius: 3px;
  font-size: .875rem; text-align: center; text-decoration: none;
}
.btn:hover { background: #2a2a2a; }

.projects { margin-top: 40px; padding-top: 32px; border-top: 1px solid #222; }
.projects h2 { margin: 0 0 20px; color: #888; font-size: .7rem; font-weight: 400; letter-spacing: .05em; text-align: center; text-transform: uppercase; }

footer { margin-top: 40px; color: #888; font-size: .8rem; text-align: center; }

/* podstrona */
.back { display: inline-block; margin-bottom: 32px; color: #aaa; font-size: .875rem; text-decoration: none; }
.back:hover { color: #fff; }
.hero { width: 100%; aspect-ratio: 16 / 9; margin: 16px 0 24px; border-radius: 3px; object-fit: cover; }
.lead { margin: 12px 0 32px; color: #bbb; font-size: 1.1rem; }
.content { margin-bottom: 32px; }
.content h2 { margin: 1.8em 0 .5em; font-size: 1.1rem; }
.content h2:first-child { margin-top: 0; }
.content p, .content ul { margin: 0 0 1em; }
.media { display: grid; gap: 16px; margin-bottom: 32px; }
.video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 32px; border: 0; }