/* Bracewright · bracewright.dev · wariant „Po godzinach”
   Kolory, rozmiary i odstępy pochodzą z tokens.css (generowany z tokens/tokens.json). */

@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/assets/fonts/Newsreader-Italic-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--bw-font-serif); font-size: var(--bw-size-body); line-height: var(--bw-lh-body); font-optical-sizing: auto; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--text); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
em { font-style: italic; color: var(--accent); }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.mono, .comment, .link-mono { font-family: var(--bw-font-mono); }
.comment { font-size: var(--bw-size-label); color: var(--text-muted); }
.comment--lg { font-size: 1rem; }
.muted { color: var(--text-secondary); }
.skip { position: absolute; left: -9999px; top: 0; padding: 12px 16px; background: var(--accent); color: var(--on-accent); font-family: var(--bw-font-mono); z-index: 10; }
.skip:focus { left: 16px; top: 16px; }

/* znak słowny */
.wordmark { display: inline-flex; align-items: baseline; font-size: 1.5rem; line-height: 1; white-space: nowrap; color: var(--text); text-decoration: none; }
.wordmark__brace { font-family: var(--bw-font-serif); font-weight: 500; font-variation-settings: "opsz" 72; color: var(--brace); }
.wordmark__word { font-family: var(--bw-font-mono); font-weight: 500; font-size: 0.84em; letter-spacing: var(--bw-tracking-wordmark); }
.wordmark--lg { font-size: 1.65rem; }

/* nawigacja */
.nav { border-bottom: 1px solid var(--line); }
.nav__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; padding-block: 14px; }
.nav__links { display: flex; flex-wrap: wrap; gap: 0 24px; font-family: var(--bw-font-mono); font-size: 0.875rem; }
.nav__links a { display: inline-block; padding-block: 12px; color: var(--text); text-decoration: none; }
.nav__links a:hover { color: var(--accent); }

/* wielka klamra w tle */
.deco { position: absolute; pointer-events: none; user-select: none; font-family: var(--bw-font-serif); font-variation-settings: "opsz" 72; line-height: 1; color: var(--deco); }
.deco--hero { right: -3vw; top: -0.24em; font-size: clamp(320px, 46vw, 700px); }
.deco--night { left: -2vw; bottom: -0.3em; font-size: clamp(280px, 36vw, 560px); }

/* hero */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__in { position: relative; display: flex; flex-direction: column; gap: 24px; padding-block: clamp(64px, 9vw, 112px); }
.display { margin: 0; max-width: 15ch; font-weight: 400; font-size: clamp(2.75rem, 6.4vw, 5.75rem); line-height: var(--bw-lh-display); letter-spacing: var(--bw-tracking-display); font-variation-settings: "opsz" 72; }
.lead { max-width: 38rem; font-size: var(--bw-size-lead); line-height: var(--bw-lh-body); color: var(--text-secondary); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: 4px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px; border-radius: var(--bw-radius-sm); background: var(--accent); color: var(--on-accent); font-size: 1.125rem; text-decoration: none; }
.btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.link-mono { display: inline-block; padding-block: 12px; font-size: 0.875rem; }

/* sekcje */
.section { display: flex; flex-direction: column; gap: 28px; padding-block: clamp(64px, 8vw, 96px); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; }
.h2 { margin: 0; font-weight: 400; font-size: clamp(2rem, 4vw, 3.25rem); line-height: var(--bw-lh-heading); letter-spacing: -0.01em; font-variation-settings: "opsz" 60; }
.body-lg { font-size: 1.1875rem; line-height: var(--bw-lh-body); }

/* lista produktów */
.list { border-top: 1px solid var(--line); }
.row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; padding-block: 26px; border-bottom: 1px solid var(--line); }
.row__nr { width: 64px; font-family: var(--bw-font-mono); font-size: var(--bw-size-label); color: var(--text-muted); }
.row__name { flex: 1 1 220px; font-size: clamp(1.75rem, 3vw, 2.375rem); letter-spacing: -0.01em; }
.row__desc { flex: 2 1 280px; font-size: 1.1875rem; font-style: italic; color: var(--text-secondary); }
.row__tag { font-family: var(--bw-font-mono); font-size: var(--bw-size-label); color: var(--accent); }

/* po godzinach */
.night { position: relative; overflow: hidden; background: var(--bg); color: var(--text); }
.night__in { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 48px; padding-block: clamp(64px, 8vw, 96px); }
.night__text { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.night__text .body-lg { color: var(--text-secondary); }
.night__code { flex: 2 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.code { margin: 0; padding: 28px; overflow-x: auto; border-radius: var(--bw-radius-lg); background: var(--surface); font-family: var(--bw-font-mono); font-size: 0.9375rem; line-height: 1.9; color: var(--text); }
.code .ln { display: inline-block; width: 2.2em; color: var(--bw-ink-line); user-select: none; }
.code .kw, .code .pu { color: var(--text-muted); }
.code .st { color: var(--spark); }

/* stopka */
.footer { background: var(--bg); color: var(--text); }
.footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-block: 56px; }
.footer__col { display: flex; flex-direction: column; gap: 8px; }
.footer__col .link-mono { color: var(--text-secondary); }
.footer__legal { font-size: var(--bw-size-small); line-height: 1.5; color: var(--text-muted); }
.footer__legal .mono { font-size: var(--bw-size-label); }

/* strony z tekstem: prywatność */
.page-head { border-bottom: 1px solid var(--line); }
.page-head__in { display: flex; flex-direction: column; gap: var(--bw-space-24); padding-block: clamp(56px, 8vw, 96px); }
.h1 { margin: 0; font-weight: 400; font-size: clamp(2.5rem, 5vw, var(--bw-size-h1)); line-height: var(--bw-lh-heading); letter-spacing: var(--bw-tracking-display); font-variation-settings: "opsz" 72; }
.doc { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--bw-space-48) var(--bw-space-64); padding-block: clamp(48px, 7vw, 88px); }
.toc { flex: 1 1 200px; max-width: 280px; }
.toc__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: toc; font-family: var(--bw-font-mono); font-size: var(--bw-size-label); }
.toc__list li { counter-increment: toc; }
.toc__list a { display: inline-block; padding-block: var(--bw-space-8); color: var(--text); text-decoration: none; }
.toc__list a::before { content: counter(toc, decimal-leading-zero) "\00a0\00a0"; color: var(--text-muted); }
.toc__list a:hover { color: var(--accent); }
.doc__body { flex: 3 1 440px; min-width: 0; max-width: 46rem; display: flex; flex-direction: column; gap: var(--bw-space-64); }
.doc__body a { overflow-wrap: anywhere; }
.doc__part { display: flex; flex-direction: column; gap: var(--bw-space-16); scroll-margin-top: var(--bw-space-24); }
.doc__h2 { margin: 0; display: flex; align-items: baseline; gap: var(--bw-space-16); font-weight: 400; font-size: var(--bw-size-h3); line-height: var(--bw-lh-heading); letter-spacing: -0.01em; font-variation-settings: "opsz" 48; }
.doc__nr { font-family: var(--bw-font-mono); font-size: var(--bw-size-label); color: var(--text-muted); }
.doc__list { display: flex; flex-direction: column; gap: var(--bw-space-8); padding-left: 1.25em; list-style: square; }
.doc__list li::marker { color: var(--text-muted); }
.facts { margin: 0; border-top: 1px solid var(--line); }
.facts__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--bw-space-4) var(--bw-space-24); padding-block: var(--bw-space-16); border-bottom: 1px solid var(--line); }
.facts dt { flex: 0 0 10rem; font-family: var(--bw-font-mono); font-size: var(--bw-size-label); line-height: var(--bw-lh-mono); color: var(--text-muted); }
.facts dd { flex: 1 1 18rem; min-width: 0; margin: 0; }
.platform { display: flex; flex-direction: column; gap: var(--bw-space-12); padding-top: var(--bw-space-32); scroll-margin-top: var(--bw-space-24); }
.platform__name { margin: 0; font-weight: 400; font-size: var(--bw-size-lead); line-height: var(--bw-lh-heading); }

/* stopka: link do polityki prywatności */
.footer__legal a { align-self: flex-start; color: var(--text-secondary); }
.footer__legal a:hover { color: var(--text); }