/* orbithop.codehappens.dev — bez fontów i skryptów z zewnątrz (CSP default-src 'self'). */
:root {
  --color-paper:  oklch(17% 0.045 290);
  --color-rule:   oklch(32% 0.05 290);
  --color-ink:    oklch(95% 0.01 290);
  --color-muted:  oklch(76% 0.03 290);
  --color-accent: oklch(82% 0.14 200);
  --font-body: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --read-max: 44rem;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink);
       font: 1.0625rem/1.65 var(--font-body); }
a { color: var(--color-accent); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--read-max); margin: 0 auto; padding: 0 1rem; }

.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; }
.top__mark { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--color-ink);
             font-weight: 700; text-decoration: none; }
.top__mark img { width: 2.5rem; height: 2.5rem; border-radius: 22%; }

.hero { padding-block: 3rem 4rem; text-align: center; }
.hero img { width: 9rem; height: 9rem; border-radius: 22%; }
.hero h1 { font-size: clamp(2.25rem, 8vw, 3.5rem); line-height: 1.1; margin: 1.5rem 0 0.75rem; }
.hero p { color: var(--color-muted); margin: 0 auto 1.5rem; max-width: 30rem; }

.doc { padding-bottom: 4rem; }
.doc__part + .doc__part { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--color-rule); }
.doc__title { font-size: clamp(1.75rem, 6vw, 2.5rem); line-height: 1.15; margin: 1rem 0 0; }
.doc__date { color: var(--color-muted); margin: 0.25rem 0 1rem; }
.doc__langs { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
.doc h2 { font-size: 1.25rem; margin: 2.25rem 0 0.5rem; }
.doc p { margin: 0 0 1rem; }